에너지밸런스
불필요한 정보로 넘쳐나는 영양제 시장에서 정보의 불균형 문제를 해결하고, 사용자에게 필요한 정보만 제공하고자하는 에너지밸런스에 입사한지 어느덧 132일이 지났다.
입사 전 에너지 밸런스의 핵심 사업인 Aimee는 php베이스로 웹 서비스가 운영되었다. 하지만, 장기적인 관점에서 FE와 BE를 나누고자하는 의사결정이 되었고, 그에 의해 FE는 리액트기반 Next js, BE는 Java Spring기반으로 기술 설정을 하게 되었다.
나는 FE개발자로서 입사하였고, 서비스를 php에서 리액트로 '이주'하는 마이그레이션 프로젝트에 바로 뛰어들게 되었다. FE개발자 사수가 없는 상황에서 기존 서비스를 리액트로 구현하는 것은 시간이 지날 수록 어려워 마치 야생에서 생존하는 느낌이었다. 그럼에도 BE를 담당하시는 Saem님의 개발 조언과 다른 동료들의 응원으로 약 3개월 간의 마이그레이션을 끝마쳤다.
고민과 해결
마이그레이션 기간 동안 많은 고난과 마주했고, 부족한 점을 발견하였다. 이는 크게 다음과 같이 정리할 수 있겠다.
- 기술 지식
- State 관리
- Next js
- 전공 지식
- 서버와 통신에 관한 이해(로그인 기능 등)
- 웹 개발 아키텍처
- 비즈니스
- 업무 관리
- 비즈니스 로직 대한 이해
기술 지식
state 관리는 웹 개발에서 FE, BE를 막론하고 다양한 방식으로 이루어진다. 그 중 React에서 state를 관리하는 것에서 고민이 발생하였다. 어떤 방식으로 관리해야 side effect를 막고 원하는 방향으로 기능 구현이 될지 고민하였고, 파헤친 결과 비즈니스 서비스에서는 client state와 server state를 나누어 관리하는 것이 필요하다는 것을 느꼈다.
그렇게 client에서는 hooks, recoil을 통한 가벼운 상태 관리를, server에서는 react query를 이용해 비동기 state를 관리하였다.
우아한형제들 기술블로그 - Store에서 비동기 통신 분리하기 (feat. React Query)
Next js는 SEO(Search Engine Optimization)과 더불어 SSR(ServerSideRendering), CSR(ClientSideRendering), SSG(StaticSiteGeneration)를 자유롭게 블렌드하여 쓸 수 있는 점으로 비즈니스 웹 서비스 구현에서 강력한 기능을 제공한다.
마이그레이션을 진행하기 전에도 몇 번 Next js를 이용하여 토이 프로젝트를 만든 적은 있지만, 개인적인 프로젝에서 내부 기능을 다 경험해보는 것은 무리였다. 그렇게 실제 비즈니스 로직을 Next js에서 풀어내려다 보니 여러 어려움을 마주하게 되었다.
가장 대표적으로 이슈가 되었던 것은 로그인 기능이었다. 비교적 간단한 로그인 기능구현을 위해 카카오 간편 로그인을 선택하였지만, 말처럼 간편하지만은 않았다. '카카오 디벨로퍼스'의 개발문서를 참고하여 BE와 통신을 통한 jwt토큰 기반 로그인 기능을 구현하였다. redirect 과정에서 BE에 인가코드를 넘겨주고, jwt 토큰을 받아 쿠키에 저장하고, 로그인처리를 마무리짓는 과정이다.
Next js에서는 node js를 이용하여 이 redirect과정에서의 로그인 처리를 BE와 FE통신 중간에서 처리하기 쉬웠지만, 순수 React를 사용할 때는 어떨지 생각해보기도 하였다.
