WECODE에서의 첫번째 클론코딩 & 첫 팀 프로젝트를 진행하였다.모든것이 처음이였던 CRA 초기 세팅과 JSX, state&props를 이용한 Component분리까지 기록하며 재정리를 해보려한다.
프로젝트의 시작:: 팀원들과의 CRA 초기 세팅
🗂 작업 진행 방식
- PM 분들이 중심이 되어 초기 세팅 진행하고, 완료 후 github repository에 push 한다.주의) 신성불가침영역이라 불리는
master branch에 push해야한다. - 나머지 팀원들은 해당 repository를
clone받고 각자의 이름으로branch(ex. feature/joonsikyang)를 생성한다. - 각자의 branch로 이동해서 작업을 진행하면서 push할 때 마다 commit message, PR template을 친절히 작성하고 작업 상황은 라벨로 표시해주는 센스!
📍 CRA 초기 셋팅
리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구
✔️ CRA 설치
// 원하는 directory 이동 후 CRA 프로젝트를 설치 한다.
// ex. cd Desktop/wecode > npx create-react-app westagram-project
$ npx create-react-app westagram-project✔️ React Router 설치
$ npm install react-router-dom --save✔️ Sass 설치
npm install node-sass@4.14.1 --save✔️ .eslintcache 파일 .gitignore에 추가
// .gitignore
.eslintcache✔️ CRA 폴더 및 파일 구성
- 로컬에서 폴더만 생성하고 파일없이 빈 폴더로 PR을 올릴 경우 폴더가 GitHub에 올라가지 않는다. (아무파일이나 필수로 넣기)
📂 Routes.js파일 형태 알고 가기
- 팀원 당 컴포넌트에 대한 경로를 따로 따로 설정해 준다.
// 재원's 컴포넌트
import LoginJaewon from './pages/jaewon/Login/Login';
import MainJaewon from './pages/jaewon/Main/Main';
// 미미's 컴포넌트
import LoginMimi from './pages/mimi/Login/Login';
import MainMimi from './pages/mimi/Main/Main';
// import 한 컴포넌트에 대한 경로를 각각 설정해준다.
<Route exact path='/login-jaewon' component={LoginJaewon} /><Route exact path='/main-jaewon' component={MainJaewon} /><Route exact path='/login-mimi' component={LoginMimi} /><Route exact path='/main-mimi' component={MainMimi} />📂 public 폴더
data 폴더
- data 폴더는 mock data를 만들어서 불러올 때 사용한다.
📍github repo 연동 및 push
// 초기세팅 작업 완료 후
// add > commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."
// 설치한 CRA 프로젝트와 github repo를 연동시켜준다.
git remote add origin (해당 repo 주소 입력)
// 연동된 repository로 push
git push origin master
// 초기세팅 완료 후 git clone 진행
git clone (해당 repo 주소 입력)
npm install > node-modules 폴더 생성(패키지 소스코드 생성)
git branch feature/(브랜치명)