현대 웹 애플리케이션에서 실시간 기능을 제공하는 것은 점점 더 중요해지고 있습니다. 실시간 댓글 기능은 사용자 참여를 증가시키고, 웹사이트의 상호작용을 향상시키는 좋은 예입니다. 오늘은 Nest.js와 Next.js를 활용하여 웹소켓을 설정하고, 이를 바탕으로 실시간 댓글 기능을 구현하는 방법을 살펴보겠습니다.
1. 웹소켓이란?
웹소켓(WebSocket)은 서버와 클라이언트 간의 전이중 통신을 가능하게 하는 프로토콜입니다. HTTP 프로토콜과는 달리, 웹소켓은 클라이언트와 서버 간의 지속적인 연결을 유지하며, 양방향으로 데이터를 실시간으로 주고받을 수 있도록 해줍니다. 이러한 특성 덕분에 특히 채팅, 실시간 알림 등 다양한 애플리케이션에서 활용되고 있습니다.
웹소켓의 장점
- 빠른 데이터 전송: HTTP 요청-응답 방식에 비해 각 요청마다 새로운 연결을 맺지 않기 때문에 지연 시간이 적습니다.
- 양방향 통신: 서버에서 클라이언트로, 클라이언트에서 서버로 데이터를 자유롭게 전송할 수 있습니다.
- 실시간 데이터 업데이트: 연결이 유지되는 동안 실시간으로 데이터를 수신할 수 있습니다.
2. Nest.js와 Next.js 소개
Nest.js
Nest.js는 Node.js의 프레임워크로, 서버 사이드 애플리케이션을 구축할 때 주로 사용됩니다. TypeScript로 작성되어 있으며, 모듈화된 구조와 다양한 기능을 제공합니다. 웹소켓을 사용하여 실시간 기능을 쉽게 구현할 수 있는 @nestjs/websockets 모듈이 기본 제공됩니다.
Next.js
Next.js는 리액트 기반의 프레임워크로, SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)를 지원하여 SEO에 유리한 웹 애플리케이션을 만들 수 있습니다. 또한, 클라이언트 측에서 웹소켓을 사용하여 실시간 기능을 쉽게 통합할 수 있습니다.
3. 개발 환경 설정
실시간 댓글 기능을 구현하기 위해, Nest.js와 Next.js 프로젝트를 설정해야 합니다. 이 예제에서는 Nest.js를 백엔드로, Next.js를 프론트엔드로 사용합니다.
3.1 Nest.js 설치 및 설정
npm install -g @nestjs/cli
nest new nest-websocket
프로젝트가 생성되면, 아키텍처를 고려하여 필요한 모듈들을 추가합니다. 웹소켓을 사용하기 위해 @nestjs/websockets 패키지를 설치합니다.
npm install @nestjs/websockets @nestjs/platform-socket.io socket.io
3.2 Next.js 설치 및 설정
npx create-next-app next-websocket
Next.js 프로젝트가 생성되면, 클라이언트 측에서 웹소켓 기능을 사용할 수 있도록 socket.io-client를 설치합니다.
npm install socket.io-client
4. Nest.js에서 웹소켓 설정하기
Nest.js에서 웹소켓을 사용하려면 간단한 설정이 필요합니다. 우선, 웹소켓의 게이트웨이를 생성해야 합니다. 이를 통해 클라이언트와의 소통을 관리합니다.
4.1 웹소켓 게이트웨이 생성
import { WebSocketGateway, SubscribeMessage, MessageBody } from '@nestjs/websockets';
import { WebSocketServer } from 'socket.io';
import { Namespace } from 'socket.io';
@WebSocketGateway()
export class CommentsGateway {
@WebSocketServer() server: Namespace;
@SubscribeMessage('sendComment')
handleComment(@MessageBody() comment: string): void {
this.server.emit('newComment', comment);
}
}
위의 코드에서는 @WebSocketGateway() 데코레이터를 사용하여 웹소켓 게이트웨이를 설정합니다. handleComment 메소드는 클라이언트로부터 댓글을 수신하고, 이를 모든 사용자에게 전송합니다.
4.2 모듈에 게이트웨이 등록
import { Module } from '@nestjs/common';
import { CommentsGateway } from './comments.gateway';
@Module({
providers: [CommentsGateway],
})
export class AppModule {}
5. Next.js에서 웹소켓 연결하기
Next.js에서는 웹소켓 클라이언트를 설정하여, 백엔드와의 연결을 생성합니다.
5.1 웹소켓 클라이언트 설정
import { useEffect, useState } from 'react';
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
const Comments = () => {
const [comments, setComments] = useState([]);
const [comment, setComment] = useState('');
useEffect(() => {
socket.on('newComment', (newComment) => {
setComments((prev) => [...prev, newComment]);
});
return () => {
socket.off('newComment');
};
}, []);
const sendComment = () => {
socket.emit('sendComment', comment);
setComment('');
};
return (
실시간 댓글
{comments.map((c, index) => (
{c}
))}
setComment(e.target.value)}
placeholder="댓글을 입력하세요."
/>
);
};
export default Comments;
6. 전체 애플리케이션 통합
이제 Nest.js와 Next.js를 통합하여 실시간 댓글 기능을 구현할 수 있습니다. 두 부분을 연결하여 사용자에게 실시간으로 댓글을 전송하고 받을 수 있도록 설정합니다.
6.1 CORS 설정
크로스 오리진 요청을 허용하기 위해 Nest.js에서 CORS를 설정해야 합니다.
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: 'http://localhost:3000',
credentials: true,
});
await app.listen(3001);
}
bootstrap();
6.2 Next.js 앱 실행
Next.js 앱을 실행합니다.
npm run dev
7. 결론
이번 강좌를 통해 Nest.js와 Next.js를 활용하여 실시간 댓글 기능을 웹소켓으로 구현하는 방법을 배웠습니다. 웹소켓을 이용한 실시간 통신은 사용자 경험을 향상시키며, 상호작용을 더 매끄럽게 만들어 줍니다. Nest.js는 강력한 백엔드 프레임워크로, Next.js는 유연한 프론트엔드 프레임워크로, 함께 사용할 때 큰 시너지를 발휘할 수 있습니다.
향후 개선 및 확장
이 기본 댓글 시스템에 다음과 같은 기능들을 추가하여 확장할 수 있습니다:
- 댓글 삭제 및 수정 기능
- 채팅방 기능 추가
- 인증 및 권한 관리
- 서버가 다운됐을 때 복구 기능
여기까지 읽어주셔서 감사합니다. 이 강좌가 Nest.js와 Next.js를 활용한 웹소켓 기반 애플리케이션 개발에 도움이 되었기를 바랍니다.