리액트는 현재 가장 인기 있는 프론트엔드 라이브러리 중 하나로, 사용자 인터페이스를 구축하는 데 강력한 기능을 제공합니다. 이 블로그 글에서는 리액트에 대한 기본적인 배경 지식과 함께, 풀스택 애플리케이션을 구축하고 JWT(Json Web Token)를 활용하여 인증 기능을 구현하는 방법을 살펴보겠습니다. 이 글에서는 리액트의 기본 개념부터 시작하여, Express.js를 이용한 백엔드 구축 및 JWT 기반의 인증 시스템 구현까지 단계별로 안내합니다.
1. 리액트란?
리액트는 Facebook에서 개발한 자바스크립트 라이브러리로, UI 구성 요소를 만들고 관리하는 데 최적화되어 있습니다. 리액트의 주요 특징 중 하나는 단방향 데이터 흐름과 가상 DOM입니다. 이를 통해 높은 성능과 효율성을 자랑합니다.
1.1 리액트의 특징
- 컴포넌트 기반: UI를 독립적인 컴포넌트로 나누어 재사용성과 유지 보수성을 높입니다.
- 단방향 데이터 흐름: 데이터가 부모에서 자식 컴포넌트로만 흐르며, 이로 인해 데이터 관리가 용이합니다.
- 가상 DOM: 실제 DOM 조작을 최소화하여 성능을 향상시킵니다.
2. 풀스택 애플리케이션이란?
풀스택 애플리케이션은 프론트엔드와 백엔드를 포함하는 소프트웨어 애플리케이션을 의미합니다. 프론트엔드는 사용자와 상호작용하며, 백엔드는 데이터 처리와 저장을 담당합니다. 이 두 부분이 상호작용하여 사용자에게 원활한 경험을 제공합니다.
3. JWT(Json Web Token)란?
JWT는 JSON 형식으로 정보를 안전하게 전송하기 위한 컴팩트하고 독립적인 방법입니다. JWT는 주로 인증 및 데이터 교환의 목적으로 사용됩니다. 발급자는 JWT를 사용하여 정보를 안전하게 전달하고, 이를 통해 사용자의 신원을 확인할 수 있습니다.
3.1 JWT의 구조
JWT는 크게 세 부분으로 구성됩니다:
- Header: 토큰의 타입과 사용된 알고리즘 정보를 포함합니다.
- Payload: 사용자 관련 정보와 클레임(Claims)을 담고 있습니다.
- Signature: 발급자가 알고리즘을 사용하여 Header와 Payload를 서명한 값입니다.
4. 리액트와 Express를 이용한 애플리케이션 구축하기
이번 섹션에서는 리액트 프론트엔드와 Express 백엔드를 결합하여 애플리케이션을 구축합니다. 간단한 사용자 인증 시스템을 구현하며, 각 단계에서 필요한 코드와 설명을 제공하겠습니다.
4.1 프로젝트 설정
먼저, 리액트와 Express 프로젝트를 설정합니다. 아래는 프로젝트 생성과 기본 디렉토리 구조입니다.
npx create-react-app my-app
mkdir server
cd server
npm init -y
npm install express jsonwebtoken bcryptjs cors dotenv4.2 백엔드 구현
Express를 사용하여 간단한 서버를 구현합니다. 인증 기능을 위한 API 엔드포인트를 설정해 보겠습니다.
const express = require('express');
const app = express();
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const cors = require('cors');
require('dotenv').config();
app.use(cors());
app.use(express.json());
let users = []; // 사용자 데이터 저장소
// 회원가입 API
app.post('/api/register', async (req, res) => {
const { username, password } = req.body;
const hashedPassword = await bcrypt.hash(password, 10);
users.push({ username, password: hashedPassword });
res.status(201).send('User registered');
});
// 로그인 API
app.post('/api/login', async (req, res) => {
const { username, password } = req.body;
const user = users.find(user => user.username === username);
if (!user) return res.status(400).send('User not found');
const isPasswordValid = await bcrypt.compare(password, user.password);
if (!isPasswordValid) return res.status(403).send('Invalid password');
const token = jwt.sign({ username }, process.env.SECRET_KEY, { expiresIn: '1h' });
res.json({ token });
});
// 서버 시작
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));4.3 프론트엔드 구현
리액트 컴포넌트를 사용하여 회원가입 및 로그인 인터페이스를 구현합니다.
import React, { useState } from 'react';
import axios from 'axios';
const App = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [token, setToken] = useState('');
const register = async () => {
await axios.post('http://localhost:5000/api/register', { username, password });
alert('User registered!');
};
const login = async () => {
const response = await axios.post('http://localhost:5000/api/login', { username, password });
setToken(response.data.token);
};
return (
회원가입
setUsername(e.target.value)} placeholder="Username" />
setPassword(e.target.value)} placeholder="Password" />
로그인
{token && 로그인 성공, JWT Token: {token}
}
);
};
export default App;5. JWT 인증을 위한 보호된 라우팅
사용자가 로그인한 후, JWT를 사용하여 보호된 API를 호출할 수 있게 설정합니다. 사용자가 요청할 때마다 인증 토큰을 포함해야 합니다.
app.get('/api/protected', (req, res) => {
const token = req.headers['authorization'];
if (!token) return res.sendStatus(403);
jwt.verify(token.split(' ')[1], process.env.SECRET_KEY, (err, user) => {
if (err) return res.sendStatus(403);
res.send(`Hello ${user.username}`);
});
});6. 결론
이번 글에서는 리액트를 사용하여 풀스택 애플리케이션을 구성하고, JWT를 통해 인증 기능을 구현하는 방법에 대해 알아봤습니다. 리액트와 Express의 조합은 강력하며, JWT를 통해 안전하고 효율적인 사용자 인증이 가능합니다. 이러한 과정을 통해 여러분들의 애플리케이션에 인증 기능을 손쉽게 적용할 수 있습니다. 여기서 배운 기술들은 실제 프로젝트에 적용하여 더욱 발전시킬 수 있습니다.
7. 추가 리소스
추가적으로 학습할 수 있는 자료들을 아래에 정리하였습니다: