{"id":41074,"date":"2024-11-06T02:46:29","date_gmt":"2024-11-06T02:46:29","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=41074"},"modified":"2024-11-26T06:37:40","modified_gmt":"2024-11-26T06:37:40","slug":"42-nest-js%ec%99%80-next-js%ec%97%90%ec%84%9c-%ec%9b%b9%ec%86%8c%ec%bc%93-%ed%99%9c%ec%9a%a9%ed%95%98%ea%b8%b0-nest-js%ec%97%90%ec%84%9c-%ec%8b%a4%ec%8b%9c%ea%b0%84-%ed%86%b5%ec%8b%a0-%ea%b5%ac","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/41074\/","title":{"rendered":"42.Nest.js\uc640 Next.js\uc5d0\uc11c \uc6f9\uc18c\ucf13 \ud65c\uc6a9\ud558\uae30, Nest.js\uc5d0\uc11c \uc2e4\uc2dc\uac04 \ud1b5\uc2e0 \uad6c\ud604\ud558\uae30"},"content":{"rendered":"

<\/p>\n

\uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Nest.js\uc640 Next.js\ub97c \ud65c\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \ud1b5\uc2e0\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc6f9\uc18c\ucf13(WebSocket)\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc758 \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ud504\ub85c\ud1a0\ucf5c\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc815\ubcf4\ub97c \uc2e4\uc2dc\uac04\uc73c\ub85c \uc8fc\uace0 \ubc1b\uc744 \uc218 \uc788\uc73c\uba70, \ud2b9\ud788 \ucc44\ud305 \uc560\ud50c\ub9ac\ucf00\uc774\uc158, \uc2e4\uc2dc\uac04 \ub300\uc2dc\ubcf4\ub4dc \ub4f1\uacfc \uac19\uc740 \uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n

1. \uc6f9\uc18c\ucf13\uc758 \uae30\ucd08 \uc774\ud574<\/h2>\n

\uc6f9\uc18c\ucf13\uc740 HTTP \uae30\ubc18\uc758 \ud1b5\uc2e0 \ucc44\ub110\ub85c, \ub9e4\ubc88 \uc5f0\uacb0\uc744 \uc0c8\ub85c \uc5ec\ub294 \ub300\uc2e0\uc5d0 \ud55c \ubc88 \uc5f0\uacb0\ub41c \uc774\ud6c4\ub85c \uc9c0\uc18d\uc801\uc778 \uc5f0\uacb0\uc744 \uc720\uc9c0\ud558\uc5ec \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4. \uc774\ub85c \uc778\ud574 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc758 \ub370\uc774\ud130 \uc804\uc1a1 \uc18d\ub3c4\uac00 \ube68\ub77c\uc9c0\uace0, \ubd88\ud544\uc694\ud55c \uc624\ubc84\ud5e4\ub4dc\uac00 \uc904\uc5b4\ub4dc\ub294 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n

1.1 \uc6f9\uc18c\ucf13\uc758 \ub3d9\uc791 \uad6c\uc870<\/h3>\n
\n1. \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 WebSocket \uc11c\ubc84\uc5d0 \uc5f0\uacb0 \uc694\uccad.\n2. \uc11c\ubc84\ub294 \uc694\uccad\uc744 \uc218\ub77d\ud558\uc5ec \uc5f0\uacb0\uc744 \uc644\uc131.\n3. \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84\uac00 \uc5f0\uacb0\ub41c \ud6c4 \uc591\ubc29\ud5a5\uc73c\ub85c \ub370\uc774\ud130 \uc804\uc1a1.\n4. \ud074\ub77c\uc774\uc5b8\ud2b8 \ub610\ub294 \uc11c\ubc84\uac00 \uc5f0\uacb0\uc744 \uc885\ub8cc.\n<\/pre>\n
2. Nest.js\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uad6c\ud604\ud558\uae30<\/h2>\n
Nest.js\ub294 Node.js\ub97c \uc704\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uc6f9\uc18c\ucf13\uc744 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 ‘socket.io’ \ud328\ud0a4\uc9c0\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uba3c\uc800 Nest.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
2.1 Nest.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
npm install -g @nestjs\/cli\nnest new websocket-demo\ncd websocket-demo\n<\/code><\/pre>\n
2.2 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0 \uc124\uce58<\/h3>\n
\uc6f9\uc18c\ucf13 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 socket.io\uc640 \uad00\ub828 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n
npm install --save @nestjs\/platform-socket.io socket.io<\/code><\/pre>\n
2.3 \uc6f9\uc18c\ucf13 \ubaa8\ub4c8 \uc0dd\uc131<\/h3>\n
\uc6f9\uc18c\ucf13\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 \uc0c8\ub85c\uc6b4 \ubaa8\ub4c8\uacfc \uc11c\ube44\uc2a4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4:<\/p>\n
nest g module chat\nnest g service chat\nnest g gateway chat\n<\/code><\/pre>\n
2.4 \uc6f9\uc18c\ucf13 \uac8c\uc774\ud2b8\uc6e8\uc774 \uad6c\ud604<\/h3>\n
\uc0dd\uc131\ub41c chat.gateway.ts \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uc6f9\uc18c\ucf13 \uae30\ub2a5\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4:<\/p>\n
import { WebSocketGateway, WebSocketServer, SubscribeMessage, WebSocketIconService } from '@nestjs\/websockets';\nimport { Server } from 'socket.io';\n\n@WebSocketGateway()\nexport class ChatGateway {\n  @WebSocketServer() server: Server;\n\n  @SubscribeMessage('message')\n  handleMessage(client: any, payload: { sender: string; content: string }): void {\n    this.server.emit('message', payload);\n  }\n}\n<\/code><\/pre>\n
2.5 \uc11c\ube44\uc2a4\uc5d0 \ub85c\uc9c1 \ucd94\uac00<\/h3>\n
chat.service.ts\uc5d0 \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc744 \ucd94\uac00\ud558\uc5ec \ub354 \ubcf5\uc7a1\ud55c \uae30\ub2a5\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790 \ubaa9\ub85d \uad00\ub9ac, \uba54\uc2dc\uc9c0 \uc800\uc7a5 \ub4f1\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3. Next.js\uc5d0\uc11c \uc6f9\uc18c\ucf13 \ud074\ub77c\uc774\uc5b8\ud2b8 \uad6c\ud604\ud558\uae30<\/h2>\n
Next.js\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uc11c\ubc84\uc640 \ud1b5\uc2e0\ud558\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc27d\uac8c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. socket.io-client \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uba74 \uae30\uc874\uc758 socket.io \uc11c\ubc84\uc640 \uc27d\uac8c \uc5f0\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.1 Next.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
npx create-next-app websocket-client\ncd websocket-client\nnpm install socket.io-client<\/code><\/pre>\n
3.2 \uc6f9\uc18c\ucf13 \ud074\ub77c\uc774\uc5b8\ud2b8 \uad6c\ud604<\/h3>\n
Next.js\uc758 pages\/index.tsx \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec \uc6f9\uc18c\ucf13 \uc5f0\uacb0\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4:<\/p>\n
import { useEffect, useState } from 'react';\nimport { io } from 'socket.io-client';\n\nconst socket = io('http:\/\/localhost:3000'); \/\/ Nest.js \uc11c\ubc84\uc758 \uc8fc\uc18c\n\nexport default function Home() {\n  const [messages, setMessages] = useState([]);\n  const [input, setInput] = useState('');\n\n  useEffect(() => {\n    socket.on('message', (message) => {\n      setMessages((prev) => [...prev, message]);\n    });\n\n    return () => {\n      socket.off('message');\n    };\n  }, []);\n\n  const sendMessage = () => {\n    socket.emit('message', { sender: 'User', content: input });\n    setInput('');\n  };\n\n  return (\n    
\n      
WebSocket Chat<\/h1>\n      
\n        {messages.map((msg, index) => (\n          
{msg.sender}: {msg.content}<\/div>\n        ))}\n      <\/div>\n       setInput(e.target.value)}\n        placeholder=\"Type a message\"\n      \/>\n