Vue CLI

Vue CLI는 Vue 프로젝트를 개발할 수 있게 해주는 아주 유용한 도구이며, 여기서 CLI란 Command Line Interface의 약자로서 타이핑으로 명령어를 입력하여 원하는 바를 실행시키는 도구를 말한다. 윈도우에서는 명령 프롬프트(CMD), 맥에서는 터미널을 이용한다고 볼 수 있다. Vue CLI은 내부적으로 Webpack을 활용한다. Vue CLI로 명령을 실행 시키면 CLI가 자동으로 최적화된 Webpack 형태의 결과물을 생성 시켜 준다.

Vue CLI 2.x 와 Vue CLI 3.x 버전 비교

프로젝트를 생성

• CLI2 : eslint, unit test, night watch 등 낯선것들 선택 필요
• CLI3 : default (babel, eslint) 를 선택하면 가장 기본적인 설정으로 프로젝트가 생성, 나중에 옵션을 추가 가능작성 필요

프로젝트 구성

• CLI2 : simple, webpack, webpack-simple, pwa 등 템플릿 리스트 중 하나를 선택해서 프로젝트 구성
• CLI3 : 프로젝트에 플러그인 기반으로 원하는 설정 추가

웹팩 설정 파일

• CLI2 : webpack.config.js 파일이 최상단 디렉토리에 있다.
• CLI3 : 없음, root 경로에 vue.config.js 파일을 설정하고 내용 추가

ES6 이해도

• CLI2 : 필요 X
• CLI3 : 필요 O

node modules

• CLI2 : 자동설치 안됨. $ npm install 필요
• CLI3 : 자동설치

설치 환경

• node.js
• npm

CLI 설치

$ npm i -g @vue/cli // vue-cli 3.x
$ npm i -g vue-cli // vue-cli 2.x

버전 확인

$ vue --version
@vue/cli 4.0.5

프로젝트 생성

babel과 eslint 기반인 default 옵션을 선택한다.

$ vue create 'ProjectName' // vue-cli 3.X
$ vue init webpack 'ProjectName' // vue-cli 2.X

로컬 서버 실행

$ npm run serve // vue-cli 3.x
$ npm run dev // vue-cli 2.x

http://localhost:8080/ 로 들어가면 뷰 로고가 있는 로컬 페이지를 볼 수 있다. $ npm install 명령어를 통해 NPM패키지를 설치하지 않아도 서버가 작동되는 것을 확인할 수 있는데 vue cli가 이미 node_modules디렉터토리 안에 라이브러리들을 다운받았기 때문이다. vue cli의 기본 템플릿은 babel, eslint, unit-mocha 를 포함한다.

• Babel: 자바스크립트 컴파일러다. 최신버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 Babel은이 브라우저가 이해할 수 있는 문법으로 변환시켜준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.
• ESLint: 코딩 스타일 가이드를 따르지 않거나 문제가 있는 코드나 안티 패턴을 찾아 표시를 달아 놓는 도구이다.
• unit-mocha: javascript 진영에서 테스트 러너를 지원하는 테스트 프레임워크이다.

References

Vue CLI 3.0 사용하기
Vue CLI 3.X 사용하기
Vue CLI 3 사용법
[Vue.js] Vue Version 비교 (cli2 vs cli3)
Vue-CLI 도구 활용방법

자바스크립트 소개

자바스크립트는 프로토타입 기반의 스크립트 언어이며 넷스케이프사의 브렌던 아이크가 만들었다. (그는 10일 만에 언어를 만들었다.) 주로 웹 브라우저 내에서 주로 사용되며 node.js와 같은 런타입 환경에서 서버 사이드 프로그래밍으로도 사용되고 있다.

언어의 타입이 너무 유연해서 인터넷에 위같은 밈이 돌아다닌다.

초창기 자바스크립트는 웹 페이지 제작에 있어서 보조적인 기능을 수행하기 위한 용도로써 사용되었다. 클라이언트인 웹 브라우저에서 서버로부터 받은 HTML과 CSS, 데이터로 렌더링을 해주는 수준이였다. 이 시절에 자바스크립트는 그다지 중요한 역할을 담당하지 못했다. 하지만 소수의 프로그래머들에 의해 여러 가지 연구가 이루어졌고, 웹 아키텍쳐에도 크고 작은 변화가 일어났다. 특히 과거에 서버에서 담당했던 역할들이 상당 부분 웹 브라우저로 이동하였고, 자바스크립트는 이 변화의 중점에 서게 된다. 게다가 jQuery 의 등장으로 보다 쉽게 DOM을 핸들링하게 되면서 많은 발전을 이루었다.

