10.Nest.js로 RESTful API 구축하기, 블로그 API의 기본 엔드포인트 설정하기 (CRUD)

Nest.js는 현대적인 웹 애플리케이션 개발을 위한 강력한 프레임워크로, TypeScript로 작성되어 있습니다. Nest.js는 다양한 아키텍처와 디자인 패턴을 지원하며, 특히 RESTful API 구축에 유용합니다. 이 글에서는 Nest.js를 사용하여 블로그 API의 기본 엔드포인트를 설정하고, CRUD(Create, Read, Update, Delete) 작업을 구현하는 과정을 살펴보겠습니다.

1. Nest.js 소개

Nest.js는 Angular에서 영감을 받아 만들어진 Node.js의 프레임워크로, 모듈화, 의존성 주입(DI), 그리고 유연한 구조를 제공합니다. Nest.js는 Express.js를 기반으로 하며, 다양한 라이브러리와 미들웨어를 활용하여 강력한 API 서버를 구축할 수 있습니다.

2. Nest.js 설치 및 프로젝트 생성

Nest.js를 사용하기 위해 먼저 Nest CLI를 설치하고, 새로운 프로젝트를 생성해야 합니다. Nest CLI는 Nest.js 프로젝트를 빠르게 생성하고 관리할 수 있는 도구입니다.

npm install -g @nestjs/cli
nest new blog-api

명령어를 입력하면, 새로운 디렉터리가 생성되고 관련 파일과 종속성이 설치됩니다. 프로젝트 디렉터리로 이동하여 서버를 실행할 수 있습니다.

cd blog-api
npm run start

3. 블로그 API 기본 엔드포인트 설계

블로그 API는 여러 개의 엔드포인트를 통해 블로그 게시물을 관리합니다. 기본적인 CRUD 작업을 위한 엔드포인트는 다음과 같습니다.

  • GET /posts: 모든 게시물 조회
  • GET /posts/:id: 특정 게시물 조회
  • POST /posts: 새로운 게시물 생성
  • PUT /posts/:id: 게시물 수정
  • DELETE /posts/:id: 게시물 삭제

4. 게시물 모듈 생성

Nest.js의 모듈 시스템을 이용하여 게시물 모듈을 생성할 수 있습니다. 아래 명령어를 입력하여 게시물 모듈을 생성합니다.

nest generate module posts
nest generate controller posts
nest generate service posts

위 명령어를 통해 posts라는 이름의 모듈, 컨트롤러, 서비스를 생성합니다. 생성된 파일들은 src/posts 디렉터리 안에 위치하게 됩니다.

5. 게시물 DTO(Data Transfer Object) 정의

게시물 데이터의 형식을 정의하기 위해 DTO를 설정합니다. DTO는 클라이언트와의 데이터 교환을 위한 객체로, 데이터의 유효성을 검사하는 데도 사용됩니다. 다음과 같은 게시물 DTO를 정의하겠습니다.

import { IsNotEmpty, IsString } from 'class-validator';

export class CreatePostDto {
    @IsNotEmpty()
    @IsString()
    readonly title: string;

    @IsNotEmpty()
    @IsString()
    readonly content: string;
}

6. 게시물 서비스 구현

게시물 서비스를 사용하여 데이터의 비즈니스 로직을 관리합니다. 서비스는 데이터베이스와의 상호작용, 데이터 처리 등을 담당합니다. 다음은 간단한 게시물 서비스 코드입니다.

import { Injectable, NotFoundException } from '@nestjs/common';
import { CreatePostDto } from './dto/create-post.dto';

@Injectable()
export class PostsService {
    private posts = [];

    create(createPostDto: CreatePostDto) {
        const newPost = {
            id: this.posts.length + 1,
            ...createPostDto,
        };
        this.posts.push(newPost);
        return newPost;
    }

    findAll() {
        return this.posts;
    }

    findOne(id: number) {
        const post = this.posts.find(p => p.id === id);
        if (!post) {
            throw new NotFoundException(`Post with ID ${id} not found`);
        }
        return post;
    }

    update(id: number, updatePostDto: CreatePostDto) {
        const postIndex = this.posts.findIndex(p => p.id === id);
        if (postIndex === -1) {
            throw new NotFoundException(`Post with ID ${id} not found`);
        }
        this.posts[postIndex] = { id, ...updatePostDto };
        return this.posts[postIndex];
    }

