NestJS는 TypeScript 기반의 백엔드 프레임워크로, Express와 같은 기존의 Node.js 프레임워크를 확장하여 구축되었습니다. TypeScript는 JavaScript의 상위 집합 언어이며, 정적 타이핑을 제공하여 개발자들이 더욱 안정적이고 유지보수가 쉬운 코드를 작성할 수 있게 해줍니다. 이제 TypeScript로 작성된 NestJS 서버와 JavaScript로 작성된 클라이언트 간의 상호작용 방법에 대해 알아보겠습니다.
1. HTTP 통신을 이용한 상호작용
클라이언트와 서버 간의 가장 일반적인 상호작용은 HTTP 프로토콜을 이용한 통신입니다. NestJS에서는 @nestjs/common 패키지의 @Controller() 데코레이터와 함께 @Get(), @Post() 등의 HTTP 메서드 데코레이터를 사용하여 서버의 API 엔드포인트를 정의할 수 있습니다.
서버 측의 코드 예시:
import { Controller, Get, Post, Body } from '@nestjs/common';
@Controller('api')
export class ApiController {
@Get('/data')
getData() {
// 데이터를 조회하고 반환하는 로직
}
@Post('/data')
saveData(@Body() data: any) {
// 데이터를 저장하는 로직
}
}
클라이언트 측에서는 fetch() 함수를 사용하여 서버의 API 엔드포인트에 요청을 보낼 수 있습니다.
클라이언트 측의 코드 예시:
const getData = async () => {
const response = await fetch('http://localhost:3000/api/data');
const data = await response.json();
// 데이터를 처리하는 로직
}
const saveData = async (data) => {
const response = await fetch('http://localhost:3000/api/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
// 응답을 처리하는 로직
}
2. 웹소켓을 이용한 실시간 상호작용
HTTP 통신은 클라이언트에서 서버로 요청을 보내고 서버에서 응답을 받는 일방향 통신입니다. 하지만 실시간으로 데이터를 주고받고 상호작용하기 위해서는 웹소켓(WebSocket)을 사용할 수 있습니다.
소켓 통신 지원을 위해 NestJS에서는 @nestjs/platform-socket.io 패키지를 제공합니다. 해당 패키지를 통해 서버에서 소켓 이벤트를 구독하고, 클라이언트에서 소켓 이벤트를 발송하고 수신할 수 있습니다.
서버 측의 코드 예시:
import { WebSocketGateway, WebSocketServer, SubscribeMessage, OnGatewayInit } from '@nestjs/platform-socket.io';
import { Server } from 'socket.io';
@WebSocketGateway(3001)
export class SocketGateway implements OnGatewayInit {
@WebSocketServer()
server: Server;
afterInit(server: Server) {
console.log('소켓 서버가 초기화되었습니다.');
}
@SubscribeMessage('message')
handleMessage(client: Socket, payload: any) {
// 받은 메시지를 처리하는 로직
this.server.emit('message', payload); // 모든 클라이언트에게 메시지 전송
}
}
클라이언트 측에서는 socket.io-client 라이브러리를 사용하여 서버의 소켓에 연결하고 이벤트를 발송할 수 있습니다.
클라이언트 측의 코드 예시:
import io from 'socket.io-client';
const socket = io('http://localhost:3001');
socket.on('connect', () => {
console.log('소켓 서버에 연결되었습니다.');
});
socket.on('message', (data) => {
// 받은 메시지를 처리하는 로직
});
socket.emit('message', '안녕하세요!');
마무리
이상으로 TypeScript로 작성된 NestJS 서버와 JavaScript로 작성된 클라이언트 간의 상호작용 방법에 대해 알아보았습니다. HTTP 통신을 통해 간단한 요청과 응답을 주고받는 것부터 웹소켓을 활용한 실시간 상호작용까지 다양한 방식을 활용할 수 있습니다. 개발하고자 하는 서비스의 요구사항에 맞는 방법을 선택하여 사용해 보시기 바랍니다.
참고 자료: