CRUD 작업과 사용자 인증을 이해하기 위한 작업 관리 애플리케이션 만들기

CRUD 작업과 사용자 인증을 이해하기 위한 작업 관리 애플리케이션 만들기

Overview

작업 관리 애플리케이션은 일상적인 작업을 효과적으로 관리할 수 있는 도구입니다. 이 애플리케이션을 개발함으로써, CRUD(생성, 읽기, 업데이트, 삭제) 작업과 사용자 인증의 기초를 이해할 수 있습니다. 이 과정에서는 사용자의 등록과 로그인 기능을 포함한 작업 관리 애플리케이션을 구축하는 방법을 다루겠습니다. 단계별로 설명하고, 코드 예시와 함께 실제 구현 방법을 제시하겠습니다.

1. 요구사항 분석

작업 관리 애플리케이션의 기본 기능은 다음과 같습니다:

• 작업 생성: 사용자가 새 작업을 추가할 수 있어야 합니다.
• 작업 조회: 사용자가 자신의 작업 목록을 조회할 수 있어야 합니다.
• 작업 업데이트: 사용자가 기존 작업의 정보를 수정할 수 있어야 합니다.
• 작업 삭제: 사용자가 특정 작업을 삭제할 수 있어야 합니다.
• 사용자 인증: 사용자가 계정을 생성하고 로그인할 수 있어야 합니다.

이 애플리케이션은 다음의 기술 스택을 사용할 것입니다:

• 백엔드: Node.js와 Express.js
• 데이터베이스: MongoDB
• 프론트엔드: React.js
• 사용자 인증: JWT(Json Web Token)

2. 백엔드 설정

2.1 프로젝트 초기화

먼저 Node.js와 Express.js를 사용하여 프로젝트를 초기화합니다.

mkdir task-manager
cd task-manager
npm init -y
npm install express mongoose jwt-simple bcryptjs

• express는 Node.js 웹 애플리케이션 프레임워크입니다.
• mongoose는 MongoDB와의 상호작용을 위한 ODM(Object Data Modeling) 라이브러리입니다.
• jwt-simple은 JWT를 생성하고 검증하기 위한 라이브러리입니다.
• bcryptjs는 비밀번호 해싱을 위한 라이브러리입니다.

2.2 서버 설정

서버를 설정하고 기본적인 라우터를 추가합니다. server.js 파일을 다음과 같이 작성합니다:

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const app = express();

// MongoDB 연결
mongoose.connect('mongodb://localhost:27017/task-manager', { useNewUrlParser: true, useUnifiedTopology: true });

app.use(bodyParser.json());

// 기본 라우트
app.get('/', (req, res) => {
  res.send('Task Manager API');
});

// 서버 시작
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

이 코드는 Express 서버를 설정하고 MongoDB에 연결하며, JSON 형태의 요청 본문을 파싱합니다.

3. 데이터베이스 모델 설계

3.1 사용자 모델

사용자 모델을 정의합니다. models/User.js 파일을 다음과 같이 작성합니다:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const UserSchema = new Schema({
  username: { type: String, required: true, unique: true },
  password: { type: String, required: true }
});

module.exports = mongoose.model('User', UserSchema);

3.2 작업 모델

작업 모델을 정의합니다. models/Task.js 파일을 다음과 같이 작성합니다:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const TaskSchema = new Schema({
  title: { type: String, required: true },
  description: { type: String },
  completed: { type: Boolean, default: false },
  user: { type: Schema.Types.ObjectId, ref: 'User', required: true }
});

module.exports = mongoose.model('Task', TaskSchema);

4. 사용자 인증 구현

4.1 사용자 등록

사용자 등록을 위한 API를 구현합니다. routes/auth.js 파일을 작성합니다:

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jwt-simple');
const User = require('../models/User');
const router = express.Router();

const SECRET_KEY = 'your_secret_key';

