새 프로젝트에 대한 고민 Next.js v13 도입 할까 말까?

신규 프로젝트 준비

회사에서 신규 프로젝트를 앞두고 있습니다.

신규 프로젝트에는 서버 사이드 렌더링, GraphQL 등 한 번도 경험해보지 않은 새로운 기술을 도입하는 것으로 논의를 했는데요.

요즘 엄청나게 많은 공부량에 허덕이고 있습니다... 😅

 

기존에 사용하던 정적 사이트 생성(SSG) 이 아닌 서버 사이드 렌더링(SSR) 에 대한 스터디

그것을 지원하는 프론트엔드 프레임워크인 Next.js 에 대한 스터디

Next.js 의 최신 버전인 v13에 기본 탑재된 Turbopack 에 대한 스터디, 그리고 따라오는 번들러에 대한 조사, 비교하고

Turbopack 의 경쟁자인 Vite 에 대한 스터디, 테스트 진행을 했습니다.

자바스크립트 모듈 & 번들러 (CommonJS, AMD, ESModule, Webpack, Rollup, Parcel, esbuild, swc, vite, turbopack)

CRA를 Vite로 마이그레이션 하기

Vite 아직 사용하지 마세요!!!

 

신규 프로젝트에 Next.js v13 과 App 디렉토리 기능 도입해야 할까

또한 Next.js v13 에 신규 도입된 실험기능인 App 디렉토리 스터디와 신규 프로젝트에 도입해도 될 지에 대한 회의를 했습니다.

 

🙅‍♂️ 반대측 의견

저는 비교적 안정화된 Next.js v12 를 사용하자는 반대측 의견이었습니다.

App 디렉토리 기능이 공식 사이트에서도 실험적인 기능이며, 프로덕션 환경에 사용하는 것을 권장하지 않는다고 하고 있습니다.

https://nextjs.org/blog/next-13

Next.js v13 을 사용하면 React v18 이상 사용해야 됩니다. React v18 와 타사 라이브러리의 호환성도 고려해야 하므로

Next.js 뿐만 아니라 React 도 신경써야 하는 상황이라서 더욱 걱정 되었습니다.

아무래도 최근에 CRA 로 구축된 프로젝트를 Vite 로 마이그레이션 했다가 프로덕션 빌드시 머리가 깨지는 경험을 했기 때문인지 더더욱 마음을 열기 어려웠습니다.... (본인이 아무리 대단한 개발자라고 해도 빌드 앞에서는 항상 겸손하고 또 겸손하고... 기도해야 합니다.)

 

🙆‍♂️ 찬성측 의견

신규 프로젝트가 당장 급하게 개발해야 되는게 아니라서 일정이 널널하고, Next.js v13 현재 시점 기준으로 3달 전에 나왔는데 앞으로 개발 하다보면 App 디렉토리 기능이 안정화 될 것이라는 기대감도 있고.

만약에 안정화 안되어서 프로덕션 환경에서 사용하지 못하는 상황이 오더라도 구 저번으로 마이그레이션 하면 그만이고,

어차피 언젠가는 v13가야 한다는 사실을 변함 없으며, v12로 시작했다가 나중에 v13 가려면 나중에 또 다시 공부하고 한다고 시간 뺏긴다.

라는 의견이었습니다.

 

🤔 결론

Next.js v13 + App 디렉토리 기능 사용하는 것으로 중간 결론 났습니다.

이번 프로젝트 특성상 타사 라이브러리를 많이 사용하지 않을 것 같았으며, 이번에도 React 18 안쓰면 평생 v17 쓰지 않을까 싶은 생각과

언젠가는 결국에는 v13을 쓸 거란 생각이 결국 이긴 것 같습니다.

또한 v13으로 시작해서 v12 가는건 쉬운데 v12로 시작했다가 도중에 v12-> v13 가는건 쉽지 않겠다는 것도 공감되었습니다.

 

그래서 급하게 별도 프로젝트를 만들어서 Next.js v13 검토를 해보고 있습니다.

어서 프로덕션 빌드 및 배포 까지 해봐야 하는데 시간이 많지 않네요... 😵‍💫

아마 빌드 해보고 어떤지에 따라서 결론이 뒤집힐 수도 있을 것 같습니다.

 

또한 Next.js v13의 App 디렉토리 에서는 확장된 fetch 함수를 통해 데이터 패칭을 하는데 GraphQL 과 함께 사용할 경우

Apollo Client 의 useQuery 와 같은 함수가 필요 없는 것인가? 어떻게 다른가? 이런 것들 확인이 필요해서 무척 정신이 없네요. 

 

 

그리고 또 아직 익숙하지 않은 Tailwind css 에 대해 스터디하고 손에 익혀야 하는 큰 과제가 있네요 ㅎㅎ

 

 

신규 프로젝트 레퍼런스 사이트 조사

또한 신규 프로젝트의 레퍼런스 사이트를 프론트엔드 개발자 입장에서 조사하고 심화 탐구 진행을 해야 합니다.

이미 UI/UX 측면에서는 동료분 께서 조사를 충분히 해주셨기 때문에 이번에는 잘 운영되고 있는 유사 서비스에 대해서 

프로세스 과정들과 참고할 만한 특징 및 기능 리스트업을 할 생각입니다.

 

대기업에서는 이런거 기획 팀에서 알아서 다 해서 만들어주세요 하면 개발자는 기술적인 부분만 신경쓰면 그만일 텐데

제가 있는 곳은 스타트업이라 그런지 개발자도 같이 조사하고 공부하면서 제품 만들다보니 애착도 생기고 재미도 있고 개발자라는 역할을 벗어나 더 큰 부분에서 능력을 기르고 있는 것 같아서 좋습니다. 등따시고 배부른 곳에서 평생 코딩 노예로 살 건 아니니까요...