웹 개발에서 사용자 인증은 필수적인 요소입니다. 사용자가 안전하게 시스템에 접근할 수 있도록 하고, 개인정보를 보호하는 것이 매우 중요하다. 이번 강좌에서는 Next.js와 Nest.js를 사용하여 사용자 인증을 구현하는 방법을 자세히 살펴보겠습니다.

1. 프로젝트 설정

사용자 인증 시스템을 구현하기 위해 두 가지 프레임워크인 Next.js와 Nest.js를 사용할 것입니다. Next.js는 프론트엔드 프레임워크로 서버 사이드 렌더링(SSR)과 정적 웹사이트 생성을 지원합니다. 반면 Nest.js는 Node.js 기반의 백엔드 프레임워크로, 현대적인 서버 애플리케이션을 구축하는 데 적합합니다.

1.1 Nest.js 초기 설정

npm i -g @nestjs/cli
nest new backend
cd backend
npm install @nestjs/passport passport passport-local @types/passport-local bcrypt @types/bcrypt
npm install --save @nestjs/jwt passport-jwt @types/passport-jwt

1.2 Next.js 초기 설정

npx create-next-app frontend
cd frontend
npm install axios

2. Nest.js에서 사용자 인증 API 구현

Nest.js에서는 사용자 인증을 구현하기 위해 Passport.js와 JWT(JSON Web Token)를 사용할 것입니다.

2.1 User 엔티티 생성

먼저 User 엔티티를 생성합니다. 다음은 user.entity.ts 파일의 코드입니다.

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

@Entity()
export class User {
    @PrimaryGeneratedColumn()
    id: number;

    @Column({ unique: true })
    email: string;

    @Column()
    password: string;
}

2.2 UserService 및 UserModule 생성

import { Injectable } from '@nestjs/common';
import { User } from './user.entity';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import * as bcrypt from 'bcrypt';

@Injectable()
export class UserService {
    constructor(
        @InjectRepository(User)
        private userRepository: Repository,
    ) {}

    async create(userDto: { email: string; password: string }): Promise {
        const hashedPassword = await bcrypt.hash(userDto.password, 10);
        const user = this.userRepository.create({ ...userDto, password: hashedPassword });
        return this.userRepository.save(user);
    }

    async findByEmail(email: string): Promise {
        return this.userRepository.findOne({ where: { email } });
    }
}

2.3 AuthModule 및 AuthService 생성

import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';
import { JwtModule } from '@nestjs/jwt';
import { AuthService } from './auth.service';
import { LocalStrategy } from './local.strategy';
import { UsersModule } from '../users/users.module';

@Module({
    imports: [
        UsersModule,
        PassportModule,
        JwtModule.register({
            secret: 'SECRET_KEY', // 비밀키 설정
            signOptions: { expiresIn: '60s' }, // 토큰 유효 시간 설정
        }),
    ],
    providers: [AuthService, LocalStrategy],
})
export class AuthModule {}

2.4 로그인 및 회원가입 API 엔드포인트 추가

import { Controller, Post, Body, Req } from '@nestjs/common';
import { AuthService } from './auth.service';

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

    @Post('register')
    async register(@Body() userDto: { email: string; password: string }) {
        return this.authService.register(userDto);
    }

    @Post('login')
    async login(@Body() userDto: { email: string; password: string }) {
        return this.authService.login(userDto);
    }
}

3. Next.js의 사용자 인증 UI 구현하기

Next.js에서는 사용자 인증을 위한 로그인 및 회원가입 폼을 구현합니다. 사용자 입력을 처리하여 Nest.js 백엔드로 요청을 보내도록 합니다.

3.1 로그인 페이지 구현

import axios from 'axios';
import { useState } from 'react';

const Login = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        const response = await axios.post('/api/auth/login', { email, password });
        // 로그인 성공 시 처리
    };

    return (
        

             setEmail(e.target.value)} placeholder="Email" />
             setPassword(e.target.value)} placeholder="Password" />
            로그인
        
    );
};

