1. 툴 설치 및 설정 세팅
-
$ npx create-react-app project-name
프로젝트를 시작하고자 하는 directory로 이동하여 CRA 설치 -
$ npm install react-router-dom --save- React Router 설치 -
npm install node-sass@4.14.1 --save- Sass 설치 -
.eslintcache 파일 .gitignore에 추가
2. CRA 폴더 및 파일 구성 세팅
-
src/images - 이미지 파일 추가
-
src/Pages - url 경로에 따라 나뉘는 페이지 폴더. .js, .scss 파일, Components 폴더 추가
-
src/Components - 페이지에서 공통으로 쓰이는 component 추가
-
src/Styles - 함께 쓰는 scss파일 추가 (ex. reset.scss, common.scss)
3. Git & Github #1
-
git status- CRA로 git 잘 되어 있는지 확인 -
git add .- 파일 추가 -
git commit -m "CommitMessage"- commit 작성 -
git remote add origin http://github.com/...- repository 연동 -
git push origin main- main branch에 push
해당 repository에 merge되면 팀원들은...
-
git clone http://github.com/...- 프로젝트 클론 -
npm install- CRA package.json의 패키지 설치 -
git branch feature/branchName
4. 각 브랜치의 작업 파일 세팅
-
import React & { withRouter } -
각 페이지의 .js파일에
import .scss,export withRouter(ComponentName) -
.js에 class형 또는 함수형 컴포넌트 코드 추가
-
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;
- index.js에 import Routes 컴포넌트, render (
<Routes />, document.getElementById('root'))
5. Git & Github #2
-
git add .- 그 전에 꼭 꼭 status로 브랜치 확인 -
git commit -m "CommitMessage"- 개인 브랜치에 commit 작성 -
git push origin feature/branchName- 개인 브랜치에 push
