[FEConf2023 미리보기] Vue → Next.js 주의할 점

FEConf(프론트엔드 개발 컨퍼런스)2023에서

‘프론트엔드 프레임워크 마이그레이션’ 발표할 정지만 씨 인터뷰 

개발자들이 참여하는 국내 행사는 여럿 있지만, 특정 언어나 프레임워크를 넘어 ‘프론트엔드’에 특화해 수백 명 규모가 모이는 컨퍼런스로는 FEConf(프론트엔드 개발 컨퍼런스)가 유일합니다. 작은 규모의 프론트엔드 컨퍼런스도 있지만 행사가 열린 기간이나 규모 면에서는 FEConf 만한 것이 없죠. 그러다 보니 작년인 2022년에는 티켓 구매를 오픈한 지 6초 만에 매진될 정도로 매년 티켓팅이 치열합니다.

이 FEConf가 올해도 열립니다. 10월 21일 잠실 롯데 타워 31층 컨퍼런스홀에서 2017년 첫 컨퍼런스 이후 7번째로 열릴 예정인데요. 작년과 동일한 장소에서 열리기 때문에 티켓팅 또한 비슷하게 치열할 것으로 예상됩니다. FEConf 측은 “FEConf 티켓을 얻는 가장 쉬운 방법은 발표자에 지원해서 쟁취하거나 후원사에 참여하는 것이라는 말이 있다”며 발표자로 참여하기와 후원을 독려하기도 했는데요.

그렇다고 발표자로 참여하는 게 쉬운 일은 아닙니다. 매년 이 컨퍼런스를 운영하는 ‘오거나이저(Organizer)’들이 발표 내용을 꼼꼼하게 검토하며, 발표의 질(quality)을 높이고자 고심하고 있습니다. 오거나이저들은 FEConf의 근거지인 페이스북 그룹 ‘프론트엔드 개발 그룹’을 2014년에 열고 초기부터 교류하며 활동했던 이들과 새로 합류하는 이들이 섞여 매년 약 15명~20명 내외로 구성됩니다. 지원자가 많아도, 발표자로 선정되는 이들이 당초 예정했던 발표자 수보다 적은 때도 있을 정도로 엄격하게 선발하고 있다는데요.

올해는 AB180, 데브시스터즈, 당근 등의 프론트엔드 개발자 5인이 발표하는 트랙A, 네이버, 토스, 숨고 등의 프론트엔드 개발자 5인이 발표하는 트랙B, 현대차, 엘리스 등 스폰서 기업 5곳의 스폰서 세션으로 구성됐습니다. ‘몰입’을 주제로 다양한 회사에서 활약하는 프론트엔드 개발자들의 도전 이야기가 펼쳐지는데요. 요즘IT가 FEConf와 함께 이번 행사의 발표자 중 한 명을 행사에 앞서 만나봤습니다.

그 주인공은 바로, 이번 컨퍼런스에서 ‘프론트엔드 프레임워크 마이그레이션’을 주제로 발표할 정지만 씨인데요. 그는 숨고에서 1년 넘게 일하고 있는 3년차 프론트엔드 개발자로, Vue 기반의 애플리케이션을 Next.js로 전환한 경험을 공유할 예정입니다. 조직에서 진행한 이 마이그레이션 경험을 통해 정 씨는 “개인적으로도 인프라를 많이 알게 되며 엔지니어로서 많이 성장한 경험이기도 했지만, 프론트엔드 개발자가 인프라를 알면 더 많은 부분에서 기여할 수 있다는 것을 알게 됐다”며 “이때 알게 된 것을 공유하고 싶다”고 말했습니다.

Q. 발표 주제로 프론트엔드 마이그레이션을 선택한 이유는 뭔가요?

숨고에서 전사적으로 이 마이그레이션을 진행했는데, 이걸 전사적 프로젝트로 할 수 있다는 게 희소한 경험이라고 생각했습니다. 제가 이 프로젝트에서 인프라, CI/CD 구축 작업을 데브옵스 엔지니어와 함께 진행했는데, 그때 많은 것을 알게 돼 엔지니어로서 많이 성장했다고 생각했어요. 마이그레이션을 고민하는 분들이 계실 텐데, 이 과정에서 어떤 작업이 필요한지에 관해 기본적인 내용과 인사이트를 공유하고 싶습니다.

Q. FEConf 연사로 참가하는 것은 처음인가요?

네, 연사로도, 청중으로도 처음입니다. 작년에 티켓팅에 실패했거든요. 아무리 티켓을 구하려 해도 쉽지가 않더라고요. 그런데 이 번엔 연사가 되면서 저절로 컨퍼런스에 참가할 수 있게 됐네요.(웃음)

