next.js 개발자가 알아둬야할 개념 5가지

1. [React vs Next.js 장점과 단점] React와 Next.js중 프로젝트 메인 스택을 선택하는 기준이 무엇일까요?

안녕하세요, 회사에서 새로운 프로젝트를 만드려고 합니다. 지금 사용하고 있는 서비스를 관리하는 어드민 프로젝트이고 서비스는 Next.js로 만들어져 있습니다. 같이 협업하는 동료는 React에 익숙하지만 Next.js에 익숙하지 않아서 새로운 프로젝트를 Next.js로 시작할지 React로 시작할지 고민입니다. 둘중 고를때 어떤 기준으로 프로젝트를 시작하면 좋을까요? React와 Next.js 장점과 단점 간단히 알려주시면 프로젝트 선택에 큰 도움이 될 것 같습니다. 감사합니다.

답변

검색해보면 다양한 장단점이 나오겠지만 제가 실무에서 느낀 것만 간단히 정리 해보겠습니다. Next.js - SSR이 React에 비해 간편하고, SSR, CSR을 이어주는 다양한 기능들이 있다 (server side props, dynamic import, next-cookie 등) - dynamic routing, 폴더 기반 라우팅 - vercel을 이용한 간편한 배포 - Next.js에서 제공하는 성능이 뛰어난 자체 컴포넌트, 빌드툴 등 (Next/Image, swc) React - Next.js에 비해 러닝커브가 낮음(Next.js를 배우려면 React를 알아야하고 프레임워크의 부가적인 기능을 공부해야 함) - 레거시 라이브러리에 대한 서버 사이드 관련 충돌이 적음 (정확히 기억이 안나지만 next.js에서 ant-design을 사용하면서 몇가지 이슈가 있었습니다) 어드민 프로젝트라면 작업하시는 분이 익숙한 프레임워크를 선택하면 될 것 같아요. 어드민에서는 Next.js에서 언급한 장점의 기능을 사용할 일이 별로 없을 것 같습니다.

2. next.js swr vs react-query 어떤 라이브러리를 선택해야 할까요?

안녕하세요, next.js로 처음 프로젝트 시작하는 초보 개발자입니다! 지금까지 React로만 개발해오고 상태관리 라이브러리는 Redux만 사용해봐서 이번에 새로운 라이브러리를 사용해보려고 합니다. next.js에서는 swr이나 react-query를 자주 사용한다고 하는데 어떤걸 쓰면 좋을까요? 장단점이나 여러가지 알려주시면 감사하겠습니다🙌

답변

저는 보통 라이브러리 선택시에 다음 조건을 고려합니다. 1. 사용하는 사람이 많고 유지보수가 잘 되고 있는지 2. 작업자에게 익숙한지 3. 구현할 프로젝트에 필요한 기능이 있는지, 성능, 용량 1. 사용하는 사람이 많고 유지보수가 잘 되고 있는지 react-query와 swr npm 트렌드는 50만 다운로드 정도 차이나네요! https://npmtrends.com/react-query-vs-swr swr은 4월 11에 최신 업데이트됐고 react-query는 2일 전입니다. 우선 두 라이브러리다 업데이트가 잘 되고, 많이 사용되고 있는 것 같습니다. 2. 작업자에게 익숙한지 질문자 분께서 두 라이브러리 모두 처음 사용해본다고 하셨으니 같은 조건인 것 같습니다. 3. 구현할 프로젝트에 필요한 기능이 있는지, 용량, 성능 용량: 번들사이즈는 swr이 더 가볍다고 합니다. 성능: swr을 깊게 사용해본적이 없어서 기능 비교는 어렵지만 https://blog.logrocket.com/swr-vs-tanstack-query-react/ 이 블로그를 참고해봤을 때 swr: 가벼운 사이즈로 React 요청 처리에서 캐싱 문제를 해결하기 위한 최소한의 API를 제공. react-query: swr과 동일한 문제를 해결하지만 더 고도화된 기능 제공. 개인적으로는 둘다 사용해보시고 프로젝트에 필요한 기능들을 비교한 뒤 선택하는 것 추천드려요!

3. 공부하기 좋은 next.js 오픈소스 프로젝트 추천해주실 수 있나요?

혼자서 프론트엔드 공부하고있는 취준생입니다. 면접 전에 실무에 근접한 프로젝트를 하나 만들고 싶은데 혼자서는 어려울 것 같습니다. 얼마전에 본 영상에서 오픈소스로 공부하는게 도움이 된다고 해서 찾아보는데 쉽지 않습니다. *혹시 오픈소스로 공부해보신 분이 있으시다면 몇 가지 추천해주실 수 있으신가요?* 실무에서도 참고하는 프로젝트면 좋을 것 같아요. 폴더구조, 컴포넌트 네이밍, assets관리 같은 것 어떻게 하는지 배우고 싶습니다.

