웹 개발에서 살아남기

ES6에서 도입된 Map과 Set은 기존의 객체(Object)와 배열(Array)이 가진 한계를 보완하기 위해 탄생했다. 다양한 타입을 키로 사용할 수 있는 Map의 유연성과, 데이터 중복을 허용하지 않고 빠른 조회 성능(O(1))을 제공하는 Set의 특징을 실무 관점에서 정리한다. JavaScript 자료구조: Map과 Set의 핵심 기능과 객체/배열과의 차이점오랫동안 자바스크립트 개발자들은 데이터를 키-값(Key-Value) 쌍으로 관리하기 위해 객체(Object)를, 리스트 형태의 데이터를 위해 배열(Array)을 사용해 왔다. 하지만 객체는 키가 반드시 문자열이나 심볼이어야 한다는 제약이 있고, 배열은 중복 제거와 특정 값 탐색에 비용이 많이 든다는 단점이 있었다.ES6(ECMAScript 20..

깊은 복사(Deep Copy)는 중첩된 객체의 참조까지 완전히 끊어내어 완벽하게 독립된 사본을 만드는 기술이다. 과거의 JSON 방식이 가진 한계점과 이를 극복하기 위한 재귀 함수, Lodash 활용법, 그리고 최신 표준인 structuredClone()의 등장 배경과 사용법을 상세히 정리한다. 자바스크립트 깊은 복사(Deep Copy) 완벽 가이드 (3편)이 글은 JavaScript Deep Dive 시리즈의 마지막 3번째 글이다.얕은 복사만으로는 중첩된 객체(Nested Object)의 데이터 오염을 막을 수 없다. 원본 데이터의 불변성을 완벽하게 지키기 위해서는 모든 depth의 데이터를 재귀적으로 복사하는 깊은 복사(Deep Copy)가 필수적이다.하지만 자바스크립트는 오랫동안 깊은 복사를 위한..

얕은 복사(Shallow Copy)는 최상위 레벨(Depth 1)의 속성만 새로운 메모리에 복사하고, 중첩된 객체는 원본의 참조(주소)를 공유하는 방식이다. ES6의 Spread Operator(...)부터 Object.assign, 그리고 배열 전용 메서드인 slice, concat 등 실무에서 자주 사용되는 얕은 복사 기법들을 상세히 정리한다. 자바스크립트의 얕은 복사: Spread 연산자와 다양한 복사 패턴 (2편)이 글은 JavaScript Deep Dive 시리즈의 2번째 글이다.지난 1편에서는 원시 타입과 참조 타입의 메모리 저장 방식을 통해 얕은 복사의 개념을 알아보았다. 얕은 복사는 "껍데기만 새로 만들고 내용은 공유하는" 방식이다. 이는 성능상 이점이 있지만, 중첩된 데이터 수정 시 원..

자바스크립트에서 데이터 복사 시 발생하는 의도치 않은 버그의 대부분은 '참조 타입(Reference Type)'의 특성을 이해하지 못해 발생한다. 원시 타입과 참조 타입이 메모리에 저장되는 차이점(Stack vs Heap)을 기반으로, 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)의 결정적 차이를 분석한다. 자바스크립트의 얕은 복사와 깊은 복사: 메모리 구조와 동작 원리 (1편)이 글은 JavaScript Deep Dive 시리즈의 1번째 글이다.개발을 하다 보면 원본 데이터를 보존한 채로 사본을 만들어 수정해야 하는 경우가 빈번하다. 이때 단순히 변수를 할당(=)하거나 익숙한 메서드로 복사했음에도, 사본을 수정하니 원본까지 같이 바뀌어버리는 황당한 버그를 마주하게 된다.이 현상을..

과거의 document.execCommand 방식은 동기적으로 작동하여 메인 스레드를 차단하고 보안 이슈가 있었다. 이를 대체하는 최신 비동기 API인 navigator.clipboard의 writeText(복사)와 readText(붙여넣기) 사용법, 그리고 실무 적용 시 반드시 고려해야 할 HTTPS 보안 정책과 권한 처리 방법을 정리한다. execCommand는 이제 그만: navigator.clipboard로 안전하게 텍스트 복사하기웹 애플리케이션을 개발하다 보면 "초대 코드 복사", "URL 공유" 등 클립보드와 상호작용해야 하는 기능이 필수적이다. 과거에는 document.execCommand('copy')를 사용했지만, 이 방식은 동기적(Synchronous)으로 작동하여 대용량 텍스트 복사..

