[TIL] 2023-03-01

리액트 프로젝트를 시작할 때, 페이스북에서 제공하는 리액트 보일러플레이트 CRA (create-react-app)을 활용하면 추가적인 세팅이 없이 바로 작업을 시작할 수 있다. 처음 사용할 때, package.json에서 의존성 패키지들을 훑어보고, 기본으로 설정된 폴더 구조를 살펴보긴 했지만, 이 파일 또는 코드가 구체적으로 무슨 역할을 한다 등 자세하게 들여다 본 적이 없었다. 그래서 리액트 기본서를 통해 핵심이 되는 부분들(파일들)이 어떤 역할, 왜 존재하는지 학습했다. (with CRA)

• CRA(create-react-app)
  • config - 설정 파일
    • 테스트 - 제스트jest
    • 자바스크립트 파일의 번들링과 압축 - 웹팩webpack
  • node_modules - 프로젝트 의존성
  • public - (SPA를 생성하는데 사용하는) 정적인 에셋assets
  • scripts - 프로젝트를 관리하는데 사용하는 스크립트 (빌드, 시작, 테스트 시작)
  • src - 프로젝트의 소스 파일
  • .gitignore - 깃 소스 코드 저장소에 어떤 파일과 폴더를 추적하지 않을지 알려주는 파일
  • package.json - 프로젝트 의존성을 나열하는 것, 프로젝트를 관리하기 위해 실행하는 스크립트 나열
  • package-lock.json - 의존성과 하위 의존성의 설치 순서와 상관없이 적절한 세트를 유지할 수 있도록 해주는 것과 관계 있는 파일, 여러 개발자가 서로 다른 기존 의존성을 사용해 각자의 node_modules 폴더를 서로 다른 시점에 업데이트하는 경우에 이슈가 발생하는 것을 방지
  • tsconfig.json - 타입스크립트 컴파일러에서 사용할 설정
  • ESLint - 개발 시점의 코드에 자바스크립트 문법이 유효하게 사용됐는지 확인하는 검사를 수행
  • babel - 트랜스파일