분류 전체보기474 비동기 - 콜백(callback)과 프로미스 객체 동기방식: 선언한 순서대로 동작하는 방식 main.js function a() { console.log('A'); } function b() { console.log('B'); } a() b() 확인 비동기 만약 A함수를 1초 뒤에 동작하게 설정한다면 뒤에 코드인 B 함수가 먼저 출력하게 된다. 이때 순서를 보장할수 있게 해주도록 callback함수를 이용해서 비동기 처리를 한다. function a(callback) { // 1초후 동작하도록 설정 setTimeout(() => { console.log('A'); callback(); }, 1000) } function b() { console.log('B'); } // a함수를 호출할때 callvack함수를 이용해서 순서를 보장한다(비동기) a(fun.. 2021. 9. 9. 영화목록에서 ID 중복 제거 중복된 ID를 확인하기 위해서 MovieItem.vue 코드를 수정한다. {{ movie.imdbID }} 브라우저 확인 (중복된 데이터를 확인할 수 있다.) 프론트쪽에서 중복된 데이터를 제거하기 위해서 lodash api에 uniqBy 메소드를 이용한다. 공식 문서: https://lodash.com/docs/4.17.15#uniqBy Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained t.. 2021. 9. 9. vuex(store) 구성 vuex 설치: npm i vuex@next 공식 문서 https://next.vuex.vuejs.org/ What is Vuex? | Vuex What is Vuex? NOTE This is the docs for Vuex 4, which works with Vue 3. If you're looking for docs for Vuex 3, which works with Vue 2, please check it out here. Vuex is a state management pattern + library for Vue.js applications. It serves as a centralize next.vuex.vuejs.org vue 3 버전은 한글지원이 안되기 때문에 vue 2 버전을 참고해서 사.. 2021. 9. 3. Vvuex(store) 개요 부모와 자식간에 데이터 공유하는 방법: Props를 이용 상, 하위 요소간에 데이터를 공유하는 방법: Provide/Inject 이용(중간 요소가 있다면 건너띄고 전달할 수 있다.) 형제 컴포넌트 끼리 데이터를 공유하는 방법: Vvuex라이브러리 이용(Store), Store라는 중간매개체를 이용하여 데이터 공유 가능 중앙집중식 상태관리 패턴 라이브러리라고 한다. 코드 수정(Home.vue) MovieList.vue 생성 MovieItem.vue 생성 2021. 9. 1. Search - 버튼 구현하기 @keyup.enter="apply" : 엔터 키를 눌렀을때 apply 함수가 실행되도록 설정 flex-shrink: 0 : 가로넓이가 지정한 값으로 고정되도록 설정 omdbapi 사용을 위해서 Usage 부분에 url을 복사한다. https://www.omdbapi.com/ OMDb API - The Open Movie Database www.omdbapi.com 실제 http 요청을 받을수 있도록 패키지 설치 명령어: npm i axios async: 비동기 처리 await: 동작을 기다리도록 설정 XHR: XMLHttpRequest의 약어로 웹 브라우저와 웹 서버간에 데이터 전송 API를 의미한다. 따라서 개발자 도구의 네트워크 탭으로 페이지에서 발생하는 데이터 요청은 XHR메뉴로 필터링할 수 있다.. 2021. 8. 31. Search - 필터 구현하기 부트 스트랩 이용 URL https://getbootstrap.com/docs/5.1/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.1/forms/select/ Select Customize the native s with custom CSS that changes the element’s initial appearance. getbootstrap.com 검색기능을 구현할 컴포넌트 생성(Search.vue) All Year.. 2021. 8. 30. 이전 1 ··· 15 16 17 18 19 20 21 ··· 79 다음
