Vue.js - #2 환경 구성

1. 크롬 브라우저 ( 모두가 사용해본 적 있는 개발자 도구를 위해! )

2. 아톰 에디터 ( 깃허브에서 제작한 무료 텍스트 에디터라는데, 깔끔하고 좋긴 하나 구지 본인이 Eclipse나 InteliJ 등을 쓰고 있으면 필요 없다. ) 책에서는 아톰 에디터 패키지에서 싱글 파일 컴포넌트 체계를 학습하는데 반드시 필요한 패키지 language-vue 를 설치하라고 한다. 자동 완성도 지원하나 보다. 일단 나는 패스.

 

3. 무엇보다 중요한 Node.js

서버 사이드 자바스크립트인 Node.js는 서버 측에서 실행되는 자바스크립트 실행 환경이다.

뷰 CLI(Command Line Interface)를 이용해 쉽게 뷰 프로젝트를 구성하기 위해서는 Node.js를 설치해주어야만 한다.

또, 뷰 CLI로 생성한 프로젝트에서 프로토타이핑을 할 때도 노드제이에스 서버를 사용하므로 필수이다.

책에서는 8.9.1 LTS 버전을 다운로드하라고 하는군..!

Node.js를 설치하고 cmd창 켜서 node -v 쳐서 버전 뜨면 성공.

 

4. 뷰 개발자 도구 - 구글에서 vue.js devtools 쳐서 크롬 확장 플러그인으로 설치!

 

 

 

+ 추가적으로, codepen.io를 사용해보면 좋다.

HTML, CSS, JS 등을 한 화면에서 다루고, 바로바로 어떻게 변하는지 테스트해볼 수 있으므로

연습용으로 제격이라는 생각이 들었다.

 

codepen.io 연습

 

codepen.io에 쉽게 가입하고, js의 설정 버튼에서 Add External Scripts/Pens 에서 Vue 를 검색하여

Vue CDN을 세이브해준다. 그리고 위와 같이 설정해보면 손쉽게 테스트해볼 수 있음을 알 수 있다.