하위^^

노드 패키지 매니저를 이용해 설치해보자.

윈도우 콘솔창(윈도우키 + R을 누르고 cmd를 실행)을 기본으로 진행된다.

먼저 원하는 위치에 폴더를 생성을 하고 콘솔창을 이용해 해당 경로로 이동한다.

cd /~~/~~

이동 후 패키지 매니저를 이용해 전역으로 Vue-cli를 설치한다.

전역으로 사용한다는 키워드는 -g를 붙인다.

npm install -g vue-cli

 설치되있다면 위와같이 업데이트 작업이 진행된다.

이제 해당 경로에 webpack을 설치

웹팩은 일반 설치가 있고 simple, 필요한 기능만 설치하는 방법이 있는데

simple의 경우 기능이 너무 없어서 일반 설치를 한다.

vue init webpack

이와 같이 설치 진행 과정들을 보여주며 설치가 진행된다.

처음에 설치 키워드를 입력하면

? Generate project in current directory? Yes
? Project name webpack
? Project description A Vue.js project
? Author hawee
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

이와같은 기본설정이 나타난다. 버전에 따라서 기본 설정은 다른걸 요구하지만 대부분

영어문장 그대로 요구하는 값을 넣어주고 기본값이나 자주 사용하는 기능을 선택하면 된다.

vue-router : vue의 페이지 이동 기능을 담당

ESLint : 문장을 검사해주는 툴, 본인이 코드를 뒤죽박죽 쓴다면 추천

설치가 정상적으로 됫다면 프로젝트를 최신으로 업데이트(의존성을 통해 가져온 기능들)하고나서

개발자 모드로 웹팩을 실행시켜보자.

먼저 업데이트 키워드

npm install

외부 기능을 사용하고 싶어서 추가했다면 npm install을 통해서 업데이트를 진행하자.

의존성을 통해서 누군가 만들어놓은 외부 기능을 install 키워드를 사용하면

node_modules, Dependencies 에 추가된다.

외부 기능들은 정말 많이 있고 사용하기 쉽기 때문에 Vue를 사용하는 이유 중 하나이기도 하다.

아래 사이트에서 검색해 볼 수 있다.

https://www.npmjs.com/

개발자 모드 키워드를 통해 실행시켜보자

npm run dev

개발자 모드로 빌드가 완료되면 접속할 수 있는 url이 나오고 해당 url로 접속하면 vue의 Hello world 페이지가 뜬다.

만약 포트를 8080에서 원하는 포트로 바꾸고 싶다면

npm run dev -- --port 1234

키워드를 사용하면 되고

종료하고 싶다면 콘솔창에서 Ctrl + C를 누르면 빠져나온다.

설치된 웹팩 프로젝트는 다음과 같은 구조로 이루어져있다.

build 폴더는 프로젝트 빌드 설정이 저장된 js 파일들이다.

빌드 경로나 포트 등 다양한 설정을 한다.

config 폴더는 개발자 모드, 실제 패키지 빌드 모드 등 구동할 환경에 대해 상세 설정을 할 수 있다.

node_modules 폴더는 많은 의존성 기능들을 다운받은 폴더이다.

 - 이에 대한 의존성 내용은 가장 아래의 package.json의 Dependencies 값에서 확인

 - java 프로젝트에서 메이븐이나 Gradle을 이용해 api를 가져오고 의존성관리를 하는것과 비슷하다.

src 폴더는 실제 Vue 소스를 작성할 폴더들의 집합이다.

이로써 Vue Webpack 설치 및 환경설정은 끝났다.

프로젝트에서 Vue는 화면 역할을 하게 될 것이고

나중에 포스트 할 Spring Boot는 Spring Framework MVC 패턴은 html 파일, View를 리턴하는것과 달리

Rest API라고 Request가 오면 알맞은 JSON 형태의 Response 데이터를

return하는 서버로 DB에서 데이터를 뽑아오는 역할을 하게 된다.

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/

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

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

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