현재는 브라우저 기반의 자바스크립트 라이브러리 뿐만 아니라 Node.js와 같은 서버 기반의 자바스크립트 환경에서 동작할 수 있는 각종 라이브러리까지 쏟아져 나오고 있다. 이제는 자바스크립트만으로 웹 서버와 클라이언트인 웹 페이지 개발을 동시에 할 수 있는 수준까지 왔다고 볼 수 있다.

자바스크립트는 클래스를 지원하지 않아 클래스 상속을 이용한 객체 지향 프로그래밍은 할 수 없지만, 프로토타입의 복제 과정을 이용하여 상속을 흉내내도록 구현이 가능하다.

객체 지향 프로그래밍(OOP)

줄여서 OOP라고 부르겠다. OOP는 컴퓨터 프로그래밍 패러다임중 하나이며, 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러개의 독립된 단위, 즉 “객체” 들의 모임으로 파악하고자 하는 것이다. 각각의 객체들은 메시지를 주고받고, 데이터를 처리할 수 있다.
객체지향 프로그래밍은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용되고, 보수를 간편하게 하며 보다 직관적인 코드 분석을 가능하게 하는 장점을 가지고 있다.
객체지향의 반대로는 절차지향 프로그래밍(procedural Programming)이라는 패러다임이 있다. 절차지향 프로그래밍이란 순차적인 처리가 중요시되며, 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법이다. 대표적인 절차지향 언어에는 C언어가 있다. OOP의 특성으로는 추상화(Abstraction), 캡슐화(Encapsulation), 상속(Inheritance), 다형성(Polymorphism)이 있다.

특정 데이터가 필요한 경우 Node.js를 이용하여 웹 크롤링을 하면 쉽게 데이터를 추출할 수 있다.

설치 환경

• node.js
• npm

설치 모듈

• request
  웹 페이지의 HTML문서를 그대로 가져오기 위한 모듈
• cheerio
  HTML 문서를 파싱(parsing)하여 필요한 정보만을 가져올 수 있도록 도와주는 모듈, 제이쿼리 셀렉터를 사용할 수 있다.

작업 순서

1. 원하는 디렉토리에 폴더 생성 후 js 파일 생성(crawling.js로 만들었음)

   
   

2. 터미널에서 프로젝트 폴더로 진입

   
   

3. package 생성(이름만 설정한뒤 모두 예스)

   
   

   & npm init
   

   
   

4. 필요 모듈 설치

   
   

   $ npm install cheerio   
   $ npm install request
   

   
   

5. package.json 파일에 아래처럼 해당 모듈의 버전이 나타난다면 제대로 설치가 된 것이다.

   
   

   "dependencies": {
     "cheerio": "^1.0.0-rc.2",
     "request": "^2.83.0"
   }
   

   
   

6. 생성한 crawling.js 파일에 설치한 모듈을 불러준다.

   
   

   var cheerio = require('cheerio');
   var request = require('request');
   

   
   

7. url 변수에 파싱할 주소를 입력하고, request 모듈을 이용하여 웹페이지를 로드한다.

   
   

   var url = 'http://www.naver.com';
   request(url, function (error, response, html){
    var $ = cheerio.load(html);
    // 여기서 제이쿼리 셀렉터를 이용하여 원하는 정보를 가져올 수 있다.
   });
   

   
   

