React?
UI를 만들기 위한 JS 라이브러리
CRA?
Create-React-App. 리액트는 UI 기능만 제공하므로 필요한 개발환경을 직접 구축해야하는 것들이 많다. 이를 해결하기 위해 리액트 팀에서 제공하는 툴체인 중 하나이다. CRA를 이용하면 하나의 명령어로 개발환경을 구축할 수 있으므로 처음 리액트를 사용하거나 SPA 환경을 구축할 때 추천한다.
CRA 초기 세팅
1) node_modules
: npm으로 다운받은 패키지들의 소스 코드가 존재하는 폴더
2) .gitignore
: 용량이나 보안 등의 문제로 Github에 올리지 않아야 하는 파일들을 추가. .gitignore 안의 폴더와 파일은 Git으로 추적하지 않음
3) package.json
: CRA 기본 패키지 외에 추가로 설치된 라이브러리나 패키지의 종류, 버전 등이 기록되는 파일. 새로운 패키치 설치 후 package.json 의 dependencies에 들어가서 버전이 뜨는지 확인한다.
- package-lock.json : npm을 사용해서 패키지를 설치하거나 업데이트하면 자동으로 생성되거나 수정되는 파일. 설치된 패키지의 정확한 버전이 명시되어 있음.
4) public/ 폴더
4-1) public/data/data.json
: Mock Data를 관리하는 폴더
4-2) public/images/
: JS 안에서 사용하는 이미지를 관리하는 폴더. 폴더 안에서도 각 페이지마다 폴더를 만들어서 관리하는게 좋다. 절대경로로 접근함.
4-3) public/favicon.ico
: 웹 브라우저의 상단 탭에 표시되는 아이콘
5) src/ 폴더
5-1) src/assets/images/
: css에서 이미지를 삽입할 때. (background-image) CSS에서 필요한 이미지들은 src에서 관리한다.
5-2) src/components/
: Nav, Footer 등 여러 페이지에서 공통으로 사용되는 컴포넌트를 관리하는 폴더
5-3) src/pages/
: 하나의 페이지를 구성하는 컴포넌트들을 관리하는 폴더
