atomicdev 님의 블로그

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

React 애플리케이션에서 Feature-Sliced Design(FSD)을 적용하면 코드 구조를 체계적으로 관리하고 유지보수성을 향상시킬 수 있습니다. 다음은 FSD의 개념 설명과 실제 개발 적용을 위한 5회차 강의안입니다.1회차: FSD 개념 이해 및 프로젝트 설정목표:FSD의 기본 개념과 필요성을 이해하고, React 프로젝트를 설정합니다.내용:FSD란 무엇인가?기능 중심의 아키텍처 패턴으로, 코드의 모듈화와 유지보수성을 높이기 위한 설계 방법론입니다.프로젝트를 기능 단위로 분리하여 각 기능을 독립적으로 관리합니다.FSD의 주요 구성 요소:Layer(레이어): 애플리케이션의 전반적인 구조를 구성하는 최상위 폴더입니다. 주요 레이어는 다음과 같습니다.app: 애플리케이션의 진입점 및 초기화와 관련된 ..