나는 Next를 왜 쓰는가, 취업 할 때 유리해서? 기술 스택 하나 더 채우려고?
# Next.js를 쓰는 이유
2024년 01월 12일
반성 타임
이번 Offispace 프로젝트 진행 중, 갑자기 이런 생각이 들었다. 근데 나 왜 Next를 쓰고 있지? 이거 리액트에서도 되는건데? 단순히 취업에 유리해서? 쓰면 기술 스택 하나 더 늘어나니까?
인정하기 싫지만, 솔직히 말하면 맞다. 보잘 것 없어보이는 내 이력서에, 그나마 있어보이는 기술 스택 하나 채우고 싶었고, 기술적인 이해보다는 단순히 'Next 사용'이라는 경험을 쌓는 데 초점을 맞췄던 것 같다. 필요에 의해 사용하는것이 아닌 남들이 다 하니까 너무나도 조급한 마음에 사용했다.
사실 누가 Next를 왜 써? 라고 물어본다면 어.. SSR 할 때 필요하잖아..(맞나?) 라고 생각하는 지금도 큰 무리 없이 Next를 사용하고 있고, 이전 포트폴리오에서도 단순히 "Next 사용"이라는 기술 스택만 나열했을 뿐, 실제 프로젝트에서 Next를 어떻게 활용했는지, 어떤 장점을 가져왔는지에 대한 구체적인 설명이 부족 했다.
이번 글을 통해 나의 행보를 반성하고, Next.js의 장점과 특징을 명확히 정리해보고자 한다. 이를 통해 앞으로의 프로젝트에서 기술 선택 시 좀 더 신중하게 접근할 수 있도록 스스로 교훈을 얻고자 한다.
Next.js ≠ SSR
Next는 단순히 SSR을 위한 도구로 오해받기 쉽지만, 실제로는 SSR을 포함한 다양한 기능을 제공하는 훨씬 더 종합적인 웹 애플리케이션 프레임워크이다.
핵심은, Next가 제공하는 기능들이 SSR뿐만 아니라 다양한 렌더링 방식, 데이터 페칭, 성능 최적화 등 많은 측면에서 개발자들에게 혜택을 준다는 점이다. Next는 The React Framework for the Web이라는 설명이 붙어 있으며, 이는 React를 이용한 웹 애플리케이션을 만들기 위한 종합적인 프레임워크임을 나타낸다.
React는 홈페이지에서 'The library for web and native user interfaces'로 설명된다.
반면, Next는 ‘Next.js is a React framework for building full-stack web applications’로 설명되는데, 이는 React가 UI만을 담당하는 라이브러리로 설계된 반면, Next는 시작부터 애플리케이션 전반을 아우르는 프레임워크로 설계 되었음을 보여준다.
리액트와 Next, 라이브러리와 프레임워크의 차이
라이브러리(Library): 라이브러리는 특정 기능을 수행하기 위한 코드의 집합으로, 사용자가 필요할 때 호출하여 사용한다. React는 UI만을 구성하는 데 필요한 기능을 제공하는 라이브러리이다. React는 상태 관리와 라우팅 같은 기능을 직접 제공하지 않는다. 대신 이러한 기능을 구현하기 위한 도구나 패턴을 사용할 수 있도록 하는 데 필요한 기반을 제공할 뿐이다. 상태 관리나 라우팅과 같은 기능을 구현하려면 별도의 라이브러리나 도구를 추가해야 하는데. 예를 들어, 상태 관리는 Redux나 Recoil를 사용하고, 라우팅은 React Router를 사용하여 구현한다. 추가로 필요한 부분은 별도의 third-party 라이브러리를 사용한다.
프레임워크(Framework): Next는 React 기반의 프레임워크로서 애플리케이션의 구조를 제공하고, 특정 규칙에 따라 코드를 작성하도록 유도한다. Next는 애플리케이션의 전반적인 구조를 제공하며, 개발자가 애플리케이션의 모든 부분을 일관된 방식으로 작성할 수 있도록 도와준다.
따라서 React는 Next와 달리 애플리케이션을 개발하기 위해서는 UI 외에 다른 기능들을 채워줄 추가적인 라이브러리 생태계가 필요한데, 이러한 React 생태계는 아래와 같은 문제점을 가지고 있다.
서로 다른 third-party(외부의 다른 회사나 개발자가 제공) 라이브러리 사이의 궁합이 보장되지 않는다. React 생태계에서 다수의 third-party 라이브러리들이 개별적으로 개발되기 때문에, 이들 간의 상호 운용성이 보장되지 않을 수 있다.
React는 지속적으로 업데이트되고 발전하며 새로운 기능과 최적화가 추가된다. 하지만 이와 동일한 속도로 모든 third-party 라이브러리가 업데이트되지 않을 수 있다.
새로운 React 버전에서 추가된 기능을 활용하거나 최신 JavaScript 문법을 적용하기 위해 third-party 라이브러리들도 업데이트되어야 한다. 그러나 이 업데이트 과정이 지연되거나 라이브러리가 더 이상 유지보수되지 않는 경우가 있을 수 있다.
❓ 솔직히 글을 쓰면서 React, Next 모두 깊게 사용하지 못한걸까, 라이브러리 사이의 궁합이나 업데이트 같은 공감가는 내용이 있긴하나, 크게 불편함을 느끼지 못한건 사실이다. 아무래도 개발자가 직접 어떤 라이브러리를 결합해서 쓸거냐의 문제는, 나 혼자 개발 할 때 혹은 2-3명 팀 정도에서의 불편함은 크게 느끼지 못하겠지만, 프로젝트의 규모가 커질수록 어떤 라이브러리의 어떤 버전을 써야지 지금의 리액트 버전과 호환되는지, 흔히 말해 Best Pratice에 가까운지는 충분히 고려해야 될 사항이라고 생각한다.
❗️ Best Pratice?
Next를 사용하여 해결
그렇다면 Next는 어떻게 이러한 React 생태계 문제를 해결할까?
서로 다른 third-party 라이브러리 사이의 궁합 보장: Next는 필요한 기능들을 대부분 내장하여 제공한다. 예를 들어, 라우팅은 Next 자체적으로 지원되며, 데이터 페칭과 SSR 기능도 내장되어 있다. 이는 개발자가 다양한 third-party 라이브러리를 조합할 필요 없이 필수적인 기능들을 통합적으로 사용할 수 있게 도와준다.
React의 발전을 따라가는 빠른 업데이트: Next 팀은 React의 최신 버전을 빠르게 지원하며, 새로운 기능과 최적화 사항들을 적극적으로 통합해준다. 이는 개발자가 항상 최신 기술을 사용할 수 있고, 안정성과 성능을 지속적으로 개선할 수 있게 한다.
통합된 생태계와 커뮤니티 지원: Next는 활발한 커뮤니티와 함께 운영되며, 다양한 플러그인, 템플릿, 도구들이 지속적으로 발전하고 있다. 이는 개발자들이 필요한 기능을 확장하거나 문제를 해결할 수 있는 다양한 옵션을 제공해준다.
큰 틀에서의 해결 방법은 위와 같고, 아래와 같이 다양한 상세 기능들로 다양한 장점을 제공해준다.
- 내장 최적화: 이미지, 폰트, 스크립트 자동 최적화로 UX 및 Core Web Vitals 향상.
- 동적 HTML 스트리밍: 서버에서 UI를 즉시 스트림하여 앱 라우터 및 React Suspense와 통합.
- React 서버 컴포넌트: 클라이언트 측 JavaScript를 추가하지 않고 컴포넌트 추가.
- 데이터 페칭: 서버와 클라이언트 모두에서 지원되는 비동기 데이터 페칭.
- CSS 지원: 다양한 스타일링 도구 지원.
- 클라이언트 및 서버 렌더링: 유연한 렌더링 및 캐싱 옵션.
- Node.js 및 에지 런타임: 서버리스 함수로 확장 가능한 솔루션 구축 및 에지를 통한 빠른 동적 개인화된 콘텐츠 제공.
- 라우트 핸들러: 프론트엔드에서 소비할 수 있도록 안전하게 서드 파티 서비스와 연결하기 위한 API 엔드포인트 구축.
- 고급 라우팅 및 중첩 레이아웃: 파일 시스템을 사용한 라우트 생성, 고급 라우팅 패턴 및 UI 레이아웃 지원.
- 미들웨어: 인증, 실험, 국제화를 위한 라우팅 및 액세스 규칙 정의.
- 타입스크립트 지원: 개선된 타입 검사 및 보다 효율적인 컴파일, 커스텀 타입스크립트 플러그인 및 타입 검사기.
정리
1. Next.js와 React의 역할 차이
React는 UI 구성 요소를 만들기 위한 라이브러리로, 주로 사용자 인터페이스를 구축하는 데 중점을 두는 반면에 Next는 이러한 React 기반 애플리케이션을 전체적으로 관리하고 최적화하는 프레임워크다.
2. Next.js의 내장 기능
Next는 개발자가 추가적인 설정이나 여러 third-party 라이브러리를 사용할 필요 없이 애플리케이션을 구성할 수 있는 다양한 기능을 내장하고 있다. 이로 인해 개발 시간이 단축되고 유지보수성이 향상되는데. 특히, 라우팅, 데이터 페칭, 최적화 등 주요 기능들이 내장되어 있어, 개발자가 기본적인 구조를 빠르게 잡고 나머지 기능에 집중할 수 있게 해준다
3. 대규모 프로젝트에서의 React 생태계의 복잡성 해결
React는 강력하고 유연한 라이브러리이지만, 다양한 기능을 구현하기 위해서는 여러 third-party 라이브러리를 함께 사용해야 한다. 규모가 큰 프로젝트에서는 여러 개발자가 다양한 라이브러리를 사용하게 되는데, 이 때 라이브러리 간의 호환성 문제나 버전 관리가 중요한 문제가 된다. 이 과정에서 발생할 수 있는 라이브러리 간의 호환성 문제나 업데이트 이슈 등을 해결하기 위해서는 많은 노력이 필요한데, Next는 이러한 문제를 내장된 기능과 빠른 업데이트 지원을 통해 해결한다. 즉, Next를 사용하면 React 생태계에서 발생할 수 있는 여러 문제를 최소화할 수 있다.
4. 커뮤니티와 생태계 지원
Next는 활발한 커뮤니티와 함께 다양한 플러그인, 템플릿, 도구들이 지속적으로 발전하고 있다. 이는 개발자들이 필요한 기능을 확장하거나 문제를 해결하는 데 많은 도움이 된다. 또한, Next의 공식 문서와 예제들도 잘 정리되어 있어, 새로운 기능을 쉽게 익히고 적용할 수 있다.