    delete(id: number) {
        const postIndex = this.posts.findIndex(p => p.id === id);
        if (postIndex === -1) {
            throw new NotFoundException(`Post with ID ${id} not found`);
        }
        this.posts.splice(postIndex, 1);
        return { message: 'Post deleted successfully' };
    }
}

7. 게시물 컨트롤러 구현

마지막으로, HTTP 요청을 처리하는 게시물 컨트롤러를 구현합니다. 각 엔드포인트에 해당하는 메소드를 정의하여 요청을 처리합니다.

import { Controller, Get, Post, Body, Param, Put, Delete } from '@nestjs/common';
import { PostsService } from './posts.service';
import { CreatePostDto } from './dto/create-post.dto';

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

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

    @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() updatePostDto: CreatePostDto) {
        return this.postsService.update(+id, updatePostDto);
    }

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

8. API 테스트

API를 테스트하기 위해 Postman 또는 Insomnia와 같은 API 클라이언트를 사용할 수 있습니다. 아래는 각 엔드포인트를 테스트하기 위한 방법입니다.

  • POST /posts: 새 게시물 생성
  • GET /posts: 모든 게시물 조회
  • GET /posts/:id: 특정 게시물 조회
  • PUT /posts/:id: 게시물 업데이트
  • DELETE /posts/:id: 게시물 삭제

8.1 새 게시물 생성 예제

POST /posts
Content-Type: application/json

{
    "title": "첫 번째 게시물",
    "content": "이것은 첫 번째 게시물의 내용입니다."
}

8.2 모든 게시물 조회 예제

GET /posts

8.3 특정 게시물 조회 예제

GET /posts/1

8.4 게시물 수정 예제

PUT /posts/1
Content-Type: application/json

{
    "title": "수정된 게시물 제목",
    "content": "수정된 내용입니다."
}

8.5 게시물 삭제 예제

DELETE /posts/1

9. 결론

이번 글에서는 Nest.js를 사용하여 블로그 API의 기본 CRUD 엔드포인트를 생성하는 방법을 살펴보았습니다. Nest.js는 직관적이고 유연한 API 개발을 가능하게 하며, 간결하고 유지보수하기 쉬운 코드를 작성할 수 있게 도와줍니다. 이제 여러분은 Nest.js를 활용하여 자신의 요구에 맞는 API를 완성해보시기 바랍니다.

10. 다음 단계

이 튜토리얼을 마친 후, 다음 단계로는 데이터베이스와의 연동을 추가하여 영속성을 제공하는 방법을 분석할 수 있습니다. TypeORM 또는 Sequelize와 같은 ORM 라이브러리를 사용하여 데이터베이스에 저장하고 관리하는 방법에 대해 배우는 것도 추천합니다.

36.서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 비교 및 구현, 페이지별 SSR과 CSR 전략 적용

웹 개발에서 사용되는 두 가지 주요 렌더링 방식인 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)은 각기 다른 방법으로 웹 페이지를 렌더링합니다. 이 글에서는 이 두 가지 방식의 차이를 비교하고, Nest.js와 Next.js를 활용하여 실제 구현 예시를 제공하겠습니다. 또한, 페이지별 전략을 선택하는 방법에 대해서도 논의하겠습니다.

1. 서버 사이드 렌더링(SSR)란?

서버 사이드 렌더링(SSR)은 웹 페이지의 모든 콘텐츠가 서버에서 렌더링되어 클라이언트(브라우저)로 전달되는 방식입니다. 사용자가 페이지를 요청하면 서버는 HTML을 생성하고 이를 클라이언트에 반환합니다. 클라이언트는 반환된 HTML을 화면에 표시하게 됩니다.

SSR의 장점

  • SEO 최적화: 검색 엔진은 서버에서 렌더링된 페이지를 분석하여 색인화할 수 있습니다.
  • 빠른 초기 로드: 서버에서 완전한 HTML이 제공되므로 사용자는 콘텐츠를 빨리 볼 수 있습니다.
  • 더 나은 사용자 경험: 화면 깜빡임이 줄어들어 사용자가 느끼는 안정성이 높습니다.

SSR의 단점

  • 서버 부하 증가: 모든 요청에 대해 서버가 렌더링을 수행해야 하므로 서버의 부하가 증가합니다.
  • 컨텐츠 반응성 감소: 사용자 상호작용에 대한 실시간 반응성이 떨어질 수 있습니다.

