[작성자:] root

소개

웹 애플리케이션을 구축할 때 블로그 포스트 작성 기능은 필수적입니다. 이 글에서는 Nest.js와 Next.js를 이용해 블로그 포스트를 작성하고 마크다운 데이터를 처리하는 방법을 알아보겠습니다. 우리는 또한 에디터 기능을 추가하여 사용자가 쉽게 콘텐츠를 작성하고 포맷할 수 있도록 할 것입니다.

Nest.js는 효과적이고 확장 가능한 서버 사이드 애플리케이션을 구축하기 위한 Node.js 프레임워크이며, Next.js는 React 기반의 서버 사이드 렌더링 프레임워크입니다. 두 프레임워크를 결합하여 풍부한 사용자 경험을 제공하는 블로그 플랫폼을 만들 수 있습니다.

기본 프로젝트 설정

이 예제에서는 Nest.js를 백엔드로, Next.js를 프론트엔드로 사용할 것입니다. 프로젝트를 시작하기 위해 다음과 같은 단계를 따르세요:

1. Nest.js 프로젝트 생성

npm i -g @nestjs/cli
nest new blog-backend
cd blog-backend

2. Next.js 프로젝트 생성

npx create-next-app blog-frontend
cd blog-frontend

이제 각 프로젝트 폴더 안에 필요한 라이브러리를 설치해야 합니다.

cd blog-backend
npm install @nestjs/typeorm typeorm sqlite3

데이터베이스 및 엔티티 설정

Nest.js에서 블로그 포스트를 관리하기 위해 TypeORM을 사용하여 데이터베이스를 설정할 것입니다. SQLite를 사용할 예정이며, `Post`라는 엔티티를 생성합니다.

1. 엔티티 생성

touch src/posts/entities/post.entity.ts

코드:

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity('posts')
export class Post {
    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    title: string;

    @Column('text')
    content: string;

    @Column()
    createdAt: Date;

    @Column()
    updatedAt: Date;
}

2. 데이터베이스 모듈 설정

물리적 데이터베이스를 사용하기 위해 TypeORM 모듈을 설정합니다.

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { Post } from './entities/post.entity';
import { PostsService } from './posts.service';
import { PostsController } from './posts.controller';

@Module({
    imports: [TypeOrmModule.forFeature([Post])],
    controllers: [PostsController],
    providers: [PostsService],
})
export class PostsModule {}

CRUD 기능 구현

블로그 포스트를 CRUD(Create, Read, Update, Delete) 작업을 위한 서비스와 컨트롤러를 구현하겠습니다.

1. 서비스 구현

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Post } from './entities/post.entity';

@Injectable()
export class PostsService {
    constructor(
        @InjectRepository(Post)
        private postsRepository: Repository,
    ) {}

    create(post: Post): Promise {
        return this.postsRepository.save(post);
    }

    findAll(): Promise {
        return this.postsRepository.find();
    }

    findOne(id: number): Promise {
        return this.postsRepository.findOneBy({ id });
    }

    async update(id: number, post: Post): Promise {
        await this.postsRepository.update(id, post);
        return this.findOne(id);
    }

    async remove(id: number): Promise {
        await this.postsRepository.delete(id);
    }
}

2. 컨트롤러 구현

import { Controller, Get, Post, Body, Param, Delete, Put } from '@nestjs/common';
import { PostsService } from './posts.service';
import { Post } from './entities/post.entity';

@Controller('posts')
export class PostsController {
    constructor(private readonly postsService: PostsService) {}

    @Post()
    create(@Body() post: Post) {
        return this.postsService.create(post);
    }

    @Get()
    findAll() {
        return this.postsService.findAll();
    }

    @Get(':id')
    findOne(@Param('id') id: string) {
        return this.postsService.findOne(+id);
    }

    @Put(':id')
    update(@Param('id') id: string, @Body() post: Post) {
        return this.postsService.update(+id, post);
    }

    @Delete(':id')
    remove(@Param('id') id: string) {
        return this.postsService.remove(+id);
    }
}

마크다운 지원 설정

블로그 포스트의 내용을 마크다운 형식으로 저장하고, 이를 HTML로 변환할 수 있도록 마크다운 처리를 위한 라이브러리를 설정하겠습니다.

