[Vue.js] Vue event, Vue router, SFC, Vuex 간단 정리

Vue event

v-on directive를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다.
이벤트 발생 시 처리 로직을 v-on에 넣기 힘들기 때문에 v-on에서는 이벤트 발생 시 처리해야 하는 method의 이름을 받아 처리한다.

이벤트 수식서 (Event Modifier)

method 내에서 이벤트를 처리하는 작업을 할 수도 있지만 method는 DOM의 이벤트를 처리하는 것보다 data 처리를 위한 로직만 작업하는 것이 좋다.
이 문제를 해결하기 위해서 Vue는 v-on 이벤트에 이벤트 수식어를 제공한다.

v-on:click.stop

클릭 이벤트 전파가 중단된다.

v-on:submit.prevent

제출 이벤트가 페이지를 다시 로드하지 않는다.

v-on:click.stop.prevent

수식어는 체이닝이 가능하다.

Vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가할 수 있다.

비동기 통신

Vue에서 권고하는 HTTP 통신 라이브러리는 axios이다.

Promise 기반의 HTTP 통신 라이브러리이며 다른 HTTP 통신 라이브러리들에 비해 상대적으로 문서화가 잘되어있고 API가 다양하다.

Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리이다.
자바스크립트는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려 주지 않는다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용한다.
그리고 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행한다.

axios.get('URL 주소').then().catch()
해당 URL 주소에 대해 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의된 로직이 실행되고 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 실행된다.

axios.post('URL 주소').then().catch()
해당 URL 주소에 대해 HTTP POST 요청을 보낸다. then()과 catch()는 get방식과 동일하다.

axios({옵션 속성})
HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다. 데이터 요청을 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형 등을 정의해서 보낼 수 있다.

vue-router

라우팅 : 웹 페이지 간의 이동 방법
라우터는 컴포넌트와 매핑
Vue를 이용한 SPA를 제작할 때 유용하다.
URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여준다.

내비게이션을 위해 router-link 컴포넌트를 사용한다.
속성을 'to' prop을 사용한다.
기본적으로 <router-link>는 <a> 태그로 렌더링 된다.
<router-view>에 현재 라우트에 맞는 컴포넌트가 렌더링 된다.

SFC (Single File Component)

확장자가 ".vue"인 파일
.vue = template + script + style
구문 강조가 가능하다
컴포넌트에만 CSS의 범위를 제한할 수 있다.
전처리기를 사용해 기능의 확장이 가능하다.

<template>
기본 언어 : html
각 *.vue 파일은 한 번에 최대 하나의 <template> 블록을 포함할 수 있다.
내용은 문자열로 추출되어 컴파일된 Vue Component의 template 옵션으로 사용된다.

<script>
기본 언어 : js
각 *.vue 파일은 한 번에 최대 하나의 <script> 블록을 포함할 수 있다.
ES2015(ES6)를 지원하며 import와 export를 사용할 수 있다.

<style>
각 .*vue 파일은 여러 개의 <style> 태그를 지원한다.
scoped 속성을 이용하여 현재 컴포넌트에서만 사용 가능한 css를 지정 가능하다.

vuex

Vue.js application에 대한 상태 관리 패턴 + 라이브러리
application 모든 component들의 중앙 저장소 역할을 한다. (데이터 관리)

상위(부모) 하위(자식)의 단계가 많이 복잡해진다면 데이터의 전달하는 부분이 매우 복잡해진다.
application이 여러 구성 요소로 구성되고 더 커지는 경우 데이터를 공유하는 문제가 발생한다.
그래서 vuex를 이용한다.