React Project 환경 셋팅 - GitHub
GitHub
일단 GitHub 를 하기전에 Git 에 대해 알아보도록하자
Git 으로 관리한 프로젝트를 올려둘 수 있는 사이트가 바로 GitHub 이다.
간단하게 Git 의 역할을 하는 원격 저장소 라고 생각하시면 됩니다!
인터넷만 된다면 어디서든지 내 프로젝트를 땡겨올수있으니 얼마나 편한가 ?
물론 다른환경에서 완전히 같은 환경이라 보긴힘들다 VSC(비쥬얼 스튜디오 코드) 마다 Extention 다를수도 있고 뭐.. 아무튼 방법이야 있긴하지만 중요한게 아니니 넘어가고
이 원격저장소에 내 프로젝트를 올릴것이기떄문에
https://github.com/ 에 접속후 회원가입/로그인을 하면
왼쪽에 초록색 New 를 눌러 저장소(Repository) 를 만들어준다
저기에 프로젝트와 관련된 저장소 이름을 적어주면 밑에 Creat 를 눌러 저장소를 만들어주면 아래 저장소(Repository)가 만들어졌다
저장소를 만들었으니 프로젝트와 연동을 해야겠지 ?
ropung-react-portfolio 이라는 폴더에서 터미널 경로를 확인하고
echo "# ropung-react-portfolio" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Ropung/ropung-react-portfolio.git
git push -u origin main그대로 따라해주면 연결이 끝나고
내 저장소에 프로젝트에 연결된것을 확인할수있다.
만약 깃허브로 협업을 하게되면 브랜치를 나누는것이 좋다.
내가 만약 적용이 바로되는 프로젝트라면 엄청난 참사를 일으킬수있고 문제가 없다해도 갑자기 문제가 생길수도 있기떄문
사본을 만들어서 사본프로젝트에 문제없다면 본 프로젝트에 적용하는식으로 작업하여
안정성을 높일수있다 그전 프로젝트에서 피곤하다보니 실수를 많이하게 됬고 사람인 이상 실수하기 마련이다.
브랜치 생성 - 병합
새로운 브랜치를 파서 작업하는것은 생각보다 간단한 작업이다.
VSC 에서도 간단하게 가능하다.
아래 main을 누르면
브랜치 이름과 새로운 브랜치를 생성할수있다
(로그인이 안되어있다면 로그인을 해야한다.)
2번째 브랜치를 누르고 새롭게 사용할 브랜치 이름을 설정한다.
(ropung-start)
내가 가져올 브랜치를 누르고
(main)
Publish Branch 를 눌러 브랜치를 등록하면 끝
새로 만든 브랜치 이름을 확인할수있다
새로운 브랜치에서 작업후 사본과 main 을 병합해보자.
변경점이 없으면 내용이 똑같아서 병합이 안되기떄문에
새로 변경점을 만들어줬다
커밋 푸시를 하고
위에 푸시된것을 비교혹은 풀하라고 알림창을 보여준다.
3번째 Pull requests 를 누르고
New pull request 를 누르면
아래는 작업에 대한 시간이 있고
main <- main 이라 되있는곳에서
내가 병합하고 싶은 브랜치를 선택하면 변경점 과 커밋메시지 를 볼수있다.
빨간색줄은 이전 프로젝트
초록색은 바뀐 이력을 보여준다.
문제가 없으니 Create pull request 로 병합신청
협업시 자세한 설명등을 적을수도 있다.
회사 마다 회바회니 필요한 내용을 적고 등록
충돌이나 변경점등도 확인했고 문제가 없다고 생각해서 브랜치 작업자가 브랜치를 올리면
타 작업자 혹은 관리자가 최종 결제확인을 하는 과정
본 프로젝트에서는 혼자 사용하기떄문에 그대로 병합을 누른다.
추가 내용이없으니 마지막 확인창을 누르면 병합완료
메인에 병합이 완료되었으니 새로판 브랜치를 다시 쓸일이 없다.
혹시라도 필요할수도있지만 테스트용 브랜치였으니 삭제
메인 브랜치로 돌아가서 병합된 내용을 확인해본다.
바뀐 부분은 <p>Hello Vite + React!</p>
인데 아직 적용이 되지않는데 git pull 을 당기거나 왼쪽 하단 싱크아이콘을 눌러주면
바뀐 내역을 터미널로도 확인할수있고 실제로 리액트 변경점이라는 문구가 새로생긴것을 확인할수있다.
필요하다면 따로 브랜치를 삭제하거나 병합을 할수도있다.
