{"id":41116,"date":"2024-11-06T02:46:38","date_gmt":"2024-11-06T02:46:38","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=41116"},"modified":"2024-11-26T06:37:32","modified_gmt":"2024-11-26T06:37:32","slug":"26-%eb%b8%94%eb%a1%9c%ea%b7%b8-%ed%8f%ac%ec%8a%a4%ed%8a%b8-%ec%9e%91%ec%84%b1-%eb%b0%8f-%ec%97%90%eb%94%94%ed%84%b0-%ea%b8%b0%eb%8a%a5-%ec%b6%94%ea%b0%80-nest-js%ec%97%90%ec%84%9c-%eb%a7%88%ed%81%ac","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/41116\/","title":{"rendered":"26.\ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8 \uc791\uc131 \ubc0f \uc5d0\ub514\ud130 \uae30\ub2a5 \ucd94\uac00, Nest.js\uc5d0\uc11c \ub9c8\ud06c\ub2e4\uc6b4 \ub370\uc774\ud130 \ucc98\ub9ac"},"content":{"rendered":"
\n
\n

\uc791\uc131\uc77c: 2023\ub144 10\uc6d4 25\uc77c<\/p>\n

\uc791\uc131\uc790: \ub2f9\uc2e0\uc758 \uc774\ub984<\/p>\n<\/header>\n

\n

\uc18c\uac1c<\/h2>\n

\n \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \ub54c \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8 \uc791\uc131 \uae30\ub2a5\uc740 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Nest.js\uc640 Next.js\ub97c \uc774\uc6a9\ud574 \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8\ub97c \uc791\uc131\ud558\uace0 \ub9c8\ud06c\ub2e4\uc6b4 \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \ub610\ud55c \uc5d0\ub514\ud130 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \uc27d\uac8c \ucf58\ud150\uce20\ub97c \uc791\uc131\ud558\uace0 \ud3ec\ub9f7\ud560 \uc218 \uc788\ub3c4\ub85d \ud560 \uac83\uc785\ub2c8\ub2e4.\n <\/p>\n

\n Nest.js\ub294 \ud6a8\uacfc\uc801\uc774\uace0 \ud655\uc7a5 \uac00\ub2a5\ud55c \uc11c\ubc84 \uc0ac\uc774\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\uae30 \uc704\ud55c Node.js \ud504\ub808\uc784\uc6cc\ud06c\uc774\uba70, Next.js\ub294 React \uae30\ubc18\uc758 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \ub450 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uacb0\ud569\ud558\uc5ec \ud48d\ubd80\ud55c \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\ub294 \ube14\ub85c\uadf8 \ud50c\ub7ab\ud3fc\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

\uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h2>\n

\n \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 Nest.js\ub97c \ubc31\uc5d4\ub4dc\ub85c, Next.js\ub97c \ud504\ub860\ud2b8\uc5d4\ub4dc\ub85c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc740 \ub2e8\uacc4\ub97c \ub530\ub974\uc138\uc694:\n <\/p>\n

1. Nest.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
npm i -g @nestjs\/cli\nnest new blog-backend\ncd blog-backend\n<\/code><\/pre>\n
2. Next.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
npx create-next-app blog-frontend\ncd blog-frontend\n<\/code><\/pre>\n
\uc774\uc81c \uac01 \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354 \uc548\uc5d0 \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
cd blog-backend\nnpm install @nestjs\/typeorm typeorm sqlite3\n<\/code><\/pre>\n<\/section>\n
\n
\ub370\uc774\ud130\ubca0\uc774\uc2a4 \ubc0f \uc5d4\ud2f0\ud2f0 \uc124\uc815<\/h2>\n
\n            Nest.js\uc5d0\uc11c \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 TypeORM\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc124\uc815\ud560 \uac83\uc785\ub2c8\ub2e4. SQLite\ub97c \uc0ac\uc6a9\ud560 \uc608\uc815\uc774\uba70, `Post`\ub77c\ub294 \uc5d4\ud2f0\ud2f0\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.\n        <\/p>\n
1. \uc5d4\ud2f0\ud2f0 \uc0dd\uc131<\/h3>\n
touch src\/posts\/entities\/post.entity.ts\n<\/code><\/pre>\n
\ucf54\ub4dc:<\/p>\n
import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';\n\n@Entity('posts')\nexport class Post {\n    @PrimaryGeneratedColumn()\n    id: number;\n\n    @Column()\n    title: string;\n\n    @Column('text')\n    content: string;\n\n    @Column()\n    createdAt: Date;\n\n    @Column()\n    updatedAt: Date;\n}\n<\/code><\/pre>\n
2. \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ubaa8\ub4c8 \uc124\uc815<\/h3>\n
\ubb3c\ub9ac\uc801 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 TypeORM \ubaa8\ub4c8\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n
import { Module } from '@nestjs\/common';\nimport { TypeOrmModule } from '@nestjs\/typeorm';\nimport { Post } from '.\/entities\/post.entity';\nimport { PostsService } from '.\/posts.service';\nimport { PostsController } from '.\/posts.controller';\n\n@Module({\n    imports: [TypeOrmModule.forFeature([Post])],\n    controllers: [PostsController],\n    providers: [PostsService],\n})\nexport class PostsModule {}\n<\/code><\/pre>\n<\/section>\n
\n
CRUD \uae30\ub2a5 \uad6c\ud604<\/h2>\n
\n            \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8\ub97c CRUD(Create, Read, Update, Delete) \uc791\uc5c5\uc744 \uc704\ud55c \uc11c\ube44\uc2a4\uc640 \ucee8\ud2b8\ub864\ub7ec\ub97c \uad6c\ud604\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n        <\/p>\n
1. \uc11c\ube44\uc2a4 \uad6c\ud604<\/h3>\n
import { Injectable } from '@nestjs\/common';\nimport { InjectRepository } from '@nestjs\/typeorm';\nimport { Repository } from 'typeorm';\nimport { Post } from '.\/entities\/post.entity';\n\n@Injectable()\nexport class PostsService {\n    constructor(\n        @InjectRepository(Post)\n        private postsRepository: Repository,\n    ) {}\n\n    create(post: Post): Promise {\n        return this.postsRepository.save(post);\n    }\n\n    findAll(): Promise {\n        return this.postsRepository.find();\n    }\n\n    findOne(id: number): Promise {\n        return this.postsRepository.findOneBy({ id });\n    }\n\n    async update(id: number, post: Post): Promise {\n        await this.postsRepository.update(id, post);\n        return this.findOne(id);\n    }\n\n    async remove(id: number): Promise {\n        await this.postsRepository.delete(id);\n    }\n}\n<\/void><\/post><\/post><\/post[]><\/post><\/post><\/code><\/pre>\n
2. \ucee8\ud2b8\ub864\ub7ec \uad6c\ud604<\/h3>\n
import { Controller, Get, Post, Body, Param, Delete, Put } from '@nestjs\/common';\nimport { PostsService } from '.\/posts.service';\nimport { Post } from '.\/entities\/post.entity';\n\n@Controller('posts')\nexport class PostsController {\n    constructor(private readonly postsService: PostsService) {}\n\n    @Post()\n    create(@Body() post: Post) {\n        return this.postsService.create(post);\n    }\n\n    @Get()\n    findAll() {\n        return this.postsService.findAll();\n    }\n\n    @Get(':id')\n    findOne(@Param('id') id: string) {\n        return this.postsService.findOne(+id);\n    }\n\n    @Put(':id')\n    update(@Param('id') id: string, @Body() post: Post) {\n        return this.postsService.update(+id, post);\n    }\n\n    @Delete(':id')\n    remove(@Param('id') id: string) {\n        return this.postsService.remove(+id);\n    }\n}\n<\/code><\/pre>\n<\/section>\n
\n
\ub9c8\ud06c\ub2e4\uc6b4 \uc9c0\uc6d0 \uc124\uc815<\/h2>\n
\n            \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8\uc758 \ub0b4\uc6a9\uc744 \ub9c8\ud06c\ub2e4\uc6b4 \ud615\uc2dd\uc73c\ub85c \uc800\uc7a5\ud558\uace0, \uc774\ub97c HTML\ub85c \ubcc0\ud658\ud560 \uc218 \uc788\ub3c4\ub85d \ub9c8\ud06c\ub2e4\uc6b4 \ucc98\ub9ac\ub97c \uc704\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uc815\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n        <\/p>\n
1. \ub9c8\ud06c\ub2e4\uc6b4 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc124\uce58<\/h3>\n
npm install marked\n<\/code><\/pre>\n
2. \ub9c8\ud06c\ub2e4\uc6b4\uc744 HTML\ub85c \ubcc0\ud658\ud558\uae30<\/h3>\n
\uc774\ub97c \uc704\ud574 `PostsService`\uc5d0 \ubcc0\ud658 \uae30\ub2a5\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
import { marked } from 'marked';\n\n@Injectable()\nexport class PostsService {\n    \/\/ \uae30\uc874 \ucf54\ub4dc \uc0dd\ub7b5...\n\n    convertMarkdownToHtml(content: string): string {\n        return marked(content);\n    }\n}\n<\/code><\/pre>\n
3. HTML \ubcc0\ud658 \ud638\ucd9c\ud558\uae30<\/h3>\n
\uac8c\uc2dc\ubb3c \uc0dd\uc131 \ubc0f \uc870\ud68c \uc2dc \uc774 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \ub9c8\ud06c\ub2e4\uc6b4 \ucf58\ud150\uce20\ub97c HTML\ub85c \ubcc0\ud658\ud569\ub2c8\ub2e4.<\/p>\n
create(post: Post): Promise {\n        post.content = this.convertMarkdownToHtml(post.content);\n        return this.postsRepository.save(post);\n    }\n<\/post><\/code><\/pre>\n<\/section>\n
\n
Next.js\uc5d0\uc11c\uc758 \uc5d0\ub514\ud130 \uae30\ub2a5 \uad6c\ud604<\/h2>\n
\n            \uc774\uc81c Next.js \ud504\ub860\ud2b8\uc5d4\ub4dc\ub97c \uc124\uc815\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8\ub97c \uc791\uc131\ud558\uace0 \uc5d0\ub514\ud305\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \ub9c8\ud06c\ub2e4\uc6b4 \uc5d0\ub514\ud130 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uac83\uc774\uba70, React\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uac83\uc785\ub2c8\ub2e4.\n        <\/p>\n
1. \ub9c8\ud06c\ub2e4\uc6b4 \uc5d0\ub514\ud130 \uc124\uce58<\/h3>\n
npm install react-markdown\n<\/code><\/pre>\n
2. \ud3ec\uc2a4\ud2b8 \uc791\uc131 \ud398\uc774\uc9c0<\/h3>\n
\ud3ec\uc2a4\ud2b8\ub97c \uc791\uc131\ud558\uace0 \uc81c\ucd9c\ud560 \uc218 \uc788\ub294 \ud398\uc774\uc9c0\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
import { useState } from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nconst PostEditor = () => {\n    const [title, setTitle] = useState('');\n    const [content, setContent] = useState('');\n\n    const handleSubmit = async (e) => {\n        e.preventDefault();\n        const res = await fetch('\/api\/posts', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json',\n            },\n            body: JSON.stringify({ title, content }),\n        });\n        if (res.ok) {\n            \/\/ \ucc98\ub9ac \ud6c4 \ud544\uc694 \uc2dc \ub9ac\ud504\ub808\uc2dc \ub610\ub294 \uc0c1\ud0dc \uac31\uc2e0\n        }\n    };\n\n    return (\n        
\n             setTitle(e.target.value)}\n                placeholder=\"\ud3ec\uc2a4\ud2b8 \uc81c\ubaa9\"\n                required\n            \/>\n