프로젝트/영화 검색 (Vue)
-
Vue 프로젝트 단일 영화 상세 정보 가져오기프로젝트/영화 검색 (Vue) 2021. 8. 8. 04:28
예제 여기서부터는 단일 영화 상세 정보 페이지를 구현할 예정 Vue 프로젝트 단일 영화 상세 정보 가져오기 1. /src/store/movie.js 수정 - searchMovieWithId() 추가 - _fetchMovie() URL 수정 ... 생략 state: () => ({ ... theMovie: {} }), ... actions: { async searchMovies({ state, commit }, payload) { ... }, async searchMovieWithId(context, payload) { if (state.loading) return commit('updateState', { theMovie: {}, loading: true }) try { const res = await ..
-
Vue 프로젝트 에러 메시지 출력과 로딩 애니메이션프로젝트/영화 검색 (Vue) 2021. 8. 7. 06:07
Vue 프로젝트 에러 메시지 출력과 로딩 애니메이션 1. /src/store/movie.js 수정 - message 기본값 추가 (Search for the movie title!) - 검색이 시작되면 message 초기화 - 검색이 시작되고 끝날때 로딩 true, false 적용 ... 생략 export default { namespaced: true, state: () => ({ movies: [], message: 'Search for the movie title!', loading: false }), ... 생략 async searchMovies({ state, commit }, payload) { if (state.loading) { return } commit('updateState', { m..
-
Vue 프로젝트 Container 너비 사용자 지정프로젝트/영화 검색 (Vue) 2021. 8. 7. 05:36
Vue 프로젝트 Container 너비 사용자 지정 1. /src/scss/main.scss 수정 // Default variable overrides $primary: #FDC000; $container-max-widths: ( sm: 540px, md: 704px, lg: 924px, xl: 1140px, xxl: 1364px ); // Required @import "../../node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/mixins"; @import "../../node_modules/bootstr..
-
Vue 프로젝트 영화 아이템 - 텍스트 말줄임 표시와 배경 흐림 처리프로젝트/영화 검색 (Vue) 2021. 8. 6. 09:00
Vue 프로젝트 영화 아이템 - 텍스트 말줄임 표시와 배경 흐림 처리 1. /src/components/MovieItem.vue 수정 - 포스터에 마우스를 올리면 hover 효과 - 텍스트 타이틀 말줄임 ... 생략 결과 참고 https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow text-overflow - CSS: Cascading Sty..