[카테고리:] nextjs

35.서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 비교 및 구현, Next.js의 SSR과 SSG(정적 사이트 생성) 설정

2023년 10월 12일

1. 렌더링의 이해

웹 애플리케이션 개발에서 “렌더링”은 클라이언트 측에서 HTML, CSS, JavaScript를 사용하여 웹 페이지의 요소가 실제로 화면에 표시되는 과정을 의미합니다. 이러한 렌더링은 주로 두 가지 방법, 즉 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 통해 이루어집니다.

이 두 방법은 웹 애플리케이션의 로딩 속도, SEO 최적화, 사용자 경험 등에 큰 영향을 미치므로, 각 방법의 특징 및 장단점을 이해하고 적절하게 활용하는 것이 중요합니다.

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

2.1 정의

클라이언트 사이드 렌더링(CSR)은 사용자가 웹 페이지를 요청하면, 서버가 HTML 페이지를 반환하는 대신 JavaScript 파일을 보내는 방식입니다. 그런 다음, 웹 브라우저가 JavaScript를 실행하여 클라이언트 측에서 페이지를 동적으로 생성합니다.

2.2 장점

  • 빠른 페이지 전환: 페이지가 클라이언트에서 동적으로 생성되기 때문에 사용자는 별도의 요청 없이도 페이지 간의 전환 속도가 빠릅니다.
  • 상태 관리: SPA(Single Page Application) 구조로 인해 사용자가 웹 페이지의 상태를 유지하기 용이합니다.
  • 개발자 경험: React, Vue 등 현대적인 프레임워크와 라이브러리의 활용으로 코드의 재사용성 및 모듈화가 용이합니다.

2.3 단점

  • 첫 로드 속도: 페이지를 처음 로드할 때 모든 JavaScript 파일을 다운로드하고 해석해야 하므로 초기 로딩 속도가 느릴 수 있습니다.
  • SEO: 검색 엔진이 클라이언트 측의 JavaScript를 완전히 해석하기 어려운 경우가 있어 SEO 최적화가 어려울 수 있습니다.
  • 브라우저 호환성: 다양한 브라우저 환경에서 JavaScript의 호환성 문제로 인해 나타나는 이슈가 발생할 수 있습니다.

3. 서버 사이드 렌더링(SSR)

3.1 정의

서버 사이드 렌더링(SSR)은 웹 페이지의 콘텐츠가 서버에서 미리 생성되어 클라이언트에게 전달되는 방식입니다. 사용자가 웹 페이지를 요청하면, 서버는 요청에 따라 HTML을 생성하여 클라이언트에 반환합니다.

3.2 장점

  • SEO 최적화: 검색 엔진이 페이지의 모든 콘텐츠를 쉽게 인식할 수 있도록 하여 검색 엔진 최적화에 유리합니다.
  • 빠른 첫 로드: 페이지의 콘텐츠가 서버에서 완전히 렌더링되어 클라이언트에 전달되므로 초기 로딩 속도가 빠릅니다.
  • 브라우저 호환성: HTML이 서버에서 생성되므로 모든 브라우저에서 호환성이 높습니다.

3.3 단점

  • 서버 부하: 모든 요청에 대해 서버가 HTML을 생성해야 하므로 서버에 부하가 걸릴 수 있습니다.
  • 페이지 간의 전환 느림: 페이지 전환 시마다 서버에 요청을 해야 하므로 빠른 전환이 어렵습니다.
  • 상태 관리 복잡성: 고객의 상태 관리를 위해 클라이언트 측에서 추가적인 작업이 필요할 수 있습니다.

4. SSR과 CSR 비교

특징 클라이언트 사이드 렌더링(CSR) 서버 사이드 렌더링(SSR)
초기 로딩 속도 느림 빠름
페이지 전환 속도 빠름 느림
SEO 불리 유리
서버 부하 낮음 높음

5. Next.js의 SSR과 SSG(정적 사이트 생성) 설정

5.1 Next.js 소개

Next.js는 React를 기반으로 하는 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 모두 지원합니다. 이를 통해 개발자들은 다양한 유형의 웹 사이트 및 애플리케이션을 쉽게 구축할 수 있습니다.

5.2 Next.js에서 SSR 구현하기

Next.js에서 SSR을 구현하기 위해서는 `getServerSideProps`라는 함수를 사용해야 합니다. 이 함수는 페이지가 요청될 때마다 호출되어 데이터를 가져오고 해당 데이터를 기반으로 HTML을 렌더링합니다. 


                import React from 'react';

                const Page = ({ data }) => {
                    return (
                        

                            
{data.title}

                            
{data.content}

                        

                    );
                };

                export async function getServerSideProps() {
                    const res = await fetch('https://api.example.com/data');
                    const data = await res.json();
                    return { props: { data } };
                }

                export default Page;

5.3 Next.js에서 SSG 구현하기

Next.js에서 정적 사이트 생성을 위해서는 `getStaticProps`와 `getStaticPaths`라는 함수를 사용해 데이터 가져오기 및 동적 경로 생성을 처리할 수 있습니다. 이 함수는 빌드 타임에 호출되어 HTML을 생성합니다. 


                import React from 'react';

                const Page = ({ data }) => {
                    return (
                        

                            
{data.title}

                            
{data.content}

                        

                    );
                };

                export async function getStaticProps() {
                    const res = await fetch('https://api.example.com/data');
                    const data = await res.json();
                    return { props: { data } };
                }

                export default Page;

5.4 결론

SSR과 CSR은 각각의 장단점이 있으며, Next.js는 이러한 두 가지 방법론을 모두 지원하여 개발자가 프로젝트에 적합한 선택을 할 수 있도록 돕습니다.
비즈니스의 요구 사항과 사용자 경험을 모두 고려하여 적절한 방법을 선택하는 것이 중요합니다.
Next.js는 이러한 과정을 보다 용이하게 만들어 주며, 현대적 웹 애플리케이션 구축에 있어 강력한 도구로 자리 잡고 있습니다.

16.Next.js와 Nest.js로 사용자 인증 구현하기, JWT(Json Web Token)를 활용한 사용자 인증 시스템

웹 애플리케이션에서 사용자 인증은 매우 중요한 요소입니다. 이 글에서는 Next.js와 Nest.js를 사용하여 JWT(Json Web Token)를 활용한 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명합니다.

목차

1. 사용자 인증이란?

사용자 인증은 사용자가 누구인지 확인하는 프로세스입니다. 일반적으로 로그인 및 로그아웃 기능을 통해 사용자의 신원을 확인합니다. 이 과정은 애플리케이션의 보안성을 높이는 중요한 요소입니다. 인증에는 서버와 클라이언트 간에 정보를 교환하는 여러 가지 방법이 있으며, 가장 널리 사용되는 방법 중 하나는 JWT(Json Web Token)를 사용하는 것입니다.

2. JWT란?

JWT는 JSON 객체를 안전하게 전송하기 위한 개방형 표준입니다. JWT는 세 부분으로 구성된 문자열로, 각각 헤더(Header), 페이로드(Payload), 서명(Signature)로 나뉩니다.

  • 헤더(Header): 토큰의 유형과 해싱 알고리즘을 지정합니다.
  • 페이로드(Payload): 사용자의 정보와 권한을 포함하는 데이터입니다.
  • 서명(Signature): 헤더와 페이로드의 정보를 기반으로 생성된 해시 값으로, 토큰의 무결성을 확인합니다.

JWT의 주요 장점은 클라이언트 측에서 정보를 저장하고 이를 검증할 수 있는 점입니다. 또한 상태 비저장(stateless) 방식으로 서버의 부담을 최소화할 수 있습니다.

3. 환경 설정

이 프로젝트를 진행하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. 다음 링크에서 이를 설치할 수 있습니다: Node.js 공식 웹사이트

4. Nest.js 프로젝트 설정

Nest.js는 프레임워크를 통해 서버 사이드 애플리케이션을 구축하기 위한 강력한 도구입니다. 다음은 Nest.js 프로젝트를 설정하는 방법입니다. 

npm install -g @nestjs/cli
nest new auth-example
cd auth-example
npm install @nestjs/jwt passport-jwt passport bcryptjs class-validator class-transformer

