뷰 HTTP 통신

• 대표적인 웹 앱 HTTP 통신으로는 jQuery의 ajax가 있다.
• ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다.
• 뷰에도 ajax를 지원하기 위한 라이브러리인 뷰 리소스와 액시오스가 있다.

뷰 리소스

• 2016년 말에 공식적인 지원을 중단했지만 아직도 계속 사용할 수 있는 라이브러리
• CDN를 이용하거나 NPM으로 라이브러리를 설치하는 방법(ES6 기준)으로 사용할 수 있다.
• 뷰 리소스 라이브러리를 이용하면 서버로부터 데이터를 받아와 화면에 나타낼 수 있다.

액시오스 (Axios)

• 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리
• Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있다.
  • Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체
  • 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용한다.
  • 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행한다.
• 뷰 리스소와 동일하게 CDN을 이용하거나 NPM을 이용하여 설치(ES6 기준)하여 사용할 수 있다.
• API 형식이 다양하여 단순한 호출 이외에도 여러 설정 값을 추가하여 함께 호출할 수 있다.
  • API 형식
• 뷰 리스소와 다르게 response 객체를 확인해 보면 data 속성이 일반 문자열 형식이 아니라 객체 형태이기 때문에 결도로 JSON.parse()를 사용하여 객체로 변환할 필요가 없다.
• axios를 호출하기 전의 this와 호출 후의 콜백 함수 안의 this는 다르다. 
  • 자바스크립트의 동작원리: 엔진, 런타임, 호출 스택