모니터 크기에 맞춰 디자인한 반응형 웹사이트가 실제 모바일에서는 엉망으로 보인다. 미디어 쿼리 코드는 분명히 제대로 썼는데 왜 작동 안 할까. 대부분의 개발자들은 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()의 차이···
JavaScript에서 객체를 다루다 보면 Object.keys(), Object.entries(), Object.assign() 같은 메서드들을 마주친다. 다만 대부분의 개발자들은 이 메서드들의 정확한 동작 원리와 언제 어떤 상황에서 써야 하는지 모른 채 인터넷에서 가져온 코드를 그냥 복사해 붙인다. 이번에는 자주 쓰이는 Object 정적 메서드들이 정확···
웹 서비스에서 모달(Modal) 팝업을 구현할 때 z-index가 꼬이거나 배경 스크롤이 멋대로 움직이는 현상을 경험해봤을 것이다. 다만 대부분의 개발자들은 여전히 z-index: 99999 같은 임시방편 스크립트를 남발하거나 중량 라이브러리를 설치해서 해결하려 한다. 이번에는 최신 HTML5 표준 요소인 dialog 태그와 showModal() 메서드가 ···
자바스크립트로 배열을 다루다 보면 for 루프를 반복적으로 쓰거나, 복잡한 중첩 구조로 데이터를 처리한 경험이 있을 것이다. 다만 대부분의 개발자들은 map, filter, reduce 같은 고차 함수가 정확히 뭐하는 건지, 언제 써야 하는지, 성능은 괜찮은지 제대로 알지 못한 채 구글에서 가져온 코드를 그냥 복사해 붙인다. 이번에는 배열 메서드의 동작 원···
웹 개발을 하다 보면 버튼 클릭, 마우스 호버, 스크롤 등의 이벤트로 요소의 스타일을 동적으로 변경해야 하는 순간이 자주 온다. 대부분의 개발자들은 jQuery 시절부터 배운 방식대로 className을 문자열로 직접 조작하거나, 또는 classList 메서드를 제대로 이해하지 못한 채 복잡한 코드를 작성하고 있다. 이번에는 DOM 요소의 클래스를 안전하고···
웹 애플리케이션을 운영하다 보면 사용자가 10MB가 넘는 고화질 사진을 그대로 업로드해 서버 메모리가 튀거나 네트워크 대역폭이 순식간에 고갈되는 현상을 경험해봤을까?대부분의 서비스에서는 업로드 용량 제한 알림 팝업을 띄우거나 서버 백엔드에서 GD, ImageMagick 같은 도구로 썸네일을 생성하는 방식을 사용한다. 다만 클라이언트 브라우저 메모리 안에서 ···
긴 텍스트가 박스를 벗어날 때 어떻게 처리할지는 웹 개발에서 자주 만나는 문제다. 카드 레이아웃, 리스트 아이템, 댓글 목록처럼 고정된 너비에 텍스트를 맞춰야 할 때가 많기 때문이다. 다만 많은 개발자들은 CSS의 text-overflow나 JavaScript의 substring()을 막무가내로 섞어서 쓰거나, 불필요한 라이브러리를 끌어오곤 한다. 이번에는···
배열에서 중복 값을 제거하거나, 객체처럼 키-값을 빠르게 찾아야 할 때 대부분의 개발자들은 for 루프를 돌리거나 filter() 메서드를 중첩해서 사용한다. 다만 이런 방식들은 느리고 코드도 복잡해진다. 자바스크립트의 Map과 Set은 이런 상황에서 훨씬 효율적이고 명확한 해결책을 제공하는데, 많은 개발자들이 여전히 배열 메서드만 고집한다. 이번엔 Map···