위 명령을 사용하여 Nest.js 프로젝트를 생성하고 필요한 라이브러리를 설치합니다.

4.1. 모듈 생성

인증 기능을 위한 모듈을 생성합니다. 다음 명령어를 사용합니다. 

nest g module auth
nest g service auth
nest g controller auth

이 명령어는 auth 모듈, 서비스, 및 컨트롤러를 각각 생성합니다.

4.2. AuthService 구현

AuthService는 사용자의 등록 및 로그인을 처리하는 서비스입니다. 아래와 같이 auth.service.ts 파일을 수정합니다.

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
import { User } from 'src/user/user.entity'; // 예시를 위한 User 모델
import * as bcrypt from 'bcryptjs';

@Injectable()
export class AuthService {
    constructor(private jwtService: JwtService) {}

    async register(userData: any): Promise {
        const hashedPassword = await bcrypt.hash(userData.password, 10);
        const user = new User();  // 사용자를 DB에 저장하는 로직 필요
        user.username = userData.username;
        user.password = hashedPassword;
        // save user to DB logic
        return user;
    }

    async validateUser(username: string, password: string): Promise {
        const user = await this.findUserByUsername(username); // 사용자를 DB에서 찾는 로직 필요
        if (user && await bcrypt.compare(password, user.password)) {
            return user;
        }
        return null;
    }

    async login(user: any) {
        const payload = { username: user.username, sub: user.userId };
        return {
            access_token: this.jwtService.sign(payload),
        };
    }
}

4.3. AuthController 구현

인증 관련 HTTP 요청을 처리하는 AuthController 를 구현합니다.

import { Controller, Post, Request, UseGuards } from '@nestjs/common';
import { AuthService } from './auth.service';
import { LocalAuthGuard } from './local-auth.guard'; // 로컬 인증 가드

@Controller('auth')
export class AuthController {
    constructor(private readonly authService: AuthService) {}

    @Post('register')
    async register(@Request() req) {
        return this.authService.register(req.body);
    }

    @UseGuards(LocalAuthGuard)
    @Post('login')
    async login(@Request() req) {
        return this.authService.login(req.user);
    }
}

4.4. JWT 설정

JWT를 사용할 수 있도록 설정합니다.

import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt';
import { AuthService } from './auth.service';
import { AuthController } from './auth.controller';

@Module({
    imports: [
        JwtModule.register({
            secret: 'secretKey', // 환경변수로 분리할 것
            signOptions: { expiresIn: '60s' }, // 토큰 만료 시간
        }),
    ],
    controllers: [AuthController],
    providers: [AuthService],
})
export class AuthModule {}

5. Next.js 프로젝트 설정

Next.js는 React 기반으로 서버 사이드 렌더링을 지원하는 프레임워크입니다. 다음은 Next.js 프로젝트를 설정하는 방법입니다.

npx create-next-app next-auth-example
cd next-auth-example
npm install axios js-cookie

5.1. 로그인 페이지 생성

Next.js 프로젝트에 로그인 기능을 추가합니다. pages/login.js 파일을 만들고 아래와 같이 수정합니다.

import { useState } from 'react';
import axios from 'axios';
import Cookies from 'js-cookie';

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async () => {
        try {
            const response = await axios.post('http://localhost:3000/auth/login', { username, password });
            Cookies.set('token', response.data.access_token);
            alert('로그인 성공');
        } catch (error) {
            alert('로그인 실패');
        }
    };

    return (
        

            
로그인

             setUsername(e.target.value)} placeholder="사용자명" />
             setPassword(e.target.value)} placeholder="비밀번호" />
            
        

    );
};

export default Login;

5.2. 사용자 인증 상태 관리

사용자 인증 상태를 관리하고, 인증이 필요한 페이지를 보호하는 방법을 살펴보겠습니다.

import { useEffect } from 'react';
import Router from 'next/router';
import Cookies from 'js-cookie';

const withAuth = (WrappedComponent) => {
    return (props) => {
        useEffect(() => {
            const token = Cookies.get('token');
            if (!token) {
                Router.push('/login');
            }
        }, []);

        return ;
    };
};

