Bong's Log

많은 개발자들이 VS Code에서 Git을 사용하여 버전 관리를 하고 있습니다. VS Code는 Git과 통합되어 있어 다양한 작업을 쉽게 할 수 있지만, 때때로 플러그인을 통해 작업을 할 때 문제가 발생할 수 있습니다. 이 글에서는 Git 플러그인을 사용할 때 발생할 수 있는 연동 문제를 설명하고, 명령어를 통해 Git을 보다 안정적이고 효율적으로 사용하는 방법을 초보자도 쉽게 따라 할 수 있도록 정리했습니다.

1. VS Code에서 Git 플러그인 연동에 문제가 있을 수 있는 부분

a. 인증 문제

GitHub이나 GitLab과 연결할 때 인증 문제가 발생할 수 있습니다. 예를 들어, HTTPS 방식으로 인증할 때 Personal Access Token (PAT)을 사용해야 하는데, 이 설정이 제대로 되지 않으면 푸시나 풀 작업이 실패할 수 있습니다.

[GitHub > Setting > Developer Settings > Personal Access Tokens]

b. 플러그인 간 충돌

GitLens나 GitHub Pull Requests and Issues 플러그인과 같은 Git 관련 플러그인이 동시에 작동할 때, 플러그인 간 충돌이 발생할 수 있습니다. 이는 브랜치 전환이나 푸시 작업이 정상적으로 이루어지지 않는 원인이 될 수 있습니다.

c. 자격 증명 캐시 문제

VS Code는 자격 증명을 캐시하여 GitHub이나 GitLab과의 연결을 자동으로 처리합니다. 그러나 캐시된 자격 증명이 손상되거나 오래된 인증 정보가 저장되어 있으면, 새로운 인증 정보로 업데이트가 되지 않아 문제가 발생할 수 있습니다.

d. 플러그인 버그

일부 Git 관련 플러그인에서는 버그가 발생할 수 있습니다. 예를 들어, GitHub과의 통합이 제대로 작동하지 않거나, 브랜치 작업에서 오류가 발생할 수 있습니다.

2. 명령어로 Git 브랜치 관리하기 (초보자를 위한 자세한 설명)

이제 터미널에서 Git 명령어를 사용하는 방법을 알아보겠습니다. 명령어를 사용하면 Git 플러그인에서 발생할 수 있는 문제를 피할 수 있으며, 더 직관적이고 빠르게 작업을 처리할 수 있습니다.

a. Git 저장소 초기화 및 Git 설정

저장소 초기화: 새로운 프로젝트에서 Git을 사용하려면 먼저 Git 저장소를 초기화해야 합니다. 다음 명령어를 사용합니다:이 명령어는 프로젝트 폴더에 .git이라는 숨겨진 폴더를 생성하여 Git 버전 관리를 시작합니다.

git init

사용자 이름과 이메일 설정: Git에서 커밋을 할 때, 사용자 이름과 이메일을 설정해야 합니다. 아래 명령어로 설정할 수 있습니다:

git config --global user.name "Your Name" git config --global user.email "your_email@example.com"

b. 브랜치 생성 및 전환

새 브랜치 생성: Git에서 새 브랜치를 생성하려면 아래 명령어를 사용합니다:new-branch-name을 원하는 브랜치 이름으로 바꿔서 사용합니다.

git branch new-branch-name

브랜치 전환 (checkout): 생성된 브랜치로 전환하려면 아래 명령어를 사용합니다:또는, -b 옵션을 사용하여 브랜치를 생성하고 전환할 수 있습니다:

git checkout -b new-branch-name
git checkout new-branch-name

c. 변경 사항 커밋하기

파일 추가: 변경된 파일을 Git에 추가하려면 다음 명령어를 사용합니다:이 명령어는 모든 변경된 파일을 추가합니다. 특정 파일만 추가하려면 git add <파일 이름>을 사용합니다.

git add .

커밋하기: 변경된 파일을 커밋하려면 다음 명령어를 사용합니다:

git commit -m "Your commit message"

d. 원격 저장소에 푸시하기

원격 저장소 추가: GitHub와 같은 원격 저장소에 푸시하려면 먼저 원격 저장소를 추가해야 합니다. 예를 들어 GitHub 저장소 URL을 추가하려면 아래 명령어를 사용합니다:

