내일배움카드 HRD 활용한 풀스택 개발자 과정 : VSCode 설치

VSCode는 경량화된 코드 편집기로, 프로그래머라면 필수로 사용하는 도구입니다. 특히 내일배움카드(HRD)를 통해 풀스택 개발자를 준비하는 분들에게는 VSCode 설치와 사용법 숙지가 중요합니다. 지금 바로 설치법을 알아보세요!

 

VSCODE 설치 방법 (운영체제별 정리)

풀스택 개발 입문을 준비하면서 가장 먼저 해야 할 일은 개발 환경 세팅입니다. 그 시작점은 바로 VSCode 설치입니다. 운영체제에 따라 설치 과정이 다르기 때문에 아래 표를 참고하여 간편하게 설치를 진행하세요.

운영체제	설치 파일	설치 경로 및 설명
Windows	.exe	다운로드 후 실행 > 설치 마법사 진행
Mac	.zip	압축 해제 후 .app 파일을 Applications로 이동
Ubuntu	.deb	파일 더블클릭 > Ubuntu Software에서 설치

 

 

 

 

VSCODE 다운로드 바로가기 ▶▶

 

VSCode 정상실행 확인

 

반응형

 

VSCODE 사용법 & 한글 설정

VSCode는 설치만 해두고 끝나는 도구가 아닙니다. 효율적인 개발을 위해서는 사용 환경을 개인에 맞게 설정하는 것이 핵심입니다. 초보자라면 먼저 한글화부터 시작하세요.

한글 설정 방법

1. 왼쪽 사이드바의 Extensions(확장) 아이콘 클릭
2. Korean Language Pack for VS Code 검색 및 설치
3. VSCode 재시작 시 자동 적용

기본 사용법

• Ctrl + P: 파일 빠르게 열기
• Ctrl + Shift + P: 명령 팔레트 실행
• Ctrl + ~: 터미널 열기
• Extensions: 플러그인 설치

한글 설정을 마치면 VSCode의 메뉴와 알림도 한국어로 표시되어, 학습 효율이 높아집니다.

 

VSCODE 확장 기능으로 나만의 에디터 만들기

VSCode의 진정한 힘은 익스텐션입니다. 필요에 따라 다양한 기능을 추가할 수 있어 마치 IDE처럼 사용할 수 있습니다. 코딩 생산성을 높여주는 대표적인 확장 기능을 소개합니다.

확장 기능명	주요 기능	추천 대상
Indent Rainbow	들여쓰기 색상 표시	들여쓰기 오류를 자주 겪는 초보자
Better Comments	주석 강조 (TODO, ! 등)	협업/코드 리뷰가 많은 개발자
Colorize	CSS 색상 시각화	웹 개발자
Bracket Pair Colorization	괄호 짝 색상 표시	중첩 구조가 많은 코드 작업자

 

🔍 확장 설치 방법

1. VSCode 좌측 ‘확장 아이콘’ 클릭 OR 메인화면 > Ctrl+Shift+X 입력
2. 이름 검색 후 "설치" 버튼 클릭
3. 설치 후 자동 적용됨

💡 꿀팁: 터미널에서 code . 명령어로 현재 폴더 VSCode에서 바로 열 수 있습니다 (macOS에서는 Shell Command 설정 필요)

 

 

다양한 익스텐션 보러가기 ▶▶

 

 

 

 

내일배움카드(HRD)를 활용한 개발자 과정에서는 VSCode의 숙련도가 실무에 큰 영향을 줍니다. 설치부터 확장까지 확실하게 익히면, 학습 효율이 눈에 띄게 올라갑니다. 꼭 따라해보시길 추천드립니다!