이번에는 동영상을 선택했을 때 각 videoId마다 등록되어 있는 댓글을 목록으로 표출 해보려고 한다. 아마 댓글은 이걸로 마지막.. ( 물론 수정, 삭제, 답글 기능을 넣을 수도 있지만 생략 ) 그럼 바로 시작해보도록 하자. 동영상을 클릭했을 때, 댓글을 가져와야 하니, 해당 기능은 기존 로직을 조금 수정해주었다. 프론트단 ============================================================================ youList.js 수정 loadVideo (item) { let url = '//www.youtube.com/embed/'+item.id.videoId+'?rel=0'; this.$children[1]._data.url = url; // this..
오늘은 동영상을 선택했을 때 댓글을 입력하고 댓글을 볼 수 있는 기능을 구현하려고 한다.. 우선 기본 유튜브와 비슷하게 UI를 설계(?) 했다. 우선 관련 채널 영상을 우측으로 놔두고, 동영상 아래에 댓글 컴포넌트를 만들어 추가 할 생각이다. 우선 오늘은 댓글을 추가하는 기능에 대해서만 집중하고자, 로그인 같은 기능은 다음시간에 넣어보려고 한다. 로그인 기능 또한 네이버 오픈API를 사용하여 할 생각이다. 댓글 같은 경우에는 데이터베이스가 필요하다고 판단되어, Oracle설치 및 기존 프로젝트에 Oracle 및 MyBatis를 연동해주었다.. 각 글을 참조해서 하도록 하자. ( 오라클 설치 ) ( 스프링부트 오라클 및 마이바티스 연동 ) 그럼 바로 시작해보자. 1. 댓글 테이블 및 시퀀스 생성 -----..
이번에는 동영상을 클릭했을 때, 팝업창에 관련 동영상 리스트를 불러와서 화면을 만들어보려고 한다. 우선 구현한 결과는 아래와 같다.. 기존 팝업창 아래에 해당 동영상과 연관이 있는 ( 같은 채널 ) 리스트를 fetch 비동기 통신으로 가져와서 리스트를 만들어 아래 목록에 넣어주는 방식이다. ( 구현 중 무료 할당량이 끝나서, 우선 덤프데이터로 구현하였다. ) 클릭했을 때 뭘 파라메터로 보낼까 고민하다가, 그나마 보인 게 채널ID였다. 찾아보면 이거 말고도 다른 연관있는 데이터를 찾는 파라메터가 있을 것 같다. videoPop.js const url = 'https://www.googleapis.com/youtube/v3/search'; const key = 'AIzaSyBoB2bFOOOOOOOYTyuk-..
이전글에 이어서 목록에서 썸네일을 클릭했을 때, 실제 동영상을 플레이 해보자. [연습장] Youtube Data API를 통한 유튜브 동영상 리스트를 만들어 보자. (3) API를 통해 가져 온 데이터 이전글에서 fetch함수를 통해 데이터를 가져왔다. 이제 그 데이터를 화면에 뿌려주도록 하자 저번에도 말했듯이, 받아온 데이터를 더미데이터로 만들어서 사용 할 생각이다. 그냥 화면만 만드는 bongra.tistory.com 우리가 유튜브 페이지에서 썸네일을 클릭했을 때, 실제로 API를 통해 데이터를 가져오는 것과 같이 우리도 썸네일을 클릭했을 때 API요청을 하는 기능을 구현해야 한다. 아래를 보면 실제 유튜브에서 썸네일을 클릭했을 시, URL + id값을 통해 동영상을 찾고 있는 것을 볼 수 있다. 개..
이전글에서 fetch함수를 통해 데이터를 가져왔다. 이제 그 데이터를 화면에 뿌려주도록 하자 저번에도 말했듯이, 받아온 데이터를 더미데이터로 만들어서 사용 할 생각이다. 그냥 화면만 만드는 것이니... 따로 설명할 건 없고, 그냥 코드와 결과만 보도록 하자. index.html 부트스트랩 관련 js, css를 cdn으로 불러왔다. 점점 늘어나니, 코드가 길어지기 시작.. 웹팩은 나중에 적용하도록 하자. youList.js const url = 'https://www.googleapis.com/youtube/v3/search'; const key = 'AIzaSyBoB2bFRIF_ooooooooo--9pEUOj5Nfo' import dummyData from './data.js'; export defaul..
( 이전글 )에 이어서 유튜브 데이터API를 통해 데이터를 가져와보자. 참고로 라이브러리는 Vue만 쓰고 그 외에는 최대한 ES6문법만 쓰려고 한다. 그래서 fetch API를 통해 가져올거다... 그리고 이전글에서는 .jsp였는데, html로 변경하면서 Thymeleaf 템플릿을 적용하였으니, 원하는 사람은 ( 참조글 )을 참조하자. 그럼 바로 시작해보자.. 1. 유튜브 데이터 API키 발급 ============================================================================ 우선 API키를 발급받기 위해 구글 개발자 콘솔에 접속하자. 접속 한 후 새 프로젝트를 생성해주도록 하자. 나는 이미 youtube-project를 생성해놓았다. 처음 하는 사람..