제리코드르렁

프론트엔드 프로젝트에서 디렉토리 구조는 코드의 가독성, 유지보수성, 확장성에 중요한 역할을 함. 1. 레이어드 아키텍처 (Layered Architecture)레이어드 아키텍처는 기능별로 나누기보다는 계층에 따라 파일을 분리하는 구조임. 주로 프레젠테이션 계층, 비즈니스 로직 계층, 데이터 계층으로 나뉨.src/├── components/ # UI 컴포넌트 (프레젠테이션 계층)│ ├── Button.vue│ ├── Header.vue│ └── Footer.vue├── services/ # 비즈니스 로직 처리 (비즈니스 계층)│ ├── AuthService.js│ ├── ApiService.js│ └── UserService.js├── store/ ..

Flux 아키텍처는 단방향 데이터 흐름을 기반으로 애플리케이션 상태 관리를 체계적으로 하는 디자인 패턴임. 특히 리액트(React)와 함께 사용되는 상태 관리 패턴으로 유명하며, 복잡한 애플리케이션에서 데이터 흐름을 쉽게 추적하고, 상태 관리를 더욱 예측 가능하게 만드는 데 중점을 둠. Flux의 핵심 개념Flux 아키텍처는 크게 4개의 주요 컴포넌트로 구성됨:Action (액션)Dispatcher (디스패처)Store (스토어)View (뷰)Flux 데이터 흐름1. Action (액션)액션은 애플리케이션에서 일어나는 **사건(이벤트)**을 의미함.사용자 입력, API 호출 등으로 발생하며, 액션 객체는 일반적으로 다음과 같은 형식을 가짐:{ type : 'ADD_TODO'. payload : { ..