export default withAuth;

이렇게 구현하면 인증되지 않은 사용자가 특정 페이지에 접근할 때 로그인 페이지로 리디렉션됩니다.

6. 인증 구현

지금까지 설정한 내용을 바탕으로 전체적인 인증 흐름을 요약합니다. 사용자가 로그인 요청을 보내면 Nest.js의 AuthService가 해당 요청을 처리하게 됩니다. 사용자가 존재하고 비밀번호가 올바르게 입력되면 JWT 토큰을 발급받고, 이를 클라이언트는 쿠키에 저장합니다. 이후 요청은 이 토큰을 사용하여 인증된 사용자로서 처리됩니다.

이와 같이 Next.js와 Nest.js를 활용하면 효율적이고 안전한 사용자 인증 시스템을 구축할 수 있습니다.

7. 결론

본 글에서는 Next.js와 Nest.js를 이용하여 JWT 기반의 사용자 인증 시스템을 구현하는 방법에 대해 살펴보았습니다. 이러한 방법을 통해 현대의 웹 애플리케이션에서 필수적인 사용자 관리와 보안 기능을 효과적으로 개발할 수 있습니다. 앞으로 더 나아가 다양한 인증 방식 및 보안 관련 기능들도 고려해 보는 것이 좋습니다.

이 글이 여러분의 웹 개발 여정에 도움이 되기를 바랍니다. 질문이 있으시면 댓글로 남겨주세요!

40.Nest.js와 Next.js에서 웹소켓 활용하기, 실시간 댓글 기능 구현을 위한 웹소켓 설정

현대 웹 애플리케이션에서 실시간 기능을 제공하는 것은 점점 더 중요해지고 있습니다. 실시간 댓글 기능은 사용자 참여를 증가시키고, 웹사이트의 상호작용을 향상시키는 좋은 예입니다. 오늘은 Nest.js와 Next.js를 활용하여 웹소켓을 설정하고, 이를 바탕으로 실시간 댓글 기능을 구현하는 방법을 살펴보겠습니다.

1. 웹소켓이란?

웹소켓(WebSocket)은 서버와 클라이언트 간의 전이중 통신을 가능하게 하는 프로토콜입니다. HTTP 프로토콜과는 달리, 웹소켓은 클라이언트와 서버 간의 지속적인 연결을 유지하며, 양방향으로 데이터를 실시간으로 주고받을 수 있도록 해줍니다. 이러한 특성 덕분에 특히 채팅, 실시간 알림 등 다양한 애플리케이션에서 활용되고 있습니다.

웹소켓의 장점

  • 빠른 데이터 전송: HTTP 요청-응답 방식에 비해 각 요청마다 새로운 연결을 맺지 않기 때문에 지연 시간이 적습니다.
  • 양방향 통신: 서버에서 클라이언트로, 클라이언트에서 서버로 데이터를 자유롭게 전송할 수 있습니다.
  • 실시간 데이터 업데이트: 연결이 유지되는 동안 실시간으로 데이터를 수신할 수 있습니다.

2. Nest.js와 Next.js 소개

Nest.js

Nest.js는 Node.js의 프레임워크로, 서버 사이드 애플리케이션을 구축할 때 주로 사용됩니다. TypeScript로 작성되어 있으며, 모듈화된 구조와 다양한 기능을 제공합니다. 웹소켓을 사용하여 실시간 기능을 쉽게 구현할 수 있는 @nestjs/websockets 모듈이 기본 제공됩니다.

Next.js

Next.js는 리액트 기반의 프레임워크로, SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)를 지원하여 SEO에 유리한 웹 애플리케이션을 만들 수 있습니다. 또한, 클라이언트 측에서 웹소켓을 사용하여 실시간 기능을 쉽게 통합할 수 있습니다.

3. 개발 환경 설정

실시간 댓글 기능을 구현하기 위해, Nest.js와 Next.js 프로젝트를 설정해야 합니다. 이 예제에서는 Nest.js를 백엔드로, Next.js를 프론트엔드로 사용합니다.

3.1 Nest.js 설치 및 설정

npm install -g @nestjs/cli
nest new nest-websocket