2. 클라이언트 사이드 렌더링(CSR)란?

클라이언트 사이드 렌더링(CSR)은 웹 페이지의 내용을 클라이언트(브라우저)에서 JavaScript를 통해 렌더링하는 방식입니다. 사용자가 페이지를 요청할 때, 서버는 최소한의 HTML과 JavaScript 파일을 반환하고, 클라이언트는 JavaScript를 실행하여 동적으로 HTML을 생성합니다.

CSR의 장점

  • 서버 부하 감소: 서버는 정적 파일만 제공하므로 부하가 줄어듭니다.
  • 빠른 페이지 전환: 페이지 간 전환 시 새로고침 없이 콘텐츠가 업데이트됩니다.
  • 인터랙티브한 UI: 사용자 상호작용에 대한 더 나은 반응성을 제공합니다.

CSR의 단점

  • SEO 문제: 검색 엔진이 JavaScript를 제대로 렌더링하지 못할 경우 SEO에 불리할 수 있습니다.
  • 느린 초기 로드: 첫 페이지 로딩 시 많은 JavaScript 파일을 다운로드해야 하므로 초기 로드 시간이 길어질 수 있습니다.
  • 웹 브라우저 요구: JavaScript가 비활성화된 환경에서는 콘텐츠를 표시할 수 없습니다.

3. SSR과 CSR의 비교

특징 서버 사이드 렌더링 (SSR) 클라이언트 사이드 렌더링 (CSR)
SEO 최적화 우수함 제한적
초기 로드 속도 빠름 느림
서버 부하 증가함 감소함
상호작용 성능 제한적 우수함

4. Nest.js와 Next.js를 활용한 SSR 및 CSR 구현

Nest.js는 서버 사이드 애플리케이션을 위한 프레임워크이며, Next.js는 React 기반의 SSR 및 CSR을 지원하는 프레임워크입니다. 두 프레임워크를 결합하여 SSR 및 CSR을 구현하는 방법에 대해 설명하겠습니다.

4.1. Nest.js 설정

npm install -g @nestjs/cli
nest new project-name
cd project-name
npm install @nestjs/platform-express
npm install @nestjs/core

Nest.js를 사용하여 서버를 구성한 후, 요청에 따라 SSR로 HTML을 렌더링할 수 있는 엔드포인트를 생성합니다.

@Get('/api/users')
async getUsers() {
    return await this.userService.findAll();
}

4.2. Next.js 설정

npx create-next-app name-of-your-app
cd name-of-your-app
npm run dev

Next.js에서 페이지를 생성하고, 데이터를 가져올 수 있는 SSR과 CSR 메서드를 구현합니다.

4.2.1. SSR 구현

export async function getServerSideProps() {
    const res = await fetch('http://localhost:3000/api/users');
    const data = await res.json();

    return { props: { users: data } };
}

const UsersPage = ({ users }) => {
    return (
        
{users.map(user => (
{user.name}
))}
); }; export default UsersPage;

4.2.2. CSR 구현

import { useEffect, useState } from 'react';

const UsersPage = () => {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        const fetchUsers = async () => {
            const res = await fetch('http://localhost:3000/api/users');
            const data = await res.json();
            setUsers(data);
        };
        fetchUsers();
    }, []);

    return (
        
{users.map(user => (
{user.name}
))}
); }; export default UsersPage;

5. 페이지별 SSR과 CSR 전략 적용하기

웹 애플리케이션을 개발할 때 모든 페이지에서 동일하게 SSR 또는 CSR을 사용할 필요는 없습니다. 페이지마다 다른 전략을 적용하여 최적의 사용자 경험을 제공할 수 있습니다. 예를 들어, 사용자가 자주 조회하는 대시보드 페이지는 CSR을 사용하여 상호작용을 최적화하고, 블로그 페이지는 SEO를 고려하여 SSR을 사용할 수 있습니다.

5.1. 페이지별 전략 결정 기준

  • SEO 중요성: 사용자 검색에 의해 노출되는 페이지는 SSR을 사용하는 것이 유리합니다.
  • 상호작용 필요성: 유저 인터랙션이 많은 페이지는 CSR을 사용하여 반응성을 높입니다.
  • 데이터의 동적 여부: 실시간 데이터가 필요한 경우 CSR을 사용하는 것이 좋습니다.
  • 로드 시간에 대한 요구: 초기 로드 시간이 중요한 경우 SSR을 통해 더 빠른 로드 속도를 제공할 수 있습니다.

