전체 글
-
비동기 - API 비동기 처리 연습JavaScript/JavaScript 2021. 8. 5. 22:50
비동기 - API 비동기 처리 연습 function fetchMovies(title) { // 대기(pending): 이행하거나 거부되지 않은 초기 상태. const OMDB_API_KEY = 'abcdefg123' return new Promise(async (resolve, reject) => { try { const res = await axios.get(`https://omdbapi.com?apikey=${OMDB_API_KEY}&s=${title}`) // 이행(fulfilled): 연산이 성공적으로 완료됨. resolve(res) } catch (error) { console.log(error.message) // 거부(rejected): 연산이 실패함. reject('ITBlue?!') } ..
-
비동기 - 예외 처리JavaScript/JavaScript 2021. 8. 3. 14:49
비동기 - 예외처리 (then, catch, finally) then - 작업이 성공적으로 완료되면 Promise.resolve() 메소드를 통해 결과 값으로 이행하는 Promise 객체를 반환 - 실행 순서를 보장 - 콜백 지옥과 패턴이 동일해서 권장하지 않음 - async & await 패턴을 사용하기 어려운 환경일때 대체해서 사용 - 비동기 패턴을 대신해서 사용 function a() { return new Promise((resolve) => { setTimeout(() => { console.log('A') resolve() }, 1000) }) } function test() { a().then(() => { console.log('B') }) } test() /* 실행순서 */ A B cat..
-
비동기 - 콜백과 프로미스 객체의 이해JavaScript/JavaScript 2021. 8. 3. 11:06
동기 동기 방식 (Synchronous) - 코드를 작성한 순서대로 동작하는 것 function a() { console.log('A') } function b() { console.log('B') } a() b() /* 실행 결과 */ A B 비동기 방식 (Asynchronous) - 특정 코드의 연산이 끝날 때까지 기다리지 않고, 그동안 다른 코드를 실행 - 실행 순서가 보장되지 않는다 - 비동기 처리의 방식은 setTimeOut, callback, promise 등이 있다 비동기 - 콜백과 프로미스 객체의 이해 콜백 함수 (callback) - 특정 함수에 매개변수로 전달되는 함수 (데이터처럼 사용되는 함수) - 실행 순서를 보장 - 콜백이 많아지면 관리하기가 불편해진다 (콜백 지옥) functio..
-
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 라는 컴포넌트에 데이터를 전달해야한다 관계가 형..