Vue CLI & router

SFC

Vue CLI

vue.js개발을 위한 표준 도구이다. 프로젝트 구성을 도와주는 역할을 하고, Vue개발 생태계에서 표준 tool 이 되고자 하는 기준을 목표로 하고 있다. 확장 플러그인, GUI, 구성요소 등 다양한 툴을 제공한다.

Node.js

자바스크립트를 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 자바스크립트 런타임 환경이다. 브라우저 밖을 버어날 수 없던 자바스크립트 언어의 태생적 한계를 해결했다. Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공한다. 즉, 단순히 브라우저만 조작할 수 있었던 자바스크립트를 SSR에서도 사용가능하도록 했다.''

NPM(Node Package Manage)

• 자바스크립트 언어를 위한 패키지 관리자.
• node.js의 기본 패키지 관리자.
• Node.js와 함께 자동으로 설치됨.

Vue CLI 설치

vue-cli

$ npm istall -g @vue/cli

버전 확인

$ vue --version

프로젝트 생성

$ vue create my-first-vue-app

runserver

$ npm run serve

Babel

javascript Transcomplier

• 자바스크립트의 신버전 코드를 구버전으로 번역/변환 해주는 도구
• 자바스크립트 역사에 있어서 파편화와 표준화의 영향으로 작성된 코드의 스펙트럼이 매우 다양
• 최신 문법을 사용해도 브라우저의 버전별로 동작하지 않는 상황이 발생
• 같은 의미의 다른 코드를 작성하는 등의 대응이 필요해졌고 이러한 문제를 해결하기 위한 도구
• 원시코드를 목적코드로 옮기는 번역기가 등장하면서 개발자는 더이상 내 코드가 특정 브라우저에서 동작하지 않는 상황에 대해 크게 고민하지 않을 수 있음

Webpack

• static module bundler
• 모듈간의 의존성 문제를 해결하기 위한 도구
  텍스트

Module

모듈은 단지 파일 하나를 의미했다.
브라우저만 조작할 수 있었던 시기의 자바스크립트는 모듈 관련 문법 없이 사용되어졌다. 하지만 자바스크립트와 애플리케이션이 복잡해지고 크기가 커지자 전역 스코프를 공유하는 형태의 기존 개발 방식의 한계점이 드러났다. 그래서 라이브러리를 만들어 필요한 모듈을 언제든지 불러오거나 코드를 모듈 단위로 작성하는 등의 다양한 시도가 이루워졌다.

Module 의존성 문제

모듈의 수가 많아지고 라이브러리 혹은 모듈 간의 의존성이 깊어지면서 특정한 곳에서 발생한 문제가 어떤 모듈 간의 문제인지 파악하기 어려워졌다.

그래서 Webpack은 모듈 간의 의존성 문제를 해결하기위해 존재하는 도구이다!

bundler

• 모듈 의존성 문제를 해결해주는 작업이 bundling이고 이러한 일을 해주는 도구가 Bundler이고, Webpack은 다양한 번들러중 하나이다. 모듈들을 하나로 묶어주고 묶인 파일은 하나 또는 여러개로 만들어진다.
• Bundling 된 결과물은 더이상 서-순에 영향을 받지 않고 동작하게 된다.
• Bundling과정에서 문제가 해결되지 않으면 최종 결과물을 만들어 낼 수 없기 때문에 유지 보수 측면ㅇ에서 매우 편리하다.
• Vue CLI는 이러한 Babel, Webpack에 대한 초기 설정이 자동으로 되어있다.

Pass Props & Emit Events

Pass props

• 컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기 위함
• 부모는 자식에게 데이터를 전달하고, 자식은 자신에게 일어난 일을 부모에게 알림
• props는 아래로, event는 위로
• 부모는 props를 통해 자식에게 데이터를 전달하고, 자식은 evnets를 통해 부모에게 메시지를 보낸다.

props

• props는 상위 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성

• 하위 컴포넌트의 템플릿에서 상위 데이터를 직접 참조할 수 없음

• in HTML : kebab-case / in script: camelCase

단방향 데이터 흐름

• 모든 props는 하위속성과 상위 속성 사이의 단방향 바인딩을 형성
• 부모의 속성이 변경되면 자식 속성에게 전달되지만, 반대 방향으로는 안됨
• 자식 요소가 의도치 않게 부모 요소의 상태를 변경함으로써 앱의 데이터 흐름을 이해하기 어렵게 만드는 일을 막기 위함.

EMIT EVENT

• $emit(event)
• 현재 인스턴스에서 이벤트를 트리거
• 추가 인자는 리스너의 콜백함수로 전달
• 부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에 새 v-on을 사용하여 자식 컴포넌트가 보낸 이벤트를 청취

event이름

• 컴포넌트 및 props와 달리 이벤트는 자동 대소문자 변환을 제공하지않음.
  HTML의 대소문자 구분을 위해 돔 템플릿의 v-on 이벤트 리스너는 항상 자동으로 소문자 변환되기 때문에 v-on:myEvent는 자동으로 v-on:myevent로 변환
• 이러한 이유로 이벤트 이름에는 kebab-case를 권장함.

Vue Router

Vue Router

• Vue.js의 공식 라우터
• 중첩된 라우트/ 뷰 매핑 모듈화 된, 컴포넌트 기반의 라우터 설정 등을 한다. SPA 상에서.

- router-link

• index.j s파일에 정의한 경로에 등록한 특정한 컴포넌트와 매핑
• HTML5 히스토리 모드에서, router-link는 클릭이벤트를 차단하여 브라우저가 페이지를 다시 로드하지 않도록 함
• a 태그지만 우리가 알고있는 GET 요청을 보내는 a태그와 조금 다르게 기본 GET요청을 보내는 이벤트를 제거한 형태로 구성

- router-view

• 실제 component가 DOM에 부착되어보이는 자리를 의미
• 라우터 링크를 클릭하며 해당경로와 연결되어있는 Index.js에 정의한 컴포넌트가 위치

History mode

• HTML history API를 사용해서 router를 구현한 것
• 브라우저의 히스토리는 남기지만 실제 페이지는 이동하지 않는 기능을 지원

vue Router가 필요한 이유

1. SPA 등장 이전

서버가 모든 라우팅을 통제
요청 경로에 맞는 HTML를 제공

2. SPA 등장 이후

서버는 index.html 하나만 제공
이후 모든 처리는 HTML 위에서 JS 코드를 활용해 진행
즉 요청에 대한 처리를 더이상 서버가 하지 않음

3. 라우팅 처리 차이

• SSR
  • 라우팅에 대한 결정원을 서버가 가짐
• CSR
  클라이언트는 더이상 서버로 요청을 보내지 않고 응답받은 HTML문서 안에서 주소가 변경되면 특정 주소에 맞는 컴포넌트를 렌더링
  • 라우팅에 관한 결정권을 클라가 가짐

Vue Router는 라우팅의 결정권을 가진 Vue.js에서 라우팅을 편리하게 할 수 이는 툴 제공해주는 라이브러리다.

components. vs views

1. app.vue: 최상위 컴포넌트
2. views: 라우터에 매핑되는 컴포넌트를 모아두는 폴더
3. components: 라우터에 매핑된 컴포넌트 내부에 작성하는 컴포넌트를 모아두는 폴더