Visual Studio Code에서 JavaScript 개발을 위한 GitHub 리포지토리 관리

Visual Studio Code는 JavaScript 개발자를 위한 포괄적인 Git 및 GitHub 통합을 제공합니다. 이 가이드에서는 개발 환경에서 직접 GitHub 리포지토리를 관리하여 코드 생성에서 배포까지 워크플로를 간소화하는 방법을 보여 줍니다.

VS Code를 종료하지 않고 기존 리포지토리를 열고, 새 프로젝트를 초기화하고, 기능 분기를 만들고, 변경 내용을 커밋하고, GitHub로 푸시하는 방법을 알아봅니다. 이 가이드에서는 작업 표시줄, 명령 팔레트, 상태 표시줄 및 통합 터미널을 포함하여 각 작업에 대해 여러 가지 방법을 설명하므로 개발 스타일에 가장 적합한 방법을 선택할 수 있습니다.

필수 조건

• 로컬 컴퓨터에 설치된 Git
• Visual Studio 코드 설치됨
• GitHub 계정

원격 리포지토리 열기

로컬 컴퓨터에서 원격 리포지토리 엽니다.

작업 표시줄

1. 원격 리포지토리 확장 설치
2. Visual Studio Code의 왼쪽 아래에 있는 원격 표시기를 선택합니다.
3. 표시되는 메시지에 따릅니다.

상태 표시줄

이 작업은 이 기능에서 사용할 수 없습니다. 다른 탭을 선택합니다.

명령 팔레트

1. Ctrl Shift엽니다.
2. 명령 팔레트 프롬프트에서 입력gitcl하고 Git: 복제 명령을 선택한 다음, GitHub에서 복제를 선택하고 Enter 키를 누릅니다.
3. 리포지토리 URL을 묻는 메시지가 표시되면 GitHub에서 복제를 선택한 다음 Enter 키를 누릅니다.
4. GitHub에 로그인하라는 메시지가 표시되면 로그인 프로세스를 완료합니다.
5. 리포지토리 URL 필드에 azure-samples/js-e2e-express-server를 입력합니다.
6. 프로젝트를 복제할 로컬 디렉터리를 선택(또는 만들기)한 다음, 리포지토리 대상으로 선택을 선택합니다.
7. 복제된 리포지토리를 열 것인지 묻는 알림이 표시되면 열기를 선택합니다.

통합 터미널

1. 터미널 -> 새 터미널에서 통합 터미널을 엽니다.

2. 다음 git 명령을 사용하여 리포지토리를 복제합니다.

   git clone https://github.com/<ACCOUNT>/<REPOSITORY>
   

3. Visual Studio Code에서 열기:

   code <REPOSITORY>
   

Visual Studio Code는 모든 git 기능과 함께 운영 체제에서 제공하는 Git 인증(예: macOS KeyChain 또는 Windows 자격 증명 관리자)을 사용합니다. 출력은 명령 팔레트 > Git: Git 출력 표시에 표시됩니다.

사용자 지정 GitHub 도메인에 연결

기본적으로 Visual Studio Code는 리포지토리가 github.com호스트된다고 가정합니다. 다른 도메인의 리포지토리(예: github.<company_name>.com같은 엔터프라이즈 GitHub)에 연결해야 하는 경우 그에 따라 Git 경로를 구성해야 합니다.

VS Code에서 Git 경로를 업데이트하려면 파일 → 기본 설정 → 설정 열고 Git: Path검색합니다. 이 설정을 사용하면 사용자 지정 GitHub 도메인에서 작동하는 Git 실행 파일의 절대 경로를 지정할 수 있습니다.

또는 vs Code가 모든 리포지토리 작업에 올바른 Git 이진 파일을 사용하도록 git.path 파일에서 직접 settings.json 설정을 추가하거나 업데이트할 수 있습니다.

로컬 리포지토리 열기

로컬 컴퓨터에 기존 리포지토리가 있고 Visual Studio Code에서 열려면 폴더를 열기만 하면 됩니다. Visual Studio Code는 .git 하위 폴더를 인식하고 관련 정보를 표시합니다.

작업 표시줄

1. Ctrl + K + O를 선택합니다.
2. 폴더를 선택합니다.

상태 표시줄

이 작업은 이 기능에서 사용할 수 없습니다. 다른 탭을 선택합니다.

명령 팔레트

1. Ctrl Shift엽니다.
2. Git을 사용하여 필터링한 후 Open repository를 선택합니다.
3. 리포지토리의 루트로 선택할 폴더를 선택합니다.

통합 터미널

1. 터미널 -> 새 터미널에서 통합 터미널을 엽니다.

2. 리포지토리 디렉터리에 대한 Visual Studio Code의 새 인스턴스를 엽니다.

   code ../dir1/dir2/my-repo
   

새 리포지토리를 초기화합니다

다음 절차에 따라 로컬 소스 코드 리포지토리를 만듭니다 git.

작업 표시줄

1. 작업 표시줄에서 소스 제어를 선택하거나 Ctrl + + 의 키 조합을 사용합니다.

2. 리포지토리 초기화를 선택합니다.

   

상태 표시줄

이 작업은 이 기능에서 사용할 수 없습니다. 다른 탭을 선택합니다.

명령 팔레트

