[PROJECT] 내 인생 첫 프로젝트 리뷰

처음 투입 됐을 때 나.

누구든 내 블로그를 보면 포트폴리오로 쓰일 수가 없는 블로그라고 생각하겠지만, 나는 이거 포폴로 쓸 예정이다. 

왜냐 내가 일하면서 느낀 희로애락이 다 들었기 때문에 이만큼 솔직하게 날 전달할 수 있는 블로그는 없다고 생각하기 때문이다. 

하여튼 포폴로 쓰기로 결정을 하면서 어차피 Private한 페이지, 코드들이 있기 때문에 뭐 코드 복붙떠서 나오는거도 대부분 고객사 보안 위반이고 그래서 그냥 텍스트로나마 플젝을 진행했던 후기를 남겨보고자 한다. 

 

사실 이 프로젝트가 완전 쌩 처음은 아니다. 학원에서 했던 완전 발가락으로 만들어도 그거보단 나은 프로젝트가 있기 때문이다. 

그래도 회사에 입사하고나서 하게 된 프로젝트는 이게 처음이기 때문에 이걸 내 커리어의 시작으로 정해두고 쓰려고 한다. 

그럼 한번 시작해보자. 

 

1. 프로젝트에 들어가면서 

처음 시작한 프로젝트는 기존에 기 개발 되어있었던 실패작 데이터 플랫폼을 새로 만들어주는거였는데, 나는 진짜 운이 좋은건지 나쁜건지 새로 개발하는 웹앱을 만드는게 아니라 레거시를 새로 만드는 웹앱에 맞춰서 추가로 개발하는거였다. 
플젝이 끝나고 나서 클라이언트한테 듣기로는 내 파트를 새로 만드는데 상당히 큰 금액을 요구해서 울며 겨자먹기로 우선순위가 조금 낮고 지금도 잘돌아가고 있는 그건 유지하고 나머지를 새로 개발하자 이런거 였다는데 하여튼 그래서 난 입사동기들과는 전혀 다른 기술과 전혀 다른 환경에서 개발을 시작했다. 

먼저 새로 개발하게 될 웹앱의 기술은 React, TypeScript에 MobX로 상태관리를 하는 MSA 프로젝트였는데, 내건 React만 같고 나머진 다 달랐다. 그냥 JS를 사용하고 있었고, 상태관리도 Redux로 하는데다, 아키텍쳐도 말만 MSA고 Monolithic Application 여러 개 만들어 둔거였다. 그래서 각 마이크로서비스 다른거로 넘어갈때마다 화면 깜빡이고 말도 아니었음. 
입사하면서 상태관리는 MobX 쓸거라고 해서 그거만 주구장창봤는데 Redux가 웬 말이냐.. 라면서 초반에 거의 울면서 공부했다. 
다른 동기들 미리 공부한거 써먹으면서 재밌게 하는 것 같은데, 나만 잠 못자고 안 그래도 러닝커브 좀 있는 Redux보려니 그냥 눈물 겨웠음.. 그래도 이렇게 한 덕분에 성장이 좀 빠르긴 했는데, 그 이유는 Redux를 이해하려면 그 전에 React 자체도 제대로 이해해야하고 새로 만드는 웹앱의 경우엔 회사 전체적으로 개발 가이드라인을 내려줘서 거기 따라서 개발하면 됐으니까 무난히 쉽게 개발할 수 있었지만, 난 앱 구조 자체부터 처음부터 파기 시작했어야해서 꽤 많은 시간 잠 덜 자고 공부하는 노력을 투자한 덕분이라고 생각한다. 

 

2. 프로젝트 중 있었던 이슈

이게 문제가 많을 수 밖에 없었던게, 애초에 서로 다른 앱 두개가 도는데 그 두 개가 하나인 것처럼 자연스럽게 넘나 들어야한다고 했었다. 그 땐 잘 몰랐으니 "네 알겠습니다." 하고 걍 어떻게든 되도록 개발했는데 지금 돌아보면, 말이 되나? 라고 생각해야할 상황이었다. 

1) 첫번째 이슈 - 다른 인증시스템 어떻게 처리해..?

