실전 코드로 배우는 Vue.js

245

CHAPTER 06

외부 데이터 통합

6.66.6

애플리케이션과 외부 데이터베이스 연결 애플리케이션과 외부 데이터베이스 연결

이제

Vue

컴포넌트

UI

에서 외부 데이터를 요청하고 에러를 처리할 수 있다. 그러나

Vue

가

컴포넌트를 생성할 때마다 데이터를 가져오는 방식은 최선이 아니다. 특히 컴포넌트의 데이

터가 자주 변경되지 않는 경우라면 더욱 그렇다.

이러한 문제가 단적으로 드러나는 상황은 웹 애플리케이션의 페이지를 전환할 때다. 페이지

데이터는 뷰를 처음 로드할 때 한 번만 가져와야 한다. 따라서 이런 경우에는 브라우저 로컬

저장소를 외부 데이터베이스로 삼거나

Vuex

, 피니아 등의 상태 관리 서비스로 데이터를 캐

시에 저장해야 한다. 더 자세한 설명은

9

장을 참고하기 바란다.

로컬 저장소는 브라우저에 내장된

localStorage

API

로 다룬다. 가령 다음은 사용자의

GitHub

프로필 데이터를 로컬 저장소에 저장하는 코드다.

localStorage.setItem('user', JSON.stringify(user));

브라우저의

localStorage

는 각 항목을 문자열로 저장하므로, 저장할 객체는 다음과 같이

문자열로 변환해야 한다.

const user = JSON.parse(localStorage.getItem('user'));

다음은 [예제 ...