[51일차]React 프로젝트 생성: Create React App vs Vite

React 애플리케이션을 시작할 때, 주로 사용하는 도구가 Create React App (CRA)과 Vite이다. 이 두 도구는 React 프로젝트 생성을 간소화해주며 각각의 특징과 장단점이 있어 상황과 요구에 따라 선택해야 한다.

---

1. Create React App (CRA)

특징

• Facebook에서 공식적으로 제공하는 React 시작 도구.
• 프로젝트 생성 시, Webpack과 Babel을 기본적으로 구성하여 별도의 설정 없이 React 애플리케이션을 구동할 수 있다.
• react-scripts를 통해 빌드와 테스트 관련 스크립트를 제공한다.

장점

• 표준화된 도구: React 공식 팀에서 제공하기 때문에 안정성과 호환성이 높다.
• Zero Configuration: 설정 파일 없이 빠르게 프로젝트를 시작할 수 있다.
• Ecosystem 지원: CRA에 맞춰 작성된 많은 강의, 튜토리얼, 라이브러리가 존재한다.

단점

• 번들링 속도: Webpack을 사용하기 때문에 초기에 번들링 속도가 느릴 수 있다.
• 확장성 부족: 별도로 수정하지 않으면 Webpack이 기본으로 제공하는 설정을 활용해야 하며, 설정 커스터마이징이 번거롭다.
• Dev 모드 성능: 작은 프로젝트에서는 괜찮지만, 대규모 프로젝트에서는 느릴 수 있다.

---

2. Vite

특징

• 최근 등장한 빠른 빌드 도구로, ESBuild를 기반으로 동작하며 Modern Framework를 위해 최적화되어 있다.
• 구성 파일로 Vite.config.js를 제공하며, 간단한 설정으로 확장성이 좋다.

장점

• 빠른 초기화 및 핫 리로드: 의존성 모듈을 미리 번들링하고, ES 모듈을 활용하여 개발 모드에서 JavaScript 파일을 빠르게 제공한다.
• 최신 기술 지원: 최신 브라우저 환경과의 호환성에 초점을 맞춰 설계되었다.
• 설정 유연성: 쉽게 커스터마이징이 가능하며 다양한 플러그인을 지원한다.

단점

• 새로운 도구: CRA에 비해 생태계와 문서화가 비교적 부족하다.
• 복잡한 설정: 고급 사용자에게는 유리하지만, 초보자에게는 다소 어려운 접근성일 수 있다.

---

3. 언제 사용해야 할까?

Create React App

• 초기 학습 단계: React를 처음 학습하거나 기본적인 사용법에 충실한 프로젝트를 원하는 경우.
• 안정성과 호환성 중시: 공식적으로 제공되는 표준 도구를 선호하는 경우.
• 작은 프로젝트: 복잡한 설정이 필요 없는 소규모 프로젝트.

Vite

• 고성능 요구: 빠른 개발 환경과 성능을 필요로 하는 경우.
• 커스터마이징 필요: 프로젝트 단위 또는 빌드 설정을 유연하게 조정해야 하는 경우.
• 최신 기술 활용: 최신 브라우저를 타겟하거나 Modern JavaScript 빌드 도구를 활용하고 싶은 경우.

---

4. 폴더 구조

React 프로젝트에서 폴더 구조를 명확히 나누는 것은 유지보수성과 코드의 가독성을 높이는 데 필수적이다. 아래는 폴더 구조 예시와 각 폴더의 역할이다:

src/
├── pages/          // 라우트에 대응하는 페이지 컴포넌트 (컨테이너 컴포넌트)
├── components/     // 공통 컴포넌트 및 페이지 내부 컴포넌트
├── utils/          // 유틸리티 함수 모음
├── hooks/          // 사용자 정의 React Hooks
├── model/          // 타입 및 모델 정의
├── api/            // API 연동 관련 fetcher 및 서비스 함수
├── index.js        // 엔트리 포인트
├── App.js          // 루트 App 컴포넌트

세부 항목 설명

1. pages