결론

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)은 웹 애플리케이션에서 중요한 역할을 수행하며, 각각의 장단점이 존재합니다. Nest.js와 Next.js를 활용하면 두 가지 렌더링 방식을 모두 쉽게 구현할 수 있습니다. 페이지별 전략을 신중하게 선택함으로써, 사용자에게 최적화된 경험을 제공할 수 있습니다. 이 가이드를 통해 SSR과 CSR을 이해하고 실제 애플리케이션에 적용해 보시기 바랍니다.

21.Nest.js와 Next.js에서 Middleware와 Guard 사용하기, 각 페이지별 접근 권한 설정

본 블로그 포스트에서는 Nest.js와 Next.js에서 Middleware와 Guard의 개념과 그 사용 방법에 대해 자세히 설명하겠습니다. 특히, 각 페이지별 접근 권한을 설정하는 방법에 대해서도 알아보겠습니다. 이 포스트를 통해 여러분은 Nest.js와 Next.js 환경에서 권한을 관리하고, 사용자 인증 및 인가를 효과적으로 구현할 수 있는 방법을 익히게 될 것입니다.

1. Nest.js에서 Middleware 이해하기

Nest.js는 Express.js 기반의 훌륭한 Node.js 프레임워크로, Middleware는 요청-응답 사이클에서 요청을 처리하는 중간 단계의 로직을 구성하는 데 사용됩니다. Middleware는 요청을 가로채어 처리하거나, 요청 객체를 변형하거나, 다음 Middleware로 요청을 전달할 수 있는 기능을 제공합니다.

1.1 Middleware의 용도

  • 로그인 여부 확인
  • 요청 기록 기록
  • 헤더 수정
  • 오류 처리

1.2 Nest.js에서 Middleware 구현하기

Nest.js에서는 Middleware를 클래스로 구현하고, 이를 모듈에서 등록하여 사용할 수 있습니다. 아래는 간단한 로그인 확인 Middleware의 예시입니다.


import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

@Injectable()
export class AuthMiddleware implements NestMiddleware {
    use(req: Request, res: Response, next: NextFunction) {
        const token = req.headers.authorization;
        if (token) {
            // 인증 로직 (예: 디코딩 JWT)
            next();
        } else {
            res.status(403).send('Unauthorized');
        }
    }
}

위의 코드에서 `AuthMiddleware`는 요청에 포함된 토큰을 확인하고, 인증이 이루어지지 않은 경우 403 상태 코드를 반환합니다.

1.3 Middleware 등록하기

Middleware는 모듈에서 등록할 수 있습니다. 아래는 전체 모듈에 Middleware를 등록하는 방법입니다.


import { Module, MiddlewareConsumer, NestModule } from '@nestjs/common';
import { AuthMiddleware } from './auth.middleware';

@Module({
    // ...
})
export class AppModule implements NestModule {
    configure(consumer: MiddlewareConsumer) {
        consumer
            .apply(AuthMiddleware)
            .forRoutes('*'); // 모든 경로에 Middleware 적용
    }
}

2. Nest.js에서 Guard 사용하기

Guard는 요청 처리 전에 특정 조건(예: 권한)을 확인하는 데 사용됩니다. Guards는 다음 두 가지 주요 목적으로 사용됩니다.

  • 특정 경로 또는 핸들러에 대한 접근 권한 확인
  • 어떠한 요청을 처리할 수 있는지에 대한 조건을 설정

2.1 Guard의 정의 및 사용 방법

Nest.js의 Guards는 주로 `CanActivate` 인터페이스를 구현하여 생성합니다. 아래는 사용자의 역할 기반으로 접근을 제어하는 Guard의 예시입니다.


import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';

@Injectable()
export class RolesGuard implements CanActivate {
    canActivate(context: ExecutionContext): boolean {
        const request = context.switchToHttp().getRequest();
        const user = request.user; // 이전에 middleware에서 사용자 정보 설정
        const hasRole = () => user.roles.indexOf('admin') > -1;
        return user && user.roles && hasRole();
    }
}

