프론트엔드235 비동기 - 콜백(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. 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. 헤드라인 만들기 헤드라인을 표시할 컴포넌트 만들기 OMDb API THE OPEN MOVIE DATABASE The OMDb API is a RESTful web service to obtain movie information, all content and images on the site are contributed and maintained by our users. If you find this service useful, please consider making a one-time donation or become a patron. bootstrap의 container를 이용하여 가운데로 내용을 모아주는 방법 https://getbootstrap.com/docs/5.1/layout/containers/ Contai.. 2021. 8. 17. logo 만들기, google fonts 사용 구글 폰트 검색 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 아래와 같은 방법으로 원하는 폰트를 선택한다. 선택을 완료한 후 아래 화면처럼 link 태그를 복사하여 붙여넣는 방법으로 사용한다. index.html에 스타일 적용 Logo.vue 생성 OMDbAPI.COM Logo를 보여줄 Header.vue 파일 수정 {{ nav.name }} 브라우저 확인 2021. 8. 16. 이전 1 ··· 6 7 8 9 10 11 12 ··· 40 다음
