React의 Clean Architecture

반갑다 선생님들.

난 곧 2년차가 되는 1년차 갓난 프론트엔드 개발 조무사다.

현재는 벳플럭스라는 스타트업에서 늘펫 플러스라는 챗봇을 이용한 동물병원 고객 관리 웹 솔루션을 개발하고 있다.

수식어가 너무 긴 것 같지만 어쩔 수 없다. 우리 회사니까 잘 설명하고 싶은건 어쩔 수 없지 않은가 ? 껄껄

 

하여튼 개발을 하는데 있어서 기존의 난해한 코드와 내 갓난 코드들을 합치다보니 여간 어려움이 많다.

현재는 아토믹 디자인 패턴이 들어가 있는 상태인데, 이게 철저히 분리되었다기보단 약간 인식적으로? 얘는 이쯤이겠지.. 하는 느낌이며, 별로 효율적인 느낌이 안든다.

 

그래서 초 경력자이신 사수와 나는 앞으로 개발함에 있어 클린 아키텍처를 도입하려고 한다.

이름하여 엑조디아 아키텍처 !  하나 하나씩 고쳐가면서 붙인단 뜻이다. 멋있지 않은가 ?

 

난 클린 아키텍처의 구조 정도를 이해하긴 했으나 아직 구현을 해본 적은 없다.

남들의 클린 아키텍처를 조금 엿보긴 했으나 뭐 해석하기 나름이고, 내가 이해한 건 사수가 나에게 설명한 구조다.

 

늘펫 플러스의 클린 아키텍처

안드로이드 클린 아키텍처

구글링해서 비슷한 형태의 이미지를 찾아왔다. 사수가 안드로이드 개발을 잘하시는 분이라 이 개념을 잘 알고 계신 듯 했다. 리액트에선 State로 인해 저렇게 완전히 분리하는게 상대적으로 어렵다고 했던 것 같은데 뭐 해봐야 알듯 싶다.

 

3가지로 분리한다.

• Repository 
• Domain
• Presenter

1. Repository - 데이터 관련
   1. Remote → 파이어베이스, 엑시오스 관련 코드
   2. local → 로컬, 세션, 캐시 관련코드
2. Domain
   1. Service → 하나 하나의 기능들. 파싱, 소팅 등의 기능들. 유즈케이스에서 받아온 데이터로 다음 기능들을 만들 수 있음.
   2. Use Case → Repository 데이터를 불러오는 CRUD. DTO등을 적용해서 이곳에서 불러옴. 의존성 주입으로 Repository와 분리될 수 있음.
3. Presenter
   1. View → 화면단. 렌더링에 관한 코드만이 들어감. 렌더링에 필요한 데이터들은 뷰 모델을 호출하여 화면에 나타내기만 함.
   2. View Modal → 렌더링에 필요한 데이터들을 서비스들을 조합하여 만들어냄.

+ 컨텍스트 API가 있을듯 싶다?

 

노션에 사수 설명을 듣고 내가 진짜 대충 정리한 내용이다. 뭐 확인 받은 것도 없다.

아마 잘못 알았던 부분이 있다면 앞으로 고치지 않을까 싶다.

 

혼자 공부하기 위해, 클린 아키텍처를 공부하면서 우리 회사 코드를 개인 컴퓨터에 클론 받아 하나의 템플릿 정도를 완벽하게 저 형태로 만들어보고자 한다.

사수는 아마 하루에 2시간씩 6개월 정도하면 가능하다고 하니까.. 원펀맨 영웅의 길 폰겜은 접는걸로 해야하지 않을까,,

새해 목표로 삼아야겠다... 아자아자 화이팅 신이나는 2023년 ~