2. Vue.js 개발환경

일단 아래와 같이 환경설정을 할 필요가 있다.

1) 크롬브라우저 설치

2) 아톰 텍스트 에디터 설치

3) Node.js 설치

4) Vue 개발자 도구 

크롬 브라우저는 아마 전국민이 다 가지고 있을테니 생략하자.

2) 아톰 텍스트 에디터 설지

https://atom.io/

아래의 URL로 들어가서 아톰을 다운 받는다.

아톰은 마치 에디트 플러스나, 브라켓하고 비슷합니다. 

설치하고 나서 보기 좋게 테마나 패키지를 적용하면 사용하기도 편하답니다. 

예를 들어 

① seti-ui : 파일 확장자에 따른 파일 아이콘을 제공하여 바로바로 알아보기가 쉽습니다. 

② atom-material-syntax-dark : 자바스크립트 코드에 강조색이 잘 적용되어 있어서 가독성을 높힙니다. 

③ language-vue : 태그 자동완성 기즌을 제공한다.

3) Node.js 설치

- 서버 사이드 자바스크립트, 즉 서버에서 사용하는 자바스크립트이다.

※ 서버사이드 : 웹 화면과 관계된 서버 로직을 처리하는 영역

- 일단 디테일한 부분을 모르겠고 화면을 만드는데 있어서 서버가 해야할 역할을 해주는 자바스크립트라고 생각하자.

https://nodejs.org/ko/

위의 링크로 들어가서 node.js를 다운받아서 설치 하면 node.js와 node.js 패키지가 설치 됩니다. 

※올바르게 설치 되었는지 확인 하는 방법은 "cmd"에 node -v를 입력하면 버전이 표시될껍니다.

4) Vue 개발자 도구 

뷰 개발자 도구는 개발하면서 디버깅이 필요한데 이때 편리하게 디버깅과 개발을 할 수 있도록 도움을 줍니다. 

① 구글에서 'vue.js devtools'를 검색합니다. 

② 'vue.js devtools - Chrome Web Store'를 클릭하면 플러그인 스토어로 이동하여 CHROME 추가를 클릭합니다. 

③ 정상적으로 설치가 되면 상단 우측에 Vue.js의 앰블럼이 나타납니다.