🎯 북스토어 프로젝트의 기반을 CRA로 설정하고, 초기 폴더 구조를 구성합니다.

📗 Today I Learned

Book Store 프로젝트

대중적으로 널리 사용되는 CRA로 프로젝트를 시작합니다. 이후 Vite로 전환하는 과정은 어렵지 않기 때문에, 우선 CRA 환경에서 React와 TypeScript를 학습합니다.

npx create-react-app . --template typescript

---

폴더 구조

📁 REACT-BOOK-STORE/
├── 📁 node_modules/
├── 📁 public/
├── 📁 src/
│   ├── 📁 api/
│   ├── 📁 components/
│   ├── 📁 hooks/
│   ├── 📁 models/
│   ├── 📁 pages/
│   ├── 📁 utils/
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   └── setupTests.ts
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

• pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)

• components : 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트

• utils : 공통 유틸 함수

• hooks: 커스텀 훅 정의 폴더

• model : 타입 정의나 인터페이스

• api : api 연동을 위한 fetcher 등

---

package.json

scripts 항목은 프로젝트 실행을 위한 명령어 단축키(스크립트)를 정의하는 부분입니다.

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "typecheck": "tsc --noEmit --skipLibCheck"
  },
}

• start : 개발용 로컬 서버를 실행합니다.

npm start

• build : 애플리케이션을 배포용으로 최적화된 정적 파일로 빌드

npm run build

• test : 기본적으로 Jest를 사용해 테스트를 실행

npm test

• eject : CRA(Create React App)는 숨겨진 설정을 모두 밖으로 꺼내서 직접 수정할 수 있게 해줍니다.
  ⚠️ 되돌릴 수 없기 때문에 신중히 사용해야 합니다.

npm run eject

• typecheck : TypeScript의 타입 검사만 수행합니다.

  • tsc : TypeScript 컴파일러로 ts 파일을 js 파일로 변환시킵니다.

  • --noEmit : 실제 JavaScript 파일은 생성하지 않고, 오로지 타입 오류만 확인합니다.

  • --skipLibCheck : node_modules에 있는 외부 라이브러리의 타입 검사는 생략합니다.

npm run typecheck

🤔 왜 어떤 건npm만 쓰고, 어떤 건 npm run을 쓰는걸까?

npm run은 scripts 항목에 정의된 사용자 스크립트를 실행할 때 앞에 붙여 사용하는 기본 명령어입니다.

start, test, stop, restart는 npm에서 예악된 키워드라 run이 없이도 작동하기 때문입니다.

---

✏️ 회고

스크립트 명령어를 직접 만들어서 넣어 사용해보면서 npm과 CRA 구조가 익숙해지고 있는 것 같다.