왜 이렇게 동작할까?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..

개념 정리본격적으로 렌더링에 대해서 보기 전에 렌더링과 관련된 리액트 패키지 4가지를 먼저 살펴보겠습니다. 패키지 구조React리액트 코어 패키지는 컴포넌트를 정의하는 역할만 합니다. 그리고 다른 패키지에 의존성이 없어서 다양한 플랫폼에 올려서 사용이 가능합니다. 그래서 화면을 그리는 패키지가 따로 있는데 그게 바로 렌더러 패키지 입니다.Renderer렌더러는 저희한테 익숙한 리액트-돔과 모바일에서 사용하는 네이티브 렌더러 등이 있고 호스트 렌더링 환경, 그러니까 플랫폼에 의존적입니다. 이렇게 렌더러가 다양하기 때문에 리액트가 그려질 수 있는 플랫폼 환경이 다양합니다. 즉 렌더러의 역할은 브라우저나 모바일 같은 호스트와 리액트를 연결하는 그런 역할을 합니다.Scheduler스케줄러는 이름 그대로 스케줄링..

v13 컴포넌트 수준에서 렌더링 환경을 선택 💡 next 13 이전에는 페이지에 필요한 모든 JS 코드를 하이드레이션 했지만 서버 컴포넌트가 도입된 후에는 클라이언트 컴포넌트만 하이드레이션 하면 된다. → JS 번들의 사이즈가 줄어든다. 📌 클라이언트 컴포넌트 클라이언트 컴포넌트를 사용하면 애플리케이션에 클라이언트 측 인터랙션을 추가할 수 있다. 서버에서 미리 렌더링 되고 클라이언트에서 hydrated 된다. 클라이언트 컴포넌트는 기존의 페이지 라우터의 컴포넌트가 항상 작동하던 방식이다. 작동방식 next.js가 빌드 중에 컴포넌트를 하나씩 확인하다가 클라이언트 컴포넌트를 만남 정적으로 만들 수 있는 부분을 확인 → 정적 HTML 프리렌더링 빌드 시에 클라이언트 컴포넌트도 프리렌더링 되기 때문에 내부의 ..

React에서 상태(state)는 컴포넌트의 라이프사이클 동안 정보를 유지하는데 사용되는 중요한 개념입니다. useState 훅을 이용하여 컴포넌트의 상태를 관리하면, 상태가 변경될 때마다 컴포넌트가 다시 렌더링 됩니다. 그런데, 상황에 따라서 컴포넌트의 상태가 유지되거나 초기화되는 경우가 있는데, 이는 컴포넌트가 렌더링 되는 방식에 따라 달라집니다.삼항 연산자(? :)와 논리 연산자(&&)를 이용하여 컴포넌트를 렌더링 하는 경우, 두 연산자가 UI 트리(가상 DOM)에 미치는 영향은 서로 다릅니다. 이로 인해 React의 diffing 알고리즘이 컴포넌트를 다르게 인식하고 처리하며, 결론적으로 컴포넌트의 상태 유지에서 차이가 나게 됩니다.삼항 연산자와 컴포넌트의 상태삼항 연산자를 사용하면, 두 표현식 ..

기존에 styled-components의 ThemeProvider로 다크모드를 구현하고 있었는데, 토글 버튼에 setTheme 함수를 직접 전달해주다 보니 props drilling이 우려되고 추상화도 잘 되지 않아서 코드가 지저분해 보였기 때문에 리팩터링을 하려고 마음먹었다. theme의 상태를 관리하기 위해서 보통 전역 상태 라이브러리를 많이 사용하지만, 현재 개인 프로젝트에서 전역으로 관리할 상태가 theme 밖에 없어서 패키지를 설치하지 않고 가볍게 사용할 수 있는 걸 찾으려고 했다. 처음엔 URI 쿼리 스트링으로 상태를 관리하는 방법을 생각했다. 하지만 유저가 URI를 직접 수정할 수 있어서 예기치 않은 변경이 발생할 수 있고, URI가 변경될 때마다 브라우저 히스토리가 쌓여서 히스토리가 불필요..

문제 설명 머쓱이는 태어난 지 11개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음과 네 가지 발음을 조합해서 만들 수 있는 발음밖에 하지 못하고 연속해서 같은 발음을 하는 것을 어려워합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 30 문자열은 알파벳 소문자로만 이루어져 있습니다. 입출력 예 babbling result ["aya", "yee", "u", "maa"] 1 ["ayaye", "uuu", "yeye", "yemawoo", "ayaay..