프로젝트가 생성되면, 아키텍처를 고려하여 필요한 모듈들을 추가합니다. 웹소켓을 사용하기 위해 @nestjs/websockets 패키지를 설치합니다.

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

3.2 Next.js 설치 및 설정

npx create-next-app next-websocket

Next.js 프로젝트가 생성되면, 클라이언트 측에서 웹소켓 기능을 사용할 수 있도록 socket.io-client를 설치합니다.

npm install socket.io-client

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

Nest.js에서 웹소켓을 사용하려면 간단한 설정이 필요합니다. 우선, 웹소켓의 게이트웨이를 생성해야 합니다. 이를 통해 클라이언트와의 소통을 관리합니다.

4.1 웹소켓 게이트웨이 생성

import { WebSocketGateway, SubscribeMessage, MessageBody } from '@nestjs/websockets';
import { WebSocketServer } from 'socket.io';
import { Namespace } from 'socket.io';

@WebSocketGateway()
export class CommentsGateway {
    @WebSocketServer() server: Namespace;

    @SubscribeMessage('sendComment')
    handleComment(@MessageBody() comment: string): void {
        this.server.emit('newComment', comment);
    }
}

위의 코드에서는 @WebSocketGateway() 데코레이터를 사용하여 웹소켓 게이트웨이를 설정합니다. handleComment 메소드는 클라이언트로부터 댓글을 수신하고, 이를 모든 사용자에게 전송합니다.

4.2 모듈에 게이트웨이 등록

import { Module } from '@nestjs/common';
import { CommentsGateway } from './comments.gateway';

@Module({
    providers: [CommentsGateway],
})
export class AppModule {}

5. Next.js에서 웹소켓 연결하기

Next.js에서는 웹소켓 클라이언트를 설정하여, 백엔드와의 연결을 생성합니다.

5.1 웹소켓 클라이언트 설정

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

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

const Comments = () => {
    const [comments, setComments] = useState([]);
    const [comment, setComment] = useState('');

    useEffect(() => {
        socket.on('newComment', (newComment) => {
            setComments((prev) => [...prev, newComment]);
        });

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

    const sendComment = () => {
        socket.emit('sendComment', comment);
        setComment('');
    };

    return (
        

            
실시간 댓글

            

                {comments.map((c, index) => (
                    
{c}

                ))}
            

             setComment(e.target.value)}
                placeholder="댓글을 입력하세요."
            />
            
        

    );
};

export default Comments;

6. 전체 애플리케이션 통합

이제 Nest.js와 Next.js를 통합하여 실시간 댓글 기능을 구현할 수 있습니다. 두 부분을 연결하여 사용자에게 실시간으로 댓글을 전송하고 받을 수 있도록 설정합니다.

6.1 CORS 설정

크로스 오리진 요청을 허용하기 위해 Nest.js에서 CORS를 설정해야 합니다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    app.enableCors({
        origin: 'http://localhost:3000',
        credentials: true,
    });
    await app.listen(3001);
}
bootstrap();

6.2 Next.js 앱 실행

Next.js 앱을 실행합니다.

npm run dev

7. 결론

이번 강좌를 통해 Nest.js와 Next.js를 활용하여 실시간 댓글 기능을 웹소켓으로 구현하는 방법을 배웠습니다. 웹소켓을 이용한 실시간 통신은 사용자 경험을 향상시키며, 상호작용을 더 매끄럽게 만들어 줍니다. Nest.js는 강력한 백엔드 프레임워크로, Next.js는 유연한 프론트엔드 프레임워크로, 함께 사용할 때 큰 시너지를 발휘할 수 있습니다.

향후 개선 및 확장

이 기본 댓글 시스템에 다음과 같은 기능들을 추가하여 확장할 수 있습니다:

  • 댓글 삭제 및 수정 기능
  • 채팅방 기능 추가
  • 인증 및 권한 관리
  • 서버가 다운됐을 때 복구 기능

여기까지 읽어주셔서 감사합니다. 이 강좌가 Nest.js와 Next.js를 활용한 웹소켓 기반 애플리케이션 개발에 도움이 되었기를 바랍니다.

