CRA는 리액트 프로젝트를 빠르게 세팅하도록 도와주지만, 어떠한 동작을 통해 프로젝트를 세팅하는지는 알 수가 없습니다. 그래서 CRA없이 손수 세팅하는 연습을 해보았습니다. 진행 순서 npm 패키지 생성 패키지/모듈 설치 Babel 설정 WebPack 설정 npm-scripts 설정 (Package.json) React 코드 작성 (HTML, JS) develop 서버로 렌더링 npm 패키지 생성 프로젝트 디렉토리 생성 후, 해당 경로에서 npm 패키지를 생성합니다. (package.json) mkdir [project-name] cd [project-name] npm init -y패키지/모듈 설치 필요한 패키지/모듈을 설치합니다. 이때, 일반 패키지와 개발용 패키지를 나누어 설치합니다. npm i re..

useMemo? 이전에 연산된 값을 기억해놓았다가 재사용하는 Hook. useMemo 사용법 useMemo(() => { 실행할 함수 문장 }, [의존성 배열]); 이때, 의존성 배열은 변화를 감지할 변수들의 목록 예제로 알아보기 예제 코드 import React, { ChangeEvent, useMemo, useState } from 'react'; /** * 부모 컴포넌트의 값을 내려받아 UI에 뿌려주는 자식 컴포넌트 * @param propName 부모로부터 받은 이름 * @param propAge 부모로부터 받은 나이 */ function ChildrenComponent({ propName, propAge }: { propName: string; propAge: number }) { const g..

react-router-dom v6 설정하기 설치 → 명령어 실행 react-router-dom : v6.14.2 @types/react-router-dom : v5.3.3 npm i react-router-dom @types/react-router-dom AppRouter.tsx 생성 및 코드 작성 프로젝트 src 폴더 내에 AppRouter.tsx 생성 import Navigation from 'components/layout/Navigation'; // 원하는 경로에 네비게이션 컴포넌트 만들어서 import import HomePage from 'pages/Home/HomePage'; // 원하는 경로에 페이지 컴포넌트 만들어서 import import React from 'react'; impor..