전체 글

왜 이렇게 동작할까?Zustand의 selector는 엄격한 동등성 검사(old === new)를 통해 변화를 추적하고 상태 변경을 컴포넌트에 알려 리렌더링을 시키기 때문에 셀렉터를 아토믹하게 유지하는 게 중요하다고 합니다.// 🚨 selector는 모든 호출에서 새 객체를 반환합니다.const { bears, fish } = useBearStore((state) => ({ bears: state.bears, honey: state.honey,}))// 😮 그래서 이 둘은 동등합니다.const { bears, honey } = useBearStore() // ⬇️ 최적화되었기 때문에 훨씬 더 좋습니다.const bears = useBearStore((state) => state.bears)cons..

Next.js의 파일 시스템 기반 라우팅은 편리합니다.파일 시스템 기반 라우팅은 프로젝트의 폴더와 파일 구조에 따라 자동으로 라우트를 설정해 주는 기능입니다.예를 들어, app/about/page.js 파일을 생성하면 자동으로 /about 경로가 설정됩니다.어떻게 폴더와 파일만 생성했는데 라우트가 등록된 걸까요?파일 시스템 기반 라우터의 동작 방식을 간단한 express 서버 예시 코드를 통해 알아보겠습니다.예제 프로젝트의 디렉토리 구조는 다음과 같습니다.my-routing-app/├── app/│ ├── about/│ │ └── page.js│ ├── product/│ │ └── [id]/│ │ └── page.js│ └── page.js└── server.jss..

타입스크립트의 핵심 원칙 중 하나는 타입의 이름이 아닌 구조를 기반으로 타입 호환성을 결정한다는 것입니다. 이걸 "덕 타이핑" 또는 "구조적 타이핑"이라고 부르기도 하죠.그런데, 타입스크립트를 사용하다가 이 원칙이 작동하지 않는 경우가 있다는 걸 최근에 알았습니다.타입스크립트를 사용하면서 꼭 알아야 하는 값의 집합과 구조적 타이핑의 개념부터 가볍게 설명하면서 시작해 볼게요. 값의 집합과 구조적 타이핑TypeScript에서 값의 집합은 특정 타입이 가질 수 있는 모든 값들의 모임을 의미해요. 예를 들어, 아래와 같은 인터페이스 Person이 있다고 해볼게요.interface Person { name: string;}Person 타입은 name이라는 string 속성을 가진 모든 객체들의 집합이에요. 따라..

선언적 프로그래밍이란?선언적 프로그래밍이란 무엇을 표현할지에 집중하고 어떻게 할지는 숨기는 개발 스타일이다.UI를 선언적으로 사용할 수 있도록 만들면 당장 몰라도 되는 디테일은 숨겨지고 핵심 정보가 들어나서 로직을 파악하기 쉬워진다. 인터페이스부터 생각하자리액트에서 간단한 alert 컴포넌트를 모달로 띄운다고 가정해보자. 사용처에서 UI 컴포넌트를 import하거나 만들고 isOpen과 같은 상태로 여닫기를 관리해줘야한다.이에 비해 브라우저 내장 Web API인 window.alert()의 사용 방법은 간단하고 선언적이다.alert("Hello world!");어디서나 메시지와 함께 alert 함수를 호출해주기만 하면 창을 띄워준다.이렇게 간단한 방식으로 리액트 컴포넌트도 띄울 수 있도록 만들어보자.co..

JavaScript에서 forEach나 map을 사용할 때 메서드의 콜백 함수는 인자로 배열의 각 요소에 대한 참조를 받게 되는데, 이는 배열 안의 객체 자체를 가리키는 참조를 의미합니다.그럼 그 인자를 재할당 하면 원본 배열의 요소가 바뀔까요?let array = [{ a: 1 }, { b: 2 }];array.forEach(item => { item = { c: 3 }; // 새 객체로 재할당});결론부터 말하자면 바뀌지 않습니다. 이유console.log(array); // [{ a: 1 }, { b: 2 }]item 이라는 지역 변수가 참조(주소)값을 가지고 있어서 원본을 변경 할 수 있다고 착각할 수 있지만 이 재할당은 지역 변수의 값을 변경할 뿐, 원본 배열에 영향을 주지 않습니다.const..