전기방식 이야기
반응형
Next.js의 등장 배경과 필요성: 프론트엔드 개발의 진화
1. 프론트엔드 개발의 역사적 흐름
1.1 초기 웹 개발: 서버 중심 렌더링
초기 웹 개발에서는 서버 개발자들이 템플릿 엔진을 사용하여 웹 페이지를 구현했습니다. 대표적인 예로 Java 기반의 JSP(JavaServer Pages)가 있었습니다.
템플릿 엔진의 작동 방식
// JSP 예시
<html>
<body>
<% for(User user : users) { %>
<div>
<%= user.getName() %>
</div>
<% } %>
</body>
</html>템플릿 엔진은 다음과 같은 프로세스로 작동했습니다:
- 고정된 HTML 템플릿 준비
- 서버에서 동적 데이터 주입
- 완성된 HTML을 클라이언트에 응답
1.2 AJAX의 등장: 비동기 통신의 시작
AJAX(Asynchronous JavaScript and XML)의 등장으로 웹 개발은 큰 전환점을 맞이했습니다. AJAX는 두 가지 중요한 레이어를 분리했습니다:
- 데이터 인터체인지 레이어 (Data Interchange)
- 프레젠테이션 레이어 (Presentation)
// AJAX 예시
fetch('/api/login', {
method: 'POST',
body: JSON.stringify({
username: 'user',
password: 'pass'
})
})
.then(response => response.json())
.then(data => {
// 로딩 스피너 표시 대신 UI 업데이트
updateUI(data);
});1.3 CSR(Client Side Rendering)의 시대
AJAX의 발전은 자연스럽게 CSR 시대로 이어졌습니다. React와 같은 프레임워크의 등장으로 클라이언트 측 렌더링이 보편화되었습니다.
// React CSR 예시
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <div>클라이언트에서 렌더링된 컨텐츠</div>;
};
ReactDOM.render(
<App />,
document.getElementById('root')
);CSR의 한계점
- 성능 문제
- 대규모 JavaScript 번들 다운로드 시간
- 초기 로딩 시 빈 화면 문제
- SEO 문제
- 검색 엔진이 JavaScript 실행 전 내용을 인식하지 못함
- 빈 HTML 구조로 인한 검색 최적화 어려움
1.4 SSR(Server Side Rendering)의 재등장
CSR의 한계를 극복하기 위해 SSR이 새로운 형태로 재등장했습니다.
// Next.js SSR 예시
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data
}
};
}
export default function Page({ data }) {
return <div>{data.title}</div>;
}2. Next.js의 등장 배경
2.1 프론트엔드 개발자의 증가하는 책임
SSR 도입으로 프론트엔드 개발자의 역할이 확장되었습니다:
- 서버 운영
- 인프라 관리
- 서버 설정(Configuration)
- 비즈니스 로직 구현
2.2 Next.js의 솔루션
Next.js는 이러한 복잡성을 추상화하여 제공합니다:
// Next.js의 간단한 라우팅
// pages/about.js
export default function About() {
return <h1>About Page</h1>;
}
// pages/api/data.js
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' });
}3. Next.js의 주요 기능
3.1 기본 기능
- 라우팅 (Routing)
- 렌더링 (Rendering)
- 데이터 페칭 (Data Fetching)
- 스타일링 (Styling)
- 최적화 (Optimization)
- TypeScript 지원
3.2 자동 설정 예시
// next.config.js
module.exports = {
// 이미지 최적화 설정
images: {
domains: ['example.com'],
},
// 웹팩 설정
webpack: (config, { isServer }) => {
// 커스텀 웹팩 설정
return config;
},
}4. Next.js 사용의 이점
- 개발 생산성 향상
- 복잡한 설정 없이 바로 개발 시작 가능
- 자동화된 최적화
- 성능 최적화
- 자동 코드 스플리팅
- 이미지 최적화
- 정적 생성과 서버 사이드 렌더링 지원
- 확장성
- API 라우트 지원
- 다양한 배포 옵션
결론
Next.js는 현대 웹 개발의 복잡성을 추상화하여, 개발자가 비즈니스 로직 구현에 집중할 수 있게 해주는 프레임워크입니다. CSR과 SSR의 장점을 모두 활용하면서, 각각의 한계점을 보완하는 솔루션을 제공합니다.
웹 개발의 진화 과정에서 Next.js는 단순한 도구가 아닌, 현대 웹 애플리케이션 개발의 표준으로 자리잡았습니다. 특히 SEO, 성능, 개발자 경험을 모두 고려한 통합 솔루션으로서의 가치를 제공합니다.
참고문헌
- Next.js 공식 문서. "Getting Started", https://nextjs.org/docs
- Vercel. "Next.js by Vercel - The React Framework", https://vercel.com/next
- Mozilla Developer Network. "Ajax: Getting Started", https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
- React 공식 문서. "Client-Side Rendering vs. Server-Side Rendering", https://reactjs.org/docs/react-dom-server.html
- Google Developers. "Web Fundamentals - Performance", https://developers.google.com/web/fundamentals/performance/
관련 리소스
- Next.js GitHub 저장소: https://github.com/vercel/next.js
- Next.js 예제 모음: https://github.com/vercel/next.js/tree/canary/examples
- Next.js 커뮤니티 토론: https://github.com/vercel/next.js/discussions
반응형
'IT > nextjs 기초 내 공부' 카테고리의 다른 글
| 쉬운 NextJS 06 : 'use client' 지시문과 페이지 렌더링 심층 분석 (0) | 2024.11.12 |
|---|---|
| 쉬운 NextJs 05 : 서버 컴포넌트의 렌더링 프로세스 심층 분석 (0) | 2024.11.12 |
| 쉬운 NextJs 04: Layout 컴포넌트 완벽 가이드 - 제약사항과 해결방법 (1) | 2024.11.12 |
| 쉬운 Nextjs 03 : 실전 라우팅 구현 가이드: 자동화까지 (0) | 2024.11.12 |
| 쉬운 Nextjs 02 : 라우팅 시스템 완벽 가이드 정의부터 장단점까지 (0) | 2024.11.12 |