React의 useState 초기값 설정 시 무거운 연산이 포함될 경우, 불필요한 재연산으로 인해 렌더링 성능이 저하될 수 있다. 이를 방지하기 위한 Lazy Initialization(지연 초기화) 기법의 원리와 실무 활용 패턴(LocalStorage 등)을 상세히 분석한다. React useState의 Lazy Initialization: 초기값 연산 최적화 가이드React 개발을 하다 보면 컴포넌트의 초기 상태(Initial State)를 설정하기 위해 복잡한 연산이 필요한 경우가 있다. 대부분의 개발자는 useState를 사용할 때 습관적으로 값을 직접 전달하지만, 이 사소한 습관이 때로는 심각한 성능 이슈를 야기한다.특히 로컬 스토리지 접근이나 대규모 배열 필터링 같은 무거운 작업이 포함된 경우..

브라우저 환경에서 setTimeout(callback, 0)이 실행 순서를 보장하는 원리는 자바스크립트의 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)에 있다. React 상태 업데이트 직후 DOM 조작이나 로직 실행 순서를 제어해야 할 때 발생하는 문제 상황과, 이를 해결하는 올바른 패턴(useEffect, flushSync)을 정리한다. setTimeout(fn, 0)의 동작 원리: 태스크 큐와 실행 순서 보장이 글은 JavaScript Core 시리즈의 4번째 글이다. 이전 글 보기브라우저에서 실행되는 자바스크립트는 싱글 스레드(Single Thread) 기반 언어이기 때문에 기본적으로 "한 번에 하나의 작업"만 처리할 수 있다. 하지만 개발을 하다 보면 비동기 데이터 처리나 ..

비동기 통신 중 불필요해진 요청을 강제로 취소할 수 있는 AbortController의 사용법을 정리한다. 리액트의 useEffect 클린업 함수와 결합하여 메모리 누수를 막고, 검색 기능에서 발생하는 경쟁 상태(Race Condition)를 해결하는 실무 패턴을 다룬다. fetch 요청 강제 중단: AbortController 활용 가이드웹 애플리케이션을 개발하다 보면 진행 중인 네트워크 요청을 취소해야 할 때가 종종 있다. 예를 들어, 사용자가 대용량 이미지를 업로드하다가 "취소" 버튼을 누르거나, 검색창에 글자를 빠르게 입력할 때 이전 검색 요청이 늦게 도착해 결과가 뒤섞이는 경우가 대표적이다.이런 상황에서 요청을 그대로 두면 네트워크 리소스가 낭비될 뿐만 아니라, 의도치 않은 데이터 덮어쓰기 버그..

자바스크립트에서 주소를 다룰 때 사용하는 URL과 URLSearchParams 객체의 차이점과 활용법을 정리한다. 전체 경로 파싱부터 쿼리 스트링(Query String) 조작, 그리고 실무에서 자주 쓰이는 유틸리티 함수 구현까지 상세히 다룬다. URL과 URLSearchParams: 자바스크립트로 주소 조작하기이 글은 JavaScript Core 시리즈의 3번째 글이다.프론트엔드 개발을 하다 보면 API 요청을 보내거나 페이지 라우팅을 처리할 때 URL을 조작해야 하는 일이 빈번하다. 이때 정규표현식으로 문자열을 자르기보다는 브라우저가 기본 제공하는 Web API인 URL과 URLSearchParams를 사용하면 훨씬 안전하고 깔끔하게 처리할 수 있다.비슷해 보이지만 용도가 명확히 다른 두 객체의 특징..

서버에서 받아온 데이터를 defaultValues에 넣었는데 폼이 비어있는 현상은 useForm의 초기화 시점과 데이터 로딩 시점이 맞지 않아서 발생한다. 이를 해결하는 두 가지 핵심 전략인 reset() 활용과 조건부 렌더링 방법을 상세히 정리한다. React Hook Form: defaultValues가 비동기 데이터로 초기화되지 않을 때 해결법React Hook Form(이하 RHF)을 사용하다 보면 가장 흔하게 겪는 문제가 있다. API로 사용자 정보를 받아와서 수정 페이지를 만들려는데, 분명 데이터를 defaultValues에 넣었음에도 불구하고 input 창이 텅 비어있거나 초기값(빈 문자열)만 보이는 현상이다.이것은 RHF의 useForm이 컴포넌트의 첫 렌더링 시점에 딱 한 번만 초기화되기..