React 설치하기
yarn 설치
vite로 애플리케이션을 시작하기 위해 yarn 을 설치합니다
brew install yarn
React 앱 시작
yarn create vite
React => typescript => 프로젝트 들어가서 yarn으로 설치
yarn dev : 시작하기
(vite 되게 편리한 것 같다.. )
CRA 와 빌더
CRA 는 빌드를 해서 커스터마이즈 할 때, 상당히 불편함이 많다고 합니다.
vite나 parcel이 요즘 대세라고 한다는데 공식 가이드에서는 이렇게 말합니다.
CRA 는 백엔드 로직이나 DB를 처리하지 않습니다.
어떤 백엔드에서든 사용할 수 있습니다. 프로젝트를 빌드하면 HTML CSS JS를 받게 됩니다.
CRA 서버를 활용할 수 없기 때문에 최상의 성능을 제공하지 않습니다.
더 빠른 로딩 시간과 라우팅 및 서버 측 로직과 같은 기본 제공을 위해서는 vite나 parcel을 이용하세요
공식문서에서도 CRA를 선호하지 않는 것 같습니다.
다음은 제가 찾은 Vite를 선호하는 이유입니다
- 더 빠른 개발 서버 : vite의 개발 서버가 더 빠르게 작동하는 것으로 알려져 있습니다.
- 더 빠른 빌드 속도 : Hot Module Replacement 를 사용해서 코드 변경사항을 더 빠르게 반영할 수 있어서 더 빠른 빌드 속도를 보장합니다.
- 더 가벼운 번들 크기 : Rollup을 기반으로 해서 더 작은 번들 크기를 가집니다.
- 더 최신의 기술 : 최신 JS 기술을 채택했습니다. 예를 들어 ES module 을 사용하며, Tree shaking 기능도 지원합니다.
프로덕션
프로덕션에 바로 사용할 수 있는 프로젝트를 찾는다면 Next.js 를 추천하고 있습니다.
(Next 는 React로 빌드된 정적 및 서버 렌더링 app을 위한 경량 프레임워크)
Gatsby 나 Remix 도 추천하고 있습니다.
(예전에 공부할 때만 해도 이런 글 없었는데 확실히 프론트엔드 시장은 빠르게 변하는 것 같습니다.)
패키지 관리자
타사 패키지를 설치, 업데이트 하는 기능입니다.
Npm 이나 yarn 을 사용합니다. yarn berry, pnpm ..
컴파일러
컴파일러를 사용하면 최신 언어 기능과 JSX 또는 브라우저용 타입 어노테이션 같은 추가 구문을 컴파일할 수 있습니다.
웹팩이나 바벨(ES6->ES5), 타입스크립트(ts=>js) swc(번들링툴)를 이용합니다.
번들러
번들러를 이용하면 여러 파일을 하나의 파일로 합쳐줘서 스크립트를 부를때 로딩을 줄여 시간을 최적화할 수 있습니다.
웹팩이나 파셀, swc 을 이용합니다.
미니파이어
코드를 압축해서 더 빠르게 로드합니다. 변수 이름도 짧게 줄여서 글자 수를 줄여 로드하기도 합니다.
terser,swc,uglify
linter
코드에 실수가 있는지 확인합니다
ESLINT
테스트 러너
코드에 대한 테스트를 할 수 있습니다.
인기 많은 : JEST
- unit : Vitest
- dom : react-testing-library
- e2e : cypress, playwright
React로 바꾸기
시작하려는 HTML 페이지를 엽니다.
<div> 태그를 추가해 React 트리가 시작되는 곳에 id 를 root로 지정해줍니다.
이와 같은 루트 태그는 body 태그 안에 아무곳에 배치할 수 있습니다.
React가 그 내용을 React 컴포넌트로 대체할 것입니다.
<body>
<div id="root"></div>
</body>ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<App />
);한 페이지에 여러개의 루트 Html을 둘 수도 있지만 추천하지 않습니다.
여러 프로젝트(Jquery...)가 존재할 경우는 쓰기도 합니다.
느낀점
지금까지 아무렇지 않게 사용한 cra에 대한 생각이 많아졌고
여러 툴을 이용하고, 세팅하는 법에 대해 알아야겠다
