[FE] 프로젝트 시작하기

CRA vs VITE

: 모두 React 애플리케이션을 빠르게 시작하고 개발할 수 있도록 도와주는 도구

 

Create React App (CRA)

• Facebook에서 공식적으로 개발한 React 프로젝트 생성 도구
• Webpack을 기반으로 하며, 복잡한 설정 없 단일 페이지 애플리케이션(SPA) 개발에 적합
• 단일 페이지 애플리케이션(SPA) 개발에 적합
• 개발 서버 시작과 빌드 시간이 상대적으로 느릴 수 있다.

Vite

• 네이티브 ES 모듈을 활용하여 매우 빠른 개발 서버 시작과 핫 모듈 교체(HMR)를 제공한다.
• React, Vue, Svelte 등 다양한 프레임워크를 지원한다.
• TypeScript, CSS 전처리기 등을 기본적으로 지원한다.

 

💥차이점

 

1. 속도

: Vite가 CRA보다 일반적으로 더 빠른 개발 서버 시작과 HMR(Hot Module Replacement)을 제공한다. 

2. 번들링 접근 방식

: CRA는 Webpack을 사용하여 모든 코드를 번들링하지만, Vite는 개발 중에는 번들링을 하지 않고 네이티브 ES 모듈을 사용한다.

* 번들링(Bundling)은 여러 개의 파일이나 리소스를 하나로 묶는 작업을 의미

3. 설정의 유연성

: Vite는 더 유연한 설정을 제공하며, 플러그인 시스템을 통해 쉽게 확장할 수 있다.

4. 생태계

: CRA는 오랫동안 사용되어 왔기 때문에 더 큰 생태계와 커뮤니티 지원을 가지고 있다. 하지만 Vite도 빠르게 성장하고 있다.

➡️ 결론적으로, CRA는 안정성과 넓은 생태계를 제공하지만, Vite는 더 빠른 개발 경험과 현대적인 웹 개발 트렌드를 반영한 도구이다. 프로젝트의 요구사항과 개발자의 선호도에 따라 선택할 수 있다.

---

프로젝트 폴더 구조

• pages : 라우터에 대응하는 페이지 컴포넌트(컨테이너)
• components : 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
• utils: 유틸리티
• hooks: 리액트 훅
• model: 모델(타입)
• api: api 연동을 위한 fetcher 등

 

🌟 배운 점

오늘은 드디어 이전에 백엔드로 학습했던 도서 판매 쇼핑몰의 프론트엔드 부분을 시작했다. 프로젝트가 완성될걸 생각하니까 기대가 되고, 백엔드랑 프론트엔드 부분을 어떻게 연결하는지 얼른 알고 싶다. 이전에 리액트로 프로젝트를 하면서 어려웠거나 이해가 되지 않았던 부분들을 생각해보면서 열심히 임해야겠다.