# 1. 프로젝트 세팅

###### tags: `지호`, `Vue.js 완벽 가이드`

---

## 1. 강의 소개
- Vue.js를 이용한 웹 서비스 구현 절차
- 실무 프로젝트 진행 방식: 컴포넌트, 라우터, API, 스토어
- 컴포넌트 디자인 패턴과 자바스크립트 비동기 처리
- Mixins과 HOC를 이용한 컴포넌트 재활용 방법
- 외부 라이브러리 모듈화 및 실무 프로젝트 구성 방법
- 사용자 경험을 높이는 라우터 설계 방법과 고급 라우터 패턴

<br/>

## 2. Vue.js 스타일 가이드

### VSCode 플러그인
- Vetur: .vue 파일의 코드 하이라이팅
- TSLint: 타입스크립트를 쓰지 않아도 타입스크립트처럼 쓸 수 있게 해줌
- ESLint

### Vue.js 스타일 가이드 (코딩 컨벤션)
- https://v2.vuejs.org/v2/style-guide/?redirect=true

<br/>

## 3. 앱 소개

- 공식 사이트: https://news.ycombinator.com/
- API 문서: https://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md

<br/>

### 사이트 설계

- 기획서를 기반으로 컴포넌트를 구성해서 설계
- 라우터 설계: 어떤 페이지가 필요한지
- News Page
- Ask Page
- Jobs Page
- My Page
- Item Page

<br/>

## 4. Vue CLI 2.x vs Vue CLI 3.x

### 명령어
- 2.x: vue init '프로젝트 이름' '파일 위치'
- 3.x: vue create '프로젝트 이름'

### 웹팩 설정 파일
- 2.x: 노출 O
- 3.x: 노출 X (복잡한 웹팩 설정 파일을 사용자에게 노출시키지 않고 라이브러리 안에서 관리)

### 프로젝트 구성
- 2.x: 깃헙의 템플릿 다운로드
- 3.x: 플러그인 기반으로 기능 추가

### ES6 이해도
- 2.x: 필요 X
- 3.x: 필요 O

<br/>