2.2 Guard 등록 및 사용하기

Guard는 컨트롤러의 핸들러 또는 모듈에 더할 수 있습니다. 아래의 코드는 특정 컨트롤러에 Guard를 등록하는 예시입니다.


import { Controller, Get, UseGuards } from '@nestjs/common';
import { RolesGuard } from './roles.guard';

@Controller('admin')
export class AdminController {
    @Get()
    @UseGuards(RolesGuard)
    getAdminData() {
        return 'Admin Data';
    }
}

3. Next.js에서 Middleware 이해하기

Next.js에서 Middleware는 요청이 들어오는 단계에서 선처리하거나 특정 조건에 따라 사용자에게 응답할 수 있는 방법을 제공합니다. Next.js는 API Routes와 페이지에 Middleware를 적용할 수 있습니다.

3.1 Next.js Middleware의 용도

  • 사용자 인증
  • 404 처리
  • API 호출 간소화

3.2 Next.js에서 Middleware 활성화하기

Next.js 12 버전부터 제공되는 Middleware를 사용하여 각 라우트에 접근하기 전에 사용자 인증을 확인하는 예시입니다. Middleware는 `middleware.ts` 파일에서 정의합니다.


// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
    const token = request.cookies.get('token');
    if (!token) {
        return NextResponse.redirect(new URL('/login', request.url));
    }
    return NextResponse.next();
}

4. Next.js에서 Guard 사용하기

Next.js에서는 Guard를 명시적으로 구현하는 방법은 없지만, 각 페이지에서 직접 사용자 인증을 처리할 수 있습니다. 예를 들어, 서버 사이드 렌더링(SSR)에서 페이지 접근 제어를 설정할 수 있습니다.

4.1 서버 사이드에서 접근 권한 검증하기

아래는 Next.js의 `getServerSideProps`를 사용하여 사용자의 인증 상태를 확인하는 예시입니다.


export async function getServerSideProps(context) {
    const { req } = context;
    const token = req.cookies.token;
    
    if (!token) {
        return {
            redirect: {
                destination: '/login',
                permanent: false,
            },
        };
    }

    // 사용자 데이터 fetch 등의 로직
    return {
        props: {}, // 성공적으로 인증된 경우 페이지에 전달할 데이터
    };
}

5. 결론

Nest.js와 Next.js에서 Middleware와 Guard를 활용함으로써 애플리케이션의 보안 및 유연성을 높일 수 있습니다. 각각의 기술 스택에서의 역할과 사용법을 깊이 있게 이해하고 있으면, 복잡한 인증 로직과 접근 권한 관리를 보다 효과적으로 구현할 수 있습니다. 이 포스트에서 다룬 내용을 바탕으로 여러분의 프로젝트에도 적절한 Middleware와 Guard를 적용하여 사용자 경험을 향상시키시길 바랍니다.

41.Nest.js와 Next.js에서 웹소켓 활용하기, Next.js 클라이언트에서 웹소켓 연결 및 데이터 수신

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

웹소켓이란?

웹소켓(WebSocket)은 클라이언트와 서버 간의 전이중(양방향) 통신을 가능하게 하는 프로토콜입니다. 기존의 HTTP 프로토콜은 클라이언트가 요청을 하고 서버가 응답을 하는 구조인 반면, 웹소켓은 클라이언트와 서버가 서로 자유롭게 메시지를 주고받을 수 있는 연결을 유지합니다. 이러한 특성 덕분에 실시간 데이터 전송이 필요한 어플리케이션에서 웹소켓은 매우 유용합니다. 예를 들어, 채팅 애플리케이션, 실시간 게임, 주식 시세 전송 앱 등에서 널리 사용됩니다.

Nest.js 소개

Nest.js는 Node.js를 기반으로 하는 현대적인 웹 애플리케이션 프레임워크입니다. Angular에서 영감을 받아 모듈 기반 아키텍처를 채택하고 있으며, TypeScript를 기본으로 지원합니다. Nest.js를 사용하면 구조화된 코드를 작성할 수 있어 유지보수와 확장성이 뛰어납니다. Nest.js는 웹소켓을 포함한 다양한 통신 프로토콜을 지원하여 실시간 애플리케이션 개발에 적합합니다.

