{"id":41080,"date":"2024-11-06T02:46:31","date_gmt":"2024-11-06T02:46:31","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=41080"},"modified":"2024-11-26T06:37:38","modified_gmt":"2024-11-26T06:37:38","slug":"41-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-next-js-%ed%81%b4%eb%9d%bc%ec%9d%b4%ec%96%b8%ed%8a%b8%ec%97%90%ec%84%9c-%ec%9b%b9","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/41080\/","title":{"rendered":"41.Nest.js\uc640 Next.js\uc5d0\uc11c \uc6f9\uc18c\ucf13 \ud65c\uc6a9\ud558\uae30, Next.js \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uc5f0\uacb0 \ubc0f \ub370\uc774\ud130 \uc218\uc2e0"},"content":{"rendered":"

<\/p>\n

\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<\/header>\n

\n

\uc6f9\uc18c\ucf13\uc774\ub780?<\/h2>\n

\n \uc6f9\uc18c\ucf13(WebSocket)\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc758 \uc804\uc774\uc911(\uc591\ubc29\ud5a5) \ud1b5\uc2e0\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ud504\ub85c\ud1a0\ucf5c\uc785\ub2c8\ub2e4. \uae30\uc874\uc758 HTTP \ud504\ub85c\ud1a0\ucf5c\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc694\uccad\uc744 \ud558\uace0 \uc11c\ubc84\uac00 \uc751\ub2f5\uc744 \ud558\ub294 \uad6c\uc870\uc778 \ubc18\uba74, \uc6f9\uc18c\ucf13\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84\uac00 \uc11c\ub85c \uc790\uc720\ub86d\uac8c \uba54\uc2dc\uc9c0\ub97c \uc8fc\uace0\ubc1b\uc744 \uc218 \uc788\ub294 \uc5f0\uacb0\uc744 \uc720\uc9c0\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ud2b9\uc131 \ub355\ubd84\uc5d0 \uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \uc804\uc1a1\uc774 \ud544\uc694\ud55c \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc6f9\uc18c\ucf13\uc740 \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ucc44\ud305 \uc560\ud50c\ub9ac\ucf00\uc774\uc158, \uc2e4\uc2dc\uac04 \uac8c\uc784, \uc8fc\uc2dd \uc2dc\uc138 \uc804\uc1a1 \uc571 \ub4f1\uc5d0\uc11c \ub110\ub9ac \uc0ac\uc6a9\ub429\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

Nest.js \uc18c\uac1c<\/h2>\n

\n Nest.js\ub294 Node.js\ub97c \uae30\ubc18\uc73c\ub85c \ud558\ub294 \ud604\ub300\uc801\uc778 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. Angular\uc5d0\uc11c \uc601\uac10\uc744 \ubc1b\uc544 \ubaa8\ub4c8 \uae30\ubc18 \uc544\ud0a4\ud14d\ucc98\ub97c \ucc44\ud0dd\ud558\uace0 \uc788\uc73c\uba70, TypeScript\ub97c \uae30\ubcf8\uc73c\ub85c \uc9c0\uc6d0\ud569\ub2c8\ub2e4. Nest.js\ub97c \uc0ac\uc6a9\ud558\uba74 \uad6c\uc870\ud654\ub41c \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\uc5b4 \uc720\uc9c0\ubcf4\uc218\uc640 \ud655\uc7a5\uc131\uc774 \ub6f0\uc5b4\ub0a9\ub2c8\ub2e4. Nest.js\ub294 \uc6f9\uc18c\ucf13\uc744 \ud3ec\ud568\ud55c \ub2e4\uc591\ud55c \ud1b5\uc2e0 \ud504\ub85c\ud1a0\ucf5c\uc744 \uc9c0\uc6d0\ud558\uc5ec \uc2e4\uc2dc\uac04 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

Next.js \uc18c\uac1c<\/h2>\n

\n Next.js\ub294 React\ub97c \uae30\ubc18\uc73c\ub85c \ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uacfc \uc815\uc801 \uc0ac\uc774\ud2b8 \uc0dd\uc131(SSG) \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 SEO\uc5d0 \uc720\ub9ac\ud558\uace0 \ube60\ub978 \ub80c\ub354\ub9c1\uc744 \ud560 \uc218 \uc788\ub294 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, Next.js\ub294 API \ub77c\uc6b0\ud2b8 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud574 \uc11c\ubc84 \uce21 \ub85c\uc9c1\ub3c4 \uac04\ub2e8\ud788 \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ud2b9\uc131 \ub355\ubd84\uc5d0 Next.js\ub294 \uc2e4\uc2dc\uac04 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \ub370 \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

Nest.js\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uc124\uc815\ud558\uae30<\/h2>\n

\n Nest.js\uc5d0\uc11c \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uba3c\uc800, \uc6f9\uc18c\ucf13 \uc11c\ubc84\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574 @nestjs\/websockets \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc6f9\uc18c\ucf13\uc758 \uae30\ubcf8\uc801\uc778 \uae30\ub2a5\uc744 \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n

\uc124\uce58<\/h3>\n
npm install @nestjs\/websockets @nestjs\/platform-socket.io socket.io<\/code><\/pre>\n
\uc6f9\uc18c\ucf13 \uac8c\uc774\ud2b8\uc6e8\uc774 \ub9cc\ub4e4\uae30<\/h3>\n
\n                \ub2e4\uc74c\uc73c\ub85c, \uc6f9\uc18c\ucf13 \uac8c\uc774\ud2b8\uc6e8\uc774\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc6f9\uc18c\ucf13 \uac8c\uc774\ud2b8\uc6e8\uc774\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uc694\uccad\uc744 \ubc1b\uace0 \uba54\uc2dc\uc9c0\ub97c \uc1a1\uc218\uc2e0\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uac04\ub2e8\ud55c \uc6f9\uc18c\ucf13 \uac8c\uc774\ud2b8\uc6e8\uc774\uc758 \uc608\uc785\ub2c8\ub2e4.\n            <\/p>\n
\nimport { WebSocketGateway, WebSocketServer, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs\/websockets';\nimport { Server } from 'socket.io';\n\n@WebSocketGateway()\nexport class AppGateway implements OnGatewayConnection, OnGatewayDisconnect {\n    @WebSocketServer() server: Server;\n\n    handleConnection(client: any) {\n        console.log('\ud074\ub77c\uc774\uc5b8\ud2b8 \uc5f0\uacb0\ub428');\n    }\n\n    handleDisconnect(client: any) {\n        console.log('\ud074\ub77c\uc774\uc5b8\ud2b8 \uc5f0\uacb0 \ub04a\uae40');\n    }\n\n    sendMessage(message: string) {\n        this.server.emit('message', message);\n    }\n}<\/code><\/pre>\n
\n                \uc704 \ucf54\ub4dc\uc5d0\uc11c handleConnection<\/code>\uacfc handleDisconnect<\/code> \uba54\uc11c\ub4dc\ub294 \uac01\uac01 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc5f0\uacb0\ub418\uac70\ub098 \uc5f0\uacb0\uc774 \ub04a\uc5b4\uc9c8 \ub54c \ud638\ucd9c\ub429\ub2c8\ub2e4. sendMessage<\/code> \uba54\uc11c\ub4dc\ub294 \ubaa8\ub4e0 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uac8c \uba54\uc2dc\uc9c0\ub97c \uc804\uc1a1\ud558\ub294 \uae30\ub2a5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.\n            <\/p>\n<\/section>\n
\n
Next.js \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uc5f0\uacb0\ud558\uae30<\/h2>\n
\n                Next.js \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \uc6f9\uc18c\ucf13\uc5d0 \uc5f0\uacb0\ud558\uae30 \uc704\ud574 socket.io-client<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.\n            <\/p>\n
\uc124\uce58<\/h3>\n
npm install socket.io-client<\/code><\/pre>\n
\ud074\ub77c\uc774\uc5b8\ud2b8 \uc124\uc815<\/h3>\n
\n                \uba3c\uc800 Next.js \ud504\ub85c\uc81d\ud2b8\uc758 \ud398\uc774\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc6f9\uc18c\ucf13 \uc5f0\uacb0\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uae30\ubcf8\uc801\uc778 \uc6f9\uc18c\ucf13 \ud074\ub77c\uc774\uc5b8\ud2b8 \uad6c\ud604 \uc608\uc785\ub2c8\ub2e4.\n            <\/p>\n
\nimport { useEffect } from 'react';\nimport { io } from 'socket.io-client';\n\nconst socket = io('http:\/\/localhost:3000');\n\nconst Home = () => {\n    useEffect(() => {\n        socket.on('message', (message) => {\n            console.log('\uc11c\ubc84\ub85c\ubd80\ud130 \ubc1b\uc740 \uba54\uc2dc\uc9c0:', message);\n        });\n\n        return () => {\n            socket.off('message');\n        };\n    }, []);\n\n    const sendMessage = () => {\n        socket.emit('message', '\uc548\ub155\ud558\uc138\uc694, \uc11c\ubc84!');\n    };\n\n    return (\n        
\n            
\uc6f9\uc18c\ucf13 \ud14c\uc2a4\ud2b8<\/h1>\n