1. 마크다운 라이브러리 설치

npm install marked

2. 마크다운을 HTML로 변환하기

이를 위해 `PostsService`에 변환 기능을 추가합니다.

import { marked } from 'marked';

@Injectable()
export class PostsService {
    // 기존 코드 생략...

    convertMarkdownToHtml(content: string): string {
        return marked(content);
    }
}

3. HTML 변환 호출하기

게시물 생성 및 조회 시 이 함수를 호출하여 마크다운 콘텐츠를 HTML로 변환합니다.

create(post: Post): Promise {
        post.content = this.convertMarkdownToHtml(post.content);
        return this.postsRepository.save(post);
    }

Next.js에서의 에디터 기능 구현

이제 Next.js 프론트엔드를 설정하여 사용자가 블로그 포스트를 작성하고 에디팅할 수 있도록 합니다. 우리는 마크다운 에디터 라이브러리를 사용할 것이며, React를 통해 사용자 경험을 향상시킬 것입니다.

1. 마크다운 에디터 설치

npm install react-markdown

2. 포스트 작성 페이지

포스트를 작성하고 제출할 수 있는 페이지를 생성합니다.

import { useState } from 'react';
import ReactMarkdown from 'react-markdown';

const PostEditor = () => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        const res = await fetch('/api/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ title, content }),
        });
        if (res.ok) {
            // 처리 후 필요 시 리프레시 또는 상태 갱신
        }
    };

    return (
        

             setTitle(e.target.value)}
                placeholder="포스트 제목"
                required
            />
             setContent(e.target.value)}
                placeholder="내용 입력 (마크다운 형식)"
            />
            <button type="submit">포스트 작성</button>
            <reactmarkdown>{content}</reactmarkdown>
        
    );
};

export default PostEditor;

결론

이번 강좌에서는 Nest.js와 Next.js를 활용하여 블로그 포스트 작성 기능과 마크다운 데이터를 처리하는 방법을 알아보았습니다. Nest.js를 통해 효율적으로 데이터를 관리하고, Next.js에서는 사용자 친화적인 UI를 제공하는 방법을 배웠습니다.

이러한 기술을 활용하면 복잡한 웹 애플리케이션을 더욱 쉽게 구축하고, 사용자가 원하는 기능을 원활하게 제공할 수 있습니다. 앞으로의 개발에서도 Nest.js와 Next.js를 이용하여 당신의 아이디어를 실현해 보세요.

1. 서론

오늘날 웹 애플리케이션은 사용자 경험을 개선하기 위해 빠른 응답 속도를 요구하고 있습니다.
Next.js와 Nest.js는 각각 프론트엔드와 백엔드에서 널리 사용되는 프레임워크로,
이 둘의 조합을 활용하면 현대적인 웹 애플리케이션을 효율적으로 구축할 수 있습니다.
그러나 대규모 애플리케이션에서는 API 응답 속도를 높이기 위한 다양한 전략이 필요합니다.
이 글에서는 Next.js 및 Nest.js에서 API 캐싱 및 성능 최적화 방법을 심층적으로 논의하겠습니다.

2. Next.js와 Nest.js 소개

2.1 Next.js란?

Next.js는 React의 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 프레임워크입니다.
최적화된 성능과 SEO를 제공하며, 데이터 페칭 및 라우팅 기능을 내장하고 있습니다.
Next.js를 사용하면 웹 애플리케이션의 빠른 로딩 속도와 유연성을 누릴 수 있습니다.

2.2 Nest.js란?

Nest.js는 TypeScript로 작성된 진보된 Node.js 웹 프레임워크로,
모듈 기반 아키텍처를 채택하여 유지보수와 확장이 용이합니다.
Nest.js는 Express와 Fastify를 기반으로 하며, RESTful API 및 GraphQL API를 구축하는 데 유용합니다.

3. API 응답 시간의 중요성

웹 애플리케이션에서 API의 응답 속도는 사용자 경험에 직접적인 영향을 미칩니다.
느린 API 응답은 사용자의 이탈을 가져올 수 있으며, 이로 인해 비즈니스 손실로 이어질 수 있습니다.
따라서 API 성능을 개선하고 최적화하는 것이 필수적입니다.

