이번에는 동영상을 선택했을 때 각 videoId마다 등록되어 있는 댓글을 목록으로 표출 해보려고 한다. 아마 댓글은 이걸로 마지막.. ( 물론 수정, 삭제, 답글 기능을 넣을 수도 있지만 생략 ) 그럼 바로 시작해보도록 하자. 동영상을 클릭했을 때, 댓글을 가져와야 하니, 해당 기능은 기존 로직을 조금 수정해주었다. 프론트단 ============================================================================ youList.js 수정 loadVideo (item) { let url = '//www.youtube.com/embed/'+item.id.videoId+'?rel=0'; this.$children[1]._data.url = url; // this..

이번에는 동영상을 클릭했을 때, 팝업창에 관련 동영상 리스트를 불러와서 화면을 만들어보려고 한다. 우선 구현한 결과는 아래와 같다.. 기존 팝업창 아래에 해당 동영상과 연관이 있는 ( 같은 채널 ) 리스트를 fetch 비동기 통신으로 가져와서 리스트를 만들어 아래 목록에 넣어주는 방식이다. ( 구현 중 무료 할당량이 끝나서, 우선 덤프데이터로 구현하였다. ) 클릭했을 때 뭘 파라메터로 보낼까 고민하다가, 그나마 보인 게 채널ID였다. 찾아보면 이거 말고도 다른 연관있는 데이터를 찾는 파라메터가 있을 것 같다. videoPop.js const url = 'https://www.googleapis.com/youtube/v3/search'; const key = 'AIzaSyBoB2bFOOOOOOOYTyuk-..

이번에는 유튜브 검색 기능을 구현하였다. 바뀐 건 많이 없고 헤더 부분 추가하고, component화 시킨 후 list 컴포넌트 안에 자식 컴포넌트로 추가해주었고, 기존 fetch함수의 then을 async와 await을 활용하여 기능구현 하는 쪽으로 수정해주었다. 그럼 바로 정리해보자. youHeader.js 추가 const url = 'https://www.googleapis.com/youtube/v3/search'; const key = 'AIzaSyBoB2ooooooooooooYTyuk--9pEUOj5Nfo' export default{ template : ` Carousel Home Link Disabled -- 엔터 또는 클릭시 search함수 호출 Search `, data () { retu..

이전글에서 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..