Next.js 소개

Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공합니다. 이를 통해 SEO에 유리하고 빠른 렌더링을 할 수 있는 장점이 있습니다. 또한, Next.js는 API 라우트 기능을 사용해 서버 측 로직도 간단히 작성할 수 있습니다. 이러한 특성 덕분에 Next.js는 실시간 애플리케이션을 개발하는 데 매우 유용합니다.

Nest.js에서 웹소켓 설정하기

Nest.js에서 웹소켓을 사용하는 방법은 다음과 같습니다. 먼저, 웹소켓 서버를 구현하기 위해 @nestjs/websockets 패키지를 설치합니다. 이를 통해 웹소켓의 기본적인 기능을 쉽게 사용할 수 있습니다.

설치

npm install @nestjs/websockets @nestjs/platform-socket.io socket.io

웹소켓 게이트웨이 만들기

다음으로, 웹소켓 게이트웨이를 생성합니다. 웹소켓 게이트웨이는 클라이언트의 요청을 받고 메시지를 송수신하는 역할을 합니다. 아래는 간단한 웹소켓 게이트웨이의 예입니다.


import { WebSocketGateway, WebSocketServer, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway()
export class AppGateway implements OnGatewayConnection, OnGatewayDisconnect {
    @WebSocketServer() server: Server;

    handleConnection(client: any) {
        console.log('클라이언트 연결됨');
    }

    handleDisconnect(client: any) {
        console.log('클라이언트 연결 끊김');
    }

    sendMessage(message: string) {
        this.server.emit('message', message);
    }
}

위 코드에서 handleConnectionhandleDisconnect 메서드는 각각 클라이언트가 연결되거나 연결이 끊어질 때 호출됩니다. sendMessage 메서드는 모든 클라이언트에게 메시지를 전송하는 기능을 수행합니다.

Next.js 클라이언트에서 웹소켓 연결하기

Next.js 클라이언트에서 웹소켓에 연결하기 위해 socket.io-client 라이브러리를 사용할 수 있습니다. 먼저 이 라이브러리를 설치해야 합니다.

설치

npm install socket.io-client

클라이언트 설정

먼저 Next.js 프로젝트의 페이지 컴포넌트에서 웹소켓 연결을 설정합니다. 아래는 기본적인 웹소켓 클라이언트 구현 예입니다.


import { useEffect } from 'react';
import { io } from 'socket.io-client';

const socket = io('http://localhost:3000');

const Home = () => {
    useEffect(() => {
        socket.on('message', (message) => {
            console.log('서버로부터 받은 메시지:', message);
        });

        return () => {
            socket.off('message');
        };
    }, []);

    const sendMessage = () => {
        socket.emit('message', '안녕하세요, 서버!');
    };

    return (
        

웹소켓 테스트

); }; export default Home;

위 코드에서는 socket.io-client를 사용하여 서버와의 웹소켓 연결을 설정하고 있습니다. 클라이언트가 연결되면 서버로부터 수신한 메시지를 콘솔에 출력합니다. 또한, 버튼을 클릭하면 서버에 메시지를 보낼 수 있습니다.

서버와 클라이언트 간의 데이터 송수신

이렇게 설정한 웹소켓 서버와 클라이언트 간에 실시간 데이터 송수신을 구현할 수 있습니다. 예를 들어, 클라이언트에서 메시지를 보내면 서버는 그 메시지를 처리하고 다시 클라이언트로 전달할 수 있습니다. 이 기능을 통해 다양한 실시간 애플리케이션을 개발할 수 있습니다.

서버에서 클라이언트로 데이터 전송

서버에서 클라이언트로 데이터 전송하는 예는 다음과 같습니다. 간단한 메시지를 전송하는 기능을 추가하여 클라이언트가 연결된 모든 클라이언트에게 매 5초마다 메시지를 전송해보겠습니다.


import { WebSocketGateway, WebSocketServer, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway()
export class AppGateway implements OnGatewayConnection, OnGatewayDisconnect {
    @WebSocketServer() server: Server;

    handleConnection(client: any) {
        console.log('클라이언트 연결됨');
    }

    handleDisconnect(client: any) {
        console.log('클라이언트 연결 끊김');
    }

    broadcastMessage() {
        setInterval(() => {
            this.server.emit('message', '서버에서 전송한 메시지입니다.');
        }, 5000);
    }
}

위 코드의 broadcastMessage 메서드는 매 5초마다 모든 연결된 클라이언트에게 메시지를 전송합니다. 이 메서드를 constructor 내에서 호출하여 서버가 실행되면 자동으로 클라이언트에 메시지를 보내도록 설정할 수 있습니다.

에러 처리와 최적화

실시간 웹소켓 애플리케이션에서 에러 처리는 중요한 부분입니다. 발생할 수 있는 다양한 에러를 예방하고 사용자가 이해할 수 있도록 적절한 피드백을 제공해야 합니다. 클라이언트에서는 웹소켓 연결의 상태를 관리하고 에러를 처리할 수 있는 방법을 구현하는 것이 좋습니다.

클라이언트 에러 처리


useEffect(() => {
    socket.on('connect_error', (err) => {
        console.error('서버에 연결할 수 없습니다:', err.message);
    });

    socket.on('disconnect', (reason) => {
        if (reason === 'io server disconnect') {
            console.log('서버가 클라이언트를 연결 해제했습니다.');
            // 자동 재연결 시도
            socket.connect();
        }
    });

    return () => {
        socket.off('connect_error');
        socket.off('disconnect');
    };
}, []);

위 코드에서는 연결 오류와 연결 해제 시의 이벤트를 처리하고 있습니다. 이러한 처리를 통해 사용자가 문제를 인지하고 적절한 조치를 취할 수 있게 됩니다.

결론

Nest.js와 Next.js를 활용한 웹소켓 애플리케이션 개발은 실시간 기능 구현을 위해 매우 효과적입니다. 간단한 설정만으로 양방향 통신을 할 수 있으며, 이를 통해 다양한 기능을 추가할 수 있습니다. 이번 글을 통해 기본적인 웹소켓 사용법과 클라이언트-서버 간의 데이터 송수신 방법을 살펴보았습니다. 다양한 웹소켓 기능을 실험하여 더 나아가고, 실시간 애플리케이션을 더욱 풍성하게 만드는 데 도움이 되길 바랍니다.

27.블로그 포스트 작성 및 에디터 기능 추가, 서버에서 마크다운 파일을 HTML로 변환하여 렌더링

현대 웹 애플리케이션 개발에서 블로그 시스템은 많은 인기를 끌고 있습니다. 특히나 개인이 자신을 표현할 수 있는 공간으로 블로그는 매우 중요한 역할을 합니다. 이번 포스트에서는 Nest.js와 Next.js를 활용하여 블로그 포스트 작성 및 에디터 기능을 추가하는 방법에 대해 논의하고자 합니다.

1. 프로젝트 구성

Nest.js는 서버 사이드 프레임워크로, TypeScript로 작성되어 있으며, Next.js는 리액트 기반의 서버 사이드 렌더링(SSR) 프레임워크입니다. 이 두 프레임워크를 조합하여 효율적인 블로그 애플리케이션을 구현할 수 있습니다. 먼저, Nest.js를 사용하여 API 서버를 구축하고, Next.js로 클라이언트 애플리케이션을 만듭니다.

2. Nest.js API 서버 구축

Nest.js에서 API를 구축하는 기본적인 과정은 다음과 같습니다. 먼저, Nest.js CLI를 사용하여 프로젝트를 생성합니다.

npm i -g @nestjs/cli
nest new blog-server

생성된 프로젝트 폴더로 이동한 후, 필요한 패키지를 설치합니다. Markdown 파일을 처리하기 위해 `marked` 패키지를 사용할 것입니다.

npm install marked

다음으로, 포스트를 관리할 수 있는 기본적인 CRUD API를 만듭니다. `posts`라는 모듈을 생성합니다.

nest generate module posts
nest generate service posts
nest generate controller posts

2.1. 포스트 DTO(Data Transfer Object) 정의

포스트 데이터를 다루기 위해 DTO를 만듭니다. `create-post.dto.ts` 파일을 생성하고 아래와 같이 작성합니다.

import { IsString, IsNotEmpty } from 'class-validator';

        export class CreatePostDto {
            @IsString()
            @IsNotEmpty()
            title: string;

            @IsString()
            @IsNotEmpty()
            content: string;
        }

2.2. 서비스 구현

`posts.service.ts` 파일을 열고 포스트 데이터를 관리하는 메서드를 추가합니다. 여기서는 간단히 메모리에 데이터를 저장합니다.

import { Injectable } from '@nestjs/common';
        import { CreatePostDto } from './dto/create-post.dto';

        interface Post {
            id: number;
            title: string;
            content: string;
        }

        @Injectable()
        export class PostsService {
            private posts: Post[] = [];
            private idCounter = 1;

            create(postDto: CreatePostDto): Post {
                const newPost = {
                    id: this.idCounter++,
                    ...postDto,
                };
                this.posts.push(newPost);
                return newPost;
            }

            findAll(): Post[] {
                return this.posts;
            }

            findOne(id: number): Post {
                return this.posts.find(post => post.id === id);
            }
        }

2.3. 컨트롤러 구현

`posts.controller.ts` 파일을 열고 API 엔드포인트를 추가합니다. 포스트를 추가하고, 목록을 가져오는 기능을 구현합니다.

import { Controller, Post, Body, Get } from '@nestjs/common';
        import { PostsService } from './posts.service';
        import { CreatePostDto } from './dto/create-post.dto';

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

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

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

3. 클라이언트 애플리케이션 Next.js 구축

이제 Next.js를 사용하여 블로그 클라이언트를 구축하겠습니다. 새로운 Next.js 프로젝트를 생성합니다.

npx create-next-app blog-client

클라이언트 애플리케이션에서도 Markdown 파일을 사용하기 위해 `remark` 패키지를 설치합니다.

npm install remark remark-html

3.1. 포스트 작성 페이지

포스트를 작성할 수 있는 페이지를 만들어야 합니다. `pages/create-post.js` 파일을 생성하고 아래와 같이 작성합니다.

import { useState } from 'react';

        export default function CreatePost() {
            const [title, setTitle] = useState('');
            const [content, setContent] = useState('');

            const handleSubmit = async (e) => {
                e.preventDefault();
                const response = await fetch('http://localhost:3000/posts', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ title, content }),
                });
                if (response.ok) {
                    alert('포스트가 성공적으로 작성되었습니다.');
                }
            };

            return (
                
setTitle(e.target.value)} required />
); }

