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

지금까지는 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를 이용하여 게시판을 만들고 있는데 다음과 같은 문제에 부딪혔다. v-for문내에서 셀렉트박스를 이용하여 value값을 추출하여 js로 보내야 하는데.. 지금 만들고 있는 게시판은 v-for문(1)안에 있는 셀렉트박스의 value값도 v-for문(2)을 이용하여 돌려주었고 등록 버튼은 v-for문(2)의 바깥에 있는 구조였다. 지금까지는 셀렉트박스를 그냥 검색창에서만 사용했기 때문에 v-for문을 돌린 적이 없었다. 그렇기 때문에 그냥 v-model을 태그에 넣어주고 Vue의 data에 선언만 해주면 간단히 셀렉트박스의 value값을 가져 올 수 있었다. 이렇게 v-for문이 아니라 그냥 하나의 셀렉트박스를 사용하면 v-model에 v-모델명(srhKeywordType)를 선언해주고 data 함수 ..