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

offdutybyblo·2020년 6월 19일
0

Session

목록 보기
4/5

초기 세팅 순서

  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
profile
Front-End Devleoper 일껄요?

0개의 댓글