TIL #25 - React 프로젝트 환경 세팅 (Node.js, npm, CRA)

rosarang·2021년 1월 29일
0

React

목록 보기
3/9
post-thumbnail

1. 툴 설치 및 설정 세팅

  1. $ npx create-react-app project-name
    프로젝트를 시작하고자 하는 directory로 이동하여 CRA 설치

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

  3. npm install node-sass@4.14.1 --save - Sass 설치

  4. .eslintcache 파일 .gitignore에 추가


2. CRA 폴더 및 파일 구성 세팅

  1. src/images - 이미지 파일 추가

  2. src/Pages - url 경로에 따라 나뉘는 페이지 폴더. .js, .scss 파일, Components 폴더 추가

  3. src/Components - 페이지에서 공통으로 쓰이는 component 추가

  4. src/Styles - 함께 쓰는 scss파일 추가 (ex. reset.scss, common.scss)


3. Git & Github #1

  1. git status - CRA로 git 잘 되어 있는지 확인

  2. git add . - 파일 추가

  3. git commit -m "CommitMessage" - commit 작성

  4. git remote add origin http://github.com/... - repository 연동

  5. git push origin main - main branch에 push

해당 repository에 merge되면 팀원들은...

  1. git clone http://github.com/... - 프로젝트 클론

  2. npm install - CRA package.json의 패키지 설치

  3. git branch feature/branchName


4. 각 브랜치의 작업 파일 세팅

  1. import React & { withRouter }

  2. 각 페이지의 .js파일에 import .scss, export withRouter(ComponentName)

  3. .js에 class형 또는 함수형 컴포넌트 코드 추가

  4. Router.js에 import 각 페이지.js, export default Routes;

...
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path='/' component={ComponentName}></Route>
          <Route exact path='/page1' component={ComponentName}></Route>
          <Route exact path='/page1/page1_1' component={ComponentName}></Route>
          ..
        </Switch>
      </Router>
     );
   }
 }
 
 export default Routes;
  1. index.js에 import Routes 컴포넌트, render (<Routes />, document.getElementById('root'))

5. Git & Github #2

  1. git add . - 그 전에 꼭 꼭 status로 브랜치 확인

  2. git commit -m "CommitMessage" - 개인 브랜치에 commit 작성

  3. git push origin feature/branchName - 개인 브랜치에 push

profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글