git remote add origin [Repo.git]

푸시하기: 변경 사항을 원격 저장소에 푸시하려면 다음 명령어를 사용합니다:-u 옵션을 사용하면 해당 브랜치를 기본 원격 브랜치로 설정하여 이후 git push만으로 푸시할 수 있습니다.

git push -u origin new-branch-name

e. 브랜치 삭제하기

로컬 브랜치 삭제: 작업이 끝난 브랜치를 삭제하려면 다음 명령어를 사용합니다:이 명령어는 브랜치가 병합된 후에 삭제합니다. 만약 병합되지 않은 브랜치를 삭제하려면 -D 옵션을 사용합니다:

git branch -D branch-name
git branch -d branch-nam

원격 브랜치 삭제: 원격 저장소에서 브랜치를 삭제하려면 아래 명령어를 사용합니다:

git push origin --delete branch-name

3. 결론

VS Code에서 Git 플러그인을 사용할 때 발생할 수 있는 여러 문제를 해결하는 방법을 소개했습니다. 명령어를 사용하면 Git 작업을 더 직관적이고 안정적으로 처리할 수 있으며, 특히 브랜치 생성, 푸시, 삭제 등의 작업을 명령어로 직접 수행하면 오류를 줄이고 효율적으로 작업을 처리할 수 있습니다.

Git은 개발자에게 필수적인 버전 관리 도구입니다. 대부분의 프로젝트에서 Git을 사용하여 버전 관리를 하며, 이를 통해 효율적인 협업과 코드 관리가 가능합니다. VS Code는 Git과 잘 통합되어 있어 Git 작업을 편리하게 수행할 수 있습니다. 하지만 Git 작업을 더욱 간편하고 직관적으로 처리하고 싶다면 플러그인을 활용하는 것이 좋습니다.

이 글에서는 Git checkout, pull, push, 히스토리 조회 등을 쉽게 할 수 있는 유용한 VS Code 플러그인들을 소개합니다.

1. GitLens

GitLens는 Git 작업을 매우 강력하고 직관적으로 도와주는 VS Code 플러그인입니다. GitLens를 사용하면 브랜치 전환, pull, push뿐만 아니라 커밋 히스토리 조회와 같은 작업을 쉽게 할 수 있습니다. 이 플러그인은 Git 리포지토리의 내역을 시각적으로 확인할 수 있도록 해주며, 개발자들이 커밋 기록을 이해하는 데 도움을 줍니다.

주요 기능:

• 브랜치 전환 (checkout): GitLens는 브랜치 목록을 쉽게 보여주며, 원하는 브랜치로 쉽게 전환할 수 있습니다.
• 커밋 히스토리 조회: 각 파일이나 커밋의 작성자, 날짜, 변경된 내용을 직관적으로 확인할 수 있습니다.
• git pull, git push: GitLens 내에서 pull과 push 작업을 쉽게 실행할 수 있습니다.
• 커밋 작성자 및 변경 내용 확인: 커밋한 사람과 그 변경 사항을 한 눈에 파악할 수 있습니다.

설치 방법:

1. VS Code에서 Extensions 아이콘을 클릭합니다.
2. 검색창에 GitLens를 입력하고, 설치 버튼을 클릭합니다.
3. 설치 후, GitLens를 활성화하면 Git 작업을 더욱 편리하게 처리할 수 있습니다.

2. Git Graph

Git Graph는 Git 리포지토리의 커밋 및 브랜치 히스토리를 시각적으로 보여주는 플러그인입니다. 이 플러그인을 사용하면 브랜치 전환, git pull, git push와 같은 작업을 그래픽 인터페이스에서 쉽게 할 수 있습니다. 특히 복잡한 커밋 히스토리나 브랜치 관리를 시각적으로 표현해 주므로 작업을 더 쉽게 파악할 수 있습니다.

주요 기능:

