patchnotes

1. 모킹 서버 (Mocking Server) with MSW프론트엔드에서 모킹하는 이유프론트엔드 개발을 진행하다 보면 백엔드 API가 아직 완성되지 않아 개발이 지연되는 상황(Blocker)이 발생한다. 이때 모킹(Mocking)은 없는 것을 있는 것처럼 임시로 만들어 개발 흐름을 끊기지 않게 해 준다.단순히 변수에 가짜 데이터를 담아 사용하는 것을 넘어, 실제 네트워크 요청과 응답 과정을 시뮬레이션해야 하는 이유는 다음과 같다:병렬 개발 가능: 백엔드 개발이 완료될 때까지 기다리지 않고 프론트엔드 로직(데이터 페칭, 에러 핸들링 등)을 미리 구현할 수 있다.엣지 케이스 테스트: 서버에서 재현하기 힘든 에러 상황(500 에러, 네트워크 지연 등)을 쉽게 시뮬레이션하여 견고한 애플리케이션을 만들 수 있다..

1. KPT 회고 방법KPT 회고는 프로젝트나 스프린트가 끝난 후 팀이 성장하기 위해 진행하는 회고 방식 중 하나이다.단순히 무엇을 잘했고 못했는지를 나열하는 것에 그치지 않고, "다음 액션 아이템(Try)"을 도출하여 실질적인 개선을 이끌어내는 데 목적이 있다.KPT는 다음 세 가지 요소로 구성된다:Keep (유지할 점): 프로젝트 진행 중 좋았던 점, 성과가 있었던 부분이다. 다음에도 계속 유지해야 할 긍정적인 요소들을 기록한다.Problem (문제점): 진행 중 겪었던 어려움이나 아쉬웠던 점이다. 비난이 아닌 현상 자체에 집중하여 문제의 원인을 찾는다.Try (시도할 점): Problem에서 도출된 문제를 해결하기 위해 구체적으로 시도할 액션 아이템이다. 당장 실행 가능한 해결책이어야 한다.2. 절..

useMemo설명:useMemo는 React에서 성능 최적화를 위해 제공하는 훅이다.이 훅은 연산된 값을 저장하여 값의 내용이 바뀌지 않은 경우 이전에 연산했던 값을 재사용하고, 값에 변경이 있을 때만 다시 계산한다.이를 통해 필요 없는 불필요한 연산을 방지하여 애플리케이션의 성능을 최적화한다.동작 원리:useMemo는 React 컴포넌트가 렌더링될 때 주어진 의존성 배열을 확인한다.의존성 배열의 값에 변화가 없으면 이전에 계산한 결과를 반환한다.의존성 배열 항목 중 하나라도 변경된 경우, 새로운 값을 계산하고 반환한다.결과적으로 복잡한 상태 계산이나 대규모 배열의 연산 작업에서 성능 향상을 이룰 수 있다.예시코드:import React, { useMemo, useState } from "react";c..

낙관적 업데이트 (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 문서가..