12.Nest.js로 RESTful API 구축하기, 게시글 생성, 수정, 삭제, 조회 API 구현

오늘은 Nest.js를 사용하여 RESTful API를 구축하는 방법에 대해 자세히 살펴보겠습니다. RESTful API는 클라이언트와 서버 간의 상호작용을 효율적으로 처리하기 위해 설계된 아키텍처 스타일입니다. 데이터의 생성, 검색, 업데이트 및 삭제(CRUD)를 위한 직관적인 방법을 제공합니다.

1. Nest.js란?

Nest.js는 Node.js를 기반으로 한 효율적이고 신뢰할 수 있는 서버 사이드 애플리케이션 프레임워크입니다. TypeScript로 작성되었으며, Angular에서 영향을 많이 받아 모듈화, IoC(제어의 역전), 데코레이터 기반 프로그래밍과 같은 특징을 가지고 있습니다. Nest.js는 복잡한 애플리케이션을 쉽게 구조화하고 관리할 수 있게 도와줍니다.

2. 개발 환경 설정하기

2.1 Node.js 및 Nest CLI 설치

먼저, Node.js가 설치되어 있어야 합니다. Node.js가 설치되어 있지 않다면, [Node.js 공식 사이트](https://nodejs.org)에서 다운로드하여 설치합니다. 그 후, Nest CLI를 설치합니다.

npm install -g @nestjs/cli

2.2 새로운 Nest 프로젝트 생성

이제 Nest CLI를 사용하여 새로운 프로젝트를 생성합니다. 다음 명령어를 입력합니다.

nest new blog-api

프로젝트 디렉토리로 이동합니다.

cd blog-api

3. 게시글을 위한 모듈, 서비스 및 컨트롤러 생성하기

3.1 게시글 모듈 생성

게시글과 관련된 모든 내용을 처리하기 위해 게시글 모듈을 생성합니다.

nest generate module posts

3.2 게시글 서비스 생성

서비스는 비즈니스 로직을 처리하는 부분입니다.

nest generate service posts

3.3 게시글 컨트롤러 생성

컨트롤러는 HTTP 요청을 처리하고 클라이언트에게 응답하는 역할을 합니다.

nest generate controller posts

4. 게시글 생성, 조회, 수정, 삭제 API 구현하기

이제 게시글 API의 각 기능을 구현해보겠습니다. 각 부분은 서비스와 컨트롤러를 결합하여 처리됩니다.

4.1 게시글 모델 정의하기

게시글의 구조를 정의하기 위해 DTO(Data Transfer Object)를 생성합니다. src/posts/dto/create-post.dto.ts 파일을 생성하고 다음 내용을 추가합니다.


export class CreatePostDto {
    title: string;
    content: string;
}

4.2 게시글 인터페이스 정의하기

게시글 데이터 구조를 정의하기 위해 interfaces 파일을 생성합니다. src/posts/interfaces/post.interface.ts 파일을 생성하고 다음 내용을 추가합니다.


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

4.3 서비스 코드 구현하기

src/posts/posts.service.ts 파일을 열고, 게시글을 관리하는 코드를 작성합니다.


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

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

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

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

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

    update(id: number, updatePostDto: CreatePostDto): Post {
        const post = this.findOne(id);
        if (post) {
            post.title = updatePostDto.title;
            post.content = updatePostDto.content;
        }
        return post;
    }

    delete(id: number): void {
        const index = this.posts.findIndex(post => post.id === id);
        if (index !== -1) {
            this.posts.splice(index, 1);
        }
    }
}

4.4 컨트롤러 코드 구현하기

src/posts/posts.controller.ts 파일을 열고, API 요청을 처리하는 코드를 작성합니다.


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

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

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

    @Get()
    findAll(): PostInterface[] {
        return this.postsService.findAll();
    }

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

    @Put(':id')
    update(@Param('id') id: number, @Body() updatePostDto: CreatePostDto): PostInterface {
        return this.postsService.update(id, updatePostDto);
    }

    @Delete(':id')
    delete(@Param('id') id: number): void {
        this.postsService.delete(id);
    }
}

5. Nest.js 애플리케이션 실행하기