4. API 캐싱 전략

4.1 캐시의 개념과 필요성

캐시는 데이터에 대한 접근 속도를 높이기 위한 메모리 저장소입니다.
API 캐싱을 설정하면 반복 요청에 대한 응답 속도를 급격히 개선할 수 있습니다.
특히 데이터베이스 쿼리나 복잡한 계산이 필요한 상황에서는 캐싱이 더 효과적입니다.

4.2 Next.js에서의 캐싱

Next.js에서는 클라이언트에서의 캐시뿐만 아니라, 서버에서의 캐싱도 가능합니다.
서버사이드 렌더링 동안 유효한 데이터를 캐싱하여 사용자에게 빠른 응답을 제공할 수 있습니다.

4.2.1 Static Generation과 Incremental Static Regeneration

Next.js의 Static Generation(정적 생성) 및 Incremental Static Regeneration를 사용하면,
정적 페이지를 캐시할 수 아울러 최신 정보로 재생성할 수도 있습니다.
사용자는 빠른 페이지 로딩 속도를 경험하며, 서버 부하도 줄어듭니다.

4.3 Nest.js에서의 캐싱

Nest.js는 다양한 캐싱 라이브러리를 지원하여 HTTP 요청 및 데이터베이스 쿼리 결과를 쉽게 캐싱할 수 있습니다.
Nest.js에서 제공하는 @nestjs/cache 모듈을 사용하여 여러 캐시 전략을 구현할 수 있습니다.

4.3.1 메모리 캐시

애플리케이션 내에서 데이터를 메모리에 저장하여 빠른 응답을 제공하는 전략입니다.
로컬 환경에서 테스트할 때 유용하지만, 대규모 애플리케이션에서는 분산형 캐시(예: Redis)가 보다 효과적입니다.

5. 성능 최적화 전략

5.1 데이터베이스 쿼리 최적화

API의 응답 속도를 높이기 위해서는 데이터베이스 쿼리를 최적화하는 것이 중요합니다.
인덱싱, 비효율적인 쿼리 수정, 쿼리 결과의 페이징 등을 적용하여 성능을 개선할 수 있습니다.

5.2 비동기 처리를 통한 요청 최적화

Next.js와 Nest.js 모두 비동기 함수(async/await)를 지원하여,
요청 처리를 효율적으로 수행할 수 있습니다.
응답 대기 시간을 최소화하고, 다수의 요청을 동시에 처리하여 성능을 향상시킬 수 있습니다.

5.3 CDN(Content Delivery Network) 사용

전세계에 분산된 서버를 활용하여 콘텐츠를 사용자에게 보다 빠르게 전달할 수 있는 CDN을 사용할 수 있습니다.
Next.js에서는 Vercel을 사용하여 정적 자산을 자동으로 CDN에 배포합니다.

6. 특정 예시

6.1 Next.js 캐시 구현 예시

            // pages/api/products.js
            import { cache } from 'react-cache';
            import axios from 'axios';

            const fetchProducts = async () => {
                const response = await axios.get('/api/products');
                return response.data;
            };

            export default async function handler(req, res) {
                const products = await cache.fetch(fetchProducts);
                res.status(200).json(products);
            };
        

6.2 Nest.js 캐시 구현 예시

            import { Controller, Get, CacheKey, CacheTTL, UseInterceptors, CacheInterceptor } from '@nestjs/common';

            @Controller('users')
            @UseInterceptors(CacheInterceptor)
            export class UsersController {
                @Get()
                @CacheKey('all-users')
                @CacheTTL(60) // 60 seconds
                async findAll() {
                    return await this.usersService.findAll(); // Find users logic
                }
            }
        

7. 결론

Next.js와 Nest.js를 활용하여 API 응답 속도를 높이기 위한 다양한 캐싱 및 최적화 전략을 살펴보았습니다.
이러한 전략들을 통해 사용자 경험을 개선하고 비즈니스 가치를 높일 수 있습니다.
각 애플리케이션의 요구사항에 맞는 최적의 전략을 선택하여 효율적인 웹 서비스를 구축합시다.