[Vue] Vue axios 컴포넌트 심화, 라우트 템플릿
목차
HTTP 통신: axios
- Vue에서 권장하는 HTTP 통신 라이브러리는 axios이다.
- Promise 기반의 HTTP 통신 라이브러리이며, 다른 라이브러리에 비해 문서화가 잘 되어 있고 API가 다양하다.
Promise란?
- 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리다.
- 자바스크립트는 단일 스레드로 코드를 처리하기 때문에, 특정 로직의 처리가 끝날 때까지 기다려주지 않는다.
- 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행할 때 주로 Promise를 활용한다.
- 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행한다.
참고: https://github.com/axios/axios
Vue Router
- 라우팅: 웹 페이지 간의 이동 방법
- Vue.js 공식 라우터로, URL(경로)을 컴포넌트와 매핑한다.
- Vue를 이용한 SPA 제작 시 유용하다.
- URL에 따라 컴포넌트를 연결하고 보여준다.
라우터 구성 요소
- 링크 부분: 사용자 눈에 보이는 이동 링크가 필요하다 (예: main, sub 같은 메뉴).
router-link태그로 표시한다. - 표시 영역: 링크를 눌렀을 때 결과를 보여주는 장소는
<router-view>이다. 여기에 실제 표시될 내용을 가진 컴포넌트(화면)가 렌더링된다. - 매핑 정보: Router를 생성하고 Route 정보를 등록한다.
NPM 명령어
| 명령어 | 설명 |
|---|---|
npm init | 새로운 프로젝트나 패키지를 만들 때 사용 (package.json 생성). |
npm install <package> | 생성되는 위치에서만 사용 가능한 패키지로 설치. |
npm install -g <package> | 글로벌 패키지에 추가, 모든 프로젝트에서 사용 가능. |
참고
- router는 모든 라우팅 정보를 가지고 있다.
- components는 지역(local) 범위이므로, 전역과 지역 구분을 잘해야 한다.