Code 에디터

수업에서 활용하는 에디터는 Visual Studio Code 입니다. 다른 에디터를 사용해도 무방합니다.

포터블 모드

Visual Studio 코드는 포터블(Portable) 모드를 지원합니다. 휴대용 저장장치(예: USB 등)에 VSCode 에디터를 휴대하고자 할 때 유용합니다. (사용자 설정 및 설치한 익스텐션 백업)

Download 페이지에서 Windows 운영체제용 ZIP 파일을 다운로드 받습니다. 다운로드를 완료하면 ZIP 파일 압축을 푼 후, data 디렉토리를 내부에 만듭니다. data 디렉토리 내부에는 사용자 설정, 설치한 익스텐션 등이 저장됩니다.

VSCode/
  |- Code.exe
  |- data/
  |- ...

Windows 환경에서의 자동 업데이트

Windows 환경의 VSCode 포터블은 자동 업데이트를 지원하지 않습니다. 최신 버전으로 업데이트하고자 할 경우, 최신 버전 ZIP 파일을 다운로드 받아 압축을 푼 후 이전 버전의 data 디렉토리를 내부에 옮겨 사용하면 됩니다.

Mac 운영체제에서 VSCode 포터블을 사용하려면 응용 프로그램 디렉토리 내에 code-portable-data 디렉토리를 생성합니다. Visual Studio Code.app과 동일한 위치에 생성해야 합니다.

응용 프로그램/
  |- Visual Studio Code.app
  |- code-portable-data/

VSCode 업데이트 문제

Mac OS에서 VSCode 에디터 권한 문제로 인해 업데이트 오류가 발생할 수 있습니다.

Could not create temporary directory: 권한 거부됨

이런 경우 아래 코드를 터미널에서 실행한 후, 에디터를 다시 구동하면 업데이트가 정상적으로 실행됩니다.

$ sudo rm -Rf ~/Library/Caches/com.microsoft.VSCode.ShipIt

설치하면 수업에 용이하게 사용할 수 있는 추천 익스텐션 입니다.

익스텐션	설명
Create File	디렉토리 또는 파일을 빠르게 생성할 수 있습니다.
File Utils	디렉토리 또는 파일 생성, 복제, 이동, 이름 변경, 삭제 등을 빠르게 처리합니다.
Bracket Pair Colorizer 2	코드 브레이스, 브라켓 등의 색상을 변경합니다. →
Image preview	에디터에서 이미지를 미리 보여줍니다. →
Color Highlight	에디터에서 컬러를 시작적으로 표시합니다. →
Color Manager	*.js 파일에서 컬러를 손쉽게 사용할 수 있습니다. →
HTMLHint	HTMLHint 문법 검사 도구를 VS Code에 통합합니다.
ESLint	ESLint 문법 검사 도구를 VS Code에 통합합니다.
Translator	한글 → 영어 번역 기능을 제공합니다. →
Auto Complete Tag	자동으로 HTML/XML 태그 이름을 변경하거나, 닫습니다. →
IntelliSense for CSS class names in HTML	HTML 문서에 연결된 CSS 클래스 이름을 자동 완성합니다.
Live Server	로컬 개발 서버를 구동합니다. (실시간 리로딩 기능)
Debugger for Chrome	JavaScript 코드 디버깅에 사용됩니다.

VSCode를 대체 가능한 크로스 플랫폼 무료 에디터 입니다.