혜움 레포트 프론트 개선 - 1

안녕하세요. 혜움랩스에서 개발자로 일하고 있는 문현제입니다.

혜움에는 혜움 레포트라는 세무 서비스를 위한 페이지가 있습니다. 이번 글에서 혜움 레포트를 점진적으로 개선했던 경험을 공유해보려고 합니다.

혜움의 서비스는 장고로 구성되어 있고 모든 트래픽을 장고에서 처리하는 방식이었습니다. 사용자가 브라우저를 통해 혜움 레포트에 접속하면 다음과 같이 요청이 처리되고 있었습니다.

 

 

그리고 혜움 레포트의 화면은 장고 템플릿으로 공통 컴포넌트가 그려지고 실제 메인 페이지 부분은 django-webpack-loader를 통해 vue.js앱이 그려지고 있었습니다. 또한 장고 템플릿으로만 작업된 페이지들도 있었습니다.

 

 

이런 구조 속에서 개발을 하면서 불편한 점이 몇 가지 있었습니다. 화면에 그려주는 로직이 프론트(vue.js)와 서버(django)리포지터리에 분리되어 있어서 화면작업을 위해서 두 레포지터리를 작업해야 합니다. 특히 더 어려웠던 점은 프론트 코드와 서버 코드에서 각각 상대방의 코드를 사용하는 경우였습니다. 어떤 코드가 어디에 영향을 주고 있는지 파악하기가 어려웠습니다.

 

또 장기적으로 좋은 코드, 좋은 제품을 만들기 위해 적용해보고 싶은 것들도 있었습니다. 정식 릴리즈된 vue3와 composition api와 같은 신규 기능들을 도입하고, unit test, TypeScript 적용으로 개발 경험도 개선하고 싶었습니다.

 

그렇다면 이제 문제는.. 현재 라이브로 고객들에게 제공되고 있는 서비스에서 이런 대규모 개선작업을 어떻게 진행할 것인가 였습니다. 현재 제공되는 서비스의 규모가 방대하고, 공격적으로 신규 서비스를 개발해야하는 상황에서 기존 페이지를 전부 재작성하는 옵션은 선택할 수 없었습니다. 그래서 스트랭글러 패턴을 통해 점진적으로 개선하기로 하고 다음과 같이 마일스톤을 세웠습니다.

1. 기존 화면을 변경없이 보여줄 수 있는 새로운 프론트엔드 앱을 작성한다.
   • 장고 view 내부에서 처리되던 로직을 api로 재작성한다
   • 장고 템플릿으로 처리되던 컴포넌트(상단 바, 사이드 메뉴)들을 신규 vue3 코드로 재작성한다.
   • vue3 앱 안에서 기존 legacy vue2 앱을 경로에 따라 렌더링 한다.

2. 경로에 따라 프론트 앱과 장고 서버 앱을 프록시 처리할 수 있는 인프라를 구성한다.
   • 장고 서버에서 반드시 처리해야하는 경로를 전부 파악한다.
   • 해당 경로의 트래픽을 프록시처리할 수 있는 nginx 서버를 구성한다.

3. 장고 템플릿으로 제공되던 페이지들을 전부 vue로 재작성한다. (진행중)
   • 페이지를 이전할 때 마다 해당 경로의 nginx 프록시를 삭제하여 프론트 앱에서 화면을 처리하도록 한다.

4. 서버와 프론트를 완전히 분리한다.
   • 장고 서버는 api 서버 역할만 담당하도록 하여 subdomain을 분리 한다.
   • 기존 사용하던 서비스의 도메인은 html만 서빙하도록 수정한다.

현재 3단계 마일스톤을 거의 마무리한 상태로 다음과 같이 서비스를 제공하고 있습니다.

• 인프라 구조

• 화면 구조

 

최종적으로 4단계 작업을 마무리 하게되면 더이상 nginx 서버를 사용할 필요가 없기 때문에 route53 도메인에서 바로 s3에 저장한 html을 cloudfront를 통해 제공하는 방식으로 간단하게 변경이 될 예정입니다. 이 작업까지 완료가 된다면 진정한 의미의 서버와 프론트 결합을 제거할 수 있을 것 같습니다.

다음 글에서는 이런 multi-app 형식으로 개선작업을 하는 도중 마주친 문제들과 해결한 방법들을 써보도록 하겠습니다.