• 각 라우트(route)에 대응하는 컴포넌트를 저장한다.
• 예: 로그인 페이지, 대시보드 페이지와 같은 주요 컨테이너 컴포넌트.

2. components

• 공통으로 사용되는 컴포넌트(예: 버튼, 모달 등)를 components에 관리한다.
• 특정 페이지에서만 사용하는 내부 컴포넌트도 이 폴더에서 관리한다.

3. utils

• 반복적인 동작을 수행하는 유틸리티 함수들을 저장한다.
• 예: 날짜 포맷 함수, 데이터 처리 함수, HTTP 요청 관련 함수.

4. hooks

• React의 로직을 재사용할 수 있는 사용자 정의 Hook을 저장한다.
• 개별 컴포넌트에 종속되지 않고 별도로 관리하고 확장 가능성을 높인다.

5. model

• TypeScript를 사용할 때 주로 활용하며, 데이터의 인터페이스 또는 타입을 정의한다.
• 예: API 응답 타입, 전역 상태 타입.

6. api

• API 연동 관련 로직을 처리하는 모듈을 저장한다.
• 예: Axios를 사용한 HTTP 요청 함수, API 주소와 관련된 설정 파일.

---

5. 폴더 분류 이유

• 코드 관리 효율화: 역할에 따라 파일을 구분하여, 수정과 디버깅이 필요한 영역을 쉽게 찾을 수 있다.
• 유지보수성 향상: 프로젝트 규모가 커져도 일정한 규칙을 통해 폴더 구조와 네이밍 일관성을 유지할 수 있다.
• 확장성: 새로운 요구사항이 추가되어도 폴더 구조를 변경하지 않고 기능을 확장할 수 있다.

---

6. 세부적인 폴더 분류

더 복잡한 프로젝트에서는 하위 폴더를 추가로 나눌 수 있다:

src/
├── features/       // 특정 기능별로 도메인을 나누어 관리
│   ├── auth/       // 로그인, 회원가입과 같은 인증 관련 코드
│   ├── dashboard/  // 대시보드 페이지와 관련된 로직
├── styles/         // 전역 스타일 또는 CSS 관련 파일
├── assets/         // 이미지, 폰트, 아이콘과 같은 정적 자원

하위 폴더 확장 이유:

• 도메인 중심의 구조: features 폴더를 활용해 특정 비즈니스 로직 별로 코드 모음을 추가한다.
• 정적 자원 관리: assets를 통한 이미지, 폰트 관리를 중앙 집중화한다.
• 스타일 관리 최적화: styles 폴더를 사용해 전역/모듈 CSS 파일을 정리한다.

---

7. NPM Scripts와 Custom Scripts

프로젝트에서 사용되는 주요 npm 스크립트와 package.json에 추가할 수 있는 사용자 정의 스크립트는 다음과 같다:

기본 NPM 명령어

1. start: 개발 서버를 실행.

    npm start

2. build: 애플리케이션을 프로덕션 용도로 번들링.

    npm run build

3. test: 프로젝트의 테스트 스위트를 실행.

    npm test

Custom Scripts

package.json에 사용자 정의 명령어를 추가하여 특정 작업을 자동화할 수 있다:

"scripts": {
  "lint": "eslint src --fix", // 코드 린팅 자동화 명령어
  "format": "prettier --write src/**", // 코드 포매팅
  "start:mock": "json-server --watch mock/db.json --port 4000" // Mock 서버 실행
}

---

정리

React 프로젝트를 시작할 때 Create React App 또는 Vite는 각각의 장단점이 있으며, 프로젝트의 요구사항과 성격에 따라 선택하는 것이 중요하다. 또한, 폴더 구조를 명확히 나누고 NPM 및 Custom Scripts를 활용하여 개발 효율성을 극대화할 수 있다. 프로젝트의 확장성과 유지보수성을 고려한 설계는 성공적인 개발을 위한 핵심이며, 이에 따른 규칙과 합리적인 구조 설계를 통해 협업과 생산성을 높일 수 있다.