\ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc2e4\uc2dc\uac04 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \uac83\uc740 \uc810\uc810 \ub354 \uc911\uc694\ud574\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc2e4\uc2dc\uac04 \ub313\uae00 \uae30\ub2a5\uc740 \uc0ac\uc6a9\uc790 \ucc38\uc5ec\ub97c \uc99d\uac00\uc2dc\ud0a4\uace0, \uc6f9\uc0ac\uc774\ud2b8\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \uc88b\uc740 \uc608\uc785\ub2c8\ub2e4. \uc624\ub298\uc740 Nest.js\uc640 Next.js\ub97c \ud65c\uc6a9\ud558\uc5ec \uc6f9\uc18c\ucf13\uc744 \uc124\uc815\ud558\uace0, \uc774\ub97c \ubc14\ud0d5\uc73c\ub85c \uc2e4\uc2dc\uac04 \ub313\uae00 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc6f9\uc18c\ucf13(WebSocket)\uc740 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac04\uc758 \uc804\uc774\uc911 \ud1b5\uc2e0\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ud504\ub85c\ud1a0\ucf5c\uc785\ub2c8\ub2e4. HTTP \ud504\ub85c\ud1a0\ucf5c\uacfc\ub294 \ub2ec\ub9ac, \uc6f9\uc18c\ucf13\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc758 \uc9c0\uc18d\uc801\uc778 \uc5f0\uacb0\uc744 \uc720\uc9c0\ud558\uba70, \uc591\ubc29\ud5a5\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc2e4\uc2dc\uac04\uc73c\ub85c \uc8fc\uace0\ubc1b\uc744 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ud2b9\uc131 \ub355\ubd84\uc5d0 \ud2b9\ud788 \ucc44\ud305, \uc2e4\uc2dc\uac04 \uc54c\ub9bc \ub4f1 \ub2e4\uc591\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud65c\uc6a9\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
Nest.js\ub294 Node.js\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uc11c\ubc84 \uc0ac\uc774\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \ub54c \uc8fc\ub85c \uc0ac\uc6a9\ub429\ub2c8\ub2e4. TypeScript\ub85c \uc791\uc131\ub418\uc5b4 \uc788\uc73c\uba70, \ubaa8\ub4c8\ud654\ub41c \uad6c\uc870\uc640 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \uae30\ub2a5\uc744 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub294 Next.js\ub294 \ub9ac\uc561\ud2b8 \uae30\ubc18\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, SSR(\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1)\uacfc SSG(\uc815\uc801 \uc0ac\uc774\ud2b8 \uc0dd\uc131)\ub97c \uc9c0\uc6d0\ud558\uc5ec SEO\uc5d0 \uc720\ub9ac\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \uae30\ub2a5\uc744 \uc27d\uac8c \ud1b5\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc2e4\uc2dc\uac04 \ub313\uae00 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574, Nest.js\uc640 Next.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 Nest.js\ub97c \ubc31\uc5d4\ub4dc\ub85c, Next.js\ub97c \ud504\ub860\ud2b8\uc5d4\ub4dc\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n \ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub418\uba74, \uc544\ud0a4\ud14d\ucc98\ub97c \uace0\ub824\ud558\uc5ec \ud544\uc694\ud55c \ubaa8\ub4c8\ub4e4\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 Next.js \ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub418\uba74, \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d Nest.js\uc5d0\uc11c \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud558\ub824\uba74 \uac04\ub2e8\ud55c \uc124\uc815\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc6b0\uc120, \uc6f9\uc18c\ucf13\uc758 \uac8c\uc774\ud2b8\uc6e8\uc774\ub97c \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640\uc758 \uc18c\ud1b5\uc744 \uad00\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n \uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c\ub294 Next.js\uc5d0\uc11c\ub294 \uc6f9\uc18c\ucf13 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc124\uc815\ud558\uc5ec, \ubc31\uc5d4\ub4dc\uc640\uc758 \uc5f0\uacb0\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n@nestjs\/websockets<\/code> \ubaa8\ub4c8\uc774 \uae30\ubcf8 \uc81c\uacf5\ub429\ub2c8\ub2e4.<\/p>\nNext.js<\/h3>\n
3. \uac1c\ubc1c \ud658\uacbd \uc124\uc815<\/h2>\n
3.1 Nest.js \uc124\uce58 \ubc0f \uc124\uc815<\/h3>\n
npm install -g @nestjs\/cli\nnest new nest-websocket\n<\/code><\/pre>\n@nestjs\/websockets<\/code> \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\nnpm install @nestjs\/websockets @nestjs\/platform-socket.io socket.io\n<\/code><\/pre>\n3.2 Next.js \uc124\uce58 \ubc0f \uc124\uc815<\/h3>\n
npx create-next-app next-websocket\n<\/code><\/pre>\nsocket.io-client<\/code>\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\nnpm install socket.io-client\n<\/code><\/pre>\n4. Nest.js\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uc124\uc815\ud558\uae30<\/h2>\n
4.1 \uc6f9\uc18c\ucf13 \uac8c\uc774\ud2b8\uc6e8\uc774 \uc0dd\uc131<\/h3>\n
import { WebSocketGateway, SubscribeMessage, MessageBody } from '@nestjs\/websockets';\nimport { WebSocketServer } from 'socket.io';\nimport { Namespace } from 'socket.io';\n\n@WebSocketGateway()\nexport class CommentsGateway {\n @WebSocketServer() server: Namespace;\n\n @SubscribeMessage('sendComment')\n handleComment(@MessageBody() comment: string): void {\n this.server.emit('newComment', comment);\n }\n}\n<\/code><\/pre>\n@WebSocketGateway()<\/code> \ub370\ucf54\ub808\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6f9\uc18c\ucf13 \uac8c\uc774\ud2b8\uc6e8\uc774\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. handleComment<\/code> \uba54\uc18c\ub4dc\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c\ubd80\ud130 \ub313\uae00\uc744 \uc218\uc2e0\ud558\uace0, \uc774\ub97c \ubaa8\ub4e0 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc804\uc1a1\ud569\ub2c8\ub2e4.<\/p>\n4.2 \ubaa8\ub4c8\uc5d0 \uac8c\uc774\ud2b8\uc6e8\uc774 \ub4f1\ub85d<\/h3>\n
import { Module } from '@nestjs\/common';\nimport { CommentsGateway } from '.\/comments.gateway';\n\n@Module({\n providers: [CommentsGateway],\n})\nexport class AppModule {}\n<\/code><\/pre>\n5. Next.js\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uc5f0\uacb0\ud558\uae30<\/h2>\n
5.1 \uc6f9\uc18c\ucf13 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc124\uc815<\/h3>\n
import { useEffect, useState } from 'react';\nimport io from 'socket.io-client';\n\nconst socket = io('http:\/\/localhost:3000');\n\nconst Comments = () => {\n const [comments, setComments] = useState([]);\n const [comment, setComment] = useState('');\n\n useEffect(() => {\n socket.on('newComment', (newComment) => {\n setComments((prev) => [...prev, newComment]);\n });\n\n return () => {\n socket.off('newComment');\n };\n }, []);\n\n const sendComment = () => {\n socket.emit('sendComment', comment);\n setComment('');\n };\n\n return (\n \uc2e4\uc2dc\uac04 \ub313\uae00<\/h2>\n