[ React : create-react-app ]

CRA 설치 순서

1. Desktop - wecode 폴더 진입
   cd Desktop/wecode

2. westagram-react 프로젝트 설치
   npx create-react-app westagram-react

3. westagram-react 프로젝트 진입
   cd westagram-react

4. 로컬 서버 띄우기
   npm start

vs를 열때 리액트가 설치되어 있는 프로젝트 폴더 자체를 열어야 한다. 상위 폴더를 열면 x.

설치된 폴더 ::

[ node.modules - package.json - .gitignore ]

1) node.modules

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

2) package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
• 모든 프로젝트마다 package.json 하나씩 존재
• "dependencies"
  • 리액트를 사용하기 위한 모든 패키지 리스트, 각 패키지 폴더 마다의 버전 정보 확인 가능
  • 실제 코드는 node.modules 폴더에 존재
  • Why ? node.modules 와 package.json 에서 이중으로 패키지를 관리할까?
  • 참고) 새로운 Library(package) 설치 시
• "scripts"
  • run : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어. npm run start.
  • build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화.
• 참고) package.json vs. package-lock.json

3) .gitignore

• .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
• push 를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않는다.
  :: index.html - index.js - App.js

1) public - index.html
< div id="root"> </ div>

2) src - index.js

• React의 시작 (Entry Point)
• ReactDOM.render( , document.getElementById('root'))
  • ReactDOM.render 함수의 인자는 두 개
  • 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
  • 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
• (이름 함부로 수정하면 안 됨)

3) src - App.js

• 현재 화면에 보여지고 있는 초기 컴포넌트
• Westagram 작업 시 컴포넌트, 컴포넌트를 그 자리에 대체하여 작업하면 된다.
• React Router 를 배운 후에는 컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.

:: 기타 폴더 구성

1) public 폴더

• index.html
• images - 이미지 파일 관리
• data - mock data 관리

2) src 폴더

• components - 공통 컴포넌트 관리
  • 폴더를 만들 때 대문자로
  • Css 파일과, js 파일가 세트로 필요하다.
• pages - 페이지 단위의 컴포넌트 폴더로 구성
  • Login - Login.js, Login.scss
  • Main- Main.js, Main.scss
• styles 폴더
  • reset.scss - css 초기화
  • commom.scss - 공통으로 사용하는 css 속성 정의 (ex. font-family, theme color)
• 참고) components vs. pages
  • 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리합니다. (ex. Header, Nav, Footer)
  • 페이지 컴포넌트의 경우 pages 폴더에서 관리합니다.
  • 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 컴포넌트 폴더 하위에서 관리합니다.

프로젝트를 협업할 때 작업자 한 사람이 react 초기세팅을 하고 필요한 개발도구들을 추가적으로 설치한 뒤에, node.mudules(무거워서 git에는 올리지 않는다)을 제외한다는 정보 즉, gitignore 파일에 node.mudules 를 적은뒤 github에 공유하면 다른 협업자 A, B가 git clone을 한 뒤에 npm install을 하면 추가 설치했던 개발도구들이 자동으로 설치가 되며, package.json의 정보 역시 확인 할 수 있다.