React | CRA Settings

create-react-app을 사용하여 리액트 프로젝트 초기 세팅하기

CRA 설치

// 1. 프로젝트를 만들 디렉토리로 이동한다.
cd ~/project

// 2. 프로젝트 폴더에 CRA를 설치한다.
npx create-react-app <프로젝트 폴더명>

// 프로젝트 폴더로 이동
cd <프로젝트 폴더명>

// 로컬 서버를 띄워서 잘 작동하는지 확인한다.
npm run start

• CRA
  리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구 (toolchain)

---

Router, SASS 설치

npm install react-router-dom --save
npm install node-sass --save

• 라우팅 (Routing)
  하나의 페이지에서 경로에 따라 다른 페이지를 보여주는 기능
  리액트는 이런 기능을 갖고 있지 않기 때문에 라우터 라이브러리가 필요하다. next.js, Reach-router, react-router가 있는데 가장 많이 사용하는 라이브러리가 react-router이다.

• SASS
  라우팅 기능을 쓰면 모든 페이지의 css가 한 페이지에 모이기 때문에 같은 태그나 같은 클래스의 스타일이 충돌할 수가 있다. 하지만 SASS의 nesting 기능을 사용하면 이런 문제를 해결할 수 있다.

---

ESLint, Prettier 설치

1. vscode extension으로 설치
2. 프로젝트 폴더에 설치
   (둘 다 설치하는 것을 권장)

// CRA 로 시작할 경우 eslint는 자동으로 설치된다.
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

• eslint
  좋은 품질의 자바스크립트 코드를 작성하도록 도와주는 도구
  구문에 오류 가능성이 있거나 불필요한 구문, 보안상에 위험한 코드에 경고를 띄워 알려준다.

• prettier
  설정에 맞게 코드 스타일(들여쓰기, 줄바꿈 위치 등)을 자동으로 맞춰주는 도구
  팀에서 약속한 포맷을 설정해두고 사용한다.

• 설정파일 settings.json, .editorconfig.json, .prettierrc.json 을 프로젝트 폴더에 만들어 팀 스타일을 정해준다.

---

CRA 폴더 정리

CRA 설치가 완료되고 나면 불필요한 파일과 폴더는 삭제하고 팀 컨벤션에 맞게 폴더를 정리한다.

// `<>`는 폴더, `.`는 숨김파일

package.json
package-lock.json
.eslintconfig.json
.prettierrc.json
<.vscode>
  > settings.json
<node_modules>
<public>
  > <data>
  > <images>
  > index.html
<src>
  > index.js
  > <components>
    > <Nav>
      > Nav.js
      > Nav.scss
    ..
  > <pages>
    > <Login>
      > Login.js
      > Login.scss
    > <Main>
      > Main.js
      > Main.scss
    ..
        

• package.json
  프로젝트 이름과 버전 같은 프로젝트의 정보가 담긴 파일
  이 중에서 "dependencies"에 프로젝트에 필요한 외부 패키지와 라이브러리의 버전정보가 담긴다.
  초기 세팅을 완료한 프로젝트 폴더를 깃헙으로 공유할 때 node_modules 폴더는 공유하지 않는다. 용량도 너무 클 뿐더러 package.json 파일만 공유하면 여기에 적힌 외부파일과 그 버전을 npm이 읽고 그대로 설치를 하기 때문이다. 즉 package.json파일만 공유하면 외부 설치파일 동기화가 가능하다.
  같은 이유로 외부 파일을 npm으로 설치할 때 --save 옵션을 추가해 설치하는 것이 좋은데, 그러면 자동으로 package.json에 정보가 저장되기 때문이다.
  (ex. npm install node-sass --save )

• settint.json, .eslintconfig.json, prettierrc.json
  팀 컨벤션에 맞게 IDE, eslint, prettier 설정을 조정하고 공유한다.

• node_modules
  CRA로 설치된 모든 패키지와 라이브러리가 담긴 폴더.

• public > data
  백엔드 개발자에게 실제 데이터를 받기 전에 목업 데이터를 저장

• src
  실제 렌더되는 컴포넌트와 페이지를 저장
  페이지와 컴포넌트별로 폴더를 만들어 정리한다.