Visual Studio Code 설치하기

odada·2025년 3월 4일

ui-react

목록 보기

1/1

Visual Studio Code 설치하기

본격적인 JavaScript 학습에 앞서, 좋은 코드 에디터가 필요합니다. Visual Studio Code(이하 VS Code)는 Microsoft에서 개발한 무료 코드 에디터로, 디자이너와 개발자 모두에게 인기가 많습니다. 직관적인 인터페이스와 다양한 확장 기능을 제공하여 코딩 초보자도 쉽게 사용할 수 있습니다.

VS Code 설치 방법

1. 다운로드

VS Code 공식 웹사이트(https://code.visualstudio.com/)에 접속합니다.
웹사이트 메인 페이지에서 운영체제에 맞는 설치 파일을 다운로드합니다.
- Windows: "Download for Windows" 버튼 클릭
- macOS: "Download for Mac" 버튼 클릭

2. 설치하기

Windows:

다운로드한 .exe 파일을 실행합니다.
"동의함" 버튼을 클릭하여 라이선스 동의서에 동의합니다.
설치 위치를 선택하거나 기본값을 유지합니다.
"다음" 버튼을 클릭하여 계속 진행합니다.
추가 작업 화면에서 다음 옵션들을 선택하는 것이 좋습니다:
- "시작 메뉴에 추가"
- "PATH에 추가(재부팅 후 적용됨)"
- "파일 컨텍스트 메뉴에 'Code로 열기' 작업 추가"
- "디렉토리 컨텍스트 메뉴에 'Code로 열기' 작업 추가"
"설치" 버튼을 클릭하여 설치를 완료합니다.

macOS:

다운로드한 .zip 파일을 더블클릭하여 압축을 풉니다.
Visual Studio Code.app을 응용 프로그램 폴더로 드래그합니다.
Launchpad 또는 응용 프로그램 폴더에서 VS Code를 실행합니다.

한국어 설정하기

VS Code의 기본 언어는 영어지만, 한국어로 쉽게 변경할 수 있습니다:

VS Code를 실행합니다.
왼쪽 사이드바에서 확장(Extensions) 아이콘을 클릭합니다(또는 Ctrl+Shift+X / macOS: Cmd+Shift+X).
검색창에 "Korean"을 입력합니다.
"Korean Language Pack for Visual Studio Code"를 찾아 "설치" 버튼을 클릭합니다.
설치 완료 후 오른쪽 하단에 나타나는 "VS Code 다시 시작" 버튼을 클릭합니다.
VS Code가 재시작되면 한국어로 인터페이스가 변경됩니다.

유용한 확장 프로그램 설치하기

VS Code의 강점 중 하나는 다양한 확장 프로그램을 통해 기능을 확장할 수 있다는 점입니다. 웹 개발을 위한 유용한 확장 프로그램은 다음과 같습니다:

Live Server: HTML 파일을 실시간으로 브라우저에서 미리 볼 수 있게 해줍니다.
Prettier - Code formatter: 코드를 자동으로 정리해주어 가독성을 높여줍니다.
Auto Rename Tag: HTML 태그 이름을 변경할 때 쌍이 되는 태그도 자동으로 변경해줍니다.
IntelliSense for CSS class names: HTML에서 CSS 클래스 이름을 자동 완성해줍니다.

Prettier 활성화하기:

VS Code 왼쪽 하단의 설정 아이콘(⚙️)을 클릭합니다.
"설정(Settings)"을 선택합니다.
검색창에 "format on save"를 입력합니다.
"Editor: Format On Save" 옵션을 체크합니다.
이제 파일을 저장할 때마다 자동으로 코드가 정리됩니다.

첫 프로젝트 설정하기

이제 VS Code로 첫 웹 개발 프로젝트를 설정해 봅시다:

VS Code를 실행합니다.
"파일 > 폴더 열기"를 선택합니다(또는 Ctrl+K Ctrl+O / macOS: Cmd+O).
새 폴더를 만들거나 기존 프로젝트 폴더를 선택합니다.
폴더가 열리면, 새 파일을 만들어 봅시다:
- 왼쪽 탐색기에서 "새 파일" 아이콘을 클릭합니다.
- 파일 이름을 index.html로 지정합니다.
- 파일 내용으로 다음을 입력합니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 웹 페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>VS Code로 작성한 첫 웹 페이지입니다.</p>

    <script src="script.js"></script>
</body>
</html>

이번에는 JavaScript 파일을 만들어 봅시다:
- 새 파일을 만들고 이름을 script.js로 지정합니다.
- 다음 코드를 입력합니다:

// 첫 번째 JavaScript 코드
console.log('안녕하세요! JavaScript의 세계에 오신 것을 환영합니다!');

// 간단한 알림창 표시
function showWelcomeMessage() {
    alert('웹 개발의 세계에 오신 것을 환영합니다!');
}

// 페이지 로드 후 3초 후에 환영 메시지 표시
setTimeout(showWelcomeMessage, 3000);

파일을 저장한 후, Live Server 확장 프로그램을 사용하여 웹 페이지를 실행해 봅시다:
- index.html 파일을 열고 에디터 오른쪽 하단의 "Go Live" 버튼을 클릭합니다.
- 또는 HTML 파일에서 마우스 오른쪽 버튼을 클릭하고 "Live Server로 열기"를 선택합니다.
- 브라우저가 자동으로 열리면서 웹 페이지가 표시됩니다.
- 개발자 도구 활용하기: F12 키를 눌러 브라우저의 개발자 도구를 열고 console 탭에서 JavaScript 실행 결과와 오류를 확인할 수 있습니다.

VS Code 단축키 알아두기

효율적인 코딩을 위해 알아두면 좋은 VS Code 단축키입니다:

단축키 (Windows/Linux)	단축키 (macOS)	기능
Ctrl+S	Cmd+S	파일 저장
Ctrl+C / Ctrl+V	Cmd+C / Cmd+V	복사 / 붙여넣기
Ctrl+Z / Ctrl+Y	Cmd+Z / Cmd+Shift+Z	실행 취소 / 다시 실행
Ctrl+F	Cmd+F	찾기
Ctrl+H	Cmd+Option+F	찾기 및 바꾸기
Alt+Up/Down	Option+Up/Down	현재 줄 위/아래로 이동
Ctrl+/	Cmd+/	줄 주석 토글
Ctrl+`	Cmd+`	통합 터미널 열기/닫기
F5	F5	디버깅 시작
Ctrl+B	Cmd+B	사이드바 토글

마무리

VS Code 설치를 완료하고 첫 프로젝트까지 설정해 보았습니다. 이제 본격적으로 JavaScript 학습을 시작할 준비가 되었습니다. VS Code는 코드 자동 완성, 문법 강조, 실시간 미리보기 기능 등 다양한 도구를 제공하여 개발 작업을 훨씬 편리하고 효율적으로 만들어 줄 것입니다.

다음 장에서는 JavaScript의 기본 개념인 변수와 상수에 대해 알아보겠습니다.

odada

웹

Visual Studio Code 설치하기

ui-react

Visual Studio Code 설치하기

VS Code 설치 방법

1. 다운로드

2. 설치하기

Windows:

macOS:

한국어 설정하기

유용한 확장 프로그램 설치하기

첫 프로젝트 설정하기

VS Code 단축키 알아두기

마무리

0개의 댓글