라이브러리 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..
Vuejs CDN Vue를 처음 개발할 때 일반 html 파일에서 Vue를 사용해 보고 싶은 분들이 있을 것 같습니다. React와 Vue를 비교했을 때 훨씬 개발하기 쉽고 단순하며 초보 웹 개발자들이 웹 개발에 접근하기 쉽고 개발에 능숙한 사람들도 쉽게 웹 개발에 입문할 수 있을 것 같습니다. 오늘은 일반 html 파일에 Vue를 이용해서 데이터를 정의하고 간단하게 바인딩해서 표시하는 방법을 알아보겠습니다. ▼ 1. 우선 빈 프로젝트를 만듭니다. 만약 IDE 로 개발하는 환경이 아니라면 단순히 빈 폴더를 만드시면 됩니다. ▼ 2. 프로젝트(폴더) 안에 새로운 HTML 파일을 만들어줍니다. (파일명 index.html) 파일명은 마음대로 정해도 상관없습니다. 확장자만 html 파일로 만드시면 됩니다. ▼..