React mvvm 적용기

안녕하세요! Team Croco에서 "마이월렛"이라는 프로젝트를 리딩하고 있는 오웬이라고 합니다. 팀 내에서 저의 역할은 프로젝트가 늘어지거나 문제가 생기지 않도록 프론트엔드와 백엔드에 적절한 도움과 압박(?)을 주는 역할입니다. 실제로 오픈 후 어드민 서비스의 경우 적절한 라이브러리들을 택해 3시간 만에 추가했던 일도 있었습니다 😃
오늘은 마이월렛 프론트엔드에서 적용했던 아키텍쳐 패턴인 MVVM를 적용한 이야기를 하고자 합니다.

왜 MVVM을 적용했을까?

model-view-viewModel로 이루어진 아키텍처 패턴입니다.
사실 다양한 아키텍쳐 디자인이 많지만 view, viewModel, model간의 의존성이 없다는 것이 가장 매력적이었습니다. viewModel의 경우 ts 파일로 작성해 명시적으로 로직을 분리할 수 있었습니다.
약간의 차이는 viewController를 만들어 viewModel을 view에 바인딩하는 용도로 사용했습니다. 밑에서 더 이야기를 하겠지만 개인적으로 아쉬웠던 판단이었습니다.

실제 적용 예

const ViewController = React.memo(() => {
	const viewModel = useViewModel();
	return <View viewModel={viewModel}/>;
});

엄격하게 적용하기

개인적인 경험으로 이러한 패턴의 경우 잘 적용할 경우 좋은 효과를 내지만 충분히 이해하지 못하거나 귀찮음 등으로 인해 적용되지 않는다면 오히려 개발 생산성을 떨어뜨리기만 합니다.
팀에서는 Typescript를 사용 중이었기 때문에 Type을 통한 약간의 강제성을 부여하기로 결정해 view와 viewModel의 타입을 정의해 사용했습니다.

아쉬운 점

Nextjs의 ssr

마이월렛의 프론트는 Nextjs를 통해 개발되었습니다. 그러다보니 SSR앱이지만 SSR을 하기 애매한 상황이 일어났습니다.
Next.js는 getServerSideProps라는 함수를 통해 컴포넌트 밖에서 props를 통해 값이 전달됩니다. 위에 보여드린 저희 팀의 mvvm 활용 방식은 이러한 구조를 고려하지 못한 채 적용되었습니다. api통신을 model을 통해서만 이뤄지도록 설계하였다보니 컴포넌트 외부에서 모델을 활용할 수가 없었습니다. model의 초기화가 클라이언트 사이드에서 이뤄지다보니 서버사이드에서 접근할 방법이 없었습니다.
자료를 찾아봐도 적당한 사례를 찾을 수 없었고 현재는 클라이언트 사이드 렌더링만을 사용하고 있습니다. (이럴거면 Next.js를 왜...)
조만간 이에 대해 고민해보고 적절한 타협책을 찾아볼 생각입니다. 기회가 된다면 블로그에 정리해서 업로드해보겠습니다 😉

view controller와 view의 명확한 분리

view와 view controller를 명확히 분리하지 않은채 view controller를 provider로써 활용했습니다.
그러다보니 view를 재활용하기가 가끔 까다로운 경우가 있었습니다. 조금 더 경험을 쌓고 다양한 시도들을 해본 후 다시 한번 공유해보겠습니다!

마무리

오늘은 마이월렛 프론트엔드 아키텍처에 mvvm을 적용한 이야기를 적어보았습니다.
글을 발행하는 지금 가입해주신 유저수가 4500명을 넘어가고 있네요!

가입해주신 분들께 감사드리며 글을 마치도록 하겠습니다.

PS) 현재 팀 크로코에서 프론트엔드 개발자를 모집중이니 많은 지원 바랍니다. 지원하러 가기