1. 영화 데이터 가져오는 JS 코드 리팩토링첫번째 과제에서는 데이터를 가져와서 화면에 보여주기만해서 데이터를 가져오는 동작(fetch)와 카드를 만드는 동작(createMovieCard)을 한 곳에 두었다 함수가 데이터를 가져오고, 카드를 만드는 2가지 역할을 하면서나중에 고쳐야지 생각했는데 마침 이번에는 메인페이지의 카드, 헤더, 상세페이지에 개별 영화가 들어가면서 코드를 분리하는게 좋겠다고 생각했다그리고 async/await로 도전해봤다 수정 결과1. fetchMovies먼저 영화 데이터를 가져오는 함수를 만들었다 해당 함수는 fetch한 결과를 가져와 json으로 변환 후, 사용할 results를 구조분해 할당으로 담았다results안에는 영화(객체)를 담은 배열이 들어있다앗 아래 export는 ..
개념 공부를 할 때 가장 헷갈리는 비동기여태 눈치껏 사용하다가 제대로 사용해 보고 싶어서 시작한다,, 가보자고,,🔥Promise이해하고 보니 명쾌한 정의!비동기 작업을 처리하는 객체, 비동기 작업을 실행했지만, 결과를 반환하지 않은 객체 ( 왜냐? resolve, reject를 호출하지 않으면 영원히 pending 상태) const promise = new Promise((resolve, reject) => { if (작업이 성공적으로 완료됨) { resolve(결과값); // 성공적으로 완료되었으므로 resolve 호출 } else { reject(에러); // 작업이 실패했으므로 reject 호출 }});//딴짓//딴짓중.. //계속 다른 작업중.. promise .t..
옵셔널 체이닝(?.) 과 널 병합 연산자(??)옵셔널 체이닝과 널 병합 연산자(nullish)는 객체의 속성을 접근할 때 안전하게 접근하기 위해 사용된다 아래와 같은 객체가 있다면const user = { name: 'John', address: { city: 'New York', zipcode: '10001' }}; 1. 옵셔널 체이닝(?.)객체의 속성이 undefined/null 이라면 undefined 를 반환하고, 속성이 있다면 해당 속성에 접근한다const city = user.address?.city;console.log(city); // New Yorkconst contry = user.address?.contry;console.log(contry); // undefined ..
this를 명시적으로 바꿔주는 메소드를 알아보자 apply, call은 유사 배열 객체에 배열 메소드를 사용하는 용도로 많이 쓴다ex) arguments, NodeList, HTMLCollections bind는 영구적으로 this를 바꾼 새로운 함수를 반환한다메소드 내부 중첩 함수, 콜백함수에서 this 불일치 문제를 해결하는 용도로 많이 쓴다 call, apply, bind 형태callfunc.call(thisArg[, arg1, arg2, ...args])apply와 같지만 두번째 인자에 ,로 구분된 리스트 형태로 전달한다 applyfunc.apply(thisArg [,argusArray])첫번째 인자로 this로 사용할 요소, 두번째 인자로 함수에 전달할 요소를 배열로 전달한다 (array = a..
이벤트 핸들러이벤트 발생 후, 호출될 함수를 브라우저에 호출을 위임한다이때 호출될 함수를 "이벤트 핸들러"브라우저에 이벤트 핸들러 호출을 위임하는 것을 "이벤트 핸들러 등록" 브라우저는 사용자의 이벤트를 감지할 수 있기 때문에, 개발자가 언제 이벤트가 발생할 지 모르는 이벤트에 직접 이벤트 핸들러를 호출하기 보다 브라우저에 이벤트 핸들러 호출을 위임하는 것이다. 이벤트 핸들러 등록 방법 3가지1. HTML 이벤트 핸들러 어트리뷰트 👎HTML은 마크업만! 동적인 상호작용은 JS에서 작성하기 🔥on+이벤트타입 (onclick, onfocus, onmouseenter..)문을 할당 (함수 참조❌ ) = 어트리뷰트값으로 할당된 값은 암묵적으로 이벤트 핸들러의 함수 몸체하나의 이벤트 핸들러만 바인딩Even..