1. Ctrl Shift엽니다.
2. Git을 사용하여 필터링한 후 Initialize repository를 선택합니다.
3. 리포지토리의 루트로 선택할 폴더를 선택합니다.

통합 터미널

1. 터미널 -> 새 터미널에서 통합 터미널을 엽니다.

2. 다음 git 명령을 사용하여 폴더를 초기화합니다.

   git init
   

리포지토리가 초기화 되면 GitHub에서 리포지토리를 만듭니다. 그런 다음 명령 팔레트에서 해당 리포지토리를 로컬 프로젝트에 원격으로 추가합니다. 그런 후 Git: Add remote을(를) 검색합니다.

변경에 대한 분기 만들기

새 분기를 만들어 변경 내용을 기록하고 주 또는 기본 분기에서 분리합니다.

작업 표시줄

1. 작업 표시줄에서 소스 제어를 선택합니다.
2. 소스 제어 옆에 있는 줄임표(...)를 선택합니다.
3. 분기 ->분기 만들기를 선택합니다.

상태 표시줄

1. 상태 표시줄에서 분기 이름을 선택합니다. 그러면 명령 팔레트가 열립니다.

   상태 표시줄은 Visual Studio Code의 맨 아래에 있습니다.

2. 명령 팔레트에서 +새 분기 만들기를 선택합니다.

3. 새 브랜치 이름을 입력하세요.

4. 새 분기 이름을 입력하세요. 분기 이름이 상태 표시줄에 표시됩니다.

   

명령 팔레트

1. Ctrl Shift엽니다.

2. git branch를 검색하고 Git: Create Branch을 선택합니다.

   

3. 와 같은 test새 분기 이름을 입력합니다.

4. 분기 이름이 상태 표시줄에 표시됩니다.

   

통합 터미널

1. 터미널 -> 새 터미널에서 통합 터미널을 엽니다.

2. 다음 git 명령으로 명명된 MY-BRANCH 새 분기를 만듭니다.

   git checkout -b MY-BRANCH
   

로컬로 변경 내용 커밋

분기의 파일을 변경한 후 변경 내용을 커밋합니다.

작업 표시줄

1. 작업 표시줄에서 소스 제어를 선택합니다.

2. 커밋 메시지 입력한 다음 커밋을 선택합니다.

   

상태 표시줄

이 작업은 이 기능에서 사용할 수 없습니다. 다른 탭을 선택합니다.

명령 팔레트

1. Ctrl Shift엽니다.
2. 명령 팔레트에서 Git로 필터링한 후 Commit을 선택합니다.
3. 커밋 메시지 입력한 다음 Enter 키를 누릅니다.

통합 터미널

1. 터미널 -> 새 터미널에서 통합 터미널을 엽니다.

2. 다음 git 명령으로 명명된 MY-BRANCH 새 분기를 만듭니다.

   git commit -m "YOUR COMMIT MESSAGE"
   

GitHub에 로컬 브랜치 푸시합니다

작업 표시줄

1. 작업 표시줄에서 소스 제어 아이콘을 선택합니다.
2. 브랜치 게시를 선택합니다. GitHub에 리포지토리가 없으면 리포지토리가 자동으로 만들어집니다.

상태 표시줄

1. Visual Studio Code 상태 표시줄에서 분기 이름 오른쪽에 있는 푸시 아이콘을 선택합니다.

   

2. 팝업 상자에서 원격 이름을 선택합니다. 하나의 원격만 있는 경우 원격 이름을 선택하라는 메시지가 표시되지 않습니다.

명령 팔레트

1. Ctrl Shift엽니다.
2. 명령 팔레트에서 Git로 필터링한 후 Push을 선택합니다.
3. 업스트림 원격이 여러 대 있는 경우 원격 이름을 선택한 다음 enter누릅니다.

통합 터미널

1. 터미널 -> 새 터미널에서 통합 터미널을 엽니다.

2. 다음 git 명령으로 명명된 MY-BRANCH 새 분기를 만듭니다.

   git push <remote-name> <branch-name>
   

Git 출력 보기

소스 제어 확장을 사용할 때 Git 명령 출력을 볼 수 있습니다. 이 출력은 명령이 실패할 때 디버그하는 데 도움이 됩니다.

1. 작업 표시줄에서 소스 제어 아이콘을 선택합니다.

2. 줄임표(...)를 선택한 다음 Git 출력 표시를 선택합니다.

   

Git 및 GitHub를 사용하는 Visual Studio Code 도구

리포지토리를 사용하여 Visual Studio Code에서 작업하는 경우 별도의 도구가 사용됩니다.

아이콘	정보	에서 액세스
	명령 팔레트의 Git 명령	F1
	소스 제어 확장	작업 표시줄
	GitHub 끌어오기 요청 및 문제 확장	작업 표시줄
	GitHub 리포지토리 확장	GitHub 리포지토리를 검색하여 GitHub 리포지토리를 빠르고 쉽게 열 수 있습니다. 리포지토리 열기... 명령 팔레트, F1 또는 Open GitHub 리포지토리를 선택하여... 원격 표시기(상태 표시줄의 왼쪽 아래 모서리에 있는 녹색 단추)에서

관련 참고 자료

• 웹앱을 배포하는 방법
• Visual Studio Code에서 GitHub 작업
• 다른 버전 제어 공급자와 함께 Visual Studio Code 사용