atomicdev 님의 블로그

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

프로젝트 설정이번 강의에서는 다국어 지원 기능을 React에서 구현하기 위해 프로젝트를 설정하는 방법을 알아보겠습니다. 프로젝트를 시작하기 전, 필요한 개발 환경을 설정하고 i18next와 react-i18next를 설치하여 다국어 기능을 위한 기반을 마련할 것입니다.1. 개발 환경 설정먼저 다국어 기능을 구현하기 위한 기본적인 개발 환경을 설정해야 합니다. 이번 프로젝트에서는 다음의 도구들이 필요합니다:Node.js: React 프로젝트를 실행하고 빌드하기 위한 자바스크립트 런타임 환경입니다.npm 또는 Yarn: 패키지 관리를 위한 툴입니다. 여기서는 npm을 사용할 것입니다.React: 웹 애플리케이션을 빌드할 때 사용할 라이브러리입니다.Node.js 설치:Node.js가 설치되어 있지 않은 경우,..