본문 바로가기

clean architecture

(3)
프론트엔드 클린 아키텍처 with React 원문 : https://bespoyasov.me/blog/clean-architecture-on-frontend/ Clean Architecture on Frontend In this post, I describe what the clean architecture is, how to use it with JS/TS code bases and if it's even worth it. bespoyasov.me 백엔드에서 주로 사용하는 클린 아키텍처를 프론트엔드에 어떻게 적용할 수 있을까? 레이어의 분리 먼저 의존성의 방향을 정립하기 위해 레이어를 분리한다. 가장 순수한 우리의 코드, 애플리케이션인 Domain은 다른 어떤 것에도 의존해선 안된다. Domain 계층에는 도메인 객체, 도메인 서비스만 존재할 수..
리액트와 유닛 테스트를 위한 클린 아키텍처 [부제, 의존성 주입은 정말 필요한가?] 아래 글에 포함하려다 따로 떼내어 적습니다. https://itchallenger.tistory.com/771 헥사고날 아키텍처와 관심사의 분리를 이용한 클린 코드 1. 어니언, 헥사고날 아키텍처 헥사고날, 어니언 아키텍처는 port, adaptor 패턴의 별칭일 뿐입니다. https://blog.ploeh.dk/2016/03/18/functional-architecture-is-ports-and-adapters/ Functional architecture.. itchallenger.tistory.com 리액트의 모든 컴포넌트 인터페이스는 다음과 같이 추상화 할 수 있습니다. (props:React.ChildrenWithProps)=>React.ReactNode 하지만 보통 구체적인 구현체인 평션 컴포넌..
React 디자인 패턴 : 관심사의 분리 (Seperation Of Concern) https://dmitripavlutin.com/orthogonal-react-components/ The Benefits of Orthogonal React Components How to design React components that are easy to change, maintain, and test? Strive to orthogonal React components. dmitripavlutin.com Orthogonal components A와 B가 직교하는 경우 A를 변경해도 B는 변경되지 않으며 그 반대의 경우도 마찬가지입니다. 그것이 직교성(통계적 무연관)의 개념입니다. 아래 그림에서 FM/AM 라디오 방송국 선택과 볼륨 조절은 서로 영향을 주면 안됩니다. 한 컴포넌트의 변경이 다른 ..