\n \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc788\uc5b4 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uacfc API\uc758 \ud6a8\uc728\uc801\uc778 \uc0ac\uc6a9\uc740 \ub9e4\uc6b0 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \n \uba3c\uc800, Nest.js\ub85c \uac04\ub2e8\ud55c API \uc11c\ubc84\ub97c \uc124\uc815\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc0c8\ub85c\uc6b4 Nest.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud574 CLI\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \n \uadf8 \ud6c4, \uc0c8\ub85c\uc6b4 Nest.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.\n <\/p>\n \n \uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud558\uc5ec RESTful API\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574 \uc0c8\ub85c\uc6b4 \ubaa8\ub4c8\uacfc \ucee8\ud2b8\ub864\ub7ec\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4:\n <\/p>\n \n \ub2e4\uc74c\uc73c\ub85c, \n \uc774\uc81c Nest.js \uc11c\ubc84\ub97c \uc2e4\ud589\ud558\uc5ec API\ub97c \ud655\uc778\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n \n \uae30\ubcf8\uc801\uc73c\ub85c \n \uc774\uc81c Next.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uc5ec Nest.js API\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \n \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9 \ud6c4, \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.\n <\/p>\n \n Next.js \ud398\uc774\uc9c0\uc5d0\uc11c API \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ub450 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4: \n \n \uc704\uc640 \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \ub370\uc774\ud130\ub97c \uac00\uc838\uc628 \ud6c4, \ud398\uc774\uc9c0\uc5d0\uc11c \uc544\ub798\uc640 \uac19\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n \n \uc774 \ucf54\ub4dc\ub294 Nest API\ub85c\ubd80\ud130 \uac00\uc838\uc628 \uac8c\uc2dc\uae00 \ubaa9\ub85d\uc744 \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4. \n \n \uc704 \ucf54\ub4dc\uc5d0\uc11c\ub294 \n \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 Nest.js\ub85c API \uc11c\ubc84\ub97c \uad6c\ucd95\ud558\uace0, Next.js\uc5d0\uc11c \n \uc774\ub97c \ud1b5\ud574 \uc6d0\ud558\ub294 \ub370\uc774\ud130 \ud328\uce6d \ubc29\uc2dd\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uace0\ub824\ud558\uc5ec \uc801\uc808\ud55c \ubc29\ubc95\uc744 \uc120\ud0dd\ud558\uba74 \uc88b\uc744 \uac83\uc785\ub2c8\ub2e4. <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
\n Next.js<\/a>\ub294 React \uae30\ubc18\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1\uc744 \uc9c0\uc6d0\ud558\uba74\uc11c
\n \ub6f0\uc5b4\ub09c \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\ub294 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \ud55c\ud3b8, Nest.js<\/a>\ub294
\n \ud6a8\uc728\uc801\uc774\uace0 \ud655\uc7a5 \uac00\ub2a5\ud558\uba70 \uc27d\uac8c \ud14c\uc2a4\ud2b8\ud560 \uc218 \uc788\ub294 Node.js \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud504\ub808\uc784\uc6cc\ud06c\ub85c RESTful API\ub97c \uad6c\ucd95\ud558\ub294 \ub370\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.
\n \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 Next.js\uc640 Nest.js\ub97c \uc5f0\ub3d9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ubc29\ubc95, \ud2b9\ud788 getServerSideProps<\/code>\uc640 SWR<\/code>\uc744 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n1. Nest.js API \uc11c\ubc84 \uc124\uc815\ud558\uae30<\/h2>\n
\n \uc124\uce58\uac00 \ub418\uc5b4 \uc788\uc9c0 \uc54a\ub2e4\uba74, \uc544\ub798 \uba85\ub839\uc5b4\ub85c Nest CLI\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.\n <\/p>\nnpm install -g @nestjs\/cli<\/code><\/pre>\nnest new blog-api<\/code><\/pre>\nnest generate module posts<\/code><\/pre>\nnest generate controller posts<\/code><\/pre>\nPostsController<\/code>\uc5d0 GET \uc694\uccad\uc744 \ucc98\ub9ac\ud558\ub294 \uba54\uc11c\ub4dc\ub97c \ucd94\uac00\ud558\uaca0\uc2b5\ub2c8\ub2e4. src\/posts\/posts.controller.ts<\/code> \ud30c\uc77c\uc744 \uc5f4\uc5b4
\n \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\ud604\ud569\ub2c8\ub2e4.\n <\/p>\n\nimport { Controller, Get } from '@nestjs\/common';\n\n@Controller('posts')\nexport class PostsController {\n @Get()\n findAll() {\n return [\n { id: 1, title: '\uccab \ubc88\uc9f8 \uac8c\uc2dc\uae00', content: '\uc774\uac83\uc740 \uccab \ubc88\uc9f8 \uac8c\uc2dc\uae00\uc758 \ub0b4\uc6a9\uc785\ub2c8\ub2e4.' },\n { id: 2, title: '\ub450 \ubc88\uc9f8 \uac8c\uc2dc\uae00', content: '\uc774\uac83\uc740 \ub450 \ubc88\uc9f8 \uac8c\uc2dc\uae00\uc758 \ub0b4\uc6a9\uc785\ub2c8\ub2e4.' },\n ];\n }\n}\n <\/code><\/pre>\nnpm run start<\/code><\/pre>\nlocalhost:3000\/posts<\/code>\uc5d0\uc11c \uac8c\uc2dc\uae00\uc744 \ubd88\ub7ec\uc62c \uc218 \uc788\ub294 API\uac00 \uc900\ube44\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\n <\/p>\n2. Next.js \uc124\uc815\ud558\uae30<\/h2>\n
\n \uc0c8\ub85c\uc6b4 Next.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud574 \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.\n <\/p>\nnpx create-next-app blog-client<\/code><\/pre>\ncd blog-client<\/code><\/pre>\nnpm install swr<\/code><\/pre>\ngetServerSideProps<\/code>\uc640 SWR<\/code>.\n <\/p>\n3. getServerSideProps\ub97c \uc774\uc6a9\ud55c \ub370\uc774\ud130 \uac00\uc838\uc624\uae30<\/h2>\n
getServerSideProps<\/code>\ub294 Next.js\uc5d0\uc11c \ud398\uc774\uc9c0\uac00 \uc694\uccad\ub420 \ub54c\ub9c8\ub2e4 \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \uba54\uc11c\ub4dc\uc785\ub2c8\ub2e4.
\n \uc774 \uba54\uc11c\ub4dc\ub294 \ud398\uc774\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ud504\ub85c\ud37c\ud2f0\uc5d0 \ub370\uc774\ud130\ub97c \uc8fc\uc785\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4.\n <\/p>\n\nexport async function getServerSideProps() {\n const res = await fetch('http:\/\/localhost:3000\/posts');\n const posts = await res.json();\n\n return {\n props: {\n posts,\n },\n };\n}\n <\/code><\/pre>\n\nimport React from 'react';\n\nconst PostsPage = ({ posts }) => {\n return (\n \uac8c\uc2dc\uae00 \ubaa9\ub85d<\/h1>\n
\n {posts.map(post => (\n
getServerSideProps<\/code>\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0,
\n \ud398\uc774\uc9c0\uac00 \uc694\uccad\ub420 \ub54c\ub9c8\ub2e4 \ud56d\uc0c1 \ucd5c\uc2e0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.\n <\/p>\n4. SWR\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130 \uac00\uc838\uc624\uae30<\/h2>\n
SWR<\/code>\uc740 \ub370\uc774\ud130 \ud328\uce6d\uc744 \uc704\ud55c React \ud6c5\uc73c\ub85c, \ub2e4\uc591\ud55c \ub370\uc774\ud130 \uc694\uccad\uc744 \uce90\uc2f1\ud558\uc5ec \ub354 \ub098\uc740 \uc131\ub2a5\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.
\n SWR\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ud328\uce6d\ud560 \ub54c \uc8fc\uae30\uc801\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uace0, \uc7ac\uac80\uc99d\ud558\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.\n <\/p>\n\nimport useSWR from 'swr';\n\nconst fetcher = (url) => fetch(url).then(res => res.json());\n\nconst PostsPage = () => {\n const { data, error } = useSWR('http:\/\/localhost:3000\/posts', fetcher);\n\n if (error) return \uac8c\uc2dc\uae00 \ubaa9\ub85d<\/h1>\n
\n {data.map(post => (\n
useSWR<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uace0, \ub85c\ub529 \uc911\uc77c \ub54c\uc640 \uc5d0\ub7ec \ubc1c\uc0dd \uc2dc\uc758 \uc0c1\ud0dc\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4.
\n \uc774\ub807\uac8c \ud558\uba74 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub354 \ub098\uc740 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n5. \uacb0\ub860<\/h2>\n
getServerSideProps<\/code>\uc640 SWR<\/code>\uc744 \ud1b5\ud574 API \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4.
\n Nest.js\uc640 Next.js\ub97c \uc870\ud569\ud558\uc5ec \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \uac1c\ubc1c\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc73c\uba70, \uac01\uac01\uc758 \ubc29\ubc95\uc774 \uac00\uc9c0\ub294 \ud2b9\uc131\uacfc \uc0ac\uc6a9 \uc0ac\ub840\ub97c \uc774\ud574\ud560 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.
\n \uc774\ub7ec\ud55c \uae30\uc220\ub4e4\uc740 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud68d\uae30\uc801\uc73c\ub85c \uac1c\uc120\ud558\ub294 \ub370\uc5d0 \uae30\uc5ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\n Next.js\uc640 Nest.js\uc758 \uc870\ud569\uc740 \uac1c\ubc1c\uc790\uc5d0\uac8c \uac15\ub825\ud55c \ub3c4\uad6c\uac00 \ub418\uc5b4 \uc8fc\uba70, \ub354 \ub098\uc740 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uae30 \uc704\ud55c \uae30\ubc18\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4.\n <\/p>\n<\/article>\n