여러 개의 비동기 작업을 동시에 처리해야 할 때, Promise 조합 메서드를 쓰지 않고 반복문으로 하나씩 기다리는 개발자들이 많다. 다만 대부분은 Promise.all()만 알고 있거나, 하나의 Promise가 실패하면 전체가 실패하는 문제를 겪고도 그 원인을 정확히 모른 채 코드를 작성한다. 이번에는 세 가지 메서드의 동작 방식, 언제 써야 하는지, 그···
프론트엔드 웹 개발을 하다 보면 HTML 요소에 동적 ID나 상태 값을 임시로 저장해야 하는 상황을 자주 겪게 된다.다만 클래스(class) 이름에 파싱하기 힘든 데이터 값을 억지로 욱여넣거나 브라우저 명세에 없는 비표준 속성을 무분별하게 정의해서 마크업을 오염시키는 경우가 많다.이번 글에서는 HTML5 커스텀 데이터 속성(data-*)이 정확히 무엇인지,···
배열 데이터를 처리할 때 map, filter, reduce를 연쇄적으로 조합하면 코드는 깔끔해진다. 하지만 대부분의 개발자들은 이 방식이 배열을 몇 번이나 반복 순회하는지, 그로 인해 성능이 얼마나 떨어지는지 제대로 이해하지 못한 채 쓰고 있다. 같은 결과를 내면서도 한 번의 순회로 끝낼 수 있는데도 말이다. 이번에는 메서드 체이닝의 성능 문제가 정확히 ···
웹 애플리케이션에서 버튼 클릭 한 번으로 텍스트를 복사하는 기능을 구현할 때 과거 사용하던 document.execCommand('copy')가 동작하지 않거나 콘솔에 경고 메시지가 출력되는 현상을 경험해봤을 것이다. 다만 대부분의 개발자들은 대체 기술인 Clipboard API의 비동기 특성이나 보안 권한 조건을 제대로 모른 채 기존 구형 코드를 그대로 ···
웹 서비스에서 데이터를 연속으로 불러오는 무한 스크롤(Infinite Scroll)이나 이미지 지연 로딩(Lazy Loading)을 구현할 때, 스크롤 이벤트를 등록했다가 브라우저가 버벅거리는 현상을 경험해봤을 것이다.다만 스크롤 이벤트가 발생할 때마다 실행되는 콜백 함수가 브라우저 메인 스레드를 얼마나 점유하는지, 그리고 왜 이 문제가 발생하는지 정확한 ···
Node.js 개발자라면 누구나 "비동기 논블로킹"이라는 말을 들어봤을 것이다. 다만 대부분의 개발자들은 이벤트 루프가 정확히 어떻게 동작하는지, 왜 어떤 콜백은 먼저 실행되고 어떤 콜백은 나중에 실행되는지 정확히 알지 못한 채 코드를 작성한다. 그러다 보니 예상 밖의 타이밍 이슈나 성능 병목이 생겨도 원인을 파악하기 어렵다. 이번에는 Node.js 이벤트···
개발자들이 동적으로 생성된 요소에 클릭 이벤트를 붙일 때 흔히 하는 실수가 있다. 요소를 생성한 후 그 요소에 직접 이벤트 리스너를 달거나, 새 요소가 추가될 때마다 반복해서 리스너를 붙이는 식이다. 다만 대부분의 개발자들은 이 방식이 왜 비효율적인지, 그리고 얼마나 많은 메모리를 낭비하고 있는지 모른 채 프로젝트를 진행한다.이번에는 JavaScript 이···
문자열에서 특정 패턴을 찾아 바꾸는 작업은 개발에서 정말 자주 마주친다. 주소록 데이터를 정제할 때, API 응답값의 특수문자를 처리할 때, URL 쿼리 파라미터를 인코딩할 때도 그렇다. 대부분의 개발자들은 그냥 replace()를 쓰거나, 정규표현식과 g 플래그를 붙여서 구글에서 본 코드를 복사한다. 다만 replace()와 replaceAll()의 차이···
JavaScript에서 객체를 다루다 보면 Object.keys(), Object.entries(), Object.assign() 같은 메서드들을 마주친다. 다만 대부분의 개발자들은 이 메서드들의 정확한 동작 원리와 언제 어떤 상황에서 써야 하는지 모른 채 인터넷에서 가져온 코드를 그냥 복사해 붙인다. 이번에는 자주 쓰이는 Object 정적 메서드들이 정확···
웹 서비스에 지도 기능을 추가하려 할 때, 대부분의 개발자들은 구글 맵만 생각한다. 하지만 국내 사용자를 타겟으로 한다면 네이버 맵이 훨씬 더 자연스럽고 빠르게 로드된다는 점을 놓치고 있다. 문제는 대부분의 튜토리얼이 JavaScript 클라이언트 중심으로만 설명되어 있다는 것이다. PHP 백엔드에서 Naver Map API v5를 제대로 연동하는 방법, ···
웹 서비스에서 모달(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···
웹 서비스를 개발하다 보면 사용자가 브라우저 탭을 전환하거나 창을 최소화했음에도 백그라운드에서 실시간 API 요청(Polling)이나 타이머, 애니메이션이 계속 실행되는 상황을 경험해봤을 것이다.다만 대부분의 개발자들은 탭의 활성화 상태를 감지하는 정확한 표준 기술을 모른 채 `window.onblur` 이벤트를 대충 쓰거나, 백그라운드에서 불필요하게 서버···
웹 애플리케이션을 개발하면서 마우스로 요소를 드래그하여 순서를 바꾸거나 파일을 업로드하는 드래그 앤 드롭(Drag and Drop) 기능을 한번쯤 구현해봤을 것이다.다만 대부분의 개발자들은 dragover 이벤트에서 왜 preventDefault()를 호출해야 하는지, 혹은 드롭 존(Drop Zone)에 진입할 때 자식 요소 때문에 이벤트가 튀는 현상을 정···
웹 서비스를 이용할 때 사용자가 여러 브라우저 탭을 열어두고 한쪽에서 로그아웃을 하거나 장바구니 품목을 변경했는데, 다른 탭에는 기존 정보가 그대로 남아있어 오작동하는 문제를 경험해봤을 것이다.다만 많은 개발자들이 탭 간 실시간 데이터 동기화를 어떻게 깔끔하게 구현해야 하는지 정확한 방법과 원리를 모른 채 복잡한 WebSockets나 localStorage···
JavaScript로 개발하다 보면 일정 시간 후에 코드를 실행하거나 반복적으로 작업을 수행해야 할 때가 많다. 대부분의 개발자들은 setTimeout과 setInterval을 사용하면서도 타이머가 예상대로 작동하지 않거나 메모리가 계속 증가하는 문제를 겪게 된다. 다만 이 둘의 정확한 동작 원리와 제대로 정리하는 방법을 모르는 경우가 대부분이다. 이번에는···