• Git 히스토리 조회: 커밋 히스토리를 그래프 형식으로 시각화하여, 언제 어떤 커밋이 이루어졌는지 쉽게 파악할 수 있습니다.
• 브랜치 관리: 브랜치 전환, 병합, 새로운 브랜치 생성 등을 간편하게 할 수 있습니다.
• git pull, git push: Git Graph에서 push와 pull 작업을 클릭 몇 번으로 쉽게 할 수 있습니다.
• 커밋 세부 정보: 각 커밋에 대한 세부 정보를 클릭하면 변경된 파일을 확인할 수 있습니다.

설치 방법:

1. VS Code에서 Extensions 아이콘을 클릭합니다.
2. 검색창에 Git Graph를 입력하고, 설치 버튼을 클릭합니다.
3. 설치 후, Git Graph 아이콘을 클릭하면 브랜치 및 커밋 히스토리를 시각적으로 관리할 수 있습니다.

3. VS Code 기본 Git 기능

VS Code는 기본적으로 Git과 통합되어 있어 별도의 플러그인 없이도 많은 Git 작업을 GUI로 처리할 수 있습니다. 기본적으로 브랜치 전환 (checkout), 커밋, git pull, git push 등의 작업을 매우 직관적으로 할 수 있습니다.

기본 Git 기능:

• 브랜치 전환: VS Code의 소스 제어 탭에서 현재 브랜치 이름을 클릭하여 다른 브랜치로 전환할 수 있습니다.
• 커밋: 변경된 파일을 소스 제어 탭에서 확인하고, 커밋 메시지를 입력하여 커밋할 수 있습니다.
• git pull, git push: 상단 메뉴에서 확인 아이콘을 클릭하여 푸시와 풀 작업을 할 수 있습니다.

VS Code의 기본 Git 기능을 활용하면 별도의 플러그인 없이도 Git 작업을 간편하게 처리할 수 있지만, GitLens나 Git Graph와 결합하면 훨씬 더 많은 기능을 활용할 수 있습니다.

결론

VS Code에서 Git 작업을 더욱 효율적으로 관리하고 싶다면, GitLens와 Git Graph 플러그인을 활용하는 것이 매우 유용합니다. GitLens는 Git 히스토리와 브랜치 관리, 커밋 기록 조회를 편리하게 할 수 있도록 돕고, Git Graph는 시각적으로 커밋 및 브랜치를 관리할 수 있는 기능을 제공합니다. 또한, VS Code의 기본 Git 기능을 통해 브랜치 전환, 커밋, git pull, git push 작업을 쉽게 할 수 있습니다. 이 플러그인들을 적절히 활용하면, Git 작업이 훨씬 더 직관적이고 효율적으로 이루어질 것입니다.

💡 이 글에서는 VS Code에서 React 및 프론트엔드 개발을 위한 필수 플러그인을 설치하는 방법을 소개합니다.
React 개발을 할 때 코드 자동 완성, 스타일 일관성 유지, 협업 효율성 증가 등을 위해 몇 가지 필수 플러그인을 설치하는 것이 좋습니다.

1. React 개발을 위한 필수 플러그인

1️⃣ ES7+ React/Redux/GraphQL/React-Native snippets

✅ 설명:
이 플러그인은 React 코드 작성을 빠르게 도와주는 다양한 코드 스니펫(snippet)을 제공합니다.
예를 들어 rfc를 입력하면 자동으로 React 함수형 컴포넌트가 생성됩니다.

✅ 설치 방법:

1. VS Code를 실행합니다.
2. 왼쪽 사이드바에서 Extensions(확장 프로그램) 아이콘을 클릭합니다.
3. 검색창에 "ES7+ React/Redux/GraphQL/React-Native snippets"를 입력한 후 설치 버튼을 클릭합니다.

📌 설치 화면

✅ 사용 예시:

• rfc → 함수형 컴포넌트 자동 생성
• useState → useState 훅 자동 생성

2️⃣ ESLint & Prettier

✅ 설명:

• ESLint: 코드 스타일 검사 및 자동 수정 기능 제공
• Prettier: 코드 스타일 자동 정리(포맷팅)
• 두 플러그인을 함께 사용하면 일관된 코드 스타일 유지 및 코드 품질 향상이 가능합니다.

✅ 설치 방법:

1. VS Code에서 "ESLint" 플러그인을 검색 후 설치합니다.
2. 이어서 "Prettier - Code formatter" 플러그인을 검색 후 설치합니다.
3. 프로젝트 루트에 .eslintrc.json 및 .prettierrc 파일을 생성하여 설정을 적용합니다.

📌 설치 화면

✅ 사용 예시:

• Ctrl + S를 누를 때 자동으로 코드 포맷 정리
• ESLint가 코드 오류 감지 및 자동 수정 추천

2. 추가로 설치하면 좋은 프론트엔드 플러그인 추천

🔹 Tailwind CSS IntelliSense

• Tailwind CSS를 사용할 때 자동 완성 및 코드 하이라이팅을 제공합니다.
• 유틸리티 클래스 추천 기능을 포함하여 빠르고 정확한 스타일링이 가능합니다.

🔹 Auto Rename Tag

• JSX에서 태그 이름을 변경하면 자동으로 닫는 태그도 함께 변경됩니다.
• HTML 및 React 컴포넌트의 구조를 수정할 때 실수를 줄일 수 있습니다.

🔹 Live Server

• 정적 HTML/CSS/JS 파일을 실시간으로 브라우저에서 확인할 수 있습니다.
  UI 변경 사항을 빠르게 테스트할 때 유용합니다.

3. 마무리

위 플러그인들을 함께 사용하면 React 및 프론트엔드 개발 생산성을 더욱 높일 수 있습니다!

💡 이 글에서는 VS Code에서 Java 및 Spring Boot 개발을 위한 필수 플러그인을 설치하는 방법을 소개합니다.

1. Java & Spring Boot 개발을 위한 필수 플러그인

Java 기반 프로젝트를 VS Code에서 원활하게 실행하려면 다음 플러그인을 설치해야 합니다.

1️⃣ Java Extension Pack

✅ 설명:
Java Extension Pack은 VS Code에서 Java 개발을 위한 필수 기능을 모아둔 패키지입니다.
설치하면 다음과 같은 주요 기능을 사용할 수 있습니다.

• 코드 자동 완성 및 IntelliSense 지원
• 디버깅 기능
• Maven 및 Gradle 프로젝트 관리

✅ 설치 방법:

1. VS Code를 실행합니다.
2. 왼쪽 사이드바에서 Extensions(확장 프로그램) 아이콘을 클릭합니다.
3. 검색창에 Extension Pack for Java  을 입력한 후 설치 버튼을 클릭합니다.

📌 설치 화면

2️⃣ Spring Boot Extension Pack

✅ 설명:
Spring Boot Extension Pack은 Spring Boot 프로젝트를 더욱 쉽게 관리할 수 있도록 돕는 확장 프로그램입니다.

• Spring Boot 대시보드 제공
• 애플리케이션 실행 및 관리 기능 추가
• Spring Initializr를 이용한 프로젝트 생성 지원

✅ 설치 방법:

1. 확장 프로그램 검색창에 Spring Boot Extension Pack을 입력합니다.
2. 설치 버튼을 클릭합니다.
3. VS Code를 재시작하면 적용됩니다.

📌 설치 화면

2. 추가로 설치하면 좋은 플러그인 추천

🔹 Lombok Annotations Support for VS Code

• Lombok을 사용하는 프로젝트에서 어노테이션(@Getter, @Setter 등)이 정상적으로 동작하도록 지원합니다.
• Lombok을 활용하는 경우 필수 플러그인

🔹 REST Client

• Spring Boot 백엔드 API를 쉽게 테스트할 수 있는 툴입니다.
• Postman을 사용하지 않고도 VS Code에서 바로 API 요청을 보낼 수 있습니다.

3. 마무리

이제 VS Code에서 Java와 Spring Boot 프로젝트를 더욱 효율적으로 개발할 수 있습니다.

1. VS Code vs Visual Studio, 무엇이 다를까?

VS Code란?
Visual Studio Code(VS Code)는 마이크로소프트에서 개발한 코드 편집기입니다. 문서 작업에 MS Word를 사용하듯이, 개발자는 코드를 작성할 때 VS Code와 같은 에디터를 활용하죠.

VS Code는 가볍고 다양한 프로그래밍 언어를 지원해 많은 개발자들이 선호하는 툴입니다. 다만, 기본적으로는 에디터이기 때문에 필요한 기능을 확장(Extensions)하여 개발 환경을 직접 구성해야 합니다.

