1-1 Visual Studio Code란?

IDE와 Code Editor

1. IDE (Integrated Development Environment) - 통합 개발 환경

• 프로그래밍에 필요한 다양한 도구를 통합한 소프트웨어
• 개발자가 코드 작성, 디버깅, 테스트, 빌드 등을 한 곳에서 수행
• 코드 자동 완성, 디버깅, 코드 내비게이션, 빌드 및 실행 도구 등 다양한 개발 지원 기능으로 프로그래밍 생산성 향상

대표적인 IDE : Visual Studio, IntelliJ IDEA, PyCharm

2. Code Editor - 코드 편집 도구

• 텍스트 파일을 작성하고 편집하는 도구
• 주로 소스 코드를 작성
• IDE보다는 적지만, 플러그인을 통해 기능을 확장 가능
• 시스템 자원을 거의 사용하지 않고 빠른 실행속도

대표적인 Code Editor : Visual Studio Code, Notepad++,Vim

Visual Studio Code란?

• Visual Studio Code (VS Code)는 Microsoft가 개발한 가볍고 빠르면서도 강력한 소스 코드 편집기
• Visual Studio와 이름이 비슷하지만, VS Code는 IDE보다는 코드 편집기에 근접

VS Code를 사용하는 이유

1. 경량성과 확장성을 통한 개발 생산성 향상

• 간단하게 다양한 언어 및 확장 기능 설치

2. 무료로 부담없는 사용

• 현재도 많은 개발자들이 사용하고 있는 에디터

3. 다양한 개발 환경

• 웹 개발: HTML, CSS, JavaScript, TypeScript 등의 웹 개발
• 백엔드 개발: Node.js, Python, Go 등의 백엔드 개발
• 모바일 및 클라우드 개발: Flutter, React Native, Azure와 같은 모바일과 클라우드 서비스 활용 가능

1-2 에디터 설치하기

Windows 환경

• 다운로드한 .exe 설치 파일을 실행
• 설치 마법사에 따라 다음 단계를 진행
  - 사용권 계약 동의
  - 설치 경로 설정
  - 원하는 경우 시작 메뉴에 추가, Windows 탐색기에서 열기, 코드 편집기 기본 설정 등의 옵션 선택
• 설치 버튼을 클릭하여 설치를 진행
• 설치 완료 후 Visual Studio Code 실행을 선택한 후 완료 를 클릭
  - 이후 바탕화면 또는 시작 메뉴에서 정상적으로 실행되는지 확인
  

1-3 VScode Extensions을 통한 나만의 에디터 만들기

코드 가독성이 좋아지는 익스텐션 소개

1. Indent Rainbow

• 코드의 들여쓰기를 색상으로 구분하여 들여쓰기 오류를 쉽게 발견할 수 있게 해주는 플러그인
• 주요 기능 :
  - 들여쓰기를 레벨별로 색상으로 구분
  - 들여쓰기 오류를 쉽게 식별 가능
  

2. Better Comments

• 주석을 카테고리별로 색상으로 구분해주는 플러그인. 중요한 부분, TODO, 경고 등을 눈에 띄게 하여 코드 리뷰나 디버깅 시 가독성 향상
• 주요기능 :
  - TODO, ?, ! 등 특정 단어를 강조해 색상 구분
  - 질문이나 경고 주석을 쉽게 식별 가능
  - 다양한 주석 스타일을 지원
• 사용방법 :
  - 사용중인 언어에 맞는 주석을 연 뒤
  - *, ! ,?, TODO 등의 키워드를 입력하고 주석을 작성
  

3. colorize

• CSS 의 색상문자 코드에 배경색을 입혀 색상을 알아볼 수 있게 해주는 플러그인
• 주요기능 :
  - rgb 등의 색상코드에 배경색 적용
  - 직관적인 컬러 확인 가능
  

4. Code Spell Checker

• 주석, 변수명 등에서 오타를 체크해 코드 품질과 가독성을 높여주는 플러그인

• 주요기능:
  - 사소한 스펠링 오류를 방지
  

5. Korean Language Pack for Visual Studio Code

• 한국인이라면 사용이 사실상 필수인 플러그인

[한국어 팩이 설치된 화면]