기존에 django로 개발하였고, 여러 문제점을 마주함.
개발비용을 절약하기위해 create-react-app으로 시작했으나 설정차이로 인해 미묘한 오류 발생.
오류 해결을 위해 여러 라이브러리를 사용하여 소스코드를 변경해서 사용하여 문제해결함.
현재는 대부분의 서비스를 현대의 리액트로 개발하게되었다.
서비스가 늘어나면서, 문제가 발생하였다.
문제
1. 의존성지옥
A, B를 개발완료하고 A와 B를 의존하는 X라는 서비스에서 문제가 발생한다. (X를 패치하면 A의 동작이 바뀐다거나, 빌드에 실패하는 등등의 문제들..)
2. 길어진 빌드시간 -> 개발 생산성에 영향주니 반드시 해결해야함.
A의 코드를 조금만 수정하여도 , B부터 Z까지 서비스를 모두 새로 빌드해야 하니 빌드 시간이 길어졌다.
(평균 20분부터 최대 45분)
마이크로 프론트엔드 아키텍쳐 도입
1. 기존의 거대한 소스 코드를 독립적인 패키지로 분리
"인프라패키지, 라이브러리 패키지,서비스 패키지" 로 분리하여 빌드
-> 유지보수가 이루어지는 단위를 기존으로 분리함
인프라 패키지 : 동일한 빌드 툴링을 공유하기 위함
라이브러리 패키지 : 공통 소스코드를 관리하기 위함
서비스 패키지 : 페이지에서 독립적으로 작동하기 위함
2. 어떻게 구현하였나?
Yarn 2 Workspace Plugin
3. 뭐가 좋은가?
- 소스코드부터 빌드 설정까지 완벽한 격리
- 의존성 지옥 탈출
- 빌드 속도 최적화
-> 엔지니어 간의 커뮤니케이션 시간을 대폭 줄일수 있었음.
빌드 속도를 줄이는 가장 좋은 방법?
"빌드를 하지 않는것"
소스 코드가 바뀐 패키지만 빌드하고, 나머지는 기존 빌드 결과물을 재사용한다.
- > incremental build : 토스에서는 zero build 라고 부름
- > 최대 3분의 빌드 시간 15배 이상의 빌드속도를 단축시켰다.
React/ Micto-frontend 도입 전 고려해야 할 것들.
1. React를 도입해야하는 이유
2. React 도입에 따른 백엔드의 변화
3. 모놀리식 코드베이스에서 프론트엔드 빌드 성능을 개선 시키는 방법