patchnotes

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..

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

** Redux Toolkit을 사용한 상태 관리 구조**이번 프로젝트는 Redux Toolkit을 사용하여 애플리케이션의 상태를 효율적으로 관리한다2.1. ~Slice.ts 파일들 (boardsSlice, loggerSlice, modalSlice)역할: 애플리케이션의 상태를 기능 단위로 분할하여 관리하는 'Slice(슬라이스)' 를 정의한다. 각 Slice는 특정 도메인의 상태(State), 리듀서(Reducer), 액션(Action)을 하나로 묶어 관리하는 것이다.boardsSlice: 게시판(Board), 리스트(List), 태스크(Task)와 같은 핵심 데이터를 관리한다.loggerSlice: 애플리케이션 내의 사용자 활동 로그를 저장한다.modalSlice: 모달창의 상태와 모달에 표시될 데이..

1. Props의 정의Props(프롭스)는 'properties'의 줄임말로, React 컴포넌트 간에 데이터를 전달하기 위해 사용되는 메커니즘이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 이 props를 받아 화면에 렌더링하거나 다른 로직을 처리하는 데 사용한다.2. Props의 특징Props의 가장 큰 특징은 읽기 전용(read-only)이라는 점이다. 즉, 자식 컴포넌트는 전달받은 props를 직접 수정할 수 없다. 데이터의 흐름은 항상 부모에서 자식으로 향하는 단방향(top-down)이며, props의 불변성(immutability)은 React 애플리케이션의 데이터 흐름을 예측 가능하고 안정적으로 만드는 데 기여한다.3. Props의 메모리 저장 위치와 ..

1. 클래스형 컴포넌트 (Class Component)클래스형 컴포넌트는 ES6의 class 문법을 사용하여 정의하는 컴포넌트이다. 리액트의 React.Component를 상속받아 구현하며, 과거 리액트에서 상태 관리와 생명주기(Lifecycle) 기능을 사용하기 위한 표준적인 방법이었다.특징: constructor에서 this.state를 통해 컴포넌트의 상태(State)를 초기화한다.componentDidMount, componentDidUpdate, componentWillUnmount와 같은 생명주기 메서드를 사용하여 특정 시점에 코드를 실행할 수 있다.render() 메서드에서 렌더링할 JSX를 반환한다.컴포넌트의 상태와 메서드에 접근할 때 this 키워드를 사용해야 한다.예시 코드:impor..