MVC패턴

📘 React

MVC에서 FLUX 패턴 구조로 마이그레이션하기 (2) - 적용 편

(이전 글에서 계속됩니다) 단계별 적용하기 1. 로직 분류 가장 먼저, 기존에 Controller에 있던 함수들을 전부 분류하는 작업을 진행하였다. 재사용성이 큰 상태 데이터는 Context로, 특정 컴포넌트 내부에서만 사용되는 상태 데이터는 해당 컴포넌트의 Controller로, LogData의 값을 변경하는 데이터는 Reducer로 주석을 달아 분류해주었다. 2. ContextAPI, useReducer 적용 다음 Context를 생성하고 적용을 원하는 범위에 Provider를 감싸주었다. 재사용성이 큰 로직들을 LogContext에 담고, LogData 상태를 변경하는 로직들의 경우 아래의 예시와 같이 객체 형태의 Reducer로 분리하여 Conetxt에서 호출 및 가공하여 사용하도록 했다. use..

📘 React

MVC에서 FLUX 패턴 구조로 마이그레이션하기 (1) - 문제인식 편

개요 데브코스 파이널 프로젝트인 산책로 기록, 공유 서비스 마실가실 개발을 진행하면서, 산책을 기록하고 저장하는 LogRecord 기능을 팀원 한 분과 함께 작업하였다. 컴포넌트의 디자인 패턴으로는 MVC 패턴을 활용하였는데, 프로젝트 기획 단계에서 다양한 패턴을 경험해보자는 취지로 이를 채택하였고 앞선 2주 간의 스프린트 기간 동안 해당 기능에 대한 기본적인 구현을 끝내놓은 상태이다. 다음 스프린트를 시작하기 전, MVC 패턴으로 구성한 코드에 개선이 필요하다고 생각되어 진행하였던 리팩토링 과정을 정리해놓으려 한다. 기존의 컴포넌트 구조 먼저 기존에 설계한 컴포넌트 구조를 도식화해보았다. 상위 컴포넌트인 logRecord는 Model, Controller, View로 구성된다. Model에는 하위 컴포..

황재웅 Jaeppetto
'MVC패턴' 태그의 글 목록