프론트엔드 프로젝트 중 해야할 것 ! 순서대로
(소스코드 초기세팅 후 깃 클론, 브랜치생성, push, pull 하는 법)
-
소스코드 초기세팅
create-react-app 기반, sass, react-router-dom, eslint, prettier 등 설치
디렉토리 구조 세팅(ex. pages, components)
초기 설정 (ex. routes.js 해놓기, service-worker, logo.svg 삭제 등등) -
소스코드 초기세팅이 끝난 깃허브 파일들을 내 컴퓨터로 clone 한다. -> 터미널에서 진행
2-1) git clone https://github.com/wecode-bootcamp-korea/weplate-frontend.git
(해당 주소는 clone 누르면 복사됨 /클론은 딱 한번만)2-2) ls 해보면 클론된 것 확인가능 해당 파일로 이동
-
브랜치 만들기
3-1) git branch -> 브랜치확인
: 내가 속한 브랜치 앞에 뜸 (아마 이때는 master가 나옴)
3-2) git branch feature/login -> 새로운 브랜치 만들기(브랜치는 페이지별로 따야한다)
: feature/login 은 브랜치명이다 ! (브랜치명 만들때, 똑같은 걸로 하면 conflict 남)
3-3) git checkout 이동할브랜치명 -> 새로 만든 브랜치로 이동
3-4) git branch -> 현재 어느 브랜치인지 재 확인
:들어와있는 브랜치 앞에 표시가 되어있음
3-5) 해당 브랜치에서 ls 쳐보기(package.json 파일 있는지 확인) -
yarn 명령어를 사용해서 설치하기(package.json 파일까는 건 한번 하기)
: yarn 명령어를 치면 package.json 파일을 보고 필요한 파일들을 설치한다. -
코드들을 수정하면, 파일한 수정들을 git 에 올려야한다(push)
5-1) git add . (중간저장하는 것)
5-2) git commit -m ‘메세지(수정한내용적기)'
5-3) git push origin 브랜치명(feature/자기이름) -
이 과정이 끝나면, 팀 레파지토리로 가서 pull request 를 클릭해서
수정내용을 적고 pr을 올린다 !
https://github.com/wecode-bootcamp-korea/weplate-frontend/pull/6
- pr에는 자세하게 어떤어떤 내용을 수정했는지 적는다.(상세하게)
- base : 어디에 pull request 할 건지
- compare : 자기 branch !
- pull request 누르면 pr 에 뭐가 뜬거 초록색으로 뜨면 다행
(마스터랑 충돌나는 게 없어서, 바로 올라갈 수 있음)
빨간색이 되면은 초록색으로 만들면 됨...conflict 해결 !!
-
이후 Merge 되면 모든 작업은 끝~!!!
-
중간중간 merge들로 변경된 소스코드들을 컴퓨터에 다운받기 위해서는,
해당 파일이 저장된 위치로 가서 터미널에서 git pull origin master 하면 된다!!
(pull은 중간중간 주기적으로 해주기 !) -
각자 브랜치에서 만들어서 push 하면 되는데, push 했을 때 routes 에서 가장 conflict가 많이 남
-
why ? 다 11번째에 routes 에서 path 지정하니깐 conflict 가 날 수 밖에 없음
이 때 ! vs code에서 자동 오류수정할거냐는 메세지가 나오는데 절대 하면 안됨
왜냐면 우리는 둘중에 하나 path를 선택하는 게 아니라 다 남겨두면서 해야됨,
그래서 직접 한줄로 자기가 하나하나 수정하면 됨(개발자가 눈으로 보고 수정하면 됨 )
-> 에러메세지(<<<<<, ===== 빨간색표시된 이거 많은 한줄) 가 뜨는데 그것만 삭제하면 됨 !
conflict는 깃헙을 이용하면 아주아주 자주 발생하는 문제다~스트레스받지말고 그냥
개발자의 삶이 이렇다..하고 받아들이고 즐기면서 푸쉬하자 :)
화이팅 !