export default Login;

3.2 회원가입 페이지 구현

import axios from 'axios';
import { useState } from 'react';

const Register = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        const response = await axios.post('/api/auth/register', { email, password });
        // 회원가입 성공 시 처리
    };

    return (
        

             setEmail(e.target.value)} placeholder="Email" />
             setPassword(e.target.value)} placeholder="Password" />
            회원가입
        
    );
};

export default Register;

4. 사용자 인증 상태 관리

로그인 이후에는 사용자의 인증 상태를 관리해야 합니다. Next.js에서는 Context API 또는 Redux와 같은 상태 관리 라이브러리를 활용할 수 있습니다.

4.1 Context API를 사용한 상태 관리

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    const login = (userData) => setUser(userData);
    const logout = () => setUser(null);

    return (
        
            {children}
        
    );
};

export const useAuth = () => useContext(AuthContext);

5. 마무리

이번 강좌에서는 Next.js와 Nest.js를 사용하여 사용자 인증 시스템을 구현하는 방법을 살펴보았습니다. 우리는 로그인, 회원가입, 로그아웃 API를 생성하고 프론트엔드에서는 사용자 인터페이스를 구성했습니다.

사용자 인증은 웹 애플리케이션에서 매우 중요한 기능입니다. 이를 통해 사용자의 개인정보와 데이터 안전성을 높일 수 있습니다. 추가적으로 JWT를 사용하여 인증 상태를 유지하고, Refresh Token과 같은 기능을 구현하면 더욱 안전한 인증 시스템을 만들 수 있습니다.

앞으로 이 시스템에 추가할 수 있는 기능들로는 비밀번호 찾기, OAuth 인증(구글, 페이스북 등), 사용자 권한 관리 등이 있습니다. 이러한 기능들을 통해 더 강력하고 유용한 인증 시스템으로 발전시킬 수 있습니다.

이번 강좌에서는 Nest.js와 Next.js를 활용하여 실시간 통신을 구현하는 방법에 대해 설명하겠습니다. 웹소켓(WebSocket)은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 이를 통해 정보를 실시간으로 주고 받을 수 있으며, 특히 채팅 애플리케이션, 실시간 대시보드 등과 같은 응용 프로그램에서 유용합니다.

1. 웹소켓의 기초 이해

웹소켓은 HTTP 기반의 통신 채널로, 매번 연결을 새로 여는 대신에 한 번 연결된 이후로 지속적인 연결을 유지하여 양방향 통신을 가능하게 합니다. 이로 인해 클라이언트와 서버 간의 데이터 전송 속도가 빨라지고, 불필요한 오버헤드가 줄어드는 장점이 있습니다.

1.1 웹소켓의 동작 구조

1. 클라이언트가 WebSocket 서버에 연결 요청.
2. 서버는 요청을 수락하여 연결을 완성.
3. 클라이언트와 서버가 연결된 후 양방향으로 데이터 전송.
4. 클라이언트 또는 서버가 연결을 종료.

2. Nest.js에서 웹소켓 구현하기

Nest.js는 Node.js를 위한 프레임워크로, 웹소켓을 쉽게 구현할 수 있도록 도와주는 ‘socket.io’ 패키지를 지원합니다. 먼저 Nest.js 프로젝트를 생성하고 필요한 패키지를 설치하는 방법을 알아보겠습니다.

2.1 Nest.js 프로젝트 생성

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

2.2 필요한 패키지 설치

웹소켓 기능을 사용하기 위해 socket.io와 관련 패키지를 설치합니다:

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

2.3 웹소켓 모듈 생성

웹소켓을 구현하기 위해 새로운 모듈과 서비스를 생성합니다:

nest g module chat
nest g service chat
nest g gateway chat

2.4 웹소켓 게이트웨이 구현

생성된 chat.gateway.ts 파일을 다음과 같이 수정하여 웹소켓 기능을 구현합니다:

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

