atomicdev 님의 블로그

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

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