[프로젝트] 프로젝트 초기 세팅

초기 세팅 순서

1. 터미널에서 원하는 디렉토리 폴더로 이동한다.

2. 'npx create-react-app 프로젝트명' 명령어 입력 후 설치

3. 'src'폴더 안에서 index.js만 남기고 모든 파일을 삭제한다.

4. 'src'폴더 밖에서 .env파일을 만들어준다.

   • .env 파일 안에 'NODE_PATH=src'를 적어준다.

5. 'npm install react-router-dom --save' 라우터를 설치

6. src안에 Routes.js 파일을 만들어 준다.

7. render 함수 안에 컴포넌트를 적어준다. index.js파일 안에 Routes.js를 import

8. src 폴더 안에 Components폴더와 Pages폴더를 만들어준다.

   • pages폴더 안에 Home폴더와 Login폴더를 만들어준다.
   • Home폴더 안에 Home.js,Index.js,home.css파일을 만들어준다. Login폴더도 마찬가지

9. src 폴더 안에 styles 폴더를 만들고 안에 media.scss파일과 reset.scss파일을 만들어준다.
   -reset.scss = 기본적으로 만들어져있는 것을 제거해주는 역할

10. src 폴더 밖에 .eslintrc.json파일을 만들어준다.

    • 파일 안에 {"extends":["react-app","plugin:prettier/recommended"]}
    • 터미널에 npm i prettier eslint-config 복붙 프리티어 연결

명령어 & 순서 정리

• CRA 설치
  $ npx create-react-app westagram-project

• React Router 설치
  $ npm install react-router-dom --save

• Sass 설치
  $ npm install node-sass --save

CRA 디렉토리 구성

src 폴더

• Components 폴더
  • Nav 폴더 >>> Nav.js , Nav.scss
  • Header 폴더 >>> Header.js , Header.scss
  • Footer 폴더 >>> Footer.js , Footer.scss
• Pages 폴더
  - Login 폴더 >>> Login.js , Login.scss
  • Main 폴더 >>> Main.js , Main.scss
  • MyPage 폴더 >>> MyPage.js , MyPage.scss
• Styles 폴더
  - reset.scss - css default 속성 설정

* {
  box-sizing: border-box;
}

• Images폴더
• Routes.js

public 폴더

• mock data는 위와 같이 public > data 하위의 .json 파일로 만들어 준다. 아래의 경우 브라우저 주소에 http://localhost:3000/data/data.json 입력 시 해당 데이터가 보이는 것을 확인할 수 있다.
  - data 폴더
  - data.json