모든 코드가 작성되었으면, 애플리케이션을 실행시켜봅니다. 다음 명령어를 입력하여 서버를 실행합니다.

npm run start

브라우저에서 http://localhost:3000/posts를 열면 게시글 API에 접근할 수 있습니다.

6. API 테스트 사용하기

Postman과 같은 API 테스트 도구를 사용하여 다양한 API 요청을 테스트합니다. CRUD 기능을 가지고 입력한 데이터를 확인해보세요.

7. 마무리

이 글에서는 Nest.js를 사용하여 게시글 생성을 위한 RESTful API를 구축하는 과정을 살펴보았습니다. Nest.js의 모듈, 서비스, 컨트롤러를 이용하여 RESTful API를 효율적으로 구성할 수 있습니다. 이 구조를 기반으로 더 복잡한 비즈니스 로직이나 다양한 기능을 추가할 수 있습니다.

특히 Nest.js의 구조적인 접근 방식은 코드의 유지보수성을 높이며, 특히 대규모 애플리케이션에서 그 진가를 발휘합니다. 추가로, Nest.js는 GraphQL, WebSocket, Microservices 등 다양한 소프트웨어 디자인 패턴을 지원하므로 필요에 따라 확장할 수 있는 유연성이 있습니다.

이제 여러분도 Nest.js로 RESTful API를 구축할 수 있는 기초를 다졌습니다. 앞으로 더 많은 기능과 방법론을 탐구해보시기 바랍니다. 감사합니다!

5.Next.js와 Nest.js 기본 프로젝트 구조 만들기, TypeScript 설정과 기본 디렉토리 구성

최근 웹 개발의 트렌드에서 Next.js와 Nest.js는 각각 프론트엔드 및 백엔드 개발에서 매우 인기가 있습니다. Next.js는 React 기반의 프레임워크로 SEO 친화적인 서버 사이드 렌더링(SSR)을 지원하며, Nest.js는 타입스크립트를 사용하여 효율적인 서버 애플리케이션을 구축하는 데 최적화된 프레임워크입니다. 이번 글에서는 Next.js와 Nest.js를 결합하여 기본 프로젝트 구조를 만들고, TypeScript 설정 및 기본적인 디렉토리 구조에 대해 자세히 살펴보겠습니다.

1. Next.js 소개

Next.js는 React 애플리케이션을 위한 강력한 프레임워크로, 다양한 기능을 제공합니다. 다음은 Next.js의 주요 특징입니다:

  • 서버 사이드 렌더링(SSR): SEO와 초기 로딩 성능 향상을 위해 페이지를 서버에서 렌더링합니다.
  • 정적 사이트 생성(SSG): 정적 파일 생성으로 빠른 퍼포먼스를 제공합니다.
  • API 라우트: 간단한 API를 서버에서 구축할 수 있습니다.
  • 자동 코드 분할: 페이지에 필요한 자바스크립트 코드만 로드합니다.

2. Nest.js 소개

Nest.js는 Node.js에서 서버 애플리케이션을 구축하기 위한 프레임워크로, TypeScript를 사용하여 생산성을 높입니다. Nest.js의 특징은 다음과 같습니다:

  • 모듈화: 코드 구조를 개선하고 관리하기 쉽게 합니다.
  • 의존성 주입: 서비스 간의 의존성을 쉽게 관리할 수 있습니다.
  • 확장성: 필요에 따라 모듈을 추가하여 기능을 확장할 수 있습니다.
  • 테스트 용이성: 코드를 단위 테스트하기 쉽게 구조화되어 있습니다.

3. 프로젝트 생성

이제 Next.js와 Nest.js가 설치된 개발 환경을 설정해보겠습니다. 각 프레임워크의 프로젝트를 생성하고 기본적인 디렉토리 구조를 설명하겠습니다.

3.1 Next.js 프로젝트 생성

npx create-next-app@latest my-next-app --typescript

위의 명령어를 터미널에 입력하여 Next.js 프로젝트를 생성합니다. my-next-app은 프로젝트 이름이며, 필요에 따라 변경할 수 있습니다.

3.2 Nest.js 프로젝트 생성

