코딩하는 곰돌이

[TroubleShooting] 프로토타입, 디바운싱, 쓰로틀링 사례

이론이 실무를 만났을 때: 트러블슈팅 3가지 사례앞선 세 편에서 프로토타입 체인, 프로토타입 오염, 디바운싱과 쓰로틀링을 다뤘습니다. 이번 편은 조금 다릅니다. 이 개념들이 실제 프로젝트에서 어떤 문제를 만났고, 어떻게 해결로 이어졌는지 사례 중심으로 정리해보려 합니다. 개념을 안다는 것과, 문제 상황에서 그 개념을 떠올려 적용할 수 있다는 것은 다른 차원의 이야기라고 생각합니다.사례 1: 검색 자동완성이 서버를 압박하던 문제증상검색 자동완성 기능을 붙이고 나서, 백엔드 팀에서 특정 엔드포인트의 요청 수가 비정상적으로 많다는 이야기가 나왔습니다. 실제 검색 전환율에 비해 요청 수가 지나치게 많았습니다.원인 파악input 이벤트에 바로 fetch를 연결해둔 상태였습니다.searchInput.addEvent..

[Frontend] 디바운싱과 쓰로틀링

디바운싱과 쓰로틀링, 같은 문제를 다르게 푸는 두 가지 방법검색창에 글자를 입력할 때마다 API를 호출한다면 어떻게 될까요. scroll 이벤트가 발생할 때마다 레이아웃을 다시 계산한다면요. 브라우저는 이런 이벤트를 초당 수십, 수백 번씩 발생시킬 수 있습니다. 이 모든 이벤트에 성실하게 반응하는 코드는 사용자 경험을 해치고, 서버에는 불필요한 부하를 줍니다.디바운싱과 쓰로틀링은 이 문제를 푸는 대표적인 두 가지 기법입니다. 둘 다 "이벤트 실행 빈도를 줄인다"는 목적은 같지만, 접근 방식이 완전히 다릅니다. 이 차이를 정확히 설명하지 못하면 실무 경험이 있어도 면접에서 애매하게 답하게 되는 경우가 많습니다.1. 문제 상황: 왜 필요한가먼저 이벤트가 얼마나 자주 발생하는지 감을 잡아보겠습니다.window..

[Frontend] 프로토타입 상속 구현

Object.create()와 프로토타입지난 글에서 프로토타입 체인의 기본 동작 원리를 살펴봤습니다. 이번에는 한 걸음 더 들어가서, new 없이 프로토타입 상속을 구현하는 Object.create()와, 프로토타입 체인이라는 구조 자체가 만들어내는 보안 취약점인 프로토타입 오염을 다뤄보겠습니다. 둘은 언뜻 관계없어 보이지만, 사실 같은 동전의 양면입니다 — 프로토타입 체인을 "의도적으로 설계"하면 Object.create()가 되고, "의도치 않게 오염"되면 취약점이 됩니다.1. new 없이 상속하기: Object.create()new Person()은 익숙하지만, 사실 프로토타입 상속을 만드는 방법은 하나가 아닙니다. Object.create()는 생성자 함수도, class도 거치지 않고 프로토타입 ..

[Frontend] 프로토타입 알아보기

자바스크립트 프로토타입, 정말 이해하고 계신가요?class 키워드에 익숙해진 요즘, 프로토타입은 "예전에 쓰던 문법" 정도로 여겨지곤 합니다. 하지만 자바스크립트 엔진 내부에서는 지금 이 순간에도 프로토타입 체인이 쉼 없이 동작하고 있습니다. 면접에서 유독 이 주제가 자주 나오는 이유도 여기에 있습니다 — "자바스크립트를 얼마나 깊이 이해하고 있는가"를 가장 효율적으로 확인할 수 있는 질문이기 때문입니다.이 글에서는 프로토타입이 왜 존재하는지부터, 프로토타입 체인이 실제로 어떻게 동작하는지, 그리고 class 문법이 이것을 어떻게 감싸고 있는지까지 순서대로 정리해보겠습니다.1. 프로토타입은 왜 필요했을까자바스크립트에는 원래 클래스가 없었습니다. 대신 객체가 다른 객체를 참조해서 속성과 메서드를 "빌려 쓰..