라이브러리 axios 설치 ▼ 통신을 위해 다음 명령어로 vue 프로젝트에 axios를 설치합니다. 테스트 API ▼ 테스트를 위해서 서버를 직접 만들기보다는 reqres.in 이라는 사이트에서 테스트 API를 이용해 JSON 데이터를 가져와보도록 하겠습니다. https://reqres.in/ Reqres - A hosted REST-API ready to respond to your AJAX requests Native JavaScript If you've already got your own application entities, ie. "products", you can send them in the endpoint URL, like so: var xhr = new XMLHttpRequest(); ..
▼ Vue에 리스트를 그려주기 위해서 데이터를 정의합니다. 배열 형태의 animals라는 데이터를 정의하고 3개의 데이터를 추가해 줍니다. 각 데이터에는 food라는 값이 있습니다. 이 값 역시 배열로 이중 리스트를 그리기 위해서 필요합니다. 나머지 값의 출력은 생략하고 Vue에서 이중 for 문 형태의 값을 출력해 보겠습니다. ▼ 이번에는 데이터가 잘 나오는지 확인하기 위해 div 태그에 animals 값을 그대로 출력해 보겠습니다. 머스타치 문법으로 animals를 표시합니다. 뷰의 Mustache 문법은 {{ }} 안에 데이터를 출력하는 방법으로 실제 데이터가 그대로 렌더링 되는 것을 볼 수 있습니다. 값을 확인하기 위해서 출력해보겠습니다. ▼ 이번에는 div 태그에 v-for 예약어를 통해서 an..