4. 마크다운 처리 및 HTML 렌더링

사용자가 작성한 마크다운 내용을 HTML로 변환하여 렌더링하는 기능을 추가해야 합니다. 이 과정에서 `remark`와 `remark-html`을 사용하여 마크다운을 HTML로 변환합니다.

4.1. Markdown to HTML 변환 구현

포스트를 조회하는 페이지를 만들어 HTML로 변환된 내용을 렌더링합니다. `pages/posts/[id].js` 파일을 생성하고 아래와 같이 작성합니다.

import { useEffect, useState } from 'react';
        import { remark } from 'remark';
        import html from 'remark-html';

        const Post = ({ post }) => {
            const [contentHtml, setContentHtml] = useState('');

            useEffect(() => {
                const convertMarkdownToHtml = async () => {
                    const processedContent = await remark()
                        .use(html)
                        .process(post.content);
                    setContentHtml(processedContent.toString());
                };
                convertMarkdownToHtml();
            }, [post.content]);

            return (
                

{post.title}

); }; export async function getServerSideProps(context) { const { id } = context.params; const res = await fetch(`http://localhost:3000/posts/${id}`); const post = await res.json(); return { props: { post } }; } export default Post;

5. 전체 흐름 정리

이제 사용자가 블로그 포스트를 작성하고, 이를 마크다운 형식으로 저장하고, 이후 이를 HTML로 변환하여 렌더링할 수 있는 전체적인 기능을 갖춘 시스템이 완성되었습니다. Nest.js는 백엔드에서 포스트를 저장하고 관리하며, Next.js는 클라이언트에서 포스트 작성과 내용을 표시하는 역할을 합니다. 이러한 시스템 구성은 개발의 유연성을 높여주며, 유지보수 또한 쉽게 만들어줍니다.

6. 결론

블로그 포스트 작성 및 에디터 기능을 추가하는 과정에서 Nest.js와 Next.js를 활용한 다양한 예제를 살펴보았습니다. 마크다운을 HTML로 변환하는 과정은 블로그 개발에서 매우 중요한 부분이며, 이를 통해 사용자에게 더 나은 콘텐츠를 제공할 수 있습니다. 앞으로 자신만의 블로그를 구축하는 데 있어 Nest.js와 Next.js를 적극 활용해보세요!

저자: 조광형

게시일: 2024년 11월 26일