요즘 실무에서 React를 사용중이다.

프론트엔드 개발자로 일하면서 처음 React를 써본다.

사실 Vue를 주로 사용하면서 React를 꼭 사용해보고싶다는 생각이 컸다.

왜냐면 그냥 단순하게 프론트 진영에서 제일 인기 많은 프레임워크이기 때문이다.

뭐 생태계도 크고 React만 잘하면 Vue나 Svelte 같은건 조금만 공부해도 금방금방 할 수 있다는둥 그런 소리도 많이 듣기도했고..

어쨌거나 실무에선 Vue만 써봤지만 처음 프론트 공부를 시작했을 때 당연하게도 React를 공부했었기 때문에 언젠간 써보고 싶다는 생각이 컸었다.

그런데 이번 2월말 3월부터 다른 서비스를 관리하게 되면서 React를 쓸 기회가 생겼다.

현재 내가 새로 관리하는 서비스는 레거시 코드들이 대부분이다.

프론트엔드 개발자라 JAVA, JSP에 대한 지식이 거의 없지만, 현재 내가 관리하는 프로젝트는 JAVA 환경에 JSP로 구축이 되어있다.

또한 그 안에서 1세대 프론트엔드 프레임워크도 쓰였다.

때문에 작업하기 매우 난감한 상황이다.

하지만 어쩌겠는가. 개발자라면.. 해결책을 찾아야하는 것을..

이 때문에 그나마 어느정도 지식이 있는 Vue앱을 JAVA 환경에 마운트시키는 방식으로 작업하고자했다.

하지만, 언제까지고 Vue만 써보는 것 또한 재미가 없기에 + 위에서든 이유로 React를 선택해 공부하면서 React 앱을 JAVA 환경에 마운트 시켜가며 개발중이다.

이 과정은 순탄치 않았다.

새로운 페이지를 개발하는 것도 아니고 기존 페이지에서 특정 부분을 작업하고 개선하는 업무였기 때문에, 아예 JAVA 코드로 새 라우터를 따서 작업할 수도 없기 때문에,

React 앱으로 부트스트랩 코드를 만들어 마운트, 리렌더, 언마운트 할 수 있는 함수를 제공해 특정 컴포넌트를 마운트시키는 식으로 작업해야했다.

이 과정에 당연히 props를 넘겨줄 수도 있어야하며, 중앙 스토어는 각 컴포넌트마다 분리되어야했고,(때론 통일되어있어야하고) 해당 빌드 결과물을 JAVA에서 받아올 수 있도록, 빌드 결과물을 기록할 수 있는 vite 플러그인을 따로 작성해야 했다.

그리고 그 과정에 해시값도 넣어줘 캐싱되는걸 방지해주고, 리액트 앱이 기존 JAVA 환경의 스타일의 영향을 받지 않도록, 그리고 반대로 영향을 주지 않도록 리액트 앱 안의 스타일을 캡슐화해주는 작업까지 해야했다.

이러한 작업들을 완성하고나서 기능이 잘 작동하는 것을 보고나니 기분은 뿌듯하지만, 그리고 리액트 동작 원리에 대해 좀 더 이해한 기분은 들어서 좋으나, 나중에 이 코드를 보게되거나, 혹은 관리하게될 다른 작업자가 걱정되긴 했다. 복잡하기 때문에..

여튼 레거시 코드를 대할 때마다 어떻게 하는 것이 좋을지에 대한 고민이 항상 드는 것 같다.

내 코드도 언젠간 레거시 코드가 될텐데, 그때 해당 코드들을 마이그레이션하기 좋게하려면..?

회사에 인력과 시간이 부족한 상황이라면 항상 개편할 수도 없을테니까 이러한 고민이 항상 들지만, 그에 대한 명확한 답은.. 잘 모르겠다.

마이그레이션 및 버전업 하기 쉽도록 분할하고 또 분할하고.. 모노레포방식으로 분할하든 마이크로 프론트엔드로 하든..

현재 생각에는 이렇게 해야 그나마 나중에 레거시 코드가 되었을 때 마이그레이션, 버전 관리가 쉬울거같긴하다.