작성자: 당신의 이름 | 날짜: 2023년 10월
1. 서론
최근 웹 개발 분야에서 리액트(React)와 익스프레스(Express)는 가장 인기 있는 라이브러리 및 프레임워크로 자리 잡고 있습니다. 리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리인 반면, 익스프레스는 Node.js 환경에서 서버 사이드 애플리케이션을 구축하는 데 유용한 프레임워크입니다. 이 글에서는 리액트와 익스프레스를 사용하는 간단한 풀스택 애플리케이션을 구축하는 과정을 자세히 설명합니다.
우리가 만들 애플리케이션은 사용자로부터 데이터를 입력받고 이를 서버에서 처리하여 다시 클라이언트에 보여주는 기능을 가진 간단한 ‘메모 애플리케이션’입니다.
2. 기본_requirements
2.1 기술 스택
이 프로젝트는 다음과 같은 기술 스택을 사용합니다:
- 리액트(React) – 클라이언트 사이드 UI 라이브러리
- 익스프레스(Express) – Node.js 웹 프레임워크
- MongoDB – NoSQL 데이터베이스
- Mongoose – MongoDB ODM(Object Document Mapper)
- Node.js – JavaScript 런타임 환경
- Postman – API 테스트 도구
2.2 사전 준비
프로젝트를 시작하기 전에 다음 도구들이 설치되어 있어야 합니다:
- Node.js (v12 이상)
- npm 또는 Yarn (패키지 매니저)
- MongoDB (로컬 또는 클라우드 서비스)
- 코드 에디터 (VSCode 추천)
3. 프로젝트 구조 설정
먼저 프로젝트를 생성하고 필요한 패키지를 설치해보겠습니다.
3.1 프로젝트 생성
npx create-react-app memos-app위 명령어를 실행하면 “memos-app”이라는 리액트 애플리케이션이 생성됩니다.
3.2 서버 측 코드 생성
리액트 애플리케이션의 루트 폴더로 이동한 뒤, 서버를 위한 폴더를 생성합니다.
mkdir server && cd server
npm init -y이제 익스프레스와 Mongoose를 설치합니다.
npm install express mongoose cors이제 “server” 폴더 안에 “index.js” 파일을 생성하고 서버의 기본 구성을 작성합니다.
// server/index.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
const PORT = 5000;
// Middleware
app.use(cors());
app.use(express.json());
// MongoDB 연결
mongoose.connect('mongodb://localhost:27017/memos', {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => console.log('MongoDB Connected'))
.catch(err => console.log(err));
app.listen(PORT, () => {
console.log(`서버가 http://localhost:${PORT} 에서 실행 중입니다.`);
});이 코드는 익스프레스 서버를 시작하고 MongoDB에 연결하는 역할을 합니다.
4. 데이터 모델 작성
이제 메모 데이터를 저장하기 위한 Mongoose 모델을 작성하겠습니다.
4.1 메모 모델 생성
// server/models/Memo.js
const mongoose = require('mongoose');
const memoSchema = new mongoose.Schema({
content: {
type: String,
required: true,
},
createdAt: {
type: Date,
default: Date.now,
}
});
module.exports = mongoose.model('Memo', memoSchema);이 모델은 메모의 내용을 담는 ‘content’ 필드와 생성 날짜를 기록하는 ‘createdAt’ 필드를 포함합니다.
5. API 라우팅 설정
이제 API를 통해 메모를 생성하고 조회할 수 있는 라우트를 설정하겠습니다.
5.1 라우터 설정
const Memo = require('./models/Memo');
// 메모 생성
app.post('/api/memos', async (req, res) => {
try {
const memo = new Memo(req.body);
await memo.save();
res.status(201).send(memo);
} catch (error) {
res.status(400).send(error);
}
});
// 모든 메모 조회
app.get('/api/memos', async (req, res) => {
try {
const memos = await Memo.find();
res.status(200).send(memos);
} catch (error) {
res.status(500).send(error);
}
});여기서 우리는 메모 생성과 조회를 위한 POST 및 GET 요청을 처리하는 라우트를 설정하였습니다.
6. 리액트 클라이언트 구현
이제 클라이언트 쪽에서 메모를 입력받고, 생성된 메모를 목록으로 표시할 리액트 컴포넌트를 구현하겠습니다.
6.1 메모 컴포넌트 생성
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MemoApp = () => {
const [memos, setMemos] = useState([]);
const [content, setContent] = useState('');
const fetchMemos = async () => {
const response = await axios.get('http://localhost:5000/api/memos');
setMemos(response.data);
};
const handleSubmit = async (e) => {
e.preventDefault();
const response = await axios.post('http://localhost:5000/api/memos', { content });
setMemos([...memos, response.data]);
setContent('');
};
useEffect(() => {
fetchMemos();
}, []);
return (
메모 애플리케이션
{memos.map((memo) => (
- {memo.content}
))}
);
};
export default MemoApp;위 코드는 사용자가 메모를 입력하고 추가할 수 있는 형태를 제공합니다. 사용자가 제출한 메모는 서버에 전송되어 데이터베이스에 저장되고, 저장된 메모는 목록으로 표시됩니다.
7. 애플리케이션 실행
서버와 클라이언트를 모두 실행해보겠습니다.
7.1 서버 실행
cd server
node index.js서버가 실행되면 http://localhost:5000에서 메모 API를 사용할 수 있습니다.
7.2 클라이언트 실행
cd ../memos-app
npm start클라이언트가 실행되면 http://localhost:3000에서 메모 애플리케이션을 사용할 수 있습니다.
8. 마무리
이제 최소한의 리액트 및 익스프레스 풀스택 애플리케이션이 모두 구성되었습니다. 이 프로젝트를 통해 리액트와 익스프레스 API 간의 상호작용 방법, 프론트엔드와 백엔드 통합, 데이터베이스 연결 등을 배울 수 있었습니다.
추가적으로, 이 애플리케이션을 더 발전시키기 위해 다음과 같은 개선 사항을 고려해 볼 수 있습니다:
- 메모 수정 및 삭제 기능 추가
- 사용자 인증 기능 추가
- 메모에 대한 태그 기능 추가
- 리액트 라우터를 사용하여 페이지 분할
이러한 기능들은 여러분의 풀스택 애플리케이션을 더욱 매력적으로 만들어줄 것입니다. 이제 여러분의 차례입니다! 원하는 기능을 추가하고 개인 프로젝트로 발전시켜 보세요.