[프로젝트 돌아보기 프로젝트] 첫 번째, Next.js 프로젝트에서 React-query가 필요할까?

 

프로젝트 돌아보기 프로젝트를 시작해보자

취업 준비 과정에서 하고 싶은 것이 하나 생겼다. '프로젝트 돌아보기' 프로젝트. 오늘 운 좋게 커피챗을 통해 모두가 선망하는 기업 중 한 곳에 재직중인 프론트 개발자분께 이력서 & 포트폴리오 피드백을 받았다. (전 직장동료이자 나의 멋진 친구 덕분! 고맙습니다💖) 이제까지 받았던 이력서 피드백 중에 가장 도움이 되는 내용이었고, 결론적으로 이력서&포트폴리오를 수정할 필요가 있겠다는 생각이 들었다.

 

이력서와 포트폴리오 대공사와 함께 연계된 부분으로써 꼭 해야겠다고 생각이 든 부분이 '프로젝트 돌아보기'이다. 내가 스스로 이력서를 보면서도 계속 든 생각은 'one of them' 같다는 아쉬움이었다. 어떻게 하면 수많은 FE 취준생 중에 '나'를 궁금하게 만들 수 있을까. 이제까지의 내 이력서/포폴은 '나는 정말 열심히 준비/학습했다'라는 측면에 가까웠던 것 같다. 열심히는 취준생이라면 누구나 하는 것. 차별화시킬 수 있는 포인트는 '나만의 고민', '내 고민의 방향성', 그리고 '고민의 깊이'이다. 나는 '나만의 문제해결 방식'과 '구조적 접근 방식'을 지닌 사람이라는 걸 어필해야 한다.

 

솔직히, 지난 부트캠프 기간에는 주어진 것을 소화하고 수행하는 것만으로도 버거웠던 것 같다. 회사 그만두고 독학 3개월, 그리고 부트캠프 6개월이란 기간은 당연히 짧다. 짧은 기간 내에 폭발적인 성과물을 만들어 내기 위해서는 고민의 깊이를 깊게 만들기 보단, 고민의 횟수를 늘이는 정도까지가 현실적으로 가능했던 범주였던 것 같다. 그렇다면 지금부터 해야 될 부분은 내가 했던 프로젝트를 되돌아보고, 리팩토링의 관점에서 하나 하나씩 딥다이브 해보는 것이다. 취업에 대한 목적도 있지만, 중요한건 다시 딥다이브 함으로써 내가 놓쳤던 부분들을 제대로 내 것으로 가져가야 한다.

 

당시에는 단순히 '학습 차원'으로 내렸던 의사결정, 혹은 빠르게 했던 고민의 포인트들을 좀 더 깊게 곱씹어 보는 것이다. 이미 했던 선택을 다시 고민해봄으로써, 더 나은 선택이 있는지? 그렇다면 그 이유는 무엇인지? 아니면 그때의 선택이 왜 좋은 선택이었는지? 'WHY'를 기반으로 한 나만의 프로젝트 돌아보기 프로젝트를 시작해보려 한다.

 

---

 

Next.js 프로젝트에서 React-query가 필요할까?

 

마지막 프로젝트 '마이펫로그'는 Next.js 앱라우터 기반으로 제작하여, React-query로 서버 상태 관리를 하였고 상태관리 라이브러리 Jotai를 통해 클라이언트 사이드 전역 상태 관리를 했다. 

 

Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 지원을 통해 검색 엔진 최적화(SEO)에 유리한 환경과 초기 페이지 로딩 성능을 향상시켜준다. 이를 통해 우수한 사용자 경험을 제공할 수 있고, 앱 라우터 방식에서는 내장 fetch 함수를 페이지에서 비동기로 사용해 서버 사이드 렌더링을 구현하고 서버 액션을 가능하게 한다.

 

그렇다면 서버 상태 관리를 위한 React-query를 굳이 사용할 필요가 있을까? Next.js의 기본 제공 기능들이 매우 강력하기는 하지만, 모든 경우에 최적의 해결책을 제공하는 것은 아니다. 특히, 서버 상태 관리와 관련하여, React-query는 다음과 같은 몇 가지 이점을 제공한다.

 

1. 캐싱과 상태 복구: React-query는 자동으로 데이터를 캐싱하고, 네트워크 연결이 끊기거나 페이지를 새로 고칠 때 이전 상태를 복구할 수 있다. 이는 사용자 경험을 크게 향상시킬 수 있는 중요한 요소이다.
2. 백그라운드 업데이트와 최적화: 데이터를 백그라운드에서 자동으로 업데이트하며 사용자와의 상호작용을 방해하지 않고, 동시에 데이터 일관성을 유지한다.
3. 통합된 오류 관리: 오류 처리가 간소화되며, 각 쿼리의 상태에 따라 컴포넌트가 반응할 수 있도록 한다. 이는 디버깅 과정을 단순화하고 더 견고한 애플리케이션을 구축하는 데 도움이 된다.

 

이러한 이점을 고려할 때, React-query는 서버 상태를 관리하는 데 있어서 뛰어난 선택이 될 수 있다. 특히 대규모 프로젝트나 복잡한 데이터 흐름이 있는 애플리케이션에서 그 가치가 더욱 빛을 발한다. 결국, 사용하는 기술은 프로젝트의 요구사항과 팀의 선호도에 따라 달라질 수 있으며, Next.js와 React-query를 함께 사용함으로써 얻을 수 있는 시너지를 고려하는 것이 중요하다.

 

개발자로서 우리의 목표는 도구를 선택함에 있어 단순히 '가능한가'가 아니라 '왜 필요한가'를 이해하는 것이다. 이러한 깊은 이해를 통해, 우리는 기술의 선택이 단지 기능적인 측면을 넘어서 사용자 경험과 전체 프로젝트의 품질을 어떻게 향상시킬 수 있는지를 고려할 수 있게 된다.