React 프로젝트에서 중첩된 객체 상태를 업데이트하다 보면 스프레드 연산자를 3~4번씩 써야 하는 상황이 온다. 그때마다 실수하기 쉽고 코드도 지저분해진다. Immer를 도입하면서 이 문제가 많이 해결됐는데, 복사와 비교의 기본 개념부터 정리해봤다. 얕은 복사 vs 깊은 복사얕은 복사의 함정스프레드 연산자로 복사하면 최상위 속성만 새로 생성된다. 내부 객체나 배열은 여전히 원본과 같은 참조를 공유한다.const original = { name: "John", skills: ["JavaScript", "React"] };const shallowCopy = { ...original };shallowCopy.name = "Jane";shallowCopy.skills.push("Node.js")..

5년간 React를 쓰다 보니 "class 컴포넌트는 이제 안 쓰니까 프로토타입은 몰라도 되는 거 아닌가?" 했던 시절이 있었다. 그런데 팀 코드 리뷰에서 선배가 "이 함수 왜 이렇게 짰어? 프로토타입 이해하고 짠 거야?" 라고 물어봤을 때 대답 못 했던 기억이 난다.최근에 라이브러리 코드를 뜯어보다가 프로토타입 체인이 빈번하게 나오는 걸 보고, 이제는 JavaScript의 근본을 제대로 이해해야겠다고 생각했다. 오늘은 그 과정에서 정리한 내용을 공유해보자. 프로토타입, JavaScript의 숨겨진 핵심 JavaScript는 프로토타입 기반 객체지향 언어다. Java나 C++처럼 클래스가 먼저 있고 인스턴스를 만드는 게 아니라, 객체가 다른 객체를 직접 상속받는 구조다.모든 JavaScript 객체는 숨..

그동안 async/await, Promise만 쓰면서 "어떻게 동작하는지는 나중에 알아보지" 했는데, 막상 팀 내 기술 공유에서 설명하려니 버벅거렸다.오늘은 JavaScript의 비동기 처리 메커니즘을 제대로 정리해보자. 특히 Microtask Queue vs Macrotask Queue 차이는 실무에서 디버깅할 때 꼭 알아야 하는 부분이다. JavaScript는 왜 싱글 스레드일까?JavaScript는 싱글 스레드 언어다. 한 번에 하나의 작업만 처리할 수 있다는 뜻이다. 그럼 어떻게 버튼 클릭하면서 동시에 API 호출도 하고 애니메이션도 실행할 수 있을까?답은 이벤트 루프에 있다. 브라우저(또는 Node.js)가 제공하는 메커니즘으로, JavaScript 엔진과 함께 협력해서 비동기 작업을 처리한다...

JavaScript로 개발하다 보면 Promise는 피할 수 없는 존재다. 하지만 처음 접하면 "이게 뭔데?" 싶은 게 사실이다.오늘은 Promise의 기본 개념부터 실전 활용까지 정리해봤다.동기 vs 비동기, 카페 예시로 이해하기동기 처리를 카페에 비유하면 이렇다. 첫 번째 손님이 주문하고 커피 받을 때까지 뒤의 모든 손님이 대기한다. 비효율적이다. 비동기 처리는 다르다. 주문받고 진동벨 주고 다음 손님 받는다. 커피 완성되면 진동벨로 알려준다. 훨씬 효율적이다.웹 개발도 마찬가지다. API 호출 결과를 기다리느라 화면이 멈추면 사용자 경험이 최악이 된다. Promise가 뭔가?Promise는 JavaScript에서 비동기 작업을 다루는 객체다. 작업 상태에 따라 3가지 상태를 가진다.Pending (..