patchnotes

지난 시간에 이어 프로젝트를 고도화하며 컴포넌트 테스트 코드 작성법과 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}을 통해 ..