하위^^

Vue를 다룰 수 있는 프로그램은 크게 InteliJ, Eclipse, Atom, Visual Studio Code 등이 있다.

InteliJ (유료)

돈에 여유가 있다면 InteliJ를 구매하여 사용하는것을 추천한다.

성능, 기능 등 개발에 있어 중요한 부분이 다른 개발 툴에 비해 좋다고 생각한다.

스프링, DB툴 등 여러가지가 포함되어 있다.

Eclipse (무료)

이클립스는 이클립스 마켓 스페이스에서 CodeMix 의 Vue 툴을 받아서 사용하면 되는데

CodeMix는 몇일동안 체험판으로 사용할 수 있지만 시간이 지나면 유료 라이선스를 요구한다.

그리고 이클립스는 성능이 좋은편은 아니다. 대표적으로 자동완성 기능이 돌 때 프로그램이 살짝 멈춘다..

Visual Studio Code (무료)

사용하지 않아봤지만 Atom 만큼 다양한 툴이 많지 않았던것으로 기억

Atom (무료)

아톰은 이런 패키지가 있을까? 하면 다 있다. 하지만 패키지를 설치하면 설치 할 수록 프로그램이 무거워짐

블로그에서는 무료버전인 아톰으로 Vue Webpack을 포스트 하겠습니다.

아톰은 https://atom.io/ 공식 사이트에서 다운로드, 설치

메뉴 상단바 Setting - install에서 다양한 패키지를 받을 수 있다.

내가 사용하는 패키지

active-power-mode - 타자를 칠 때 마다 이펙트 효과, 화려해용...
atom-beautify - 코드에 색깔을 적절하게 부여해서 가시성을 높여줌
autoclose-html-plus - html을 작성할 때 > 꺽쇠를 이용해 닫으면 마무리 태그</> 자동 완성
busy-signal - 로딩 표시
color-picker - 색상 코드 선택 UI 추가
eclipse-keybindings - 이클립스 단축키 적용
emmet - 에밋 코드 적용
highlight-selected - 코드 중 커서로 선택한(하이라이트) 글자 중 같은 글자를 보기 쉽게 표시
javascript-snippets - js 자동완성
language-vue - Vue 환경 적용
minimap - 스크롤에 화면을 작게 표시
minimap-hide - 여러창을 띄었을때 보고있는 창만 미니맵 표시
minimap-lens - 미니맵에 마우스 올리면 미리보기 렌즈 표시
open-html-in-browser - 현재 페이지 브라우저로 열기

Vue를 이용하는 방법으로는 CDN을 이용하여 스크립트를 불러오는 방법과

Node Package Manager, 노드 JS의 패키지 매니저를 이용해 인스톨하는 방법이 있다.

CDN을 통해 일일히 추가하기 보다는 Node Package Manager를 이용해서 추가하고 관리하는 방법이 더 편하다.

https://nodejs.org

노드 JS 메인 페이지의 화면에 바로 다운로드가 있다.

좌측은 안정화된 버전이고 우측은 막 출시된 불안정한 버전이라고 한다.

좌측 X.X.X LTS 버튼을 눌러 설치 파일을 내려받아 실행하자.

약관 동의하고 Next를 누르다 보면 설치 파일 구성목록 중

npm package manager가 있다. 노드 JS를 설치하는 단 하나의 이유이다. 계속 Next를 눌러 설치하고

정상적으로 설치가 되었는지 콘솔을 열어 확인을 해보자

커맨드 경로 상관없이 node -v 라고 입력하면 설치된 버전이 출력되면 정상적으로 설치 된 것이다. 

추가로

node js를 쓰기 위한 키워드는 node 이고

node package manager를 이용하기 위해선 npm 키워드를 사용하게 된다.

만약 설치 파일이 정상적으로 실행이 되었는데 버전이 출력되지 않는다면 환경변수가 등록되지 않은것이다.

윈도우키 + R 을 눌러 sysdm.cpl을 실행시키고 아래 사진과 같이

환경변수  시스템 변수 Path 항목에 nodejs가 설치된 경로를 추가하고 다시 콘솔창에 node -v를 찍어보자.

+ 추가 - Vue 기능에 대한 설명은 Vue 공식 홈페이지 번역이 정말 잘 되어 있어요.

          - 시중의 책들도 거의다 홈페이지 복사 붙여넣기 정도여서 홈페이지 보고 공부하시길 추천드립니다.

Vue는 중국에서 만든 스크립트 언어로 ECMA Script 5 기능을 사용한다.

ECMA Script란 쉽게 말하면 Java Script 언어의 버전이라고 생각하면 된다.

새로운 버전에 새로운 함수, 기능들이 추가되고 있다.

특히 ECMA Script 6에 유용한 추가기능이 많고 Vue에서 많이 사용되므로 정리된 글을 읽어 보시는걸 추천합니다.

Java Script가 업데이트 되면 구버전의 브라우저에서 호환에 문제가 생기는 이유는

새로운 함수들을 업데이트 하지 않기 때문에 페이지가 정상적으로 작동하지 않게 되기 때문이고

Vue Js 역시 구버전의 브라우저에서는 문제가 발생하게 된다.

대표적인 예로 Internet Explorer 11 아래 버전이 있고 11버전도 따로 설정을 하지 않으면 오류가 발생한다.

ECMA Script에 대해서는 다음 블로그가 정리를 잘해주셔서 링크를 남깁니다.

ECMA Script 2015 (ES6) : https://itstory.tk/entry/JavaScript-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

ECMA Script 2016 & 2017 : https://gomugom.github.io/ecmascript-proposals-1-intro/

ECMA Script 2018 : https://www.zerocho.com/category/ECMAScript/post/5adae68aca91b1001b14dd29

ECMA Script 2019 : https://www.zerocho.com/category/ECMAScript/post/5c909bfe5a8005001ffb3f14

Webpack은 프로그래밍 한 웹 관련 파일들을 패키징, 묶어주는것으로 이해하면 된다.

html, js, css와 같은 파일을 묶어 간단한 파일 목록으로 만들어주는 개념이다.

기존의 html에서 js 파일, css 파일을 호출하고 폴더 구조로 관리하는데 

Vue에서는 단순한 구조로 관리하게 된다.

https://webpack.js.org/

웹팩 페이지에 가면 위와 같은 그림이 보이는데

웹 환경에서 사용하는 다양한 파일들의 꼬여있는 관계를 풀어주는 그림으로 이해하면 된다.

처음에는 잘 안느껴지는데 프로젝트를 진행하면서 구조에 대해 이해하기 쉬울 것이다.