개발자
안녕하세요, 2년차 프론트엔드 개발자입니다. React나 Vue같은 FE Framework를 사용할 때 MVVM이라는 디자인 패턴을 주로 적용한다고는 알고있는데, 항상 검색해보면 실제 구현한 코드를 본 적이 한 번도 없어서 이 패턴이 요구하는 바를 정확히 이해하지 못하는 것 같습니다. 혹시 MVVM 패턴이나 그 외 패턴이더라도 React에서 특정 디자인 패턴을 적용한 사례(코드 레벨까지면 더 좋겠습니다)를 아시는 분께서는 링크를 공유해주시거나 따로 설명해주시면 정말 감사드리겠습니다!
답변 1
안녕하세요! 저는 실무에서 두 가지 패턴을 사용해봤는데요 1. Atomic-design 컴포넌트를 목적에 따라 화학적 단위로 쪼개고 각 컴포넌트를 조합하여 아키텍처를 구성합니다. - Atomic - Molecules - Organisms - Templates - Pages 코드 예시 https://github.com/danilowoz/react-atomic-design 2. Clean Architecture 외부에서 내부로 향하는 의존성 규칙을 지키고, 계층을 분리하여 유지보수하기 좋은 아키텍처를 구성합니다. 예를들어 Button이라는 UI 컴포넌트가 있을 때 버튼을 클릭하면 특정 데이터를 가져오는 시나리오에서 버튼은 특정 데이터를 가져오는 함수에 의존합니다 외부 -> 내부 UI (Button) -> fetch Controller -> fetch Use case -> Data Entities 코드 예시 https://github.com/falsy/react-with-clean-architecture/tree/master/src/domains 주변 프론트엔드 개발자분들이랑 대화해보면 Atomic-design 패턴을 프로젝트에 맞게 변형해서 많이 사용하는 것 같습니다:) *코드 예시로 첨부한 링크는 검색해서 발견한 레포지토리들입니다~
익명
작성자
2022년 10월 28일
안녕하세요, 성원님! 덕분에 잘 읽어보았습니다. 이제 실제로 프로젝트에 적용하면서 배워가면 될 것 같습니다. 감사드립니다~
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!