웹 프론트 아키텍처 | 모던 프론트엔드 아키텍처

---

웹 프론트 아키텍처

프론트엔드 역할이 점점 커지면서 웹 프론트 아키텍처가 탄생하였다.

프론트 아키텍처는 프로덕트 관리에서 중요한 부분이다. 플로우차트, 다이어그램을 활용하여 아키텍처( AS-IS, TO-BE)를 정리한다면, 적절한 상황에 비즈니스 대응을 할 수 있다.

 

 

웹 프론트 아키텍처 설계 고려사항

• 컴포넌트 구조 (Atom → Molecule → Organism → Template(layout) → Page)
• MV* 구조 (MVC, MVP, MVVM, MVI)
• 웹 애플리케이션의 구조 (SPA, MPA)
• 렌더링 방식 (CSR, SSR)
• 상태관리 도구
• 폴더 및 파일 구조
• 서비스 인프라 구조

아키텍처를 그리는 도구

• https://app.diagrams.net/
• https://excalidraw.com/

 

프론트엔드 개발 로드맵

 

출처 :  https://roadmap.sh/frontend

 

 

 

모던 프론트엔드 아키텍처 개발

모던 프론트엔드란?

• 가장 최신의 프론트엔드 개발 트렌드를 통틀어 지칭하는 용어

 

https://www.lgcns.com/blog/cns-tech/cloud/48514/

 

 

1. 개발환경 및 기술 스택 선정

개발환경 구성도

• 운영체재 : window10, WSL2(Ubuntu 20.0.0)
• IDE : vscode
• DB : mongoDB
• Frontend : Node.js, JavaScript, TypeScript
• Backend : Java, SpringBoot
• 형상관리 : Git, Github
• 빌드/배포 : Jenkins
• 협업 툴 : Confluens, Jira

 

Frontend 개발환경 상세

• 프레임워크 : React
• 상태관리도구 : redux
• 스타일도구 : sass, tailwind
• 정적 분석 : ESLint, Prettier
• 빌드 : babel, webpack
• 테스트 : Jest

 

개발 전략 및 정책

- 웹 표준 기술

- 프레임워크에 대한 이해

- 동기, 비동기 통신 방식

- 반응형 웹

- 디버깅

- 성능 최적화

- 신규 기술 도입

- UI/UX 설계 도구 및 방식

 

 

 

2. UI 설계 방식 - Atomic Design 패턴

 

https://www.lgcns.com/blog/cns-tech/cloud/46396/

 

• 재사용 가능한 컴포넌트를 설계하면 개발 과정이 훨씬 효율적이 됩니다. 독립적이고 유연한 컴포넌트를 만들고, 이를 여러 곳에서 재사용하는 것이 핵심입니다. 이렇게 하면 프로젝트의 유지보수성과 생산성이 크게 향상된다.
  • 재사용 가능성: 컴포넌트가 단순하고 독립적인 기능을 수행
  • 확장성: 컴포넌트가 다양한 상황에 대응할 수 있도록 유연하게 설계
  • 공통성: 다른 컴포넌트와 기능이 비슷하다면, 공통된 속성이나 기능을 공유하도록 제작
  • 가독성 및 유지보수성: 컴포넌트의 코드는 읽기 쉽고 유지보수하기 쉽게 작성

 

 

3. 성능 최적화 도구 - 렌더링 개선, 테스트 등

 

4. 협업 도구 사용

• 개발 요건과 기획 시안 등 프로젝트 전반에 관한 자료 관리 - Confluence, Jira, Figma, Zeplin
• 실시간 커뮤니케이션도 Slack, Zoom, Teams

 

5. 아키텍쳐 정의

• 마이크로 프론트엔드(Micro Frontend) : 하나의 웹/앱을 구성하는 여러 모듈을 쪼개 빌드/배포하는 것
• 저장소 모델링 확인

 

---

 

아키텍처 설계 방식

• 고전 아키텍처 : 소프트웨어 시스템을 설계시 전통적인 방법론
• FSD(Feature Sliced Design) : 기능 분할 설계

 

 

고전 아키텍처 특징

• 자유롭게 사용하고 있는 익숙한 방식이다.
• 고전 아키텍처의 경우 기능을 어떤 모듈이나 컴포넌트에 넣을지 명확하지 않은 경우가 있다.
• 다른 모듈 내에서 모듈 사용이 어렵다.
• 글로벌 함수의 암시적 종속성으로 인해 구조가 복잡해진다.

 

FSD 특징

• 아키텍처 표준화
• 아키텍처 구성 요소를 쉽게 교체, 추가, 제거할 수 있다.
• 방법론과 개발 스택이 독립적이다.
• 모듈 간의 연결이 제어되고 명시적이다.
• 비즈니스 지향적이다.
• 다른 아키텍처에 비해 진입장벽이있다.
• 인식, 팀 문화 개념 준수가 필요하다.
• 솔루션 문제 발생시 즉시 해결책을 확인 해야한다.