애초에 새로 개발하고 있는 웹앱의 경우에 우리 회사에서 개발하다보니 우리회사에서 인증서버를 따로 구축을 했다. 그리고 해당 서버에서 토큰을 발급해주면 그 토큰으로 프로그램 내부적 권한에 따라 서비스에 접근하게 되어있었는데, 이 레거시는 keycloak이라는 오픈소스를 쓰고 있었다. 그래서 프론트든 백이든 토큰이 다르니 새로 개발되는 프로젝트와 교류자체가 안됐는데, 백에서도 이 인증을 변경하는 일은 없을거라고 해서 그냥 프론트 레벨에서 어떻게든 해야만 했다. 
대충 내가 개발하는 페이지 들어오는 플로우가 새로 개발한 앱으로 로그인 => 내 메뉴가 포함된 MS진입 => 내 메뉴 클릭 이런 식인데, 그럼 새로 개발하는 페이지 측에서 내 메뉴로 넘어오는 시점에 keycloak 토큰을 발급받아야하는거였다. 그래야만 내 메뉴안의 서비스 CRUD가 가능하니까. 
솔직히 이 문제는 내 파트도 새롭게 개발하는게 가장 깔끔했는데.. 일단 하라면 해야하니 토큰 발급을 ID/PW 입력 없이 할 수 있도록 하는 방안을 생각했다. 물론, 리드 개발자 분들의 도움을 받긴 했지만.. 그래서 이 문제의 해결방법은 SSO를 활용하는 것이었는데, 이 프로그램 자체가 회사 내부망안에서 돌아가다보니 내부에서 사용하는 시스템 모두 직원들의 사용자 정보가 담긴 SSO 를 활용해서 로그인을 할 수가 있었다. 그래서 내 App이 호출되면, SSO 로그인을 하는 페이지로 Redirect 시켜서 "Login 중... " 이라는 메세지는 뜨지만 정상적으로 토큰 발급이 되고 내 쪽 시스템도 이용할 수 있도록 개발했다.
(나중 일을 얘기하면 새로 개발한 앱 쪽에서 Admin계정으로 접속해도 내가 개발한 앱은 SSO 로그인을 해버리기 때문에 그 PC 주인의 계정으로 로그인 된다는 문제가 있어서, 결국 프로젝트 막판에 신규 개발 웹앱으로 밀어넣기 위해 React, TS, MobX 환경을 쓰는 MS로 마이그레이션 했다. 이건 더 아래에서 설명하겠음.)

2) 두번째 이슈 - 앱 내부에서 사용하던 데이터들 어떻게 공유해..?

이것도 앞선 문제만큼 크리티컬한 문제였는데, 이게 자세히 말해줄 수는 없지만 전역에서 지정하는 특정 정보를 기준으로 데이터를 가져오고 활용하고 하는 그런게 있어서 내 앱으로 넘어올 때 그 정보를 어떻게 공유할거냐는 문제가 있었다. 근데 이건 생각보다 간단히 해결이 됐는데 그건 Local / Session Storage를 쓰는거였다. 
일단 기본적으로 이게 왜 됐냐면, 두개 앱이 사용하는 루트 도메인이 같았다. 이거 아니었으면 진짜 어캐해결했을지 감도 안오는데,
설명하자면, 루트도 메인이 같은 신규개발 앱에 먼저 접근을 할테니, 거기서 사용하고 있는 정보를 LocalStorage에 넣어두고, 난 내 앱에 접근이 돼서 화면에 내 앱이 표시되는 타이밍에 LocalStorage에 있는 정보를 꺼내와서 State에 initial Value로 넣어주는 식으로 개발했다. 
아무래도 개발자도구를 열면 관련 데이터들이 노출된다는 점에서 Miss 라고 생각하는데, 더 좋은 방법이 있었을지 모르겠다.. 

3) 세번째 이슈 - 전혀 다른 환경으로 Migration 하기

