CRA

CRA 초기 폴더 및 파일 세팅 구성

node.modules

• CRA를 구성하는 모든 패키지 소스코드가 존재하는 폴더

package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지정보(종류,버전)가 기록되는 파일
• 모든 프로젝트마다 package.json 하나씩 존재
• “dependencies”
  • 리액트를 사용하기 위한 모든 패키지 리스트 , 버전 확인가능
    • 실제 코드는 node.modules 폴더에 존재
• “scripts”
  • run : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어
    • build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어(서비스 상용화)

.gitignore

• github에 올리고 싶지 않은 폴더 및 파일을 작성할 수 있음
• push할 경우 .gitignore파일에 작성된 폴더 및 파일은 업로드가 되지 않음

node.modules 와 package.json에서 이중으로 패키지를 관리하는 이유

• 실제 내가 작성한 코드 및 패키지는 내 로컬에만 존재
• github 에 올릴 때 내가 작성한 코드와 함께 package.json(추가로 설치한 패키지 정보) 전달
• 다른 사람이 그것을 (pull) 받아서 npm install 만 입력하면 package.json 에 기록되어 있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치
• github 에 올릴 때, node.modules 는 불필요한 용량을 차지하기 때문에,.gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성 가능

기타 폴더

public

• index.html
• images
• data - mock data 관리

src

• components : 공통 컴포넌트 관리
• pages : 페이지 단위의 컴포넌트 폴더로 구성
  • Login : Login.js , Login.scss
    • Main : Main.js , Main.scss
• styles
  • reset.scss : css 초기화
    • commom.scss : 공통으로 사용하는 css 속성 정의
• 기타
  • 여러 페이지에서 동시에 사용되는 컴포넌트 -> components 폴더에서 관리
    • 페이지 컴포넌트 -> pages 폴더에서 관리
    • 해당 페이지 내에서만 사용하는 컴포넌트 -> 해당 페이지 컴포넌트 폴더 하위에서 관리

• react