@WebSocketGateway()
export class ChatGateway {
  @WebSocketServer() server: Server;

  @SubscribeMessage('message')
  handleMessage(client: any, payload: { sender: string; content: string }): void {
    this.server.emit('message', payload);
  }
}

2.5 서비스에 로직 추가

chat.service.ts에 비즈니스 로직을 추가하여 더 복잡한 기능을 구현할 수 있습니다. 예를 들어, 사용자 목록 관리, 메시지 저장 등을 추가할 수 있습니다.

3. Next.js에서 웹소켓 클라이언트 구현하기

Next.js에서는 브라우저에서 웹소켓 서버와 통신하는 클라이언트를 쉽게 생성할 수 있습니다. socket.io-client 패키지를 사용하면 기존의 socket.io 서버와 쉽게 연결할 수 있습니다.

3.1 Next.js 프로젝트 생성

npx create-next-app websocket-client
cd websocket-client
npm install socket.io-client

3.2 웹소켓 클라이언트 구현

Next.js의 pages/index.tsx 파일을 수정하여 웹소켓 연결을 구현합니다:

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

const socket = io('http://localhost:3000'); // Nest.js 서버의 주소

export default function Home() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

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

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

  const sendMessage = () => {
    socket.emit('message', { sender: 'User', content: input });
    setInput('');
  };

  return (
    

      
WebSocket Chat
      

        {messages.map((msg, index) => (
          
{msg.sender}: {msg.content}
        ))}
      
       setInput(e.target.value)}
        placeholder="Type a message"
      />
      Send
    
  );
}

4. Nest.js와 Next.js 연결하기

Nest.js 서버를 실행하고 Next.js 클라이언트를 통해 연결하면, 클라이언트가 Nest.js 서버와 실시간으로 메시지를 주고받을 수 있습니다. 이를 통해 간단한 채팅 애플리케이션을 구현할 수 있습니다.

4.1 Nest.js 서버 실행

npm run start

4.2 Next.js 클라이언트 실행

npm run dev

브라우저에서 http://localhost:3000에 접속하면 웹소켓 클라이언트가 실행되고, 다른 브라우저에서 같은 주소로 접속하여 메시지를 주고받는 실시간 통신이 가능해집니다.

5. 결론

Nest.js와 Next.js를 활용하여 간단한 웹소켓 기반의 실시간 통신 애플리케이션을 만들 수 있었습니다. 웹소켓은 실시간 데이터를 전달하는데 매우 유용하며, 다양한 분야에서 활용될 수 있습니다. 본 강좌를 통해 여러분이 웹소켓의 기초를 이해하고, Nest.js와 Next.js에서 쉽게 구현할 수 있는 방법을 배울 수 있었기를 바랍니다.

6. 추가적인 학습 자료

• Nest.js 공식 문서
• Next.js 공식 문서
• Socket.IO 공식 문서
• MDN WebSockets API

이번 포스트에서는 Next.js와 Nest.js를 이용하여 기본 프로젝트 구조를 만드는 방법에 대해 자세히 알아보겠습니다. JavaScript와 TypeScript를 사용하는 프레임워크인 이들 두 가지는 웹 개발에서 인기가 높습니다. Next.js는 React 기반의 프레임워크로, 탁월한 SSR(Server-Side Rendering)과 정적 페이지 생성을 지원하며, Nest.js는 Angular에서 영감을 받아 집약된 구조로 웹 애플리케이션을 구축하는 강력한 서버 사이드 프레임워크입니다. 이 두 가지 프레임워크를 결합하여 전체 스택 애플리케이션을 구축할 때 고려해야 할 기본적인 폴더 구조에 대해 알아보겠습니다.

1. 프로젝트 생성

먼저 Next.js와 Nest.js 프로젝트를 생성합니다. 각 프레임워크별로 CLI(Command Line Interface)를 통해 쉽게 프로젝트를 설정할 수 있습니다.

1.1 Next.js 프로젝트 생성

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