npm i -g @nestjs/cli
nest new my-nest-app

위의 명령어를 사용하여 Nest.js 프로젝트를 생성합니다. my-nest-app이 프로젝트 이름입니다. 안정성을 위해 npm이 아닌 yarn을 사용할 수도 있습니다.

4. TypeScript 설정

Next.js와 Nest.js 두 프로젝트 모두 TypeScript를 사용하여 작성할 수 있습니다. 기본적으로 Next.js에서 TypeScript를 설치하면 tsconfig.json 파일이 생성됩니다. Nest.js도 마찬가지로 기본적으로 TypeScript로 설정되어 있습니다.

4.1 Next.js TypeScript 설정

Next.js는 TypeScript 설정이 이미 포함되어 있으므로, 아래 파일을 수정하거나 추가하여 추가 설정을 할 수 있습니다.

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "baseUrl": "."
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

4.2 Nest.js TypeScript 설정

Nest.js에서는 프로젝트 기본 구성이 TypeScript를 사용하도록 되어 있습니다. tsconfig.json 파일도 기본적으로 다음과 같이 설정되어 있습니다:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "lib": ["es6", "dom"],
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "dist"]
}

5. 기본 디렉토리 구성

Next.js와 Nest.js 프로젝트 각각의 기본 디렉토리 구조를 알아보겠습니다.

5.1 Next.js 기본 디렉토리 구성

Next.js 프로젝트의 기본 디렉토리 구조는 다음과 같습니다:

my-next-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── vercel.svg
│   └── ...
├── src/
│   ├── pages/
│   ├── components/
│   └── styles/
├── .gitignore
├── package.json
├── tsconfig.json
├── next.config.js
└── README.md

각 디렉토리의 역할은 다음과 같습니다:

  • public: 정적 파일을 저장하는 디렉토리입니다. 이미지, 폰트 등 클라이언트에서 직접 접근할 수 있는 파일을 저장합니다.
  • src/pages: Next.js에서 페이지를 정의하는 디렉토리입니다. 각 파일 이름이 URL 경로로 매핑됩니다.
  • src/components: 재사용 가능한 컴포넌트를 정의하는 디렉토리입니다.
  • src/styles: CSS 파일 및 스타일 관련 파일을 저장합니다.
  • next.config.js: Next.js 설정 파일입니다. 필요한 모든 구성 설정을 여기에 추가할 수 있습니다.

5.2 Nest.js 기본 디렉토리 구성

Nest.js 프로젝트의 기본 디렉토리 구조는 다음과 같습니다:

my-nest-app/
├── node_modules/
├── src/
│   ├── app.module.ts
│   ├── app.controller.ts
│   ├── app.service.ts
│   └── main.ts
├── test/
├── .eslintrc.js
├── package.json
├── tsconfig.json
├── jest.config.js
└── README.md

각 디렉토리의 역할은 다음과 같습니다:

  • src: 애플리케이션의 소스 코드가 위치하는 디렉토리입니다.
  • app.module.ts: 애플리케이션의 루트 모듈입니다. 다른 모듈을 불러오고 관리합니다.
  • app.controller.ts: 라우팅과 관련된 요청을 처리하는 컨트롤러입니다.
  • app.service.ts: 비즈니스 로직을 처리하는 서비스입니다.
  • main.ts: 애플리케이션 진입점입니다. 서버를 시작하는 코드가 위치합니다.

6. 결론

이번 글에서는 Next.js와 Nest.js의 기본적인 프로젝트 구조를 설정하고, TypeScript 설정과 기본 디렉토리 구성에 대해 알아보았습니다. 두 프레임워크를 함께 사용하면 강력한 풀스택 애플리케이션을 효과적으로 구축할 수 있습니다. 이러한 기본 구조를 통해 더 나아가 복잡한 애플리케이션을 개발할 수 있으며, 실전에서 유용하게 사용할 수 있을 것입니다.

이제 여러분은 Next.js와 Nest.js를 활용하여 개발을 시작할 준비가 되었습니다! 더 깊이 있는 내용을 원하신다면, 두 프레임워크에 대한 공식 문서 및 추가 강좌를 참고하시기 바랍니다.