\n \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uc778\uc99d\uc740 \ud544\uc218\uc801\uc778 \uc694\uc18c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc548\uc804\ud558\uac8c \uc2dc\uc2a4\ud15c\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uace0, \uac1c\uc778\uc815\ubcf4\ub97c \ubcf4\ud638\ud558\ub294 \uac83\uc774 \ub9e4\uc6b0 \uc911\uc694\ud558\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Next.js\uc640 Nest.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc778\uc99d\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\n \uc0ac\uc6a9\uc790 \uc778\uc99d \uc2dc\uc2a4\ud15c\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 \ub450 \uac00\uc9c0 \ud504\ub808\uc784\uc6cc\ud06c\uc778 Next.js\uc640 Nest.js\ub97c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. Next.js\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\ub85c \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uacfc \uc815\uc801 \uc6f9\uc0ac\uc774\ud2b8 \uc0dd\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ubc18\uba74 Nest.js\ub294 Node.js \uae30\ubc18\uc758 \ubc31\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ud604\ub300\uc801\uc778 \uc11c\ubc84 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc801\ud569\ud569\ub2c8\ub2e4.\n <\/p>\n
npm i -g @nestjs\/cli\nnest new backend\ncd backend\nnpm install @nestjs\/passport passport passport-local @types\/passport-local bcrypt @types\/bcrypt\nnpm install --save @nestjs\/jwt passport-jwt @types\/passport-jwt\n<\/code><\/pre>\n1.2 Next.js \ucd08\uae30 \uc124\uc815<\/h3>\nnpx create-next-app frontend\ncd frontend\nnpm install axios\n<\/code><\/pre>\n2. Nest.js\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uc778\uc99d API \uad6c\ud604<\/h2>\n
\n Nest.js\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790 \uc778\uc99d\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 Passport.js\uc640 JWT(JSON Web Token)\ub97c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4.\n <\/p>\n
2.1 User \uc5d4\ud2f0\ud2f0 \uc0dd\uc131<\/h3>\n
\uba3c\uc800 User \uc5d4\ud2f0\ud2f0\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 user.entity.ts \ud30c\uc77c\uc758 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';\n\n@Entity()\nexport class User {\n @PrimaryGeneratedColumn()\n id: number;\n\n @Column({ unique: true })\n email: string;\n\n @Column()\n password: string;\n}\n<\/code><\/pre>\n2.2 UserService \ubc0f UserModule \uc0dd\uc131<\/h3>\nimport { Injectable } from '@nestjs\/common';\nimport { User } from '.\/user.entity';\nimport { InjectRepository } from '@nestjs\/typeorm';\nimport { Repository } from 'typeorm';\nimport * as bcrypt from 'bcrypt';\n\n@Injectable()\nexport class UserService {\n constructor(\n @InjectRepository(User)\n private userRepository: Repository,\n ) {}\n\n async create(userDto: { email: string; password: string }): Promise {\n const hashedPassword = await bcrypt.hash(userDto.password, 10);\n const user = this.userRepository.create({ ...userDto, password: hashedPassword });\n return this.userRepository.save(user);\n }\n\n async findByEmail(email: string): Promise {\n return this.userRepository.findOne({ where: { email } });\n }\n}\n<\/user><\/user><\/user><\/code><\/pre>\n2.3 AuthModule \ubc0f AuthService \uc0dd\uc131<\/h3>\nimport { Module } from '@nestjs\/common';\nimport { PassportModule } from '@nestjs\/passport';\nimport { JwtModule } from '@nestjs\/jwt';\nimport { AuthService } from '.\/auth.service';\nimport { LocalStrategy } from '.\/local.strategy';\nimport { UsersModule } from '..\/users\/users.module';\n\n@Module({\n imports: [\n UsersModule,\n PassportModule,\n JwtModule.register({\n secret: 'SECRET_KEY', \/\/ \ube44\ubc00\ud0a4 \uc124\uc815\n signOptions: { expiresIn: '60s' }, \/\/ \ud1a0\ud070 \uc720\ud6a8 \uc2dc\uac04 \uc124\uc815\n }),\n ],\n providers: [AuthService, LocalStrategy],\n})\nexport class AuthModule {}\n<\/code><\/pre>\n2.4 \ub85c\uadf8\uc778 \ubc0f \ud68c\uc6d0\uac00\uc785 API \uc5d4\ub4dc\ud3ec\uc778\ud2b8 \ucd94\uac00<\/h3>\nimport { Controller, Post, Body, Req } from '@nestjs\/common';\nimport { AuthService } from '.\/auth.service';\n\n@Controller('auth')\nexport class AuthController {\n constructor(private readonly authService: AuthService) {}\n\n @Post('register')\n async register(@Body() userDto: { email: string; password: string }) {\n return this.authService.register(userDto);\n }\n\n @Post('login')\n async login(@Body() userDto: { email: string; password: string }) {\n return this.authService.login(userDto);\n }\n}\n<\/code><\/pre>\n3. Next.js\uc758 \uc0ac\uc6a9\uc790 \uc778\uc99d UI \uad6c\ud604\ud558\uae30<\/h2>\n
\n Next.js\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790 \uc778\uc99d\uc744 \uc704\ud55c \ub85c\uadf8\uc778 \ubc0f \ud68c\uc6d0\uac00\uc785 \ud3fc\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ucc98\ub9ac\ud558\uc5ec Nest.js \ubc31\uc5d4\ub4dc\ub85c \uc694\uccad\uc744 \ubcf4\ub0b4\ub3c4\ub85d \ud569\ub2c8\ub2e4.\n <\/p>\n
3.1 \ub85c\uadf8\uc778 \ud398\uc774\uc9c0 \uad6c\ud604<\/h3>\nimport axios from 'axios';\nimport { useState } from 'react';\n\nconst Login = () => {\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const response = await axios.post('\/api\/auth\/login', { email, password });\n \/\/ \ub85c\uadf8\uc778 \uc131\uacf5 \uc2dc \ucc98\ub9ac\n };\n\n return (\n