Vue.js 의 3.0 버전으로 개발을 진행하기 위해서 편리한 개발 환경 구성을 정리해 보았습니다. 이 글은 책을 보면서 실습하며 작성하였습니다. 기존에 보던 책은 버전도 낮고 너무 이론적인 면이 강해서 실무에 어떻게 적용을 해야할지 난애하였지만, 이번에 구입한 책은 실무 위주로 되어 있어 바로 실무에 적용하기 쉬울 것 같습니다.
개발환경 구성
1. Visual Studio Code 설치
Visual Studio Code는 마이크로 소프트에서 제공하는 개발 IDE 툴입니다. 아래 사이트로 접속해 설치 파일을 받아 설치합니다.
https://code.visualstudio.com
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2. Node.js 설치
Node.js의 공식 사이트에 접속해서 node.js를 다운로드 받아서 설치합니다.
https://nodejs.org
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
다운로드 페이지를 보면 두개의 다운로드 버튼이 있습니다. 왼쪽 다운로드 버튼은 LTS 버전으로 가장 안정화가 된 버전을 뜻하고, 오른쪽 버튼은 현재 최신 버전입니다. LTS 버전으로 설치를 합니다.
Native 모듈을 설치할 때 필요한 툴을 설치할지에 대한 옵션 선택 단계입니다. 체크 박스를 선택한 후 Next 버튼을 선택해서 다음 단계로 넘어갑니다.
Install 버튼을 선택해서 Node.js 설치를 시작합니다. 사용자 계정 컨트롤 창이 나오면 '예' 버튼을 선택합니다.
Node.js 설치가 완료되면 추가 도구 설치 화면이 아래와 같이 나타납니다. 아무 키나 눌러서 설치를 진행합니다.
설치하는 중간에 Windows PowerShell에 대한 사용자 계정 컨트롤 창이 나타나면 '예' 버튼을 선택합니다. 여기서 '예'를 선택하지 않으면 나중에 Visual Studio Code 의 터미널에서 노드 관련 명령어가 실행이 되지 않기 때문에 반드시 '예'를 선택하여야 합니다.
설치가 모두 완료가 되면 엔터리를 입력해서 종료합니다.
3. 설치확인
Visual Studio Code 를 실행하여 'View > Terminal' 을 실행합니다. 아래와 같이 'node -v' 와 'npm -v' 명령어를 입력하여 설치된 버전이 나타나면 정상적으로 설치가 된것 입니다. Terminal 을 실행 하였을때 cmd 가 아닌 Powershell이 실행되는 경우 정상적으로 버전이 보이지 않는 경우가 있습니다. 이럴경우 'View > Command Palette' 메뉴로 이동하여 검색부분에 'Terminal: Selected Default Profile' 을 입력하고 검색된 결과를 선택합니다. 그리고 거기에 "Command Prompt" 를 선택하고 Visual Studio Code를 재기동하여 주면 아래와 같이 cmd로 나타납니다.
4. Vue 개발을 위한 유용한 Visual Studio Code Extension 설치
Visual Studio Code 에서 Vue 개발을 좀 더 편리하게 할 수 있도록 확장프로그램을 설치 할 수 있습니다. 확장 프로그램 검색은 Visual Studio Code 의 좌측 Extensions 메뉴를 입력하면 나타납니다.
검색창에 'vue'를 입력하면 vue와 관련된 다양한 확장 프로그램이 검색되어 나옵니다.
4.1 Vetur
Vetur 는 Vue 개발을 할때 가장 먼저 설치 하는 확장 프로그램입니다. Vue의 경우 개발되는 파일의 확장자가 .vue 이기 때문에, 처음 vue 파일을 열면 일반적인 프로그램 코드 처럼 코드 안의 변수 혹은 메소드명과 같은 코드의 색상을 다르게 하는 Syntax Highlighting을 지원하지 않고, 일반적인 텍스트 처럼 보이게 됩니다. Vetur는 Vue의 프로그램 문법에 맞는 Syntax Hightlighting을 지원해 줍니다. Vue 프로그램 코드 작성시 사용할 수 있는 프로그램 문법에 대한 가이드를 제공해 줍니다. 또한, 프로그램 코드를 실행하기 전에 문법에 맞지 않는 오류는 물론 잠재적으로 문제가 될 수 있는 코드에 대해서 알려줍니다..
4.2 JavaScript (ES6) code snippets
이 확장 프로그램은 ES6를 포함한 자바스트립트 코드 자동완성을 지원해 줍니다. 여러분은 프로그래밍 언어를 공부하면서 snippet이란 용어를 자주 보게 될것입니다. 여기서 snippet는 재사용 가능한 코드의 작은 조각이라고 보면 됩니다. 이 확장 프로그램을 설치하면 자바스크립트 코드를 구현할 때 일부 코드를 작성하기 시작하면 해당 코드로 등록된 코드 블록이 있으면 화면에 나타나게 되고, 이를 선택하면 코드 블록 전체가 자동으로 완성이 되게 됩니다. 예를들어 for 키워드를 입력하면 snippet에 등로된 4개의 코드 불록을 선택할 수 있도록 가이드가 나타나며, 이 중 하나를 선택하면 자동으로 코드가 완성이 되게 됩니다.
즉, snippet라는 이름을 가지고 있는 확장 프로그램들은 미리 등록된 코드 블록을 바탕으로 코드를 좀 더 빠르고 정확하게 작성할 수 있도록 도와주는 확장 프로그램이라고 이해하시면 됩니다.
4.3 ESLint
ESLint는 ES와 Lint를 합친 말입니다. ES는 ECMA Script의 줄임말이고, Lint는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시를 달아놓기 위한 도구입니다. 즉, ESLint는 자바스크립트 문법의 오류를 찾아주는 확장 프로그램입니다.
4.4 Prettier - Code formatter
자바스크립트, 타입스크립트, JSX, JSON, CSS, SCSS, HTML 코드를 미리 지정한 코드 포멧 스타일로 자동으로 변경해 주는 확장 프로그램입니다. 탭사이즈, 문자열, 코드 들여쓰기, 줄 바꿈 등에 대한 코드 포맷을 미리 지정해 두면, 코드 작성 후 저장 버튼을 누르면 자동으로 정의된 고트 포맷으로 변경을 해줍니다.
Prettier를 설치했다고 해서 바로 적용이 되는 것이 아니라, 설정에서 코드에 대한 포맷터로 Prettier를 선택해 주어야 합니다. Settings 메뉴로 이동합니다.
- File > Preference > Settings
검색창에 'formatter'라고 입력하면 'Editor: Default Formatter'를 찾을 수 있습니다. 여기서 "Prettier - Code formatter"를 찾아서 선택합니다. 그리고 아래 보면 'Editor: Format On Save' 라는 옵션이 있습니다. 체크박스를 선택하여줍니다. 저장을 할 때 마다 자동으로 Prettier가 동작되고, 코드 포맷을 맞춰줍니다.
다음으로 Formatter를 적용할 프로그램 언어를 선택합니다. 아래와 같이 HTML > Format 과 JavaScript > Format 을 체크하여 줍니다.
