풀스택 개발 프로젝트 – 첫 번째 간단한 웹 애플리케이션 만들기

byCode Keeper •
풀스택 개발자는 프론트엔드와 백엔드 모두를 다루는 개발자로서, 다양한 기술을 사용하여 웹 애플리케이션을 구축할 수 있습니다. 

프로젝트 개요


이번 프로젝트에서는 간단한 할 일 목록(To-Do List) 웹 애플리케이션을 만들어보겠습니다. 이 애플리케이션은 사용자가 할 일을 추가하고, 목록을 확인하며, 완료된 할 일을 삭제할 수 있는 기능을 제공합니다.


사용 기술


  • 프론트엔드: HTML, CSS, JavaScript, React
  • 백엔드: Node.js, Express
  • 데이터베이스: MongoDB

프로젝트 설정


1. 프로젝트 디렉토리 구조


먼저 프로젝트 디렉토리를 설정합니다. 터미널에서 다음 명령어를 실행합니다:


mkdir todo-app
cd todo-app

2. 프론트엔드 설정


React를 사용하여 프론트엔드를 설정합니다. create-react-app 도구를 사용하여 React 애플리케이션을 생성합니다.


npx create-react-app client

3. 백엔드 설정


Node.js와 Express를 사용하여 백엔드를 설정합니다. 프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다:


mkdir server
cd server
npm init -y
npm install express mongoose cors

프론트엔드 구현


프론트엔드에서는 React를 사용하여 사용자 인터페이스를 구축합니다. 할 일을 추가하고, 목록을 표시하며, 삭제하는 기능을 구현합니다.


1. React 컴포넌트 만들기


client/src 디렉토리에서 components 폴더를 만들고, 필요한 컴포넌트를 생성합니다.


App.js


App.js 파일을 열고 다음과 같이 수정합니다:


import React, { useState, useEffect } from 'react';
import axios from 'axios';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

const App = () => {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/todos')
      .then(response => setTodos(response.data))
      .catch(error => console.error('Error fetching todos:', error));
  }, []);

  const addTodo = (newTodo) => {
    axios.post('http://localhost:5000/todos', newTodo)
      .then(response => setTodos([...todos, response.data]))
      .catch(error => console.error('Error adding todo:', error));
  };

  const deleteTodo = (id) => {
    axios.delete(`http://localhost:5000/todos/${id}`)
      .then(() => setTodos(todos.filter(todo => todo._id !== id)))
      .catch(error => console.error('Error deleting todo:', error));
  };

  return (
    <div className="App">
      <h1>To-Do List</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} deleteTodo={deleteTodo} />
    </div>
  );
};

export default App;

TodoForm.js


components/TodoForm.js 파일을 만들고 다음 코드를 작성합니다:


import React, { useState } from 'react';

const TodoForm = ({ addTodo }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text) return;
    addTodo({ text });
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="할 일을 입력하세요..."
      />
      <button type="submit">추가</button>
    </form>
  );
};

export default TodoForm;

TodoList.js


components/TodoList.js 파일을 만들고 다음 코드를 작성합니다:


import React from 'react';

const TodoList = ({ todos, deleteTodo }) => {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo._id}>
          {todo.text}
          <button onClick={() => deleteTodo(todo._id)}>삭제</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

백엔드 구현


백엔드에서는 Node.js와 Express를 사용하여 API 서버를 구축하고, MongoDB를 사용하여 데이터를 저장합니다.


1. 서버 설정


server 디렉토리에서 index.js 파일을 만들고 다음 코드를 작성합니다:


const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/todo-app', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('MongoDB connected');
});

const todoSchema = new mongoose.Schema({
  text: String
});

const Todo = mongoose.model('Todo', todoSchema);

app.get('/todos', async (req, res) => {
  const todos = await Todo.find();
  res.json(todos);
});

app.post('/todos', async (req, res) => {
  const newTodo = new Todo({
    text: req.body.text
  });
  const savedTodo = await newTodo.save();
  res.json(savedTodo);
});

app.delete('/todos/:id', async (req, res) => {
  await Todo.findByIdAndDelete(req.params.id);
  res.json({ message: 'Todo deleted' });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

2. MongoDB 설정


MongoDB가 설치되어 있지 않다면 MongoDB 공식 웹사이트에서 설치합니다. 설치 후, MongoDB 서버를 시작합니다:


mongod

프론트엔드와 백엔드 연결


이제 프론트엔드와 백엔드를 연결하여 전체 애플리케이션을 완성합니다. 프론트엔드에서 Axios를 사용하여 백엔드 API에 요청을 보내고, 데이터를 받아와서 렌더링합니다.


1. Axios 설치


React 프로젝트 루트 디렉토리에서 Axios를 설치합니다:


npm install axios

2. CORS 설정


백엔드에서 CORS(Cross-Origin Resource Sharing)를 설정하여, 프론트엔드에서 백엔드로의 요청을 허용합니다. 이는 index.js 파일의 app.use(cors()) 부분에서 설정되었습니다.


3. 전체 코드 통합


프론트엔드와 백엔드가 모두 설정되었으므로, 애플리케이션을 실행하여 작동을 확인합니다.


  • 프론트엔드 서버 실행:
    cd client
npm start

  • 백엔드 서버 실행:
    cd ../server
node index.js

브라우저에서 http://localhost:3000을 열어 애플리케이션이 정상적으로 작동하는지 확인합니다. 할 일을 추가하고, 목록을 확인하며, 삭제할 수 있어야 합니다.


결론


이번 포스팅에서는 풀스택 개발의 기본 개념을 이해하고, 첫 번째 간단한 웹 애플리케이션을 만드는 과정을 살펴보았습니다. React를 사용한 프론트엔드와 Node.js, Express, MongoDB를 사용한 백엔드를 구축하여 할 일 목록 애플리케이션을 완성했습니다. 이 프로젝트를 통해 풀스택 개발의 기초를 다지고, 앞으로 더 복잡한 프로젝트를 진행하는 데 필요한 기본 기술을 익힐 수 있을 것입니다.

이 포스팅이 풀스택 개발을 시작하는 데 도움이 되길 바랍니다. 질문이나 추가 정보가 필요하시면 언제든지 댓글로 남겨주세요.

Tags:
다음 이전