\ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc131\ub2a5\uacfc \ubcf4\uc548\uc744 \uc6b0\uc120\uc2dc\ud558\uba70, \uc774\ub97c \ub2ec\uc131\ud558\uae30 \uc704\ud574 \ub2e4\uc591\ud55c \uae30\uc220 \uc2a4\ud0dd\uacfc \uad6c\uc870\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ud2b9\ud788 Nest.js<\/strong>\uc640 Next.js<\/strong>\ub294 \uc774\ub7ec\ud55c \uc694\uad6c \uc0ac\ud56d\uc744 \ucda9\uc871\uc2dc\ud0a4\uae30 \uc704\ud574 \uc778\uae30 \uc788\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c\ub294 Nest.js\uc640 Next.js\uc5d0\uc11c \ubbf8\ub4e4\uc6e8\uc5b4\uc640 \uac00\ub4dc\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uace0, Next.js\uc5d0\uc11c API \uc694\uccad \uc2dc \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc801\uc6a9\ud558\ub294 \uacfc\uc815\uc744 \uc0b4\ud3b4\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n Nest.js\ub294 Node.js \uae30\ubc18\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, TypeScript\ub85c \uc791\uc131\ub41c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \ub370 \uc720\uc6a9\ud558\uba70, \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ud1b5\ud574 \uc694\uccad-\uc751\ub2f5 \uc0ac\uc774\ud074\uc744 \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubbf8\ub4e4\uc6e8\uc5b4\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc758 \uc694\uccad\uacfc \uc751\ub2f5\uc774 \ucc98\ub9ac\ub418\ub294 \uacfc\uc815\uc5d0\uc11c \ud2b9\uc815 \ub85c\uc9c1\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4.<\/p>\n \ubbf8\ub4e4\uc6e8\uc5b4\ub294 \uc8fc\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\ub2a5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4:<\/p>\n Nest.js\uc5d0\uc11c \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud55c \uae30\ubcf8\uc801\uc778 \ucf54\ub4dc \uc608\uc2dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n \uc704 \ucf54\ub4dc\ub294 \uc694\uccad\uc774 \ub4e4\uc5b4\uc62c \ub54c\ub9c8\ub2e4 \ub85c\uadf8\ub97c \ucd9c\ub825\ud558\ub294 \uac04\ub2e8\ud55c \ubbf8\ub4e4\uc6e8\uc5b4\uc785\ub2c8\ub2e4. \uc774\ub97c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uc801\uc6a9\ud558\ub824\uba74 \ud574\ub2f9 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ubaa8\ub4c8\uc5d0 \ub4f1\ub85d\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n \ubbf8\ub4e4\uc6e8\uc5b4\ub294 Nest.js\uc758 Guard\ub294 \uc694\uccad\uc744 \ucc98\ub9ac\ud558\uae30 \uc804\uc5d0 \ud2b9\uc815 \uc870\uac74\uc744 \uac80\uc0ac\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc8fc\ub85c \uc778\uc99d \ubc0f \uad8c\ud55c \ubd80\uc5ec\uc640 \uad00\ub828\ub41c \ub85c\uc9c1\uc744 \uad6c\ud604\ud558\ub294 \ub370 \ud65c\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n Guard\uc758 \uc608\uc2dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n Next.js\ub294 React \uae30\ubc18\uc758 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR) \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. Next.js\uc5d0\uc11c\ub3c4 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ud65c\uc6a9\ud558\uc5ec HTTP \uc694\uccad\uc744 \uac00\ub85c\ucc44\uace0, \ud2b9\uc815 \uae30\ub2a5\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n Next.js\uc758 \ubbf8\ub4e4\uc6e8\uc5b4\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ud30c\uc77c \uc2dc\uc2a4\ud15c \uae30\ubc18\uc758 \ub77c\uc6b0\ud305\uc744 \uc0ac\uc6a9\ud558\uba70, Next.js\uc5d0\uc11c API \uc694\uccad\uc5d0 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc801\uc6a9\ud558\uc5ec \uc778\uc99d \ubc0f \uad8c\ud55c \uac80\uc0ac\ub97c \uc218\ud589\ud558\ub294 \ubc29\ubc95\uc744 \uad6c\uccb4\uc801\uc73c\ub85c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc6b0\uc120, API \uacbd\ub85c\ub97c \uc0dd\uc131\ud558\uc5ec \uae30\ubcf8\uc801\uc778 API \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\uc81c \uc704\uc5d0\uc11c \uc815\uc758\ud55c \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc801\uc6a9\ud558\uc5ec \uc694\uccad \uc2dc \uc778\uc99d \uac80\uc0ac\ub97c \uc218\ud589\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n Next.js\uc5d0\uc11c \ubaa8\ub4e0 API \uc694\uccad\uc5d0 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc801\uc6a9\ud558\ub824\uba74 Nest.js\uc640 Next.js\ub97c \ud568\uaed8 \uc0ac\uc6a9\ud558\uc5ec \uc804\uccb4 \uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ub54c, Nest.js\ub294 \ubc31\uc5d4\ub4dc\ub85c\uc11c API \uc11c\ubc84 \uc5ed\ud560\uc744 \uc218\ud589\ud558\uace0, Next.js\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc\ub85c\uc368 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n Nest.js\uc640 Next.js\uc758 \ubbf8\ub4e4\uc6e8\uc5b4 \ubc0f \uac00\ub4dc\ub294 \ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\ub2a5\uc744 \uc801\uc808\ud788 \ud65c\uc6a9\ud558\uba74 \uc131\ub2a5\uacfc \ubcf4\uc548\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\ub97c \ud1b5\ud574 \uc774\ub4e4 \ud504\ub808\uc784\uc6cc\ud06c\uc758 \uae30\ubcf8 \uac1c\ub150\uacfc \ud65c\uc6a9 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc18c\uac1c\ud588\uc73c\uba70, \uc2e4\uc81c \ucf54\ub4dc \uc608\uc2dc\ub97c \ud1b5\ud574 \uc774\ud574\ub97c \ub3d5\uace0\uc790 \ud588\uc2b5\ub2c8\ub2e4. \uc55e\uc73c\ub85c\ub3c4 \uc774\ub7ec\ud55c \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ub354\uc6b1 \uac15\ub825\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n1. Nest.js\uc758 Middleware \uc774\ud574\ud558\uae30<\/h2>\n
1.1 Middleware\uc758 \uc791\ub3d9 \uc6d0\ub9ac<\/h3>\n
\n
1.2 Nest.js\uc5d0\uc11c Middleware \uad6c\ud604\ud558\uae30<\/h3>\n
import { Injectable, NestMiddleware } from '@nestjs\/common';\n\n@Injectable()\nexport class LoggerMiddleware implements NestMiddleware {\n use(req: Request, res: Response, next: Function) {\n console.log('Request...');\n next();\n }\n}\n<\/code><\/pre>\n1.3 Middleware \ub4f1\ub85d\ud558\uae30<\/h3>\n
app.module.ts<\/code> \ud30c\uc77c \ub610\ub294 \ud2b9\uc815 \ubaa8\ub4c8 \ud30c\uc77c\uc5d0 \ub4f1\ub85d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\nimport { Module, MiddlewareConsumer } from '@nestjs\/common';\nimport { LoggerMiddleware } from '.\/logger.middleware';\n\n@Module({\n \/\/ ...\n})\nexport class AppModule {\n configure(consumer: MiddlewareConsumer) {\n consumer\n .apply(LoggerMiddleware)\n .forRoutes('*'); \/\/ \ubaa8\ub4e0 \uacbd\ub85c\uc5d0 \ubbf8\ub4e4\uc6e8\uc5b4 \uc801\uc6a9\n }\n}\n<\/code><\/pre>\n2. Nest.js\uc5d0\uc11c Guard\uc758 \uc5ed\ud560<\/h2>\n
2.1 Guard\uc758 \uc2e4\uc81c \uc0ac\uc6a9 \uc608\uc2dc<\/h3>\n
import { Injectable, CanActivate, ExecutionContext } from '@nestjs\/common';\n\n@Injectable()\nexport class AuthGuard implements CanActivate {\n canActivate(context: ExecutionContext): boolean {\n const request = context.switchToHttp().getRequest();\n \/\/ \uc778\uc99d \ub85c\uc9c1 \uc608\uc2dc\n return request.headers.authorization === 'Bearer YOUR_TOKEN';\n }\n}\n<\/code><\/pre>\n3. Next.js\uc758 Middleware \uc18c\uac1c<\/h2>\n
3.1 Next.js\uc758 Middleware \uc0ac\uc6a9 \ubc29\ubc95<\/h3>\n
middleware.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uc5ec \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\nimport { NextResponse } from 'next\/server';\n\nexport function middleware(req) {\n if (!req.headers.get('Authorization')) {\n return NextResponse.redirect(new URL('\/api\/auth\/unauthorized', req.url));\n }\n return NextResponse.next();\n}\n<\/code><\/pre>\n4. Next.js\uc5d0\uc11c API \uc694\uccad \uc2dc \ubbf8\ub4e4\uc6e8\uc5b4 \uc801\uc6a9\ud558\uae30<\/h2>\n
4.1 Next.js API Routes \ub9cc\ub4e4\uae30<\/h3>\n
pages\/api<\/code> \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 hello.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\nexport default function handler(req, res) {\n res.status(200).json({ message: 'Hello, World!' });\n }\n<\/code><\/pre>\n4.2 \ubbf8\ub4e4\uc6e8\uc5b4 \uc801\uc6a9\ud558\uae30<\/h3>\n
import { NextResponse } from 'next\/server';\n\nexport function middleware(req) {\n if (!req.headers.get('Authorization')) {\n return NextResponse.redirect(new URL('\/api\/auth\/unauthorized', req.url));\n }\n return NextResponse.next();\n}\n<\/code><\/pre>\n4.3 \uc804\uccb4 \uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc5d0 \ubbf8\ub4e4\uc6e8\uc5b4 \uc801\uc6a9\ud558\uae30<\/h3>\n
middleware.js<\/code> \ud30c\uc77c\uc744 \ud504\ub85c\uc81d\ud2b8\uc758 \ub8e8\ud2b8\uc5d0 \ucd94\uac00\ud558\uc5ec \uc804\uc5ed \ubbf8\ub4e4\uc6e8\uc5b4\ub85c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n5. Nest.js\uc640 Next.js \ud1b5\ud569\ud558\uae30<\/h2>\n
5.1 Nest.js\uc5d0\uc11c API \ubc0f \uc778\uc99d \uc124\uc815\ud558\uae30<\/h3>\n
@Controller('api')\nexport class ApiController {\n @Get('data')\n @UseGuards(AuthGuard)\n getData() {\n return { data: 'Some protected data' };\n }\n}\n<\/code><\/pre>\n5.2 Next.js\uc5d0\uc11c API \uc694\uccad \ucc98\ub9ac\ud558\uae30<\/h3>\n
const fetchData = async () => {\n const res = await fetch('\/api\/data', {\n headers: {\n 'Authorization': 'Bearer YOUR_TOKEN'\n }\n });\n if (!res.ok) throw new Error('Failed to fetch data');\n return res.json();\n }\n<\/code><\/pre>\n6. \uacb0\ub860<\/h2>\n