위의 명령어를 실행하면 my-next-app이라는 이름의 새 Next.js 프로젝트가 생성됩니다. 생성된 폴더로 이동합니다.

cd my-next-app

1.2 Nest.js 프로젝트 생성

npm i -g @nestjs/cli

위의 명령어로 Nest CLI를 설치한 후, 아래와 같이 새로운 Nest.js 프로젝트를 생성합니다.

nest new my-nest-app

생성된 폴더로 이동합니다.

cd my-nest-app

2. 기본 폴더 구조 이해

각 프레임워크의 기본 폴더 구조를 알아보겠습니다. 특정한 폴더 구조는 프로젝트의 유지 관리 및 확장성을 높이는 데 도움이 됩니다.

2.1 Next.js 기본 폴더 구조

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

my-next-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── vercel.svg
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
└── package.json

• node_modules: 프로젝트에서 사용하는 모든 의존성이 설치되는 디렉토리입니다.
• public: 정적 파일을 저장하는 곳으로, 예를 들어 이미지나 글꼴을 저장합니다.
• styles: CSS 파일을 저장하는 폴더로, 각 컴포넌트에 대한 스타일을 정의할 수 있습니다.
• pages: Next.js의 라우팅을 담당하는 폴더로, api 폴더 안에는 API 라우트가 포함됩니다. 또한 _app.js는 애플리케이션의 레이아웃을 정의하는 데 사용됩니다.
• package.json: 프로젝트의 메타데이터 및 스크립트, 의존성을 정의하는 파일입니다.

2.2 Nest.js 기본 폴더 구조

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

my-nest-app/
├── src/
│   ├── app.module.ts
│   ├── app.controller.ts
│   ├── app.service.ts
└── package.json

• src: 애플리케이션의 소스 코드가 포함되는 폴더입니다. 기본적으로 app.module.ts, app.controller.ts, app.service.ts 파일이 생성됩니다.
• app.module.ts: 루트 모듈로, 애플리케이션의 구성 요소를 가져오고 종합합니다.
• app.controller.ts: 클라이언트의 요청을 처리하는 컨트롤러입니다.
• app.service.ts: 비즈니스 로직을 구현하는 서비스입니다.
• package.json: 의존성 관리 및 빌드 스크립트가 포함됩니다.

3. Next.js와 Nest.js 연결하기

Next.js와 Nest.js를 모두 설치한 후, 이 두 가지를 연결하여 전체 스택 애플리케이션을 만드는 과정에 대해 설명하겠습니다.

3.1 Nest.js API 개발

우선 Nest.js를 사용하여 API를 개발합니다. 여기에 간단한 사용자 정보를 관리하는 API를 만들어 보겠습니다. app.controller.ts 파일을 다음과 같이 수정하겠습니다.

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

@Controller('users')
export class AppController {
    @Get()
    findAll(): string {
        return '사용자 리스트';
    }
}

3.2 Next.js에서 API 사용하기

이제 Next.js에서 위에서 만든 Nest.js API를 호출해봅시다. pages/index.js 파일을 다음과 같이 수정합니다.

import { useEffect, useState } from 'react';

export default function Home() {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetch('/api/users')
            .then((response) => response.json())
            .then((data) => setUsers(data));
    }, []);

    return (
        

            
사용자 리스트
            

                {users.map((user) => (
                    
{user.name}
                ))}
            
        
    );
}

4. 결론

Next.js와 Nest.js의 기본 프로젝트 구조 및 폴더 구조에 대해 알아보았습니다. 이러한 구조는 애플리케이션의 유지 관리를 더 쉽게 만들고, 개발자들이 더 나은 협업을 할 수 있도록 도와줍니다. 또한, 이번 포스트는 Next.js와 Nest.js를 연동하여 API를 호출하는 방법도 간단히 보여 주었습니다. 이 두 기술 스택을 이용해 다양한 웹 애플리케이션을 개발할 수 있으니, 앞으로 더 많은 기능을 추가해 보세요. 감사합니다!