Q. FEConf 연사로 참가하게 된 계기가 있나요? 

회사에서 동료 평가를 6개월에 한 번씩 하는데, 피드백에 “새로운 것 공부하고 공유해줘서 좋다”는 말이 많았어요. 프론트엔드 챕터 세미나에서 발표를 자주하기도 하고, 회사에서 독서모임에 참여하거나 스스로 점심 스터디를 열기도 하다 보니 그런 피드백이 있었던 것 같아요. 그래서 그런지 피플 팀 동료가 이번 FEConf에서 연사 모집하던데 한번 해볼 생각 없냐 하시더라고요. 저도 평소 스터디 열어 공부하고 공유하는 걸 좋아하다 보니 한번 나가보면 좋겠다 생각했죠.

정 씨는 숨고에서 ‘센트럴 테크(Central Tech)’라는 스쿼드에 소속돼 주로 ‘제품 부채를 해결하는 일’을 맡고 있습니다. 백오피스 업무 자동화나 SEO(Serch Engine Optimization, 검색 엔진 최적화) 등 사업 도메인이 더 효율적으로 운영될 수 있도록 하는 업무를 하죠. 그는 이를 위해 최근 사내에서 점심 시간을 활용해 SEO를 공부하는 스터디를 주최하기도 했습니다. 20분 동안 점심을 먹고 나머지 40분 동안 준비해온 내용을 발표하는 식이었죠. 이에 회사에서 ‘스터디 판벌려’라는 이름의 상을 받았다고도 합니다.

Q. Vue에서 Next.js로 전환한 경험을 공유한다고 하셨는데, 왜 Vue에서 Next.js로 전환했나요?

기존에 Vue2버전을 썼는데, 거기서 지원하는 SSR 가이드가 있고, 그 가이드에 따라 만들어진 SSR 서버로 제품이 돌아가고 있었어요. 그런데 Vue2 지원이 올해를 끝으로 중단되기도 하고요, 기반이 됐던 빌드 의존성도 너무 오래됐고 업그레이드 하는 게 힘든 상황이 되기도 했어요. 그래서 최신화하기 보다는 새로운 프레임워크로 가겠다는 조직의 판단이 있었어요. Next.js의 기술 점유율이 높다 보니 유지 보수에 도움이 되는 프레임워크라는 게 가장 근본적인 이유였죠.

Q. Next.js의 기반인 React를 팀원 분들 모두 써보신 건 아닐 것 같은데요, 그 과정에서 어려움은 없었나요? 

대부분은 React 경험이 있었고요, Vue만 써보셨던 분들은 새로 학습해야 했어요. 코드리뷰 과정에서 서로 피드백을 많이 주고 커뮤니케이션 많이 하면서 맞춰갔고, 새로 학습하는 분들께 회사에서도 지원해줬어요.

Q. 호환성 문제는 어떤 게 있었나요? 

라이브러리 버전 호환성 문제와 기존에 작성했던 유틸 함수의 호환성 문제가 있었는데요. 라이브러리 버전 호환성 문제에서는, 기존 제품은 Node 12버전, 번들러 라이브러리는 webpack(웹팩)4를 사용하고 있었어요. 그래서 써드파티 라이브러리, 커뮤니티 라이브러리들도 그에 맞는 버전을 사용할 수밖에 없었죠. 그런데 이번에 마이그레이션하는 Next.js 프로젝트의 경우, Node18버전, webpack5를 의존성으로 설정했어요. 그래서 메이저 버전 업그레이드가 필요한 라이브러리가 많았습니다. 사용하지 못하게 되거나 아예 교체해야 하는 라이브러리도 있었는데요. 일단 Vue기반의 커뮤니티 라이브러리는 모두 React 기반의 커뮤니티 라이브러리로 교체해야 했습니다.

그리고 유틸 함수 호환성 문제는, 기존 Vue프로젝트에서는 class 기반의 싱글톤 방식이나 믹스 형태로 유틸 모듈을 만들었는데, 이걸 그대로 옮겨서 React에 사용하려니 의도대로 동작하지 않는 경우가 많았어요. React에서 사용되는 일반적인 패턴으로 변경할 필요가 있었죠. 싱글톤 모듈은 전역 상태 기반의 커스텀훅으로 재작성이 필요했고, 믹스인(mixin)도 재사용 가능한 커스텀훅으로 재디자인해야 했습니다.

Q. 마이그레이션 하면서 팀 구성이나 역할 분배는 어떻게 했나요? 

사실 리소스가 충분한 상황은 아니었죠. 마이그레이션만 전담할 수 있는 인력은 없는 상황이었어요. 그래서 서비스와 마이그레이션이 동시에 이뤄질 수밖에 없었죠. 전담 팀은 꾸려졌지만, 서비스 개발을 진행하는 동시에 일부 리소스를 투입해 마이그레이션을 진행했어요.

