풀스택 앱을 만든다는 것은 프론트엔드(Frontend)와 백엔드(Backend)를 모두 개발하여, 웹사이트나 애플리케이션의 모든 기능을 구현하는 것을 의미합니다. 이번 글에서는 풀스택 앱을 만들기 위한 첫 번째 단계로, 기본적인 개념과 기초적인 앱 개발을 시작하는 방법을 소개합니다.
1. 풀스택 앱이란?
풀스택 앱은 사용자 인터페이스(UI)와 서버, 데이터베이스를 모두 다루는 웹 애플리케이션입니다. 다음은 풀스택 개발에서 다루는 주요 기술 스택입니다:
- 프론트엔드(Frontend): 사용자와 상호작용하는 부분으로, HTML, CSS, JavaScript, React.js 또는 Vue.js와 같은 프레임워크가 사용됩니다.
- 백엔드(Backend): 서버, 데이터베이스, 비즈니스 로직을 처리하는 부분으로, Node.js, Python(Django/Flask), Java(Spring), PHP(Laravel) 등이 사용됩니다.
- 데이터베이스: MySQL, MongoDB, PostgreSQL 등 데이터를 저장하고 관리하는 시스템입니다.
2. 개발 환경 설정
먼저 풀스택 앱을 개발하기 위해 필요한 개발 환경을 설정해보겠습니다. 여기서는 Node.js와 Express.js를 이용해 백엔드 서버를 구성하고, React.js로 프론트엔드를 구축하는 기본 예제를 보여드리겠습니다.
2.1 Node.js와 Express 설치 (백엔드)
Node.js는 JavaScript 런타임 환경으로, 서버 측 로직을 구현하는 데 사용할 수 있습니다. Express는 Node.js를 위한 웹 프레임워크로, 간단하게 서버를 구축할 수 있게 해줍니다.
# Node.js 설치 후 Express 설치
npm init -y # 새로운 프로젝트 초기화
npm install express # Express 설치서버 파일 생성:
// server.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('백엔드 서버가 실행 중입니다!');
});
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다');
});2.2 React 설치 (프론트엔드)
React는 프론트엔드 라이브러리로, 동적인 사용자 인터페이스를 쉽게 만들 수 있습니다. create-react-app을 사용하여 빠르게 React 프로젝트를 설정할 수 있습니다.
# React 앱 생성
npx create-react-app my-app
cd my-app
npm start # 개발 서버 시작3. 백엔드 API와 프론트엔드 연결
이제 백엔드와 프론트엔드를 연결하여 데이터를 주고받는 기본적인 작업을 수행해보겠습니다. 이 단계에서는 백엔드 API를 통해 데이터를 가져오고, 프론트엔드에서 이를 사용자에게 보여주는 방법을 다룹니다.
3.1 백엔드 API 구축
우선, 간단한 백엔드 API를 만들어 봅시다. 예제로는 Node.js와 Express를 사용해 JSON 데이터를 반환하는 간단한 API를 만들어 보겠습니다.
// app.js (Node.js 백엔드 API)
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
res.json({ message: '풀스택 앱 데이터' });
});
app.listen(port, () => {
console.log(`서버가 http://localhost:${port}에서 실행 중입니다.`);
});위 코드는 /api/data 경로로 요청이 들어오면 JSON 형식의 데이터를 반환하는 간단한 서버입니다. 브라우저에서 http://localhost:3000/api/data로 접속하면 JSON 데이터를 확인할 수 있습니다.
3.2 프론트엔드에서 API 호출
백엔드에서 제공하는 API 데이터를 프론트엔드에서 받아와 화면에 출력하는 방법을 살펴보겠습니다. 여기서는 React를 예제로 사용해 API 데이터를 가져와 보여주는 방식을 다룹니다.
// App.js (React 프론트엔드)
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
<h1>풀스택 앱 데이터</h1>
{data ? <p>{data.message}</p> : <p>데이터를 불러오는 중...</p>}
</div>
);
}
export default App;이 코드는 /api/data 경로로 fetch 요청을 보내고, 받은 데이터를 화면에 출력합니다. useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 API 호출이 실행됩니다.
4. 데이터베이스와의 연동
풀스택 앱에서 데이터베이스는 핵심적인 역할을 합니다. 데이터를 저장하고 읽어오는 역할을 수행하며, 여기서는 MongoDB를 사용하여 간단한 데이터베이스 연동을 보여드리겠습니다.
4.1 MongoDB와 백엔드 연결
MongoDB를 백엔드에 연결하기 위해 Mongoose 라이브러리를 사용해봅시다.
// app.js (MongoDB와 백엔드 연결)
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;
// MongoDB 연결
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });
// 간단한 데이터 스키마 정의
const DataSchema = new mongoose.Schema({
message: String
});
const Data = mongoose.model('Data', DataSchema);
// 데이터 API
app.get('/api/data', async (req, res) => {
const data = await Data.findOne(); // 데이터베이스에서 첫 번째 데이터를 가져옵니다.
res.json(data);
});
app.listen(port, () => {
console.log(`서버가 http://localhost:${port}에서 실행 중입니다.`);
});
이 코드는 MongoDB와 연결된 백엔드 서버를 설정하고, /api/data 경로로 요청이 들어오면 데이터베이스에서 데이터를 읽어와 반환합니다.
4.2 데이터베이스에 데이터 추가
이제 데이터베이스에 데이터를 직접 추가하는 API를 만들어 봅시다. 이를 통해 클라이언트에서 데이터를 백엔드로 전송하고, 백엔드가 이를 데이터베이스에 저장하는 과정을 구현할 수 있습니다.
// POST 요청을 통해 데이터 추가
app.use(express.json());
app.post('/api/data', async (req, res) => {
const newData = new Data({ message: req.body.message });
await newData.save();
res.status(201).json(newData);
});위 코드에서는 POST 요청을 통해 데이터를 받아 MongoDB에 저장하는 기능을 추가했습니다.
결론
지금까지 우리는 간단한 풀스택 앱을 만드는 과정을 살펴보았습니다. 백엔드 API를 구축하고, 이를 프론트엔드와 연결해 데이터를 주고받는 방법, 그리고 데이터베이스와의 연동까지 다루었습니다. 이러한 기본적인 작업을 통해 더욱 복잡한 풀스택 앱을 개발할 수 있으며, 앞으로 더 고급 기술들을 다루어보겠습니다.
다음 글에서는 사용자 인증, 보안 및 성능 최적화에 대해 다뤄보겠습니다.
