코드 저장 및 협업 - Git과 Github

huni_·2022년 7월 5일
0
post-thumbnail

1. Git

Git소스코드 저장을 도와주는 프로그램입니다.

Git을 사용하여 프로그램을 저장하면, 누가 언제 어떤 글자 또는 코드를 변경했는지 알 수 있습니다.

또한, 중요한 코드를 실수로 잘못 바꾼 경우 다시 되돌리기도 가능합니다.

따라서, 실무에서는 파일을 Git을 통해 저장합니다.

2. Github

Github는 Git이라는 프로그램으로 저장한 파일들이 실제로 저장되는 장소입니다.

따라서, 우리가 작성한 파일들을 Git을 사용하여 Github에 저장합니다.

Github와 같은 저장소들은 Gitlab, Bitbucket 등 많이 있지만, 우리는 가장 인기있는 Github를 사용합니다.

3. Git 설정

프로젝트 폴더 내 Git 설정은 다음과 같습니다.

1) Github 에 repository 를 생성합니다.

2) vscode를 사용해 프로젝트 폴더 터미널 내 git init 을 입력, 폴더 내 git 저장소를 만들어 줍니다

git init

(이후 .git 폴더의 생성 여부 확인은 ls -al 명령어로 확인합니다)

3) 이후 프로젝트 폴더와 원격저장소(git repository)를 git remote add origin (나의 저장소 주소) 연결시켜 줍니다

git remote add origin <git 주소>
  • 이때, 나의 저장소 주소는 github에서 확인 가능합니다

4) 이후 git 저장소에 내 코드를 등록 하고 싶을 때는

  • git add .
  • git commit -m "커밋 메세지"
  • git push origin master

를 통해 할 수 있습니다!

4. Git pull

수업 진행에서 사용할 멘토 reference 코드를 받기 위해서 우리는 git pull 을 사용하여 손쉽게 코드를 받아올 수 있습니다

1) 원하는 위치에 codecamp-04-mento 폴더를 생성합니다

2) vscode의 터미널을 통해 생성해놓은 codecamp-04-mento로 이동합니다

3) git clone (복제할 git 주소)

4) 추후 최신버전의 코드를 받아 올때는 git pull origin master 를 사용해 최신화 합니다

mento코드를 직접 수정하게 될경우 pull 과정에서 충돌이 날 수있으니 수정하시지 않는걸 권합니다!


💡 git 명령어

git init

git 하위 디렉토리 생성 (폴더를 만든 후, 그 안에서 명령 실행 → 새로운 git 저장소 생성)

git clone [저장소 경로]

기존 소스 코드 다운로드/복제

git add <파일명>

커밋에 단일 파일의 변경 사항 포함

git add . or *

커밋에 모든 파일의 변경 사항 포함

git commit -m ""

“커밋 메세지” | 커밋 생성 (실제 변경사항 확정)

git status

파일 상태 확인

git branch

브랜치 목록 확인

git branch -b [브랜치 이름]

브랜치 생성→ 이동

git branch -d [브랜치 이름]

브랜치 삭제

git checkout [브랜치 이름]

브랜치 이동

git push [로컬저장소 이름][브랜치 이름]

로컬 저장소의 내용에서 생성된 브랜치로 커밋된 내용을 원격 서버에 업로드

git pull [로컬저장소 이름][브랜치 이름]

원격에 저장된 git 프로젝트의 현재 상태를 다운받고 현재 위치한 브랜치로 병합

git log

현재 위치한 브랜치 커밋 내용 확인 및 식별자 부여

git fetch origin

원격에 저장된 git프로젝트의 현 상태를 다운로드

git stash

아직 마무리하지 않은 작업을 스택에 잠시 저장

git stash pop

스택에 잠시 저장된 마무리되지 않은 작업을 꺼내옴


💡 git clone을 했는데 node_modules 폴더가 없어요! / git clone 후 yarn dev 실행이 안돼요!

이전 시간에 package.json 파일에 대해서 배웠죠? node_modules 폴더는 이 package.json 파일 안의 패키지들이 설치된 파일이 들어가는데, pakage.json 파일만 있다면 언제든지 yarn install하여 node_modules 폴더를 재생성 가능하기 때문에 github에 업로드하고 다운로드를 받는 것이 비효율적입니다. 이러한 파일이나 폴더는 .gitignore 파일에 넣어놓고 사용하게 되는데요.
편의성을 위해 Next.js에서는 처음 프로젝트를 생성하면 .gitignore 파일이 자동으로 생성되고, 이 안에 node_module이 있어서 github에 업로드 되지 않았고 그래서 git clone 했을 때 node_module 폴더가 없는 것입니다. node_modules 폴더가 없으면 yarn dev도 실행되지 않습니다.

💡 서버 프로그램과 포트 (error - already in use 3000)

우리가 yarn dev 를 실행하면 localhost:3000 으로 서버가 실행되는데요.
이 때 localhost는 내 컴퓨터, 3000은 포트 번호라고합니다
접속을 기다리는 프로그램에서 접속을 기다리는 번호라고 보면 됩니다. 포트 번호는 0~65535번까지 있고, 이 번호는 중복될 수 없습니다.
따라서, 기존에 3000번으로 서버에 실행되고 있는 프로그램이 있다면 (error - already in use 3000) 해당 에러가 발생합니다
이 때에는 yarn dev -p 3001(다른포트번호) 로 실행해주시면 됩니다.

profile
FrontEnd Developer

0개의 댓글