Nextjs 프로젝트 처음 해본 후기

9월부터 5개월 동안 SI 업체에서 금융 관련 프로젝트를 개발하며 겪은 경험을 반성해 본다.

SI 업체 및 프로젝트는 처음 해보았기 때문에 업무 프로세스에 대해서보다 프로젝트 그 자체에 적어보고 싶다.

Project Goal

• 해당 프로젝트는 한 금융사 웹페이지를 CRA에서 Nextjs로 교체하는 일이었다.
• 코어 라이브러리는 Nextjs, React 19, Next-Auth, React-Query.
• 백엔드와 존재하는 css 구조는 변환하지 않는다. 기존 전역 scss와 post로 되어 있는 백엔드는 유지 및 보수만 진행한다.

My Role

여기서 나는 이런 업무를 담당했다.

• 라이브러리 버전 컨트롤
• eslint -> biome을 통한 코드 퀄리티 컨트롤
• git flow 관리
• 러닝 커브를 최소화하고 개발 속도를 높이기 위한 최대한 react스러운 Nextjs 구조 작성.
• 인증 프로세스와 외부 인증 모듈과의 연결, proxy.ts
• Role-based 메인 화면
• 핵심 비즈니스 로직의 멀티-스텝 폼을 개발

Notable Use cases

1. nextjs - 오래된 sass 연결하기
2. Tanstack Query에서 POST 요청을 사용해도 되는가?
3. Nextjs - scroll 위치 유지하기
4. Next sitemap
5. Nextjs에서 탭 라우팅 구현하기
6. Web worker를 사용해 멈추지 않는 시계 만들기

이런저런 작업들을 통해 깨달은 것은 다음과 같았다. 최대한 개발 속도를 끌어올리기 위해 Nextjs 구조에서 최대한 react스럽게 구현할 수 있도록 구조를 잡았지만, 프레임워크의 의도를 거스르는 것은 결코 좋은 선택이 아니라는 것이었다.

예를 들어서 모든 page에 'use client' 을 사용하더라도, 실제로는 모든 페이지가 react router 처럼 작동하는 것이 아니라, Nextjs router action -> Nextjs 서버 -> layout.tsx -> page.tsx(리액트 번들 다운로드) 의 프로세스가 일어나기 때문에 위 스크롤 위치가 저장되지 않는 것같은 사이드이펙트가 일어날 수 있다는 것이다.

Limitations

해당 프로젝트를 진행하며 느낀 가장 큰 아쉬움은 개발 환경이었다.

윈도우에서 처음 프로덕션 앱을 개발해보기도 했고, 서로 다른 소속의 분들과 협업하고 도중에 인원의 변경이 계속 발생하다 보니 규격화된 개발 환경을 만들 수 없었다. 하지만 좋은 경험이었다. 5명 이상의 개발팀을 경험해 본 적이 없었으므로, 어떤 부분에서 병목이 생기고 어떤 부분에서 이걸 해결할 수 있을지?에 대해 깊이 생각할 수 있었다. 아래 포스트처럼, 개발 환경에 대해서 계속 고민해보려고 한다.

1. Docker로 개발환경 세팅하기
2. Windows에서 pnpm이 느린 이유에 대한 서치
3. git rebase와 git pull의 차이
4. in-app에서 개발 문서 적용하기 - fumadocs

내 생각

프로덕트와 개발자 자신의 끊임없는 loop

5개월 동안 이 프로젝트를 개발하면서, SI 업계에 대한 이해, AI 프롬프팅, 내 자신의 Nextjs 및 웹 서비스에 대한 이해도... 많은 것에 대해 배울 수 있었다.

무엇보다 중요하다고 생각하는 것은 내가 생각하는 개발, 내가 좋아하는 개발의 의미를 재정의한 것이었다.

초심으로 돌아가기

개발을 처음 배웠을 때 본 다이어그램에서는 이렇게 소개한다. 기획, 분석, 디자인, 구현, 테스팅 및 배포, 유지보수, 그리고 피드백을 통한 추가 피쳐 혹은 원래 피쳐의 재기획...

이 루프를 통해서, 프로덕트와 개발자인 나 자신 또한 계속해서 고통과 보람, 경험을 통해 성장한다. 나는 계속해서 성장하고 싶고 내 앞에 닥친 것이 AI 혁명이든, 경제 위기이든 주저하지 않고 도전하려 한다. 나는 개발자니까.