👨💻 JavaScript7 [JavaScript] 옵셔널 체이닝 '?.'으로 객체 다루기 ✔ 들어가며 프로퍼티가 없는 중첩 객체에 접근할 때, 에러 없이 안전하게 접근할 수 있는 방법이 필요한 경우가 있다. 프로퍼티의 여부를 확인하고 접근하는 방법도 있지만, 옵셔널 체이닝을 활용하면 표현식이 더 짧고 간단해진다. ✔ 옵셔널 체이닝이 필요한 상황들 💡 오브젝트 프로퍼티 접근 user.address.street로 접근할 때, 사용자들 중 몇몇은 주소 정보를 가지고 있지 않다면 에러가 발생한다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 💡 DOM 요소 접근 페이지에 존재하지 않는 요소에 접근하여 요소의 정보를 가져오려 하면 문제가 .. 2022. 12. 4. [JavaScript] 이벤트 다루기 - 버블링, 캡처링, 위임, debounce, throttle ✔ Intro 이벤트 다루기 버블링, 캡처링, 위임, 디바운싱, 쓰로틀링에 대해 살펴본다. 계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 즉, 이벤트가 전파(Event Propagation)되는데 전파 방향에 따라 버블링(Event Bubbling)과 캡처링(Event Capturing)으로 구분할 수 있다. addEventListener 메소드의 세번째 매개변수에 true를 설정하면 캡처링으로 전파되는 이벤트를 캐치하고 false 또는 미설정하면 버블링으로 전파되는 이벤트를 캐치한다. 👀 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 .. 2022. 11. 27. [JavaScript] 옵저버 패턴 - IntersectionObserverAPI ✔ Intro Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다. 일반적으로 알려진 해결방법은 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기 때문에 좋지 못한 사용자 경험을 낳는다. Intersection Observer API 는 콜백 함수를 등록할 수 있어 감시하고자 하는 요소가 다른 요소(viewport)에 들어가거나 나갈 때, 요청한 부분만큼 두 요소의 교차 부분이 변경될 때마다 실행될 수 있다. 즉, 사이트는 요소의 교차를 지켜보기 위해 메인 스레드를 사용할 필요가 없고 브라우저는 원하는 대로 교차 영역 관리를 최적화할 수 있다. 뉴스 무한스크롤을 구현.. 2022. 11. 27. [JavaScript] 객체 응용 - 생성자 함수(feat. 인스턴스) ✔ 들어가며 자바스크립트 객체의 this, 생성자 함수, 프로토타입을 살펴본다. 다행히도 ES6에서 자바스크립트의 Class 문법이 추가되었다. 하지만, 자바스크립트의 Class 문법은 Prototype 기반으로 구현된 자바스크립트의 문법적 편의 기능일 뿐 엔진 내부적으로는 prototype 방식으로 작동되기 때문에, Class를 활용하더라도 this, 생성자 함수, 프로토타입의 개념과 작동방식을 짚고 넘어가 보려 한다. this 포스팅을 이어, 이번 포스팅은 인스턴스를 곁들인 생성자 함수를 알아본다. 2022.11.13 - [Dev/JavaScript] - [JavaScript] 자바스크립트의 객체 응용 - this 👀 생성자(constructor) 함수란? 생성자 함수란 new 키워드와 함께 객체를 .. 2022. 11. 18. [JavaScript] 객체 응용 - this ✔ 들어가며 자바스크립트 객체의 this, 생성자 함수, 프로토타입을 살펴본다. 다행히도 ES6에서 자바스크립트의 Class 문법이 추가되었다. 하지만, 자바스크립트의 Class 문법은 Prototype 기반으로 구현된 자바스크립트의 문법적 편의 기능일 뿐 엔진 내부적으로는 prototype 방식으로 작동되기 때문에, Class를 활용하더라도 this, 생성자 함수, 프로토타입의 개념과 작동방식을 짚고 넘어가 보려 한다. 앞서, 이번 포스팅은 this 를 다룬다. 자바스크립트의 this개념과 특징을 이해하고 정리하는데에 모던 자바스크립트 deepdive의 저자 이웅모님의 poiemaweb 블로그에서 가장 많이 도움 받았다. 보다 전문적인 지식을 얻으려면 해당 블로그를 꼭 가보길 추천한다.(링크 하단 참고.. 2022. 11. 13. [JavaScript] 배열 반복을 효과적으로 만드는 11가지 메서드 ✔ 들어가며 이번 포스팅은 해외 저자의 글을 요약 및 번역하고 살을 붙여 옮겼다. 자바스크립트 배열 반복을 효과적으로 만드는 11가지 메서드에 대해 알아본다. 원문은 하단 링크로 남긴다. 🙋♂️ 저자의 서문 Javascript의 일상적인 프로그래밍에서는 배열 요소에 대해 일종의 작업을 수행해야 합니다. 배열의 각 항목을 처리하는 것은 매우 일반적입니다. 따라서 각 배열 요소의 처리를 더 쉽고 효율적으로 만들기 위해 Javascript는 Iteration 메서드의 힘을 사용합니다. ✔ 반복(Iteration) 메서드 반복 매서드은 배열의 모든 요소에 대해 한 번에 하나씩 작동하는 방법이다. 이러한 메서드는 loof와 유사하다. 각 함수들을 활용하여 배열을 반복하고, 각 항목에 대해 일부 기능을 수행하고,.. 2022. 11. 11. 이전 1 2 다음
