웹 애플리케이션을 개발하면서 URL의 쿼리 스트링(Query String)에서 특정 파라미터 값을 추출하거나 변경해야 하는 상황을 자주 겪어봤을 것이다.다만 정규표현식이나 split() 함수를 조합해서 직접 파싱하다가 복잡한 인코딩 문자나 중복 키 값 때문에 예기치 못한 버그를 만들어내는 경우가 많다.이번에는 URLSearchParams API가 정확히 무···
DOM 요소를 선택할 때 JavaScript 개발자들은 다양한 메서드를 쓴다. 그 중에서 querySelector()와 getElementById()는 가장 흔히 사용되는데, 대부분의 개발자들은 둘의 정확한 차이와 성능 차이를 모르고 그냥 편한 대로 섞어 쓴다. 이번에는 두 메서드가 정확히 뭔지, 언제 뭘 써야 하는지, 그리고 어떤 게 더 빠른지 완벽하게 ···
긴 웹페이지를 스크롤할 때 모든 이미지가 미리 로드되면 초기 페이지 로딩 속도는 엄청나게 느려진다. 특히 전자상거래 사이트나 SNS처럼 이미지가 수십 개 이상인 페이지라면 사용자가 눈으로 볼 수 없는 아래쪽 이미지까지 다운로드하느라 네트워크와 브라우저 메모리가 낭비된다. 대부분의 개발자는 이미지 최적화의 중요성을 알면서도 단순히 만 쓰고 넘어간다. 이번에는···
자바스크립트 개발 중 복잡한 객체나 배열을 복사해서 다룰 때 원본 데이터가 함께 수정되는 버그를 경험해봤을 것이다.다만 대부분의 개발자들은 이 문제를 해결하려고 JSON.parse(JSON.stringify(obj)) 같은 편법을 사용하거나, 정확한 원인과 한계를 모른 채 얕은 복사 연산자를 그대로 사용한다.이번에는 JSON 방식의 치명적인 한계점부터 최신···
사용자 입력에 따라 실시간으로 API를 호출하거나 스크롤 이벤트에 맞춰 UI를 업데이트할 때 브라우저가 느려지거나 서버에 엄청난 요청이 몰리는 현상을 경험해봤을 것이다.다만 연동된 이벤트가 초당 수십 번 이상 실행되는 정확한 원인과 이를 제어하는 최적화 기법을 모른 채 방치하는 경우가 많다.이번에는 연속적으로 발생하는 이벤트를 효율적으로 제어하는 Debou···
웹 개발을 하다 보면 요소의 위치를 조정해야 할 일이 수없이 많다. 그런데 CSS position 속성을 정확히 이해하지 못한 채 top, left, right, bottom 값만 무작정 조정하다가 레이아웃이 엉망이 되는 경험을 누구나 한 번쯤 해봤을 것이다. 실무에서는 position의 종류에 따라 요소가 배치되는 기준점(containing block)이···
여러 개의 비동기 작업을 동시에 처리해야 할 때, Promise 조합 메서드를 쓰지 않고 반복문으로 하나씩 기다리는 개발자들이 많다. 다만 대부분은 Promise.all()만 알고 있거나, 하나의 Promise가 실패하면 전체가 실패하는 문제를 겪고도 그 원인을 정확히 모른 채 코드를 작성한다. 이번에는 세 가지 메서드의 동작 방식, 언제 써야 하는지, 그···
모니터 크기에 맞춰 디자인한 반응형 웹사이트가 실제 모바일에서는 엉망으로 보인다. 미디어 쿼리 코드는 분명히 제대로 썼는데 왜 작동 안 할까. 대부분의 개발자들은 CSS 파일만 들었다 놨다 하면서 시간을 낭비한다. 실제로는 HTML 구조, 뷰포트 설정, CSS 캐싱, 선택자 우선순위 같은 여러 요인이 복합적으로 작용한다. 이번에는 미디어 쿼리가 작동하지 않···
웹 레이아웃을 짤 때 Grid를 써야 하나 Flexbox를 써야 하나 고민한 적 있을까. 대부분의 개발자들은 둘 다 '정렬된 박스들'이라고 생각해서 그냥 익숙한 것만 쓰거나, 구글에서 답을 찾아서 복사-붙여넣기한다. 다만 두 방식은 근본적으로 다른 목적을 가지고 있고, 어떤 상황에서 어느 것을 쓰느냐에 따라 코드 복잡도와 유지보수성이 완전히 달라진다. 이번···
Flexbox를 처음 배울 때 가장 헷갈리는 부분이 뭘까. 아마도 여러 정렬 속성들이 정확히 언제, 어느 축에서 동작하는지 구분하지 못하는 것일 거다. justify-content, align-items, align-self가 각각 뭐 하는 건지, 그리고 왜 원하는 방향으로 정렬이 안 되는지 모르는 채 속성값을 이것저것 막 바꿔보던 경험 말이다. 다만 대부···
프론트엔드 웹 개발을 하다 보면 HTML 요소에 동적 ID나 상태 값을 임시로 저장해야 하는 상황을 자주 겪게 된다.다만 클래스(class) 이름에 파싱하기 힘든 데이터 값을 억지로 욱여넣거나 브라우저 명세에 없는 비표준 속성을 무분별하게 정의해서 마크업을 오염시키는 경우가 많다.이번 글에서는 HTML5 커스텀 데이터 속성(data-*)이 정확히 무엇인지,···
자식 요소의 체크 상태나 에러 유무에 따라 부모 요소의 배경색이나 레이아웃을 변경해야 하는 상황을 경험해봤을 것이다.다만 이전에는 CSS만으로 부모 선택자를 지정할 방법이 없어 어쩔 수 없이 JavaScript 이벤트 리스너로 클래스를 붙였다 떼었다 하는 복잡한 방식을 사용하는 경우가 많았다.이번에는 CSS :has() 의사 클래스가 정확히 무엇인지, 왜 ···
배열 데이터를 처리할 때 map, filter, reduce를 연쇄적으로 조합하면 코드는 깔끔해진다. 하지만 대부분의 개발자들은 이 방식이 배열을 몇 번이나 반복 순회하는지, 그로 인해 성능이 얼마나 떨어지는지 제대로 이해하지 못한 채 쓰고 있다. 같은 결과를 내면서도 한 번의 순회로 끝낼 수 있는데도 말이다. 이번에는 메서드 체이닝의 성능 문제가 정확히 ···
웹 애플리케이션에서 버튼 클릭 한 번으로 텍스트를 복사하는 기능을 구현할 때 과거 사용하던 document.execCommand('copy')가 동작하지 않거나 콘솔에 경고 메시지가 출력되는 현상을 경험해봤을 것이다. 다만 대부분의 개발자들은 대체 기술인 Clipboard API의 비동기 특성이나 보안 권한 조건을 제대로 모른 채 기존 구형 코드를 그대로 ···
웹 서비스에서 데이터를 연속으로 불러오는 무한 스크롤(Infinite Scroll)이나 이미지 지연 로딩(Lazy Loading)을 구현할 때, 스크롤 이벤트를 등록했다가 브라우저가 버벅거리는 현상을 경험해봤을 것이다.다만 스크롤 이벤트가 발생할 때마다 실행되는 콜백 함수가 브라우저 메인 스레드를 얼마나 점유하는지, 그리고 왜 이 문제가 발생하는지 정확한 ···
웹 애플리케이션을 개발하다 보면 사이드바, 모달, 메인 콘텐츠 영역 등 다양한 위치에서 재사용되는 카드 컴포넌트의 레이아웃이 지저분하게 깨지는 현상을 경험해봤을 것이다. 다만 대부분의 개발자들은 뷰포트 기준 미디어 쿼리의 한계 때문이라는 정확한 원인이나 해결책을 모르는 경우가 많다.이번에는 CSS Container Queries가 정확히 뭔지, 왜 필요한지···
개발자들이 동적으로 생성된 요소에 클릭 이벤트를 붙일 때 흔히 하는 실수가 있다. 요소를 생성한 후 그 요소에 직접 이벤트 리스너를 달거나, 새 요소가 추가될 때마다 반복해서 리스너를 붙이는 식이다. 다만 대부분의 개발자들은 이 방식이 왜 비효율적인지, 그리고 얼마나 많은 메모리를 낭비하고 있는지 모른 채 프로젝트를 진행한다.이번에는 JavaScript 이···
문자열에서 특정 패턴을 찾아 바꾸는 작업은 개발에서 정말 자주 마주친다. 주소록 데이터를 정제할 때, API 응답값의 특수문자를 처리할 때, URL 쿼리 파라미터를 인코딩할 때도 그렇다. 대부분의 개발자들은 그냥 replace()를 쓰거나, 정규표현식과 g 플래그를 붙여서 구글에서 본 코드를 복사한다. 다만 replace()와 replaceAll()의 차이···