8. 아래는 전체 코드이다.
   “`javascript
   var cheerio = require(‘cheerio’);
   var request = require(‘request’);

   
   

var url = ‘http://www.naver.com’;

request(url, function (error, response, html){ var $ = cheerio.load(html);

// 여기서 제이쿼리 셀렉터를 이용하여 원하는 정보를 가져올 수 있다.

console.log($('.naver_logo').text())

});

# References
[Node.js로 멜론 순위 차트 데이터 파싱](http://leechoong.com/posts/2017/nodejs_cheerio)  
[[Node.js] node.js환경에서 웹 크롤링 하기(cheerio-httpcli)](https://hanswsw.tistory.com/6)  
[[Node.js] 크롤링 DOM parsing ( request, cheerio, iconv 모듈 )](https://victorydntmd.tistory.com/94)

초기화

깃 초기화 : 기존 디렉토리를 git 저장소로 만든다.

$ git init

깃 상태 확인 : 현재 작업중인 브랜치와 파일 상태를 알려준다.

$ git status

설정

전역 사용자 이름 생성

$ git config --global user.name "your name"

전역 사용자 이메일 생성

$ git config --global user.email "your_email@youremail.com"

저장소별 사용자 이름 생성

$ git config user.name "your name"

저장소별 사용자 이메일 생성

$ git config user.email "your_email@youremail.com"

사용자 설정이 되어 있지 않으면 깃허브의 저장소에 커밋 이력 및 작성자의 아이콘도 ? 로 표시된다. 웬만하면 사용자 설정을 해주도록 하자

저장소 복제하기

$ git clone "url"

저장소 추가하기

$ git remote add origin "url"

로컬저장소가 바라보고 있는 저장소의 정보 확인

$ git remote -v

전역 설정 정보 조회

$ git config --global --list

저장소 정보 조회

$ git config --list

파일 추가 및 업로드

스테이지에 수정된 파일 업로드

$ git add 'file name'

스테이지에 수정된 모든 파일 업로드

$ git add .

커밋하기

$ git commit -m 'message'

원격 저장소에 업로드

$ git push origin master

원격 저장소에서 다운로드

$ git pull origin master

되돌리기

스테이지에 올라간 파일 전부 내리기

$ git reset

이력

모든 이력 보기

$ git log

이력 나가기

$ q

이력과 변경사항을 함께 보기

$ git log -p

브랜치

지역 브랜치 목록 보기

$ git branch

원격 저장소 브랜치 목록 보기

$ git branch -r

지역 브랜치 및 원격 저장소 모든 브랜치 목록 보기

$ git branch -a

브랜치 생성하기

$ git branch "branch name"

해당 브랜치로 체크아웃 하기

$ git checkout "branch name"

브랜치를 생성하고 생성된 체크아웃 하기

$ git checkout -b "branch name"

해당 브랜치 삭제하기

$ git branch -d "branch name"

해당 브랜치 강제 삭제하기

$ git branch -D "branch name"

정의 Vue Cli 2.x 버전을 이용하여 프로젝트를 생성하면 웹펙 설정파일이 자동으로 생성되지만 3.x 버전부터는 직접 만들어줘야 한다. 때문에 2.x 버전하고 방법이 약간 다르다.

설치할 디렉토리로 가서 프로젝트를 생성해 준다.

$ vue create 'ProjectName'

프로젝트 폴더로 이동하여 원격 저장소에 연결시켜 준 뒤 푸쉬해준다.

cd 'ProjectName'
git remote add origin 'url'
git push origin master

코드를 빌드하면 dist 디렉토리에 출력되어도록 되어있기 때문에 vue.config.js 파일을 만들어서 설정을 변경해둔다. 우선 최상단 디렉토리에 vue.config.js파일을 생성해 준 뒤 아래 코드를 입력해준다. 원격 저장소의 프로젝트명과 동일하게 publicPath를 수정해준다.

// vue.config.js 
module.exports = {
    publicPath: '/ProjectName/',
    outputDir: 'docs'
}

빌드를 하면 /docs 디렉토리가 생성된다. 후에 최상단 디렉토리의 .gitignore 파일에 /dist 를 주석처리 해준다. 이제 깃에 푸쉬해준다.

git add ./
git commit -m "commit message"
git push origin

이제 깃허브로 들어가서 저장소 설정으로 간 뒤 GitHub Pages 항목에서 master branch /docs folder 를 셀렉해준다. 이제 https://[유저이름].github.io/[저장소이름] 으로 들어가면 뷰 페이지를 확인할 수 있다. (반영에 시간이 조금 걸린다. 당분간은 404가 표시되어있다.)

References

vue-cli で作ったサイトを GitHub Pages にデプロイする
Deploy vue-cli 3 project to github pages