Vue 3.0/01.Intro 및 설정

[vue 3] 02.개발환경 구축

  • -

뭘 하든 간에 일단 개발 환경이 삐까뻔쩍 해야 폼이 나는 법이다.!!

이번 포스트에서는 제대로 Vue.js를 개발하기 위해 필요한 툴들을 설치해 보자.

 

Vue.js는 그냥 Javascript이기 때문에 사실 아무 툴이나 있어도 상관없다. ㅜㅜ

하지만 조금이라도 편하게 개발하려면 필요한 녀석들은 존재한다.

 

일단 개발을 위한 기본 툴로는 Visual Studio Code(이하 VSCode)를 권장한다. MS에서 나온 오픈 소스이며 상당히 가벼운 에디터이다.  VSCode에도 이클립스처럼 다양한 플러그인(Extension)을 설치해서 기능을 확장하는 방식이다.

 

Vue.js로 개발하다 보면 다양한 3rd party 자바스크립트 라이브러리들을 설치하게 되는데 SFC(Single File Component) 방식으로 개발하기 위해서는 CDN 보다는 라이브러리를 설치하는 방식을 사용한다. 이때 Maven처럼 npm 서버의 라이브러리를 사용하는데 이 라이브러리를 설치하는 도구로 Node.js가 사용된다.

 

마지막으로 클라이언트인 브라우저가 필요한데 크로미엄 기반(Chrome, Microsoft Edge 등)이 보편적이다. 여기에 Vue.js 디버깅을 위해 Devtool이라는 플러그인을 설치하면 개발자 도구와 함께 금상 첨화다.

 

 

공식 사이트에서 VSCode를 다운로드하여 설치한다. 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

 

각자 본인의 OS 버전등에 맞춰 다운로드해서 설치한다. 설치 과정에 특별한 주의 사항은 없어 보인다. 기본 옵션으로 설치하자.

 

설치된 VSCode는 순진 무구한 녀석이어서 할 수 있는 게 별로 없다. 여기에 여러 플러그인을 설치해서 기능을 업데이트해주자.

플러그인을 설치하기 위해서는 좌측 메뉴에서 Extension을 클릭한 후 검색한다.

 

필요한 Extension들은 아래와 같다.

 - Live Server: 작성된 html을 자체 내장 서버에서 실행시켜 준다.

 

- Vue 개발과 관련된 extension Pack: vue 개발에 필요한 대부분의 extension을 포함하는데 volar, eslint, prettier, vue 3 snippets 등 17개의 extension을 포함한다.

 

- Material Icon Theme: 아이콘이 이뻐진다. ㅎㅎ

 

- Indent rainbow: 들여 쓰기에 컬러 표시로 가독성을 향상한다.

 

VSCode는 JSON을 이용해서 툴에 대한 설정을 진행한다.

File > Preferences > Settings를 열어보면 설정 편집 창이 나오는데 사실 이것은 기본 설정 + 사용자 정의 설정을 예쁘게 보여준 것으로 데이터는 JSON 형태이다.

처음에는 GUI를 이용해서 설정하다가 좀 익숙해지면 JSON을 바로 만지는 경우가 많다.

관련해서는 다음의 글이 정말 정리가 잘 되어있는 것 같다. Prettier에 대한 설정 설명인데 다른 속성들도 비슷하게 설정되므로 이를 참조해 보자.

https://ux.stories.pe.kr/150

 

VScode Code Formater 인 Prettier 완벽 적용하기

VSCode 익스텐션 중에 코드를 정렬해 주는 Formatter는 크게 Prettier과 Beautify가 있습니다. VScode에서는 2가지의 Formatter가 가장 많이 사용되는데 2가지는 약간 다른 특징이 있습니다. Prettier가 코드를 강

ux.stories.pe.kr

 

Node.js 설치를 위해서 아래 사이트에서 안정적인 LTS 버전을 다운로드한다.

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

설치 과정에서 특별한 주의 사항은 없다.

설치가 완료되었다면 prompt에서 아래와 같이 설치를 확인해 보자.

C:\Users\itsme>npm -v 6.14.4

 

Node.js의 사용은 나중에 Vite를 사용하면서 진행할 예정이므로 여기서는 설치만 하면 끝이다.

 

크롬 웹 스토어에서 Vue.js의 devtools를 설치해 보자.

https://github.com/vuejs/vue-devtools#vue-devtools

 

vuejs/vue-devtools

⚙️ Browser devtools extension for debugging Vue.js applications. - vuejs/vue-devtools

github.com

 

 

이상으로 개발을 위한 환경 설정이 완료되었다.

이제 HelloVue를 통해 설정이 잘 되었는지 확인해 보자.

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.