2. VS Code 설치 방법

먼저, 공식 사이트에서 설치 파일을 다운로드해야 합니다.

🔗 VS Code 다운로드: 공식 사이트 바로가기

사이트에 접속하면 다음과 같은 화면이 나타납니다. 자신의 운영체제(Windows, macOS, Linux)에 맞는 버전을 선택하여 다운로드하세요.

3. 한국어 팩 설치하기

VS Code의 기본 언어는 영어이지만, 확장 프로그램을 설치하면 한글로 변경할 수 있습니다.

1. VS Code를 실행합니다.
2. 왼쪽 사이드바에서 Extensions(확장 프로그램) 아이콘을 클릭합니다.
3. 검색창에 Korean Language Pack을 입력한 후 설치합니다.
4. 설치 후, VS Code를 재시작하면 한글 인터페이스가 적용됩니다.

이제 VS Code를 한글로 편하게 사용할 수 있습니다

최근 2024년에 열린 한 세미나에서, VS Code와 GitHub Copilot을 활용해 코드 인스펙션 자동화 및 보안 취약점 조치 등 단순 개발 업무를 거의 자동으로 처리하는 장면을 직접 목격했습니다. 그 자리에서 보여준 자동화 기능들은 저에게 깊은 인상을 남겼고, 그동안 주로 사용해왔던 이클립스와 인텔리제이 대신 VS Code를 적극 활용해보자는 결심을 하게 만들었습니다.

1. 왜 VS Code인가?

VS Code는 경량화된 에디터임에도 불구하고 다양한 확장 플러그인들을 통해 강력한 개발 환경을 제공합니다. 특히 GitHub Copilot과 같은 AI 기반 플러그인은 코드 작성, 자동 인스펙션, 보안 취약점 대응 등 여러 방면에서 개발 생산성을 크게 높여줍니다.
저는 이번 기회에 VS Code를 제대로 활용하기 위해 어떤 플러그인들이 있는지부터 조사해보기로 했습니다.

2. 고려 중인 주요 플러그인

앞서 조사한 내용에 따르면, 아래와 같은 플러그인들이 이번 프로젝트에 큰 도움이 될 것 같습니다.

• Java 및 Spring Boot 관련 플러그인
  • Java Extension Pack: Java 개발에 필요한 기본 기능들을 제공해 Spring Boot 프로젝트를 효율적으로 관리할 수 있습니다.
  • Spring Boot Extension Pack: Spring Boot 전용 기능(대시보드, 초기 설정 도구 등)을 지원하여 프로젝트 시작을 쉽게 해줍니다.
• React 및 프론트엔드 관련 플러그인
  • ES7+ React/Redux/GraphQL/React-Native snippets: React 컴포넌트와 관련 기능들을 빠르게 생성할 수 있어 코드 작성 시간을 단축해 줍니다.
  • ESLint와 Prettier: 코드 품질과 스타일을 자동으로 관리해, 협업 시 일관된 코드베이스를 유지할 수 있습니다.
• Docker 관련 플러그인
  • Docker: Dockerfile 작성, 컨테이너 관리, 이미지 빌드 등을 VS Code 내에서 쉽게 할 수 있도록 도와줍니다.
• 생산성 향상을 위한 기타 플러그인
  • GitHub Copilot: AI 기반 코드 추천 및 자동 완성 기능으로, 반복적인 코드 작성 및 인스펙션을 자동화합니다.
  • Live Share: 팀원과 실시간으로 협업할 수 있는 환경을 제공하여, 원격 페어 프로그래밍이나 코드 리뷰를 더욱 원활하게 진행할 수 있습니다.
  • REST Client: 백엔드 API를 손쉽게 테스트할 수 있어, Spring Boot 기반 API 개발에 유용합니다.

개발 도구의 선택과 환경 구성은 개발 생산성에 큰 영향을 미치는 중요한 요소입니다. AI와 자동화 기술이 빠르게 발전하는 이 시점에서, VS Code와 같은 경량 에디터와 다양한 플러그인의 조합은 개발 업무를 한층 간편하게 해줄 수 있을거라 생각합니다.