atomicdev 님의 블로그

4회차: FSD를 활용한 기능 개발목표FSD 구조를 활용하여 실제 기능을 개발하고, 각 레이어, 슬라이스, 세그먼트 간의 상호작용을 이해합니다.기능 개발 흐름entities 레이어에서 도메인 모델을 정의합니다.features 레이어에서 비즈니스 로직을 구현합니다.widgets 레이어에서 UI 컴포넌트를 구성합니다.pages 레이어에서 최종 페이지를 구성하여 완성합니다.예시 기능"사용자 목록을 불러와 화면에 표시하는 기능"을 구현하겠습니다.실습: 사용자 목록 표시 기능 개발Step 1: 프로젝트 설정이전 실습에서 생성한 fsd-example 프로젝트를 사용하거나 새로 프로젝트를 생성해도 좋습니다.npx create-react-app fsd-example --template typescriptcd fsd-e..

3회차: Segment를 통한 코드 세분화목표Segment를 활용하여 코드를 세분화하고, 각 세그먼트의 역할을 이해합니다.Segment 구성FSD의 Segment는 각 슬라이스 내부에서 코드를 더욱 체계적으로 관리하기 위해 나누어집니다. 주로 ui, model, api, lib, consts로 구성됩니다. 이 구성은 각 기능 모듈의 역할을 명확히 하여 코드의 가독성과 유지보수성을 높입니다.각 Segment의 역할ui: 사용자 인터페이스 컴포넌트를 포함합니다.model: 상태 관리 및 비즈니스 로직을 담당합니다.api: API 호출을 담당하는 함수들을 포함합니다.lib: 공통 라이브러리나 유틸리티 함수를 정의합니다.consts: 상수 값을 정의하여 코드의 가독성과 재사용성을 높입니다.실습: features..

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