유니서베이 nextjs로 마이그레이션 시작
설렘 - 프로젝트 구조 작업
main
date
Jul 15, 2024
slug
unisurvey-migration-with-nextjs
author
status
Public
tags
모노레포
TurboRepo
Development
Nextjs
Vue
summary
설렘 - 프로젝트 구조 작업
type
Post
thumbnail
category
😎 일상
updatedAt
Oct 12, 2025 10:43 AM
늘 생각만 했던 일을 결국엔 저질러버렸다. 유니서베이 마이그레이션 작업 두둥…!!
예전부터 하고 싶었던 작업인데 하지 못했던 이유는.. 유니서베이 매출이 나오지 않는다는 이유로 더 이상 개발에 인력을 쓰지 말라는 대표님 말이 있었기 때문.. 😥
사실 프로젝트를 진행하면서 늘 폭탄을 안고 있는 기분 이였다. 잦은 수정과 산으로 가는 기획.. 촉박한 일정까지 더 해져서 점점 괴물이 되어가는 코드들..
그건 둘째 치고 마이그레이션을 시작한 계기는 이번에 유니서베이가 다른 회사에 판매가 되었다. 기존 유니서베이에서 화면 4개를 커스텀 해달라고 한다. 😱 또한 지금 화면 디자인이 무슨 90년대 디자인이냐고...라는 소리도 나왔다고 한다..ㅎㅎ (그래도 디자인 외주 맡긴 건데..)
커스텀 자체는 문제가 되지 않지만.. 한가지 문제가 있다면 현재의 유니서베이 버전이 정말 낮게 되어있다. (노드 버전이 14..) 버전 업을 고려하긴 했지만 이미 엉망진창인 버전 호환에 때문에 쉽지 않았다.
무엇보다 현재 디자인이 안이쁘다고 해서 새로운 디자인 시안을 받았는데 조금 수정 정도가 아닌 그냥 화면 전체를 갈아 엎은 수준으로 디자인이 되어서 왔다… 현재의 상황에서 이를 수정하는 것 보다 그냥 처음부터 다시 하는 게 좋을 것 같다라는 생각이 들었고 생각으로만 그쳤던 작업을 시작하게 되었다.
기존 유니서베이 베이스는 Vue2로, 설문 조사 화면은 Vue3로 되어있다. 비교적 최근에 작업 했던 프로젝트인 설문 조사는 그대로 유지하기로 하고 유니서베이 베이스를 Nextjs로 마이그레이션 작업을 할 것이다.
왜 Vue인데 Nuxt를 안쓰고 Nextjs 냐 할 수 있는데 팀 내 기술 스택이 Vue → React로 옮겨가는 중이고 다른 프로젝트는 React로 되어있기 때문에 Nextjs를 적용하는데 큰 무리가 없을 것이라고 판단했다.
프로젝트 구조는 turbo 기반 모노레포로 구성하였다.
모노레포로 구성한 이유는 유니서베이 라는 틀 안에 프로젝트가 2 개가 관리될 예정이다.
- 납품한 업체 (Nextjs)
- 유니서베이 플랫폼 (Nextjs)
1번과 2번은 모든 로직이 동일하다. 하지만 염두 해야 할 것은 1번에서 어떻게 수정이 될지 모른다. 그렇다고 레포지토리를 따로 두기에는 반복되는 작업이 발생하고 나중에 수정도 어려울 것으로 보였다.
따라서 이 모든 부분을 해소하려면 모노레포 구조로 셋업을 하면 해소가 되지 않을까 싶었다.
(최근에 모노레포를 사용해본 경험이 큰 도움이 되었다. 👍)
롯데와 플랫폼 별개로 운영하며 주요 로직의 경우 서로 공유하여 재사용성을 높인다.
이 구조에서 내가 생각했을 때 주요한 점은 공유는 정말 말 그대로 공유 파일이다. 어느 한 곳에서 적합하지 않다면 그건 공유 파일이 아니라고 생각한다.
간단한 예시로 UI 컴포넌트는 말 그대로 UI 만 표현하고 그 안에서 필요한 기능적인 부분은 각각의 플랫폼 내에서 새롭게 구현을 한다. (여기서 메인 로직의 경우 공유 services를 활용한다.)
우선.. 이렇게 생각을 하며 위와 같은 구조로 프로젝트를 셋업하였고, 그 안에서 일어나는 여러 이슈들은 아래 목록에서 정리해보려고 한다.
