프로젝트
-
Vue 프로젝트 영화 검색 코드 리팩토링프로젝트/영화 검색 (Vue) 2021. 8. 6. 04:27
Vue 프로젝트 영화 검색 코드 리팩토링 1. /src/store/movie.js 수정 - 비동기 예외 처리 적용 import axios from 'axios' import _uniqBy from 'lodash/uniqBy' export default { ... 생략 }, // 비동기 actions: { async searchMovies({ state, commit }, payload) { try { const res = await _fetchMovie({ ...payload, page: 1 }) const { Search, totalResults } = res.data commit('updateState', { movies: _uniqBy(Search, 'imdbID') }) console.log(to..
-
Vue 프로젝트 영화 목록 ID 중복 제거프로젝트/영화 검색 (Vue) 2021. 8. 3. 06:00
Vue 프로젝트 영화 목록 ID 중복 제거 1. npm i lodash 2. /src/store/movie.js 수정 - 영화 목록 ID 중복 제거 코드 작성 ( lodash _uniqBy() 사용 ) import axios from 'axios' import _uniqBy from 'lodash/uniqBy' export default { ... 생략 commit('updateState', { movies: _uniqBy(Search, 'imdbID') }) // 추가 요청 if (pageLength > 1) { ...생략 commit('updateState', { movies: [ ...state.movies, ..._uniqBy(Search, 'imdbID')] }) } } } } } 참고 http..
-
Vue 프로젝트 영화 검색 추가 요청프로젝트/영화 검색 (Vue) 2021. 8. 3. 05:45
Vue 프로젝트 영화 검색 추가 요청 1. /src/store/movie.js 수정 - 영화 검색 추가 요청 코드 작성 import axios from 'axios' export default { ... 생략 // 비동기 actions: { async searchMovies({ state, commit }, payload) { ... 생략 const total = parseInt(totalResults, 10) const pageLength = Math.ceil(total / 10) // 추가 요청 if (pageLength > 1) { for (let page = 2; page (number / 10)) break const res = await axios.get(`https://www.omdbapi...
-
Vue 프로젝트 영화 검색프로젝트/영화 검색 (Vue) 2021. 8. 2. 14:16
Vue 프로젝트 영화 검색 1. /src/store/movie.js 영화 검색 코드 작성 - /src/components/Search.vue 메소드에 있는 apply() 코드를 잘라내서 가져옴 /* /src/store/movie.js */ import axios from 'axios' export default { namespaced: true, state: () => ({ movies: [], message: '', loading: false }), getters: {}, mutations: { updateState(state, payload) { Object.keys(payload).forEach(key => { state[key] = payload[key] }) }, resetMovies(state..
-
Vue 프로젝트 Vuex(Store) 구성프로젝트/영화 검색 (Vue) 2021. 8. 2. 09:24
Vue 프로젝트 Vuex(Store) 구성 1. npm i vuex@next 2. /src/store 폴더 생성 3. /src/store/index.js 파일 생성 /* /src/store/main.js */ import { createStore } from 'vuex' export default createStore({ modules: { } }) 4. 생성한 index.js 파일을 /src/main.js 연결 (store 연결) /* main.js */ import { createApp } from 'vue' import App from './App.vue' import router from './routes/index.js' import store from './store/index.js' /* ...
-
Vue 프로젝트 Vuex(Store) 개요프로젝트/영화 검색 (Vue) 2021. 8. 1. 21:59
Vue 프로젝트 Vuex(Store) 개요 1. /src/components/MovieList.vue, /src/components/MovieItem.vue 생성 2. /src/routes/Home.vue 에 MovieList.vue 연결 ... 생략 Vuex(Store) - 중앙 집중식 상태 관리 라이브러리 각 컴포넌트가 데이터를 중앙 집중 저장소에서 공유하여 컴포넌트의 단계가 많아지더라도 쉽고 효율적으로 데이터를 활용 Search.vue 라는 컴포넌트를 확인하면 apply() 메소드를 통해서 영화 정보를 요청해서 가지고 오면 res 라는 변수에 담는다 (Search.vue 컴포넌트 내부에서 데이터를 받아놓은 상태) 해당 데이터를 MovieList.vue 라는 컴포넌트에 데이터를 전달해야한다 관계가 형..
-
Vue 프로젝트 Search - 필터프로젝트/영화 검색 (Vue) 2021. 8. 1. 13:50
Vue 프로젝트 Search - 필터 Vue 프로젝트 Search - 필터 순서 1. /src/components/Search.vue 생성 All Years {{ item }} 2. /src/routes/Home.vue 연결 결과 참고 https://getbootstrap.com/docs/5.0/forms/form-control/ Form controls Give textual form controls like s and s an upgrade with custom styles, sizing, focus states, and more. getbootstrap.com https://getbootstrap.com/docs/5.0/forms/select/ Select Customize the native s ..