JavaScript

Computed 계산이 필요한 데이터를 사용할 때, computed 옵션을 사용하면 매번 계산을 하지 않고 첫번째 만들어진 결과를 캐싱해서 계산된 데이터를 다시 사용할 수 있다. ( methods는 계산 데이터를 사용할 때마다 계산을 한다 ) {{count}} {{double}} // 처음 계산된 데이터를 캐싱하여 다시 계산을 하지 않고 그대로 사용 {{double}} {{double}} {{double}} 계산된 데이터를 이용하여 내가 원하는 대로 데이터를 수정하여 사용할 수 있다 {{todo.title}} Watch 반응형 데이터가 변경되는 것을 감시하고, 변경될 때마다 정의한 함수가 실행된다 deep 객체 또는 배열 같은 참조형 데이터를 감시할 때 데이터 내부 일부 변경에 대해 감시하기 위해 깊은 ..

Vue.js 템플릿 Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한 모든 Vue 템플릿은 사양을 준수하는 브라우저 및 HTML 파서에서 문법을 분석할 수 있는 문법적으로 유효한 HTML 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 가상 DOM 개념에 익숙하고, JavaScript 본래의 기능을 선호한다면, 템플릿 대신 렌더 함수를 직접 작성할 수 있다 보간법 텍스트 보간법 데이터 바인딩의 가장 기본적인 형태는 "Mustache"(이중 중괄호) 문법을 사용한 텍스트 보간법 msg 속성이 변경될 때마다 갱신된다 메세지: {{ msg }} v-once 디렉티브 데이터가 변경되어도 갱신되지 않는 일회성 보간 수행 메세지(변하지않음):..

history API 브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖는다 세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다 pushState, replaceState 두 개의 함수로 화면 이동 없이 현재 url을 업데이트할 수 있다 pushState : 세션 히스토리에 새 url 상태를 쌓는다 replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다 이전 예제에서 hashbang으로 했던 url을 아래처럼 바꿔줄 수 있다 / => HomePage /list => ListPage /detail/1 => DetailPage 일반 url 형식을 따르기 때문에..

Promise 비동기 작업을 제어하기 위해 나온 개념으로, callback hell에서 어느정도 벗어날 수 있게 해준다 Promise로 정의된 작업끼리는 연결할 수 있으며, 이를 통해 코드의 depth가 크게 증가하지 않는 효과가 있다 const promise = new Promise((resolve, reject) => { // promise 내부에서 비동기 상황이 종료될 때, resolve 함수 호출 // promise 내부에서 오류 상황일 때, reject 함수 호출 }) Promise에서는 then을 이용해 비동기 작업 이후 실행할 작업을 지정한다 function asyncPromiseWork() { // .... return new Promise((resolve, reject) => { // ...