VS Code에서 GitLab 및 GitHub 프로젝트 연결하고 개발 환경 셋업하는 방법

VS Code에서 GitLab 및 GitHub 프로젝트 연결하고 개발 환경 셋업하는 방법

VS Code(Visual Studio Code)는 가볍고 강력한 코드 편집기로, GitLab이나 GitHub와 같은 코드 저장소를 쉽게 연결해 사용할 수 있습니다. 이를 통해 협업 프로젝트에 참여하거나 개인 프로젝트를 원활하게 관리할 수 있습니다. 이번 글에서는 VS Code에서 GitLab 및 GitHub 프로젝트를 연결하고 개발 환경을 셋업하는 방법을 단계별로 자세히 설명해 드리겠습니다.

VS Code에서 GitHub와 GitLab을 연결하여 프로젝트를 개발하는 과정

---

1. VS Code 설치 및 Git 통합 확인

먼저, VS Code가 설치되어 있어야 하며, Git이 로컬 컴퓨터에 설치되어 있어야 합니다. Git은 코드 버전 관리를 위한 필수 도구이므로, 프로젝트를 GitLab이나 GitHub와 연결하기 위해서는 설치가 필요합니다.

1.1 VS Code 설치

VS Code 다운로드 페이지에서 운영체제에 맞는 버전을 다운로드하고 설치하세요.

1.2 Git 설치 확인

Git이 이미 설치되어 있는지 확인하려면 명령 프롬프트나 터미널에서 다음 명령어를 입력하세요:

git --version

 

Git이 설치되어 있지 않다면, Git 공식 사이트에서 Git을 다운로드하여 설치하세요.

---

2. GitLab 및 GitHub 프로젝트 연결하기

GitLab이나 GitHub에서 프로젝트를 로컬로 복제(클론)하고 VS Code에서 작업을 시작할 수 있습니다. 먼저, 원격 저장소에 연결하고 프로젝트를 가져오는 방법을 살펴보겠습니다.

2.1 GitHub 프로젝트 연결

1. • GitHub에서 연결하고자 하는 프로젝트 페이지로 이동합니다.
   • Code 버튼을 클릭한 후 HTTPS URL을 복사합니다.
   • VS Code에서 Ctrl + ` (백틱) 키를 눌러 터미널을 열고, 원하는 로컬 디렉터리로 이동한 후 다음 명령어를 실행하여 프로젝트를 복제합니다:GitHub 저장소 복제

   git clone https://github.com/username/repository.git

2. VS Code에서 프로젝트 열기
   • 터미널에서 복제한 프로젝트 폴더로 이동한 후 다음 명령어로 폴더를 열 수 있습니다:

   code .

    
   • 혹은, VS Code 상단 메뉴에서 File > Open Folder를 선택하고 복제한 폴더를 찾아서 열면 됩니다.

2.2 GitLab 프로젝트 연결

GitHub와 유사한 방식으로 GitLab 프로젝트도 복제할 수 있습니다.

1. • GitLab에서 연결하고자 하는 프로젝트 페이지로 이동합니다.
   • Clone 버튼을 클릭한 후 HTTPS URL을 복사합니다.
   • VS Code에서 터미널을 열고, 복제할 디렉터리로 이동한 후 다음 명령어로 프로젝트를 복제합니다:GitLab 저장소 복제

   git clone https://gitlab.com/username/repository.git

2. VS Code에서 프로젝트 열기
   • 복제한 프로젝트 폴더로 이동한 후 VS Code에서 열거나, File > Open Folder를 통해 프로젝트를 로드합니다.

---

3. VS Code에서 Git 통합 기능 사용하기

VS Code는 Git과 기본적으로 통합되어 있어 GitLab이나 GitHub에서 복제한 프로젝트를 쉽게 관리할 수 있습니다.

3.1 Git 패널 사용

VS Code 좌측의 Source Control (Git 아이콘) 패널을 통해 Git 상태를 확인하고 작업할 수 있습니다. Git 패널에서는 다음과 같은 작업을 할 수 있습니다:

• 변경 사항 커밋하기: 변경된 파일을 선택하고 메시지를 추가한 후 커밋합니다.
• 브랜치 관리: 새로운 브랜치를 만들거나, 기존 브랜치로 전환할 수 있습니다.
• 푸시 및 풀: 원격 저장소로 코드를 푸시하거나, 최신 변경 사항을 풀 할 수 있습니다.

3.2 Git 명령어 사용

VS Code 터미널에서 Git 명령어를 직접 실행할 수도 있습니다. 일반적으로 사용하는 명령어는 다음과 같습니다:

• git status: 현재 변경된 파일 상태를 확인합니다.
• git add .: 모든 변경 사항을 스테이징합니다.
• git commit -m "Commit message": 커밋 메시지를 추가하여 변경 사항을 저장합니다.
• git push: 원격 저장소에 커밋된 변경 사항을 푸시합니다.
• git pull: 원격 저장소에서 최신 변경 사항을 가져옵니다.

---

4. Git 인증 설정 (SSH 키 또는 HTTPS)

원격 저장소와의 인증이 필요할 수 있습니다. GitHub 또는 GitLab에 프로젝트를 푸시하거나 풀하려면 SSH 키 또는 HTTPS 방식을 설정해야 합니다.

4.1 HTTPS 인증

처음 git push를 실행할 때 GitHub/GitLab 계정의 사용자 이름과 비밀번호를 입력하라는 메시지가 표시됩니다. 이를 입력하면 이후에도 같은 저장소에 대해 동일한 인증 방법이 사용됩니다.

4.2 SSH 키 인증 설정

1. SSH 키 생성
   Git에서 SSH 키를 생성하려면 다음 명령어를 터미널에 입력합니다:그리고 ~/.ssh 디렉토리 내에 id_rsa와 id_rsa.pub 키가 생성됩니다.

   ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

2. SSH 키 추가
   생성된 id_rsa.pub 파일의 내용을 복사한 후, GitHub 또는 GitLab의 SSH Keys 설정 페이지에 붙여 넣습니다.
3. SSH로 원격 저장소 연결
   HTTPS 대신 SSH URL을 사용해 프로젝트를 클론하거나 푸시할 수 있습니다:이렇게 하면 이후에도 비밀번호 입력 없이 SSH 키로 인증할 수 있습니다.

   git clone git@github.com:username/repository.git

---

5. 개발 환경 셋업: 확장 프로그램 설치

VS Code는 다양한 확장 프로그램을 제공하므로, 프로젝트 유형에 맞는 확장 프로그램을 설치해 개발 환경을 최적화할 수 있습니다.

5.1 GitLens

GitLens는 Git 기록을 시각화하고, 각 커밋과 변경 사항을 추적할 수 있는 강력한 도구입니다.

5.2 Prettier

코드 포맷팅을 자동으로 해주는 Prettier는 일관된 코드 스타일을 유지하는 데 유용합니다.

5.3 ESLint

자바스크립트 프로젝트에서 코딩 스타일을 검사하고 오류를 잡아주는 ESLint를 설치하면 코드 품질을 개선할 수 있습니다.

---

결론

VS Code를 사용하여 GitHub 및 GitLab 프로젝트와 연결하는 것은 매우 간단하며, 강력한 Git 통합 기능을 통해 효율적인 버전 관리를 할 수 있습니다. 위의 단계를 따라 GitLab이나 GitHub에서 프로젝트를 복제하고, Git 패널과 명령어를 활용하여 협업 환경을 최적화할 수 있습니다. 확장 프로그램을 추가로 설치하여 개발 환경을 더욱 강화해보세요!