TIL#111 Vue.js (3)

Dasom·2020년 11월 9일
0

vue.js

목록 보기
3/4
post-thumbnail

뷰 라우터

라우팅

라우팅이란 웹페이지간의 이동방법을 말한다.
라우팅을 이용하면 화면간의 전환이 매끄러울 뿐 아니라 애플리케이션의 사용자 경험을 향상시킬 수 있다. 일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타난다. 이런 부분들을 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있을 뿐 아니라 더 빠르게 화면을 조작할 수 있어서 사용자 경험이 향상된다.

뷰 라우터

뷰에서ㅓ 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 뷰 라우터를 구현할 때 필요한 특수 태그와 기능은 다음과 같다.

태그설명
<router-link to="url값">페이지 이동 태그. 화면에서는 <a> 로 표시되며 클릭하면 to에 지정한 Url로 이동한다.
<router-view>페이지 표시 태그. 변경되는 url에 따라 해당 컴포넌넌트를 뿌려주는 영역이다.

📌 $mount() API
el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다. 인스턴스를 생성할 때 el속성을 넣지 않았더라도 생성하고 나서 $mount() 를 이용하면 강제로 인스턴스를 화면에 붙일 수가 있다.

네스티드 라우터

라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다. 이 문제를 해결하는 방법으로 네임드 뷰가 있다.

네임드 뷰

특정 페이지로 이동했을 때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.

뷰 HTTP 통신

HTTP는 브라우저와 서버 간의 데이터를 주고받는 통신 프로토콜이다. 브라우저에서 특정 데이터를 보내달라고 요청을 보내면 서버에서 응답으로 해당 데이터를 보내주는 방식으로 동작한다. 서버에 '해당 데이터를 보내주세요'라는 메세지를 보내는 게 바로 'HTTP 요청을 보낸다'와 같은 의미이다.
웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리(jQuery)의 ajax가 있다. ajax는 서버에서 받아오노 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다.

뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공한다. 뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 액시오스(axios)가 바로 그것이다.

액시오스

Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있다.

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

API 유형처리 결과
axios.get('url').then().catch()해당 url에 http get 요청을 보낸다. 서버에서 보낸 데이터를 정상적을 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 수행된다.
axios.post('url').then().catch()해당 url 주소에 대해 http post 요청을 보낸다.
axios{{ 옵션 속성 }}http 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다. 데이터 요청을 보낼 url, http 요청 방식, 보내는 데이터 유형, 기타 등등

뷰 템플릿

html, css 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html 로 변환해 주는 속성이다.

  • 데이터 바인딩
  • 자바스크립트 표현식
  • 디렉티브
  • 이벤트 처리
  • 고급 템플릿 기법

데이터 바인딩

html 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다. 주요 문법으로는 {{}} 문법과 v-bind 속성이 있다.

{{}} - 콧수염괄호

뷰 인스턴스의 데이터를 html 태그에 연결하는 가장 기본적인 텍스트 삽입방식이다.

v-bind

아이디, 클래스, 스타일 등의 html속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결방식이다.

자바스크립트 표현식에서 주의할 점

첫째, 자바스크립트의 선언문과 분기 구문은 사용할 수 없다. 둘째, 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다.

디렉티브

html 태그 안에 v- 접두사를 가지는 모든 속성들을 의미한다. 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다.

  • v-if : 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 html 태그를 화면에 표시하거나 표시하지 않는다.
  • v-for : 지정한 뷰 데이터의 개수만큼 해당 html 태그를 반복 출력한다.
  • v-show : v-if와 유사하게 데이터의 진위여부에 따라 해당 html 태그를 화면에 표시하거나 표시하지 않는다. 다만, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효과만 display:none;으로 주어 실제 태그는 남아있고 화면상으로만 보이지 않는다.
  • v-bind : html 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
  • v-on : 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어, v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.
  • v-model : 폼(form)에서 주로 사용되는 속성이다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch 와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. <input> <select> <textarea> 태그에만 사용할 수 있다.
profile
개발자꿈나무🌲

0개의 댓글