쫌만알자! (3) - VSCode로 간단하게 구축하는 JavaScript 개발환경

Yeony (Nayeon Kim) · 2022-08-10

VSCode 설치

앞서 개발자 도구에서 자바스크립트를 사용해봤는데요.

코딩은 메모장으로도 가능하지만, 에디터가 있으면 보다 수월하게 사용할 수 있습니다. 각종 IDE 등 개발 툴이 많이 있지만, 여기서는 마이크로소프트가 만든 Visual Studio Code라는 소스 편집기를 사용하도록 하겠습니다.

Windows

  1. Visual Studio Code 에 접속한 후 Download for Windows 버튼을 누르면 자동으로 다운로드가 실행됩니다.
  2. 다운로드 완료 후 설치 파일을 실행합니다. 계약 동의를 눌러주세요.
  3. 추가 작업 선택 전까지 다음을 누르세요
  4. 추가 작업 선택에 모두 체크해주세요.
  5. 설치 버튼을 눌러 설치를 시작합니다.
  6. VScode가 정상적으로 실행되면 설치가 완료된 것입니다.

MacOS

  1. Visual Studio Code 에 접속한 후 Download for Mac 버튼을 누르면 자동으로 다운로드가 실행됩니다.
  2. 다운로드 완료 후 압축을 해제합니다. 그리고 압축해제한 파일을 실행합니다.
  3. 경고창이 뜨면 열기 버튼을 누릅니다.
  4. VSCode가 정상적으로 실행되면 설치가 완료된 것입니다.

VScode 사용하기

기본적으로 vscode는 영문으로 설정되어 있습니다.
한글 설정이 편하신 분들은 확장 프로그램을 설치해봅시다.

확장 프로그램은 ctrl + shift + x 단축키 또는 아래 이미지의 ✅ 표시된 곳을 클릭하면 볼 수 있습니다.
vscode 마켓플레이스

저는 이미 한글 확장 프로그램을 깔았는데요. korean을 검색한 후 가장 상위에 있는 마이크로소프트에서 만든 extension을 설치해봅시다.
한글 확장 프로그램

다음 글에서는 Node.js와 npm을 알아보도록 하겠습니다.

브라우저 JavaScript 개발환경 👈 이전 글 보기
Node.js와 npm 👈 다음 글 보기


쫌만알자
Loading script...
© 2022 Nayeon Yeony Kim