지금까지는 Vue프로젝트 생성 및 API를 통해 데이터를 가져오는 것까지 해보았다. 이제 실제 MoiveList.vue에 가져온 데이터를 표출해보자. 우선 MoiveList.vue의 template를 아래와 같이 수정해준다. Album example Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely. Main call to action Secondary action PlaceholderThumbnail test 상세보기 test 기존에는 하드코딩 ..
node.js를 통해 Vue프로젝트도 만들어봤고, 부트스트랩, 웹팩에 대해 알아봤으니, 이제 이것들 복습하는 기분으로 API를 통해 영화정보를 받아와 게시판을 만드는 연습을 해보려 한다. router은 나중에... 아마 길어질 것 같아서 연습장이라는 카테고리도 만들어 나눠 놓았다. 처음이라 잘못 된 게 많아도 이해하길.. 연습이라.. 참고로 SPA형식으로 만들 예정이다. 실무에서는 그렇게 사용하지 않는다지만 아직 Vue프로젝트 구조를 완전히 이해 하지 못한 상태라.. 그럼 시작해보자 프로젝트 폴더 생성 ============================================================================ Vue 프로젝트를 생성 할 폴더를 생성해주자. 프로젝트 폴더 이동 ..
이번에는 API를 활용하여 카카오톡의 오픈API인 카카오 지도를 가져와보자. 그리고 주소를 검색하는 기능도 한번 만들어 보자~ 그럼 바로 시작 지도를 뿌리는 건 매우 쉽다. 여기서는 따로 설명을 하지 않겠다. 아래 링크를 그대로 따라가면 된다. https://apis.map.kakao.com/web/guide/ 그럼 아래와 같이 된다. kakaoApi.jsp kakaoApi.js $(document).ready(function(){ var container = document.getElementById('kakaoMap'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, ..
오늘 API를 통해 데이터를 받아오는 것을 공부하고 있는데, CORS에러가 떴다.. 공공데이터포털에서 데이터를 받아오는데, 아래와 같이 URL요청을 하니 에러가 발생했다. methods : { search : function(){ var self = this; var url = apiURL + '?serviceKey=' +apiKey + '&pageNo=' + this.pageNo + '&numOfRows=' + this.numOfRows + '&nrsry_type=' + this.nrsryType; axios.get(url).then(function(result) { // url호출 -> 공공데이터포털로 데이터 요청을 보낸다. (request) self.apiList = result.data.items..
API란?? Application Programming Interface(애플리케이션 프로그래밍 인터페이스)의 약자로 한 프로그램에서 다른 프로그램으로 데이터를 주고 받기 위한 방법이다. 라고 적혀 있다. 그런데 이렇게 보면 잘 이해가 되지 않는다. 그런데 이걸 몰라도 누구나 api요청을 매일 하고 있다. 심지어 개발자가 아니더라도.. 다음 이미지를 보자. 우리가 유튜브로 동영상을 본다고 하자. 그럼 보고싶은 영상의 이미지나, 제목을 클릭할 것이다. 그럼 어떻게 될까? 동영상이 나오는 화면으로 이동 할 것이다. 이게 API 요청과 응답이다. 동영상 제목을 클릭했을 때 바뀌는 URL이것이 API요청이다. API요청은 본래 코드로 작성한 뒤 서버로 요청을 해야 하지만, 이건 개발자나 가능한 방식이고, 일반인..
오늘은 공공데이터포털의 오픈API를 활용하여, 데이터를 한번 가져와 보자. 우선 공공데이터포털에 접속한다. 1. 공공데이터 포털 설명 ============================================================================ https://www.data.go.kr/ 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 데이터찾기 > 데이터목록 으로 들어간다. 자. 여기서 마음에 드는 데이터를 하나 고른다. 여기서 조건열기를 눌러 조건을 설정해준다. 서비스유형을 REST, 확장..