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 라이브러리를 사용하여 데이터베이스에 저장하고 관리하는 방법에 대해 배우는 것도 추천합니다.

29.이미지 업로드 및 미디어 관리, Nest.js에서 파일 업로드 API 구축

이 글에서는 Nest.js 프레임워크를 사용하여 이미지 업로드 및 미디어 관리 기능을 갖춘 API를 구축하는 방법에 대해 단계별로 설명하겠습니다. 또한, 파일 업로드와 관련된 여러 가지 이론적 배경과 이를 구현하기 위한 코드를 포함하겠습니다.

1. Nest.js 소개

Nest.js는 모던 JavaScript와 TypeScript 기반의 웹 애플리케이션 프레임워크입니다. 엔터프라이즈 애플리케이션을 구축하기 위해 필요한 기능을 갖추고 있으며, 효율적인 모듈화와 테스트 용이성을 제공합니다. 기존의 Express.js에 기반하고 있지만, 더 많은 기능과 구조를 제공합니다.

2. 파일 업로드 API 구축의 필요성

파일 업로드는 웹 애플리케이션에서 흔히 필요한 기능 중 하나입니다. 사용자에게 파일을 업로드할 수 있는 기능을 제공함으로써 다양한 서비스—사진 공유, 문서 첨부, 미디어 관리—를 가능하게 합니다. 이러한 API를 통해 사용자는 사용자의 데이터를 서버에 안전하게 저장할 수 있습니다.

3. Nest.js 프로젝트 설정하기

먼저 Nest.js 프로젝트를 설정해야 합니다. 아래 명령어를 사용하여 프로젝트를 생성합니다.

npm i -g @nestjs/cli
nest new media-upload

프로젝트를 생성한 후, 필요한 모듈을 설치합니다. 주요 모듈로는 multer@nestjs/platform-express가 있습니다.

npm install --save multer @nestjs/platform-express

4. 이미지 업로드를 위한 DTO 설계

이미지 업로드를 처리하기 위한 데이터 전송 객체(DTO)를 설계합니다. DTO는 클라이언트와 서버 간에 데이터가 전송될 때의 구조를 정의합니다. 아래는 파일 업로드를 위한 간단한 DTO 예시입니다.

import { IsNotEmpty } from 'class-validator';
        
        export class UploadImageDto {
            @IsNotEmpty()
            readonly image: Express.Multer.File;
        }

5. 파일 업로드를 위한 서비스 구현

이제 파일 업로드를 처리할 서비스를 구현해야 합니다. 이를 위해, ‘upload.service.ts’ 파일을 생성하고 다음의 내용을 구현합니다.

import { Injectable } from '@nestjs/common';
        import { join } from 'path';
        import { v4 as uuid } from 'uuid';
        
        @Injectable()
        export class UploadService {
            async uploadFile(file: Express.Multer.File): Promise {
                const fileName = `${uuid()}-${file.originalname}`;
                const filePath = join(__dirname, '..', '..', 'uploads', fileName);
                // file system API 등을 사용해 파일을 저장
                return filePath;
            }
        }

위의 서비스에서는 UUID를 사용하여 파일 이름을 생성하고, 파일이 업로드될 경로를 정의합니다. 이후 파일 시스템 API를 사용하여 파일을 저장합니다.

6. 파일 업로드를 위한 컨트롤러 구현

이제 사용자가 파일을 업로드할 수 있도록 제어하는 컨트롤러를 작성합니다. 아래는 ‘upload.controller.ts’의 예시입니다.

import { Controller, Post, UseInterceptors, UploadedFile, Body } from '@nestjs/common';
        import { FileInterceptor } from '@nestjs/platform-express';
        import { UploadService } from './upload.service';
        import { UploadImageDto } from './dto/upload-image.dto';
        
        @Controller('uploads')
        export class UploadController {
            constructor(private readonly uploadService: UploadService) {}
        
            @Post('image')
            @UseInterceptors(FileInterceptor('image'))
            async uploadImage(@UploadedFile() file: Express.Multer.File, @Body() uploadImageDto: UploadImageDto) {
                const filePath = await this.uploadService.uploadFile(file);
                return { url: filePath };
            }
        }

위의 컨트롤러에서는 HTTP POST 요청을 처리하여 사용자가 업로드한 이미지 파일을 받아 처리합니다. ‘FileInterceptor’를 사용하여 파일 업로드를 간편하게 처리할 수 있습니다.

7. 업로드 경로 설정하기

파일이 업로드될 경로를 설정하는 방법입니다. Nest.js에서는 multer를 사용하여 파일 업로드를 쉽게 처리할 수 있습니다. 기본적으로 multer의 저장 옵션을 사용하거나, 사용자가 원하는 경로를 지정할 수 있습니다.

import { multerOptions } from './multer.options';

        export const multerOptions = {
            storage: multer.diskStorage({
                destination: (req, file, cb) => {
                    cb(null, 'uploads/');
                },
                filename: (req, file, cb) => {
                    cb(null, `${uuid()}-${file.originalname}`);
                },
            }),
        };
        

8. 미디어 관리 API 구축

이미지 업로드 API 외에도 미디어 관리를 위한 API를 구축하는 방법도 설명하겠습니다. 사용자는 업로드한 미디어 파일을 조회, 삭제할 수 있어야 합니다. 이를 위한 간단한 API를 작성해보겠습니다.

import { Controller, Get, Delete, Param } from '@nestjs/common';

        @Controller('media')
        export class MediaController {
            @Get()
            findAll() {
                // DB에서 모든 미디어 파일 조회
                return mediaList;
            }

            @Delete(':id')
            remove(@Param('id') id: string) {
                // 특정 미디어 파일 삭제 처리
                return { message: 'File removed' };
            }
        }

9. 테스트 및 디버깅

이제 모든 컴포넌트가 준비되었으므로, API를 테스트하고 디버깅하는 단계입니다. Postman 또는 Insomnia와 같은 도구를 사용하여 API를 호출하고, 정상적으로 작동하는지 확인합니다.

10. 마치며

이번 포스트에서는 Nest.js를 사용하여 이미지 업로드 및 미디어 관리 API를 구축하는 방법에 대해 알아보았습니다. Nest.js는 TS 기반 프레임워크로, 멀티미디어 파일 처리를 효율적으로 할 수 있도록 도와줍니다. 이와 같은 기능은 웹 애플리케이션 개발의 필수적인 요소로, 이를 통해 사용자에게 더 나은 경험을 제공할 수 있습니다. 추가적으로, 여러 가지 보안 또는 관리 기능을 추가하여 서비스를 더욱 안전하게 사용할 수 있도록 할 수 있습니다.

작성자: {작성자 이름}

날짜: {작성 날짜}

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