// 사용자 등록
router.post('/register', async (req, res) => {
  try {
    const { username, password } = req.body;

    // 비밀번호 해싱
    const hashedPassword = await bcrypt.hash(password, 10);

    // 사용자 생성
    const user = new User({ username, password: hashedPassword });
    await user.save();

    res.status(201).send('User registered');
  } catch (error) {
    res.status(400).send('Error registering user');
  }
});

// 사용자 로그인
router.post('/login', async (req, res) => {
  try {
    const { username, password } = req.body;
    const user = await User.findOne({ username });

    if (!user || !(await bcrypt.compare(password, user.password))) {
      return res.status(401).send('Invalid credentials');
    }

    const token = jwt.encode({ id: user._id }, SECRET_KEY);
    res.json({ token });
  } catch (error) {
    res.status(400).send('Error logging in');
  }
});

module.exports = router;

4.2 JWT 인증 미들웨어

JWT를 검증하는 미들웨어를 작성합니다. middleware/auth.js 파일을 작성합니다:

const jwt = require('jwt-simple');
const SECRET_KEY = 'your_secret_key';

module.exports = (req, res, next) => {
  const token = req.headers['authorization'];

  if (!token) return res.status(401).send('No token provided');

  try {
    const decoded = jwt.decode(token, SECRET_KEY);
    req.userId = decoded.id;
    next();
  } catch (error) {
    res.status(401).send('Invalid token');
  }
};

5. CRUD 작업 구현

5.1 작업 생성

작업을 생성하는 API를 구현합니다. routes/tasks.js 파일을 작성합니다:

const express = require('express');
const Task = require('../models/Task');
const auth = require('../middleware/auth');
const router = express.Router();

// 작업 생성
router.post('/', auth, async (req, res) => {
  try {
    const { title, description } = req.body;

    const task = new Task({
      title,
      description,
      user: req.userId
    });

    await task.save();
    res.status(201).send(task);
  } catch (error) {
    res.status(400).send('Error creating task');
  }
});

module.exports = router;

5.2 작업 조회

작업 목록을 조회하는 API를 구현합니다:

// 작업 목록 조회
router.get('/', auth, async (req, res) => {
  try {
    const tasks = await Task.find({ user: req.userId });
    res.json(tasks);
  } catch (error) {
    res.status(400).send('Error retrieving tasks');
  }
});

5.3 작업 업데이트

작업을 업데이트하는 API를 구현합니다:

// 작업 업데이트
router.put('/:id', auth, async (req, res) => {
  try {
    const { id } = req.params;
    const { title, description, completed } = req.body;

    const task = await Task.findOneAndUpdate(
      { _id: id, user: req.userId },
      { title, description, completed },
      { new: true }
      );

    if (!task) return res.status(404).send('Task not found');
    res.json(task);
  } catch (error) {
    res.status(400).send('Error updating task');
  }
});

5.4 작업 삭제

작업을 삭제하는 API를 구현합니다:

// 작업 삭제
router.delete('/:id', auth, async (req, res) => {
  try {
    const { id } = req.params;

    const task = await Task.findOneAndDelete({ _id: id, user: req.userId });

    if (!task) return res.status(404).send('Task not found');
    res.send('Task deleted');
  } catch (error) {
    res.status(400).send('Error deleting task');
  }
});

6. 프론트엔드 구현

React를 사용하여 프론트엔드를 구현합니다. 이 부분에서는 사용자 등록과 로그인을 위한 기본 폼을 만들고, 작업 목록을 조회하고 추가하는 기능을 구현할 것입니다.

6.1 사용자 등록 및 로그인 폼

간단한 사용자 등록 폼을 작성합니다:

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

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

const handleRegister = async (e) => {
e.preventDefault();
try {
await axios.post('/api/auth/register', { username, password });
alert('User registered');
} catch (error) {
alert('Error registering user');
}
};

return (
<form onSubmit={handleRegister}>
<input
type="text"
value={username}
onChange={(