Book-store 프로젝트 폴더(디렉토리) 구조

프로젝트 폴더(디렉토리) 구조

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

리액트를 깔거나 하면 package.json에
scripts에
저렇게 4가지 정도의 명령어가 나오는데,
start는 많이 써봐서 알지?

npm run start 같은거 할때, 쓰는거야.

그럼 나머지 것들도 알아볼까?

npm run build : 실제 배포용 파일들을 만들어주는 명령어야.

개발할 때는 start로 실행하지만, 실제로 서비스를 올릴때는 build를 먼저 해야 해.

코드를 압축하고 최적화해서 build 폴더에 만들어줘요
용량도 줄이고, 성능도 좋게 만들어주는 거죠
보통 배포 직전에 실행해요

npm run test : 테스트 코드를 실행하는 명령어야.

• 내가 작성한 코드가 제대로 동작하는 지 자동으로 확인해주는 거야.
• 예를 들어 "버튼을 클릭하면 숫자가 1증가해야해" 같은 걸 미리 작성해두면 test명령어로 확인할 수 있어.

아직 테스트 코드 안 짰으면 기본 테스트만 실행돼요.

npm run eject : 이건 조심해야 하는 명령어야!

• create react app의 숨겨진 설정들을 다 꺼내는 거야.
• webpack, babel 같은 설정들을 직접 수정할 수 있게 되지만 한 번 실행하면 되돌릴 수 없음.(git 없으면 진짜 답 없음)
• 고급 사용자가 아니면 건드리지 않는 좋아.

그리고 이 스크립트에 하나를 추가할건데,

"typecheck": "tsc --noEmit --skipLibCheck"

이거야!

타입을 체크해주는 친구인데,

npm run typecheck
으로 쓰면 되고,

tsc는 타입스크립트의 컴파일을 위한 명령어이고,
--noEmit : 자바스크립트를 컴파일해서 출력할건데, 출력파일을 비활성하겠다 라는 것이고
--skipLibCheck : 외부 라이브러리를 생략하겠다 라는 의미야.