patchnotes

낙관적 업데이트 (Optimistic Updates)낙관적 업데이트는 사용자 인터페이스(UI)를 업데이트할 때 서버로부터 성공 응답을 받기 전에 해당 작업이 성공할 것이라고 가정하고 화면에 변경된 결과를 먼저 보여주는 기법이다. 이는 '단순한 결과를 당연히 성공할 것이라고 생각해서 결과를 미리 보여주는 것'을 의미한다.목적: 사용자의 지연 시간(latency) 인식을 최소화하여 애플리케이션의 반응성과 사용자 경험(UX)을 극대화하는 것이 목적이다.활용처: '좋아요' 버튼 클릭, 장바구니에 항목 추가, 체크박스 토글 등 성공 확률이 매우 높고 즉각적인 피드백이 요구되는 곳에 효과적으로 사용된다.작동 방식:사용자가 액션을 취하면 클라이언트는 서버에 요청을 보내는 동시에 로컬 상태를 즉시 업데이트하여 UI를 ..

Zustand란 무엇인가?Zustand는 이전 프로젝트에서 사용했던 Redux와 같은 전역 상태 관리 도구이다. Redux의 목적과 동일하지만, 사용 방법은 간단하고 직관적이다. Zustand는 작고 빠르며 확장 가능한 상태 관리 솔루션으로, API가 단순하고 훅(hooks) 기반으로 동작한다. 자세한 내용은 Zustand 공식 문서에서 확인할 수 있다.로그인 구현로그인은 사용자가 시스템에서 권한이 있는 작업을 수행하기 위해 꼭 필요한 기능이다. 이 프로젝트에서는 Zustand와 localStorage를 사용하여 로그인 상태를 관리하며, 사용자가 입력한 정보를 바탕으로 서버에서 token을 받아 이를 저장하거나 인증 상태를 확인하는 방식으로 동작한다.로그인 구현 방식token을 localStorage에 ..

React 개발 핵심 개념 및 라이브러리 정리1. 라우터 (React Router Dom)SPA(Single Page Application) 환경에서는 페이지가 새로고침 되지 않고, URL에 따라 보여주는 컴포넌트만 교체되어야 한다. 이를 구현하기 위해 React-Router-Dom 라이브러리를 사용한다. 개발자가 직관적으로 URL과 화면(컴포넌트)을 일치시키는 작업을 돕는다.1.1 설치npm을 통해 라이브러리를 설치한다. TypeScript 환경에서는 타입 정의가 포함된 패키지나 @types 패키지가 필요할 수 있으나, 최신 버전의 react-router-dom은 자체적으로 타입을 지원하는 경우가 많다. 만약 타입 에러가 발생한다면 아래와 같이 설치한다.npm install react-router-do..

지난 시간에 이어 프로젝트를 고도화하며 컴포넌트 테스트 코드 작성법과 forwardRef를 활용한 컴포넌트 생성 및 전반적인 UI 구조 개선을 진행했다. 기능 구현뿐만 아니라 검증 과정(테스트)과 유연한 컴포넌트 설계(Ref 전달)에 집중했다.📖 Book Store 프로젝트📄 테스트 코드 (Test Code)테스트 코드란 구현된 기능과 동작이 요구사항에 맞춰 예상대로 작동하는지 검증하는 코드다. 자바스크립트 생태계에서는 주로 Jest 프레임워크를 사용하여 단위 테스트(Unit Test)를 수행한다. 테스트 코드를 작성하면 리팩토링 시 사이드 이펙트를 방지하고 코드의 신뢰성을 높일 수 있다.📑 컴포넌트 테스트 (React Testing Library)리액트 환경에서 컴포넌트를 테스트하기 위해서는 Je..

1. 컴포넌트 구조와 레이아웃 (Component Structure & Layout)1.1 페이지 레이아웃 (Page Layout)웹 애플리케이션에서 헤더(Header), 푸터(Footer), 사이드바(Sidebar)와 같이 모든 페이지에서 공통적으로 사용되는 구조를 '레이아웃'이라 한다. 리액트에서는 각 페이지마다 이러한 컴포넌트를 반복해서 작성하는 대신, 공통 레이아웃 컴포넌트를 만들어 재사용성을 높이는 방식을 채택한다.1.2 Children Props리액트 컴포넌트가 태그 사이에 포함된 내용을 전달받기 위해 사용하는 특수한 prop이 children이다. 레이아웃 컴포넌트를 구현할 때 핵심적인 역할을 한다.활용 예시: 위와 같이 작성하면, Layout 컴포넌트 내부에서 {children}을 통해 ..

