- Node 개발 환경과 webpack에 대한 이해
- 컴포넌트 기반의 구조에 대한 이해
- axios를 통한 비동기적 데이터 처리에 대한 이해
- Vue.js 개발 프로세스를 통한 영화 목록 페이지 구현
- 모든 vue에서 사용될 데이터기 때문에 최상단인
App.vue
에서 받는다.
mounted()
를 사용해서 vue의 Creation
이후 로드한다.
mounted() {
const MOVIESURL = "https://gist.githubusercontent.com/edu-john/9b7645f841e402ce7fab2b8b606b7c7e/raw/271285772e7dfbb9b476eb27e1b85ead683d763c/movies.json"
const GENRESURL = "https://gist.githubusercontent.com/djohnkang/7cc43f82b5165779819e3b6ad299965b/raw/b0b5850b55806672cde4666e544b6840548159a2/genres.json"
axios.get(MOVIESURL)
.then(result => {
this.movies = result.data
// .movies=(result.data)
})
axios.get(GENRESURL)
.then(result => {
this.genres = result.data
})
},
data() {
return {
movies: [],
genres: [],
}
data-target
에 모달에서 정의한 id 값을 넣는다.
<button class="btn btn-primary" data-toggle="modal" :data-target="movieid" >영화 정보 상세보기</button>
<MovieListItemModal :movie='movie' />
- 영화별 고유 모달을 위해 id 속성을 정의
integer
로는 못한다. string
으로 해야함
<div class="modal fade" tabindex="-1" role="dialog" :id="movieid">
- 부모로부터
movie
데이터를 props
를 통해 받는다.
props:{
movie: {
type:Object,
required:true,
},
data() {
return {
// 백틱으로 만들어준다.
movieid:`movie-${this.movie.id}`,
}
props를 통해 부모로부터 데이터를 받아 사용하는 연습이 되었다.
axios의 사용이나 props 설정, 데이터 사용은 무난하게 구현했다.
하지만 Modal을 구현할 때 id속성을 정의하고 data-toggle을 하는 것이 매우 복잡하고 어려웠다.
bootstrap에 대한 공부도 부족한 것 같다...