웹 개발에서 살아남기

깊은 복사(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번째 글이다.개발을 하다 보면 원본 데이터를 보존한 채로 사본을 만들어 수정해야 하는 경우가 빈번하다. 이때 단순히 변수를 할당(=)하거나 익숙한 메서드로 복사했음에도, 사본을 수정하니 원본까지 같이 바뀌어버리는 황당한 버그를 마주하게 된다.이 현상을..