atomicdev 님의 블로그

React FSD 1회차2회차: FSD의 Layer와 Slice 구성목표FSD의 Layer와 Slice를 구성하고, 각 레이어의 역할을 이해합니다.FSD의 Layer 구성FSD는 각 레이어를 통해 프로젝트를 구조화하며, 각 레이어는 서로 명확한 역할과 책임을 가집니다. 상위 레이어는 하위 레이어에 의존할 수 있지만, 하위 레이어는 상위 레이어에 의존하지 않는 방식으로 설계됩니다.주요 레이어 설명app: 애플리케이션의 진입점으로, 전역 설정이나 초기화 코드가 위치합니다.processes: 페이지나 여러 컴포넌트에서 공통으로 사용하는 비즈니스 로직을 포함하는 레이어입니다.pages: 페이지 단위로 구성된 컴포넌트들이 위치하는 레이어입니다.widgets: 헤더, 풋터 등 재사용이 가능한 UI 컴포넌트를 포함하..

1회차: FSD 개념 이해 및 프로젝트 설정목표FSD(Feature-Sliced Design)의 기본 개념과 필요성을 이해하고, React 프로젝트를 설정합니다.FSD란 무엇인가?Feature-Sliced Design(FSD)은 기능 중심의 아키텍처 패턴으로, 애플리케이션을 모듈화하여 코드의 유지보수성과 확장성을 높이는 데 목적이 있습니다. 프로젝트를 기능 단위로 분리해 각 기능을 독립적으로 관리하고 유지보수할 수 있게 합니다.FSD의 주요 구성 요소FSD 아키텍처는 레이어, 슬라이스, 세그먼트 구조로 구성됩니다.1. Layer (레이어)프로젝트의 주요 폴더 구조를 정의합니다. 레이어는 다음과 같이 구분됩니다:app: 애플리케이션의 초기화 및 전역 설정과 관련된 코드processes: 페이지 간에 걸쳐 ..