clean architecture front end
1.0.0
안녕하세요, 다음은 다른 버전으로 깨끗한 건축에 대한 내 비전 (첫 번째 전면, 나중에)을 보내는 저장소가 있습니다.
나는이 프로젝트의 예를 뒷받침하기위한 기사를 썼다 : https://www.hexa-web.fr/blog/hexagonal-architecture-front-end 깨끗한 아키텍처를 이해하기 위해 Front-End : https://www.web.fr/blog/blog/dependencion-ender-end-end.
이 예에서는 React를 기반으로 Next.js를 사용하기로 결정했지만이 아키텍처의 요점은 사용 된 프레임 워크 및 라이브러리 (외부 종속성)와 독립적으로 사용할 수 있습니다.
간단한 예를 가지려면 간단한 주제를 선택했습니다 : Todo List!
프로젝트에서 여전히 수행 해야하는 작업을 보려면 /docs/todo.md 파일로 이동하십시오.
질문, 제안 또는 다른 것이 있으시면 주저하지 말고 저에게 연락하십시오! 이 저장소가 도움이된다면 아는 사람과 공유하는 것을 고려하십시오.
먼저 종속성을 설치하십시오.
npm install
# or
yarn install-
그런 다음 개발 서버를 실행합니다.
npm run dev
# or
yarn devhttp : // localhost : 3000을 열어 브라우저를 사용하여 결과를 확인하십시오.
-
단위 테스트를 시작하려면 :
jest-
온라인으로 앱을 테스트하려면 https://front-end-clean-architecture.netlify.app/
육각형 아키텍처 또는 포트 및 어댑터를 기반으로 한 아키텍처는 소프트웨어 설계 분야에서 사용되는 아키텍처 패턴입니다. 느슨하게 결합되어 포트 및 어댑터를 통해 소프트웨어 환경에 쉽게 연결할 수있는 애플리케이션 구성 요소를 기반으로 시스템을 작성하는 것을 목표로합니다. 이러한 구성 요소는 모듈 식 및 상호 교환 가능하며, 처리의 일관성을 강화하고 테스트의 자동화를 용이하게합니다.
클린 아키텍처에는 응용 프로그램 부분 (기본 포트 및 어댑터), 도메인 (사용 사례, 도메인 모델 등) 및 인프라 부분 (보조 포트 및 어댑터)의 세 부분이 있습니다.
이 아키텍처는 포트 / 어댑터 패턴과 종속성 반전 원리를 기반으로합니다.
깨끗한 아키텍처 (또는 육각형 아키텍처)에 대해 문서화함으로써. 이 부분에 대해 다른 이름을 찾을 수 있습니다. 여기서 선택된 이름은 개인적이며 목표는 이해할 수 있다는 것입니다.
사용 사례는 사용자의 동작을 정의합니다. 목표는 이러한 요소의 프레임 워크 나 라이브러리를 사용하지 않는 것입니다 (논리를 이러한 도구와 결합하지 않도록하기 위해).
전면에서는 JS 또는 TS로 작성된 클래스별로 기능별로 표현할 수 있습니다. React를 사용하면이 부분에 Redux를 사용할 수 있습니다.
Redux가 사용되는 경우, 동작은 사용 사례이고 상태는 모델 중 하나이며 선택기는 매핑에 사용됩니다.
기본 포트는 1 차 어댑터와 사용 사례간에 계약을 체결하는 데 사용됩니다. 이를 위해 인터페이스를 만들 수 있습니다. 실제로, 사용 사례는 기본 포트로 간주됩니다.
그런 다음 이러한 인터페이스의 구현은 도메인과 대화하는 데 사용됩니다. 첫 번째는 기본 어댑터라고 부릅니다. 그들의 목표는 사용 사례의 실행을 유발하는 것입니다. 예를 들어, 전면의 경우,이 어댑터는 동작을 트리거하는 반응 구성 요소가 될 수 있습니다 (Redux 여부).
보조 포트는 보조 어댑터와 사용 사례간에 계약을 체결하는 데 사용됩니다. 이를 위해 일반적으로 인터페이스를 만듭니다. 이 인터페이스는 사용 케이스에서 직접 사용됩니다.
팁 :이를 위해 종속성 주입을 사용할 수 있습니다. 일부 주 관리 라이브러리를 사용하면이를 수행 할 수 있습니다. 예를 들어 Redux-Thunk 및 Redux-Observable의 경우 Redux 작업에서 직접 사용할 수있는 "Extra Oarguments"를 통과 할 수 있습니다. "바닐라"에는 수치가 있습니다.
인터페이스 (포트)의 두 번째 구현을 보조 어댑터라고합니다. 그들은 사용 사례에 의해 불려집니다. 예를 들어,이 어댑터는 HTTP 요청, 로컬 스토리지에있는 데이터에 대한 액세스 등이 될 수 있습니다.
영어로 :
프랑스어로 :
