기존에 만들었던 영화목록은 따로 파라메터를 받지 않고 그냥 url뒤에 필요한 값들을 하드코딩해서 보냈었다. 이번에는 검색어와, 가져 올 영화갯수, 페이지 처리를 해보겠다. 근데 우선 알아야 할 것은 해당 데이터가 데이터베이스에 있는 것이 아니라, API로 그때그때 가져오는 거라, 기존의 페이지네이션 처리 방식이 다르다. 나는 그냥 페이징 계산 안하고 [이전], [다음] 버튼 정도만 구현하였다.. 간단히 코드랑 결과화면만 찍겠다. MovieList.vue Album example Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too shor..

지금까지는 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 기존에는 하드코딩 ..

저번에 화면은 만들어 보았다. 그럼 실제로 데이터를 가져와야 하는데, 보통 Vue프로젝트에서는 FireDB를 많이 쓴다고 한다. 잘은 모르겠지만... 나는 그냥 API를 통해 데이터를 가져와서 화면에 뿌려줘 보겠다. 본 글에서는 문화 공공데이터광장 이라는 곳을 이용하겠다. API 인증키 신청 ============================================================================ 아래 링크로 접속해주자. https://developers.naver.com/docs/common/openapiguide/ API 공통 가이드 - Open API 가이드 API 공통 가이드 네이버 오픈API는 네이버 플랫폼의 기능을 외부 개발자가 쉽게 이용할 수 있게 웹 또는 SD..

node.js를 통해 Vue프로젝트도 만들어봤고, 부트스트랩, 웹팩에 대해 알아봤으니, 이제 이것들 복습하는 기분으로 API를 통해 영화정보를 받아와 게시판을 만드는 연습을 해보려 한다. router은 나중에... 아마 길어질 것 같아서 연습장이라는 카테고리도 만들어 나눠 놓았다. 처음이라 잘못 된 게 많아도 이해하길.. 연습이라.. 참고로 SPA형식으로 만들 예정이다. 실무에서는 그렇게 사용하지 않는다지만 아직 Vue프로젝트 구조를 완전히 이해 하지 못한 상태라.. 그럼 시작해보자 프로젝트 폴더 생성 ============================================================================ Vue 프로젝트를 생성 할 폴더를 생성해주자. 프로젝트 폴더 이동 ..