답변

테일윈드 CSS의 웹사이트가 next.js로 구현됐는데 오픈소스로 공개하고 있습니다. https://github.com/tailwindlabs/tailwindcss.com 폴더 구조나, 폰트, 컴포넌트 네이밍 배우기 좋을 것 같네요 Radix-ui, Cal.com 홈페이지도 오픈소스로 공개되어 있네요! 둘다 next.js를 사용합니다. 1) Radix-ui - https://github.com/radix-ui/website 2) Cal.com - https://cal.com/ 모두 유명한 오픈소스의 웹사이트여서 깃 레포지토리 살펴보면 좋은 공부가 될 것 같습니다!

4. next.js 폴더나 컴포넌트 구조를 어떻게 짜시나요?

회사에서 next.js 폴더 구조랑 컴포넌트를 한 번 리팩토링하려고 하는데, 어떤 구조로 접근하는게 좋은지 의견을 좀 구하려고합니다 ㅎㅎ 현재는: pages, templates, components, elements 형태로 폴더가 나뉘어져있고, pages → templates → components → elements 형태로 의존하도록 설계가 되었다고 하더라구요. 그치만 설계와는 달리 여러 훅 (비즈니스, UI 모두)들이 혼용되어서 pages, templates, components에 범벅이 되어 있는 상태입니다. 제가 생각한건: pages → templates → components → elements 형태는 유지하고, pages는 최소한의 로직만 있고 templates 에서 비즈니스 로직을 아래로 넘겨주는 형태를 생각하고 있어요. 어떤 방식일지는 케바케일 것 같은데, 가장 단순한 방법은 prop으로 넘겨주는 형태를 생각하고 있습니다. 컴포넌트 간 상태가 공유되어야한다면 카카오 형님들 블로그 (https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/) 를 좀 참고해서 compound pattern으로 만들어볼까 생각중이구요. 막상 고민하다보니 다른 분들은 어떻게 작업하시는지 궁금해서요. 혹시 여러분들은 next.js 쓰시면서 구조 같은거는 어떻게 잡으셨나요??

답변

오 저랑 비슷한 고민을 하고 계시네요. 저희도 이번에 프론트엔드 쪽 개선하면서 컨벤션을 손보고 있거든요. 저희 같은 경우 pages - prototypes - modules - foundations - elements의 형태로 살짝 변형된 아토믹 디자인 패턴이 적용된 상태인데요. 님과 비슷하게 비즈니스 로직이 섞여있고, 네이밍도 제각각이어서 이번에 리팩토링을 진행하고 있습니다. 저흰 prototypes를 도메인 기준으로 나눈 상태고, 비즈니스 로직을 modules로 전달해주는 방식으로 작업하고 있습니다. 말씀하신것처럼 상태 공유가 필요하거나 리렌더링 등을 고려해서 compound pattern이나 recoil 등을 사용할 계획 중이구요. 하지만, 명확한 답이 없는 문제여서 개발 팀의 규모와 역량 그리고 사용할 수 있는 리소스에 따라서 달라질 것 같고 어떤 방식이 더 좋다 나쁘다는 없는 것 같아요. (사실 아토믹 디자인 패턴도 좋은지 잘 모르겠..) 참고하면 좋을 것 같은 링크들 몇개 첨부할게요. 화이팅입니다 :) https://kciter.so/posts/effective-atomic-design https://jbee.io/react/stop-using-atomic-design https://atomicdesign.bradfrost.com/chapter-2 https://dennisreimann.de/articles/atomic-design-is-messy.html

5. next.js hydrate가 무엇인가요? (Did not expect server HTML to contain the text node)

안녕하세요 next.js로 개발하고 있는 1년차 뉴비 프론트엔드 개발자입니다. 페이지에서 간헐적으로 문구가 안보이는 이슈가 있어 콘솔을 확인해보니 'Did not expect server HTML to contain the text node' <- 이런 에러가 발생하고 있었습니다. 검색하다가 hydrate하는 과정에서 mismatch가 생겨서 발생한 에러라는 영어 댓글을 보긴 했는데 hydrate에 대한 설명을 찾아봐도 너무 어렵더라구요.. 혹시 간단하게라도 hydrate에 대해 설명해주실 수 있으신가요? 또 'Did not expect server HTML to contain the text node'에러는 왜 발생했는지 궁금합니다..

답변

해당 문구가 서버에서 받는 html에 잘 찍혀서 오나요? (undefined는 아닌지 궁금합니다) 아니면 클라이언트로 넘어왔을 때 문구를 콘솔에 찍으면 잘 나오나요? 간헐적인 이슈라면 서버나 클라이언트에서 undefined를 찍는 것 같습니다. 먼저 확인해보셔야 할 것 같아요!