atomicdev 님의 블로그

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

컴포넌트 기반 아키텍처 이해: 전통적인 웹 개발과 React의 차이점전통적인 HTML/CSS 기반 웹 개발에서는 페이지를 전역적으로 설계하고, 스타일링과 기능을 한 곳에서 관리합니다. 반면, React는 UI를 컴포넌트 단위로 나눠 관리하고, 각 컴포넌트가 독립적으로 동작하면서도 조립되어 하나의 완성된 페이지를 구성합니다. 이를 통해 UI의 재사용성을 극대화하고, 유지 보수성을 향상시킬 수 있습니다.1. 전통적인 웹 개발 구조전통적인 방식에서는 하나의 HTML 파일에 모든 레이아웃과 스타일, 그리고 일부 자바스크립트가 포함됩니다. 즉, 한 페이지에서 모든 요소가 전역적으로 관리됩니다.전통적 HTML 예시 헤더 영역 이곳은 본문 내용입니다. 푸터 영역 전통적 웹 개발의 ..