웹 페이지를 만들다 보면 요소의 너비와 높이를 정했는데 레이아웃이 자꾸 깨진다는 경험이 흔하다. 특히 padding이나 border를 추가했을 때 요소가 예상보다 커지는 현상을 겪는 개발자들이 많다. 다만 이 문제의 정확한 원인과 해결책을 제대로 아는 사람은 드물다. 이번에는 CSS Box Model이 정확히 뭔지, 왜 계산 오류가 발생하는지, box-si···
자바스크립트에서 두 값을 비교할 때 예상과 다른 결과가 나온 경험이 있을까. 가장 흔한 원인은 == 연산자가 자동으로 타입을 변환하기 때문이다. 다만 이 타입 강제 변환 규칙이 정확히 뭔지, 왜 일어나는지, 어떻게 피하는지 제대로 아는 개발자는 많지 않다. 이번에는 타입 강제 변환이 정확히 어떻게 동작하는지, 언제 예상 밖의 결과가 나오는지, 그리고 버그를···
웹 서비스를 개발하다 보면 사용자가 여러 개의 탭을 동시에 켜두고 작업할 때 특정 탭에서 로그아웃을 하거나 장바구니 목록을 변경해도 다른 탭에 즉시 반영되지 않는 문제를 경험해봤을 것이다. 다만 대부분의 개발자들은 localStorage의 storage 이벤트를 편법으로 활용하거나 주기적인 폴링(Polling)으로 서버와 브라우저 자원을 낭비하는 경우가 많···
개발자들이 가장 자주 겪는 CSS 문제 중 하나가 바로 수직 정렬이다. vertical-align: middle을 써도 텍스트가 가운데 안 뜨고, 이미지와 텍스트 사이에 이상한 공백이 생기고, 버튼 안의 아이콘이 삐뚤어진다. 다만 대부분의 개발자들은 이 문제의 원인이 정확히 뭔지, 왜 vertical-align이 안 되는 건지 모른 채 인터넷에서 가져온 코···
배열을 정렬할 때 sort() 메서드를 쓰는데, 숫자가 제대로 정렬 안 되거나 한글이 이상하게 섞이거나 객체 배열에서 특정 필드로 정렬이 안 되는 경험을 해봤을까? 대부분의 개발자들은 sort()를 잠깐 썼을 때는 문제없이 작동하는 것처럼 보이지만, 실제 운영 데이터에서는 정렬이 엉망이 된다는 사실을 모르고 있다. 이번에는 JavaScript sort()가···
마우스가 요소 위에 올라갔을 때 처리하려고 mouseover 이벤트를 붙였는데, 자식 요소가 여러 개면 이벤트가 계속 또 발생한다. 이게 뭐 하는 짓인가 싶으면서 결국 mouseenter로 바꿔보니 한 번만 실행된다. 다만 대부분의 개발자들은 mouseover와 mouseenter의 정확한 차이를 모른 채 인터넷에서 가져온 코드를 그냥 쓴다. 이번에는 두 ···
웹 애플리케이션에서 수만 개가 넘는 데이터를 정렬하거나 복잡한 암호화 연산을 실행할 때 브라우저 화면이 완전히 멈춰버리는 현상을 경험해봤을 것이다. 클릭도 안 되고 로딩 스피너마저 멈추는 이유는 자바스크립트가 단일 스레드(Single Thread)로 동작하기 때문이다. 다만 스크립트가 메인 스레드를 독점할 때 백그라운드에서 연산을 분리하는 정확한 방법을 모···
웹 개발에서 버튼 클릭이나 폼 제출 같은 사용자 상호작용을 처리할 때, 많은 개발자들이 HTML onclick 속성과 JavaScript addEventListener() 메서드 중 뭘 써야 할지 헷갈려 한다. 둘 다 이벤트를 감지하고 처리하는 기능을 하지만, 실제로는 완전히 다른 방식으로 동작한다. 이번에는 두 방법의 정확한 차이가 뭔지, 언제 뭘 써야 ···
비동기 처리는 JavaScript 개발에서 피할 수 없는 숙제다. 다만 대부분의 개발자들은 async/await 문법이 내부에서 어떻게 동작하는지 정확히 모른 채 단순히 "동기처럼 코드를 쓸 수 있다"는 장점만 알고 있다. 결국 복잡한 비동기 흐름을 다룰 때 예상과 다른 동작에 당황하거나, 성능 최적화를 못 하는 상황이 벌어진다. 이번에는 async/awa···
웹 애니메이션을 구현할 때 개발자들은 보통 margin이나 top 같은 위치 속성으로 요소를 움직인다. 다만 대부분의 경우 이렇게 하면 프레임이 떨어지고 버벅거린다. 원인은 단순하다. 브라우저가 매 프레임마다 레이아웃을 다시 계산해야 하기 때문이다. 이번에는 CSS transform과 transition의 정확한 차이가 뭔지, 왜 transform이 성능상···
파일 업로드를 처리할 때마다 복잡한 문자열 조합이나 라이브러리에 의존했던 경험이 있을까. 대부분의 개발자들은 FormData 객체가 존재한다는 것은 알지만, 정확히 어떤 상황에서 어떻게 써야 하는지 모른 채 구글링한 코드를 그냥 복사해 붙인다. 이번에는 FormData API가 정확히 뭔지, 일반 객체 전송과 뭐가 다른지, 실제로 파일을 어떻게 처리하는지 ···
웹 애플리케이션을 개발하면서 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가 실패하면 전체가 실패하는 문제를 겪고도 그 원인을 정확히 모른 채 코드를 작성한다. 이번에는 세 가지 메서드의 동작 방식, 언제 써야 하는지, 그···