범데이의 개발노트 📄

React 기반의 다양한 프레임워크와 라이브러리 중에서 Next.js는 그 구조와 성능 최적화 측면에서 특별한 지점을 차지하고 있다. 특히 기존의 React SPC(Single Page Application)와 비교했을 때, 코드 분할, 프리페칭, 라우팅 안정성 등의 측면에서 뛰어난 사용자 경험을 제공한다. 아래는 그런 Next.js의 주요 차별점과 특징을 정리한 내용이다. 1. 자동 코드 스플리팅 (Automatic Code Splitting)Next.js는 페이지 단위로 코드를 자동 분할한다.전통적인 React SPA는 초기 로딩 시 전체 애플리케이션 코드를 한 번에 불러오게 되어 있다. 페이지가 많아질수록 처음 로딩 속도가 느려지고, 사용자 경험이 떨어질 수 있다. Next.js는 이를 해결하기 위..

프론트엔드 개발에서 배포는 필수적인 과정이다. 특히 Next.js로 프로젝트를 개발한 경우, 이를 안정적으로 운영 환경에 올리는 방법에 대해 고민하게 된다. 이때 가장 자연스럽게 사용되는 플랫폼이 Vercel이다. Vercel이란?Vercel은 Next.js의 창시자가 만든 클라우드 플랫폼이다. 프론트엔드 프로젝트의 빌드, 배포, CDN 전송을 자동으로 처리해주며, 특히 NExt.js에 최적화되어 있다.Next.js를 만든 팀이 직접 만든 만큼, 최신 기능과 호환성이 뛰어나다. 주요 특징1. 자동 배포 (CI/CD 지원)GitHub, GitLab, Bitbucket등과 연동하면, 코드 푸시만으로 자동으로 배포가 진행된다.main 브랜치는 프로덕션으로 배포되고, 그 외 브랜치는 미리보기 링크가 생성된다. ..

Next.js는 React로 웹 애플리케이션을 개발할 수 있게 해주는 프레임워크이다. 기본적으로 React 위에서 동작하며, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅, 이미지 최적화, API 서버 기능 등 다양한 웹 개발 기능을 포함하고 있다. 1. React 기반 프레임워크Next.js는 React의 기능을 그대로 활용하면서도, React만으로 만들기엔 번거로운 기능들을 기본 제공한다.예를 들어, 라우팅 설정, 코드 스플리팅, 데이터 패칭 방식 통일, SEO 최적화 등을 쉽게 처리할 수 있다. 2. 다양한 렌더링 방식 지원Next.js는 페이지를 어떻게 렌더링할지 선택할 수 있다. 주요 방식은 다음과 같다.- SSG (Static Site Generation): 정적 HTML을..