분류 전체보기
-
Vue 프로젝트 About프로젝트/영화 검색 (Vue) 2021. 8. 19. 04:17
Vue 프로젝트 About 1. /src/store/about.js 수정 /* 개발자의 정보, 사용자의 정보 취급하는 용도 */ export default { namespaced: true, state: () => ({ name: 'ITBlue', email: 'hyungjunyoo95@gmail.com', git: 'https://github.com/HyungJun-Yoo', blog: 'https://bluelearn.tistory.com/', image: '/src/assets/Blue.png' }) } 2. /src/routes/About.vue 수정 {{ name }} {{ email }} {{ git }} {{ blog }} 결과
-
Vue 프로젝트 Nav 경로 일치 및 활성화프로젝트/영화 검색 (Vue) 2021. 8. 19. 03:20
Vue 프로젝트 Nav 경로 일치 및 활성화 1. /src/components/MovieItem.vue 수정 - div를 RouterLink로 변경 - :to 추가 ... ... 2. /src/components/Header.vue 수정 - class 추가 - data() 수정 - methods 추가 ... {{ nav.name }} ... ... { name: 'Movie', href: '/movie/tt4520988', path: /^\/movie/ // '/movie' }, ... }, methods: { isMatch(path) { if (!path) return false return path.test(this.$route.fullPath) } } } ... 결과 - 영화 아이템을 선택하면 - ..
-
Vue 프로젝트 영화 포스터가 없는 경우 예외 처리프로젝트/영화 검색 (Vue) 2021. 8. 17. 13:52
Vue 프로젝트 영화 포스터가 없는 경우 예외 처리 1. /src/components/MovieItem.vue 수정 - methods 수정 ... methods: { async init() { const poster = this.movie.Poster if (!poster || poster === 'N/A') { this.imageLoading = false } else { await this.$loadImage(poster) this.imageLoading = false } } } ... 2. /src/routes/Movie.vue 수정 - methods 수정 ... methods: { requestDiffSizeImage(url, size = 700) { if (!url || url === 'N/A'..
-
Vue 프로젝트 Vue 플러그인 (이미지 로드 이벤트)프로젝트/영화 검색 (Vue) 2021. 8. 17. 01:42
예제 Vue 프로젝트 Vue 플러그인 (이미지 로드 이벤트) 1. /src/plugins 생성, /src/plugins/loadImage.js 생성 export default { install(app) { app.config.globalProperties.$loadImage = src => { return new Promise(resolve => { const img = document.createElement('img') img.src = src img.addEventListener('load', () => { // 완료! resolve() }) }) } } } 2. /src/main.js 수정 - loadImage.js 플러그인 등록 import { createApp } from 'vue' impor..
-
Vue 프로젝트 더 높은 해상도의 영화 포스터 가져오기프로젝트/영화 검색 (Vue) 2021. 8. 16. 22:22
Vue 프로젝트 더 높은 해상도의 영화 포스터 가져오기 1. /src/routes/Movie.vue 수정 ... ... ... created() { ... }, methods: { requestDiffSizeImage(url, size = 700) { return url.replace('SX300', `SX${size}`) } } ... 참고 https://heropy.blog/2019/07/21/resizing-images-cloudfrount-lambda/ AWS Lambda@edge로 실시간 이미지 리사이징(updated) AWS Lambda@edge(CloudFront)로 실시간 이미지 리사이징 기능을 구현합니다. Cloud 9으로 람다 함수를 작성하고 CloudWatch로 로그를 확인합니다. h..
-
Vue 프로젝트 Ratings 데이터 출력프로젝트/영화 검색 (Vue) 2021. 8. 16. 16:40
예제 Vue 프로젝트 Ratings 데이터 출력 1. /src/routes/Movie.vue 수정 ... Ratings {{ score }} ... ... .ratings { .rating-wrap { display: flex; .rating { display: flex; align-items: center; margin-right: 32px; img { height: 30px; flex-shrink: 0; margin-right: 6px; } } } } ... 결과
-
Vue 프로젝트 영화 상세 페이지 정리프로젝트/영화 검색 (Vue) 2021. 8. 9. 14:09
Vue 프로젝트 영화 상세 페이지 정리 1. /src/routes/Movie.vue 수정 {{ theMovie.Title }} {{ theMovie.Released }} {{ theMovie.Runtime }} {{ theMovie.Country }} {{ theMovie.Plot }} Ratings Actors {{ theMovie.Actors }} Director {{ theMovie.Director }} Production {{ theMovie.Production }} Genre {{ theMovie.Genre }} 결과 참고 http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/ Javascript, CSS, and (X..