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..

Jeonny-Boilerplate ? vite를 활용해 React + Typescript 개발 환경(프로젝트)를 생성합니다. 대부분의 리액트 프로젝트에서 기본적으로 사용되는 라이브러리가 포함되어있고, 코드 포맷팅을 돕기 위한 도구들도 추가되어 있습니다. npm에 배포되어 있어서, 누구든 쉽고 빠르게 사용할 수 있습니다. https://www.npmjs.com/package/jeonny-boilerplate 왜 만들었나요? 매번 새로운 프로젝트를 진행할 때마다, vite, cra로 프로젝트를 생성하고, eslint, prettier, 기타 라이브러리들을 추가적으로 설치하는 과정이 번거로웠습니다. 특히 eslint, prettier는 설정 과정에서 종종 에러가 발생하기도 해서, 시간을 더욱 잡아먹곤했습니다...

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..

1. 프로젝트 생성 명령어 사용 npx create-react-app myapp --template=typescript tsconfig.json 수정 compilerOptions에 “baseUrl”: “./src” 추가 → 기본 절대 경로를 설정하는 구문 2. ESLint 1) vsc 익스텐션 - eslint 설치 2) package.json 수정 CRA로 기본 생성된 코드 제거 → lint 설정은 package.json에서 할게 아니라 .eslintrc.json에서 할 거라서! "eslintConfig": { // 삭제 "extends": [ // 삭제 "react-app", // 삭제 "react-app/jest" // 삭제 ] // 삭제 }, // 삭제 npm scrips에 스크립트 추가 ... "..