동적으로 생성되는 팝업, 무한 스크롤로 추가되는 리스트, 또는 외부 타사(Third-party) 위젯의 DOM 변화를 실시간으로 감지해야 하는 문제를 경험해봤을 것이다. 다만 정확한 원인이나 효율적인 감지 방법을 모른 채 구식 이벤트를 쓰다가 브라우저가 먹통이 되거나 메모리 누수가 발생하는 경우가 많다.과거에는 구식 Mutation Events를 가져와 복···
웹 애플리케이션을 개발하면서 특정 컴포넌트나 차트의 크기가 바뀔 때 레이아웃을 다시 그리려다 화면이 순간적으로 멈칫하는 현상을 경험해봤을 것이다. 다만 정확한 원인이 window 객체의 onresize 이벤트가 유발하는 레이아웃 리플로우(Reflow)와 과호출 때문이라는 점을 모른 채 무작정 디바운스(Debounce) 코드만 붙이는 경우가 많다. 이번에는 ···
Node.js Express 프레임워크로 API 서버를 구축하여 테스트하다가 콘솔창에 Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 라는 붉은색 에러 메시지를 마주친 적이 있을 것이다. 클라이언트에는 정상적으로 응답이 전달된 것처럼 보이는데, 서버 측에서···
동적으로 추가된 DOM 요소에 이벤트 핸들러를 붙였는데 작동하지 않는 경험을 해봤을까. 대부분의 개발자가 처음엔 각 요소마다 addEventListener()를 반복해서 붙이다가, 나중에 요소가 추가될 때마다 이벤트를 다시 등록해야 하는 악순환에 빠진다. 이번엔 이벤트 위임의 정확한 동작 원리와 실제 구현 방법, 그리고 흔한 실수까지 완벽하게 정리해서 소개···
지도 위에 마커가 수백 개, 수천 개씩 표시되는 상황을 경험해봤을까. 처음엔 잘 작동하다가 마커가 늘어날수록 지도가 버벅거리고, 줌인/줌아웃 할 때마다 화면이 멈춘다. 다만 대부분의 개발자들은 이게 마커 개수 때문인지, Kakao Map API의 문제인지, 아니면 자신의 코드가 비효율적인지 정확히 파악하지 못한 채 무작정 마커를 숨겼다 보였다 반복한다. 이···
자바스크립트에서 두 값을 비교할 때 예상과 다른 결과가 나온 경험이 있을까. 가장 흔한 원인은 == 연산자가 자동으로 타입을 변환하기 때문이다. 다만 이 타입 강제 변환 규칙이 정확히 뭔지, 왜 일어나는지, 어떻게 피하는지 제대로 아는 개발자는 많지 않다. 이번에는 타입 강제 변환이 정확히 어떻게 동작하는지, 언제 예상 밖의 결과가 나오는지, 그리고 버그를···
웹 서비스를 개발하다 보면 사용자가 여러 개의 탭을 동시에 켜두고 작업할 때 특정 탭에서 로그아웃을 하거나 장바구니 목록을 변경해도 다른 탭에 즉시 반영되지 않는 문제를 경험해봤을 것이다. 다만 대부분의 개발자들은 localStorage의 storage 이벤트를 편법으로 활용하거나 주기적인 폴링(Polling)으로 서버와 브라우저 자원을 낭비하는 경우가 많···
배열을 정렬할 때 sort() 메서드를 쓰는데, 숫자가 제대로 정렬 안 되거나 한글이 이상하게 섞이거나 객체 배열에서 특정 필드로 정렬이 안 되는 경험을 해봤을까? 대부분의 개발자들은 sort()를 잠깐 썼을 때는 문제없이 작동하는 것처럼 보이지만, 실제 운영 데이터에서는 정렬이 엉망이 된다는 사실을 모르고 있다. 이번에는 JavaScript sort()가···
마우스가 요소 위에 올라갔을 때 처리하려고 mouseover 이벤트를 붙였는데, 자식 요소가 여러 개면 이벤트가 계속 또 발생한다. 이게 뭐 하는 짓인가 싶으면서 결국 mouseenter로 바꿔보니 한 번만 실행된다. 다만 대부분의 개발자들은 mouseover와 mouseenter의 정확한 차이를 모른 채 인터넷에서 가져온 코드를 그냥 쓴다. 이번에는 두 ···
웹 애플리케이션에서 수만 개가 넘는 데이터를 정렬하거나 복잡한 암호화 연산을 실행할 때 브라우저 화면이 완전히 멈춰버리는 현상을 경험해봤을 것이다. 클릭도 안 되고 로딩 스피너마저 멈추는 이유는 자바스크립트가 단일 스레드(Single Thread)로 동작하기 때문이다. 다만 스크립트가 메인 스레드를 독점할 때 백그라운드에서 연산을 분리하는 정확한 방법을 모···
웹 개발에서 버튼 클릭이나 폼 제출 같은 사용자 상호작용을 처리할 때, 많은 개발자들이 HTML onclick 속성과 JavaScript addEventListener() 메서드 중 뭘 써야 할지 헷갈려 한다. 둘 다 이벤트를 감지하고 처리하는 기능을 하지만, 실제로는 완전히 다른 방식으로 동작한다. 이번에는 두 방법의 정확한 차이가 뭔지, 언제 뭘 써야 ···
비동기 처리는 JavaScript 개발에서 피할 수 없는 숙제다. 다만 대부분의 개발자들은 async/await 문법이 내부에서 어떻게 동작하는지 정확히 모른 채 단순히 "동기처럼 코드를 쓸 수 있다"는 장점만 알고 있다. 결국 복잡한 비동기 흐름을 다룰 때 예상과 다른 동작에 당황하거나, 성능 최적화를 못 하는 상황이 벌어진다. 이번에는 async/awa···
파일 업로드를 처리할 때마다 복잡한 문자열 조합이나 라이브러리에 의존했던 경험이 있을까. 대부분의 개발자들은 FormData 객체가 존재한다는 것은 알지만, 정확히 어떤 상황에서 어떻게 써야 하는지 모른 채 구글링한 코드를 그냥 복사해 붙인다. 이번에는 FormData API가 정확히 뭔지, 일반 객체 전송과 뭐가 다른지, 실제로 파일을 어떻게 처리하는지 ···
웹 애플리케이션을 개발하면서 URL의 쿼리 스트링(Query String)에서 특정 파라미터 값을 추출하거나 변경해야 하는 상황을 자주 겪어봤을 것이다.다만 정규표현식이나 split() 함수를 조합해서 직접 파싱하다가 복잡한 인코딩 문자나 중복 키 값 때문에 예기치 못한 버그를 만들어내는 경우가 많다.이번에는 URLSearchParams API가 정확히 무···
DOM 요소를 선택할 때 JavaScript 개발자들은 다양한 메서드를 쓴다. 그 중에서 querySelector()와 getElementById()는 가장 흔히 사용되는데, 대부분의 개발자들은 둘의 정확한 차이와 성능 차이를 모르고 그냥 편한 대로 섞어 쓴다. 이번에는 두 메서드가 정확히 뭔지, 언제 뭘 써야 하는지, 그리고 어떤 게 더 빠른지 완벽하게 ···
긴 웹페이지를 스크롤할 때 모든 이미지가 미리 로드되면 초기 페이지 로딩 속도는 엄청나게 느려진다. 특히 전자상거래 사이트나 SNS처럼 이미지가 수십 개 이상인 페이지라면 사용자가 눈으로 볼 수 없는 아래쪽 이미지까지 다운로드하느라 네트워크와 브라우저 메모리가 낭비된다. 대부분의 개발자는 이미지 최적화의 중요성을 알면서도 단순히 만 쓰고 넘어간다. 이번에는···
자바스크립트 개발 중 복잡한 객체나 배열을 복사해서 다룰 때 원본 데이터가 함께 수정되는 버그를 경험해봤을 것이다.다만 대부분의 개발자들은 이 문제를 해결하려고 JSON.parse(JSON.stringify(obj)) 같은 편법을 사용하거나, 정확한 원인과 한계를 모른 채 얕은 복사 연산자를 그대로 사용한다.이번에는 JSON 방식의 치명적인 한계점부터 최신···
사용자 입력에 따라 실시간으로 API를 호출하거나 스크롤 이벤트에 맞춰 UI를 업데이트할 때 브라우저가 느려지거나 서버에 엄청난 요청이 몰리는 현상을 경험해봤을 것이다.다만 연동된 이벤트가 초당 수십 번 이상 실행되는 정확한 원인과 이를 제어하는 최적화 기법을 모른 채 방치하는 경우가 많다.이번에는 연속적으로 발생하는 이벤트를 효율적으로 제어하는 Debou···