Q. 사실 마이그레이션을 하고 싶어도 다양한 문제에 직면해 결국 하지 못하게 되는 사례도 많은 것 같아요. 개인적으로 그런 경우에 어떤 방향으로 커뮤니케이션하면 좋을 것 같다고 보시나요? 

개발 팀과 비 개발팀이 서로 100% 이해하기는 어렵다고 생각해요. 조직마다 다를 수는 있지만, 일반적으로 개발 팀은 제품의 기술적인 측면을 중요시하고, 프로덕트 팀은 제품의 빠른 성장 같은 비즈니스적 측면을 중요시하는 경향이 있으니까요. 그래서 기술적인 부채 해결을 전사적으로 진행해보고자 한다면, 개발 팀 외부의 동료들이 이를 납득하고 도울 수 있도록 그것이 비즈니스 관점에서 어떤 임팩트가 있을지 어필하는 게 좋을 것 같아요. 예를 들어, 프레임워크 마이그레이션은 제품을 개선하는 작업이기도 한데, 개발 생산성을 책임지는 것이기도 해요. 기존 서비스가 빠르게 개발되려면 생산성도 좋아져야 하는 것이죠. 개발 팀이 프로덕트 팀을 설득할 때 프레임워크를 바꾸면, 성장속도도 더 빨라질 거라고 어필해보면 어떨까 싶어요.

정 씨는 “배포하기 전까지는 실제로 어느 정도 아웃풋이 나올지 걱정됐다”고 털어놓기도 했습니다. 하지만 결과적으로 “최근 배포된 페이지에서, 웹바이탈 지표 중 LCP(Largest Contentful Paint)지표가 원래 6초였던 것에서 1.6초로 크게 개선됐다”며 고무적인 소식을 전했는데요. 덕분에 “어떤 퍼널을 배포할지 다른 팀과 함께 의사결정하기가 원활해졌다”고 합니다. 하지만 전환율이 개선됐을지는 조금 더 지켜봐야 한다고도 말했습니다.

Q. 마이그레이션하고자 하는 팀에서 가장 주의해야 할 게 있을까요? 

마이그레이션이 제품에 전반적인 영향을 주는 것이기 때문에, 의사결정 초기부터 비개발 팀과 긴밀하게 소통하는 게 중요한 것 같아요. 개발 팀끼리만 결정하고 외부에 공유되지 않으면 배포 직전에 문제가 생기는 경우가 있거든요. 제품을 책임지고 있는 팀 전반과의 의사소통에 신경을 더 많이 쓰는 것이 좋을 것 같아요.

Q. 전환할 페이지가 얼마나 있는지 파악하고 컴포넌트를 리스트업하는 과정이 있었을 텐데요, 그 과정에서 주의해야 할 건 없었나요? 

제품이 오랫동안 유지보수되다 보면 기능 정의 문서가 최신화되지 않는 경우가 꽤 있는데요. 어떤 페이지의 마이그레이션을 시작할 때, 프로덕트 팀과 협의해서 디자인과 기능 정책을 최신 상태로 업데이트하면 좋을 것 같습니다. 프레임워크 마이그레이션은 레거시 프로젝트를 그대로 구현하는 거라고 쉽게 생각할 수 있지만, 많은 양의 리팩토링과 변경이 생길 수 있는 큰 작업이에요. 명확히 정의된 기능 정책이 있다면 개발 이후 단계에서 발생할 수 있는 의사 소통 비용을 줄일 수 있습니다.

이번 FEConf2023에는 이밖에도 React 외 다른 다양한 선택지를 살펴보는 ‘React 바깥의 프론트엔드’, use훅이 바꿀 React 데이터 로딩의 미래를 살펴보는 ‘use 훅이 바꿀 React 비동기 처리의 미래 맛보기’, 당근의 디자인 시스템 설계와 구현에 관한 ‘크로스 플랫폼 디자인 시스템, 1.5년의 기록’ 등 다양한 발표가 준비되어 있습니다.

FEConf2023 티켓은 행사 웹사이트에 게시된 ‘티켓 구매하기’ 링크에 연결된 네이버 예약 창을 통해 구입할 수 있습니다. 후원 티켓은 10월 4일 오전 11시, 일반 티켓은 10월 5일 오전 11시부터 예매가 시작되며, 티켓 가격은 일반 티켓 4만 원, 후원 티켓 10만 원입니다. 후원 티켓을 통해 얻은 수익의 일부는 오픈소스 후원에 활용됩니다.

콘텐츠 문의yozm@wishket.com

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.