React 애플리케이션을 시작할 때, 주로 사용하는 도구가 Create React App (CRA)과 Vite이다. 이 두 도구는 React 프로젝트 생성을 간소화해주며 각각의 특징과 장단점이 있어 상황과 요구에 따라 선택해야 한다.1. Create React App (CRA)특징Facebook에서 공식적으로 제공하는 React 시작 도구.프로젝트 생성 시, Webpack과 Babel을 기본적으로 구성하여 별도의 설정 없이 React 애플리케이션을 구동할 수 있다.react-scripts를 통해 빌드와 테스트 관련 스크립트를 제공한다.장점표준화된 도구: React 공식 팀에서 제공하기 때문에 안정성과 호환성이 높다.Zero Configuration: 설정 파일 없이 빠르게 프로젝트를 시작할 수 있다.Ec..

API 테스트 및 실행 시나리오이 문서는 결제 서비스의 주요 API 흐름을 테스트하기 위한 시나리오를 정의합니다.1. 사전 준비Firebase Emulator 및 서버 실행프로젝트 루트에서 Firebase Emulator를 시작하고, 개발 서버를 실행합니다.# Firebase Emulator 시작firebase emulators:start# 개발 서버 실행npm run dev2. 시나리오 1: 정상적인 예매 및 결제 성공 흐름단계 1: 예매 생성 (좌석 잠금 및 결제 의향 생성)API: POST /bookings설명: 사용자가 좌석을 선택하여 예매를 요청합니다. 이 과정에서 bookings 문서가 pending 상태로 생성되고, paymentIntents 문서가 생성되며, occupiedSeats 문서가..

1. 데이터 배열 관리: filter와 splice의 차이점JavaScript에서 배열 데이터를 조작할 때 filter와 splice는 특정 요소를 제거하는 데 사용될 수 있지만, 동작 방식과 원본 배열에 미치는 영향에서 근본적인 차이가 있다. 특히 React와 Redux 환경에서는 이 차이를 이해하는 것이 매우 중요하다.1.1 filter정의: filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 생성하여 반환한다.특징 (불변성 유지): 원본 배열을 직접 수정하지 않고(Non-destructive), 조건에 맞는 요소로만 구성된 복사본을 반환한다.프로젝트 적용 예시 (boardsSlice.ts): 게시판을 삭제하는 리듀서 로직에서 filter는 불변성을 유지하며 상태를 ..

1. 핵심 파일 및 역할App.tsx:사용자의 상호작용을 처리하는 최상위 컴포넌트이다. 삭제 버튼의 이벤트 핸들러(handleDeleteBoard)를 포함하며, Redux 상태 변화에 따라 UI를 렌더링하는 역할을 담당한다.store/slices/boardsSlice.ts:게시판과 관련된 Redux 상태 로직을 관리하는 슬라이스(Slice)이다. deleteBoard 액션과 해당 리듀서를 정의하여 실제 상태(state)에서 게시판을 제거하는 역할을 수행한다.2. 실행 흐름 (Execution Flow)게시판 삭제 기능은 다음의 순서로 실행된다.2.1. 사용자 입력 (User Input)사용자가 UI의 "게시판 삭제" 버튼을 클릭한다.이 버튼에는 onClick 이벤트에 handleDeleteBoard 함수..

1. 핵심 공통점: 전역 상태 관리Redux와 Recoil의 가장 핵심적인 공통점은 변수를 전역 상태(Global State)로 관리할 수 있다는 점이다.두 라이브러리 모두 애플리케이션의 특정 데이터를 특정 컴포넌트에 종속시키지 않고, 애플리케이션의 어느 곳에서든 해당 데이터를 공유하고 접근할 수 있게 만든다. 이를 통해 컴포넌트 계층 구조가 깊어질 때 발생하는 'Props Drilling' 문제를 해결하고, 상태 관리의 복잡성을 줄인다.전역 상태 관리: 데이터를 애플리케이션 전체에서 접근 가능한 공간에 둔다.구독(Subscription) 모델: 상태가 변경되면, 해당 상태를 구독하고 있는 컴포넌트들이 자동으로 리렌더링(re-rendering)된다.2. 주요 차이점두 라이브러리는 '어떻게' 상태를 관리하..