앞서 말했듯 이런 저런 이슈가 하도 많아서 결국 마지막엔 마이그레이션을 했다. 그렇다고 마이그레이션 한게 적용됐느냐 묻는다면 그건 아니다. 어차피 동일한 프로젝트에 추가 기능 개발해주는 다음 프로젝트가 또 예정 되어있었어서, 어차피 할거니까 미리해두자. 이런거였는데 그 레거시 플젝을 아는 사람이 나말곤 없어서 그냥 내가 혼자 다했다..
일단 전체적인 환경을 설명하자면 신규 개발한 앱은 MSA라고 했으니 마이크로서비스들은 모두 모듈로 개발을 한다. 그리고 이 모듈을 Nexus Repository에 올려두면 APP이 마이크로서비스들을 패키지 매니저(npm, yarn) 을 사용, 내려받아서 router에 지정해둔 url이 호출되면 모듈별로 갈아끼는 방식이다. 
내가 개발하던 앱은 MA다. 즉, CRA로 만드는 앱. 모듈 이런거 없이 독립된 App하나가 돈다고 보면 된다. 내가 만든 파트는 신규개발한 앱에선 MS레벨이었고, 이걸 마이그레이션 하기 위해선 프로젝트를 조금 고치는 수준이 아니라 그냥 아예 새로 만들었어야했는데 덕분에 번들러부터, babel 등 안본게 없는 것 같다. 이를 통해 내가 공부했던것들을 간단하게나마 정리해두려고 한다.

(1) vite로 새프로젝트 구성하기 
신규 개발한 앱은 vite라는 번들러를 사용하고 있다. 그에 반해, 내 쪽에선 누가 봐도 CRA 한거라 Webpack을 사용하고 있었기 때문에 이거부터 봤다. vite에서 제공하는 템플릿을 통해 React 플젝을 만들었고, main.tsx가 있는 프로젝트를 index.ts가 있는 프로젝트로 뭐 플러그인, tsconfig 등 하나 하나 설정을 바꿔가면서 새 프로젝트를 만들었다.

(2) Redux => MobX로 상태관리 바꾸기
기본적으로 Redux와 MobX는 상태관리를 하는 방법이 다르다. 거기다 일단 신규 개발한 플젝의 경우엔 DDD그러니까 Domain Driven Developing을 채택하고 있었기 때문에 MobX가 도메인 별 스토어를 구성할 수 있도록 하는걸 적극 사용하고 있었다. 그래서 리드 개발자분이 해주신 도메인 모델링, 그 Entity들 + 기존 프로젝트의 Reducer들을 바탕으로 스토어를 재구성했다. 

(3) 통신환경의 변화
일단 라이브러리 자체는 동일하게 Axios를 사용하고 있었는데, CORS 정책을 해결하는 방식이 달랐다. 기존 앱에선 Access-Control-Allow-Origin 설정을 Request header에 넣어주면서 해결하고 있었는데, 신규 앱의 경우엔 Proxy 설정을 통해 다른 도메인을 같은 도메인인척 속이는 느낌으로 하고 있었다.

(4) 라이브러리들의 변화 
그냥 다 바뀌었다.상태관리도 여기 포함이긴한데, 사용하는 그리드도 변경에 UI도 그냥 쌩으로 구성하고 있던 걸 Material UI로 변경했고, 그래서 다양한 라이브러리를 경험해볼 수 있었다.

3. 프로젝트가 끝난 뒤 소감.

힘들었긴하지만 성장도 많이 할 수 있어서 보람찼고, 한편으로는 아쉬운 점이 많았다.

보람 찼던건, 고작 JSP 로 View 만드는게 다인 화면 개발을 하던 나에게 React를 얹고, Redux를 얹고, keycloak도 얹고, 마지막엔 MobX로 기존 Store를 재구성해보는 경험까지 하면서 학원 발 신입 개발자에서 조금은 더 제대로 된 프론트 개발을 할 수 있게 되었구나. 라는 보람.

아쉬움에 대한건 더 좋은 방법을 찾을 수 없었을까 하는 그런 아쉬움이었는데, 내가 아는게 많지 않아 할 수 있는 선택지가 적었다는 결론으로 생각하기로 했다. 당연히 이런 결론을 통해 더 많은 걸 보고 경험하고 있다는 마음까지 안고 프로젝트를 끝마쳤다.