project/웹 개발 기초부터 실무까지

웹 개발 기초부터 실무까지#5-백엔드 기초

octo54 2025. 2. 21. 11:14
반응형

아래 글은 “웹 개발 기초부터 실무까지” 시리즈의 다섯 번째 글입니다. 이번 글에서는 백엔드 기초를 다뤄보겠습니다. 웹 서비스 전반을 이해하기 위해서는 서버, 데이터베이스, API 설계 개념이 필수적이죠. 프론트엔드(React, Vue, Angular 등)와 달리 실제 요청을 처리하고 데이터를 관리하는 백엔드 영역이 어떻게 구성되는지 알아보겠습니다.

1. 백엔드란?

1-1. 클라이언트와 서버

  • 클라이언트(사용자의 웹 브라우저)에서 요청(Request)을 보내면, 서버가 해당 요청을 처리하고 응답(Response)을 반환
  • 백엔드는 주로 서버 로직(비즈니스 로직)과 데이터베이스 연동을 담당하며, API를 통해 프론트엔드와 소통

1-2. 서버(서버 애플리케이션)의 역할

  1. 요청 분석: HTTP 메서드(GET, POST, PUT, DELETE 등), URL, 요청 파라미터/바디를 확인
  2. 비즈니스 로직 처리: 인증/인가, 데이터 검증, 파일 처리 등
  3. 데이터베이스 연동: 데이터를 읽고/쓰는 작업
  4. 응답 생성: 요청에 맞춰 적절한 형식(JSON, HTML 등)으로 결과 반환

2. 서버 환경과 주요 프레임워크

2-1. Node.js

  • Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 런타임 환경
  • 자바스크립트로 백엔드 개발을 할 수 있으며, 싱글 스레드 이벤트 루프 구조를 특징으로 함
  • 대표 프레임워크: Express, NestJS 등

Express 간단 예시

npm init -y
npm install express

// index.js
const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello, Express!");
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
  • app.get()으로 라우팅을 정의하고, 서버가 요청에 어떻게 응답할지를 결정
  • app.listen()으로 서버 실행

2-2. Python

  • Flask, Django 등이 대표 프레임워크
    • Flask: 간단하고 유연성이 높아 소규모 프로젝트나 프로토타이핑에 적합
    • Django: MTV(Model-Template-View) 아키텍처 기반으로, 대규모 서비스에 잘 맞음

2-3. Java

  • Spring Boot 프레임워크가 유명
  • 다양한 엔터프라이즈급 기능(보안, 트랜잭션 관리, 데이터 연결 등)을 제공하며, 대규모 프로젝트에서 많이 사용

2-4. 기타

  • PHP(Laravel), Ruby(Ruby on Rails), Go(Gin, Echo) 등 다양한 언어와 프레임워크가 존재
  • 선택 기준: 팀 역량, 프로젝트 규모, 요구사항, 커뮤니티 지원 등을 종합 고려

3. 데이터베이스(Database)

3-1. 관계형 데이터베이스(RDB)

  • MySQL, PostgreSQL, Oracle, MSSQL 등이 대표적
  • 테이블(표) 기반 구조, SQL(Structured Query Language)로 데이터 조회·삽입·수정·삭제
  • **정규화(Normalization)**를 통해 중복 데이터를 최소화하고 무결성을 유지

3-2. NoSQL

  • MongoDB, Redis, Cassandra 등
  • 문서(Document) 기반, 키-값(Key-Value) 기반, 그래프(neo4j) 기반 등 다양한 형태
  • 스키마가 유연하고, 대규모 분산 처리에 적합

3-3. 데이터베이스 연동 예시(Express + MongoDB)

npm install mongoose

// db.js
const mongoose = require("mongoose");

mongoose
  .connect("mongodb://localhost:27017/mydb", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB connected"))
  .catch((err) => console.error("MongoDB connection error:", err));
  • Mongoose: Node.js 환경에서 MongoDB를 쉽게 다룰 수 있도록 도와주는 ODM(Object Data Modeling) 라이브러리

4. API 설계

4-1. REST API 개념

  • REST(Representational State Transfer): 웹의 기본 구성 요소인 HTTP 메서드와 URL를 활용해 자원(Resource)을 정의하고 조작
  • 자원: 예) users, posts, comments 등
  • HTTP 메서드: GET(조회), POST(생성), PUT(수정), DELETE(삭제)
  • 예) GET /api/users → 모든 사용자 조회
    POST /api/users → 사용자 생성

4-2. REST API 설계 시 고려사항

  1. 명확한 URL: GET /api/users/123/posts/45처럼 어떤 자원을 다루는지 직관적으로 표현
  2. 에러 처리: 상황에 맞는 HTTP 상태 코드(400, 404, 500 등)와 에러 메시지 전달
  3. 보안: 토큰 인증(JWT), OAuth 등으로 접근 권한을 제어
  4. 버저닝: /api/v1, /api/v2 등으로 API 버전을 관리해 호환성 유지

4-3. 간단한 REST API 예시 (Express)

// routes/user.js
const express = require("express");
const router = express.Router();

let users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];

// 모든 사용자 조회
router.get("/", (req, res) => {
  res.json(users);
});

// 사용자 생성
router.post("/", (req, res) => {
  const newUser = { id: Date.now(), name: req.body.name };
  users.push(newUser);
  res.status(201).json(newUser);
});

// 단일 사용자 조회
router.get("/:id", (req, res) => {
  const user = users.find((u) => u.id === parseInt(req.params.id, 10));
  if (!user) return res.status(404).json({ error: "User not found" });
  res.json(user);
});

module.exports = router;

// index.js (Server entry point)
const express = require("express");
const app = express();
const port = 3000;
const userRouter = require("./routes/user");

app.use(express.json()); // JSON 바디 파싱
app.use("/api/users", userRouter);

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
  • app.use(express.json())로 JSON 형식의 요청 바디(body)를 파싱
  • app.use("/api/users", userRouter)로 /api/users 경로 관련 요청을 userRouter가 처리

5. 마무리 및 다음 글 예고

이번 글에서는 백엔드 기초 개념과 서버 환경, 데이터베이스 연동, 그리고 API 설계 방법을 간단히 살펴봤습니다. 웹 개발 전반을 이해하려면, 프론트엔드와 백엔드가 어떻게 요청/응답을 주고받고, 데이터를 저장·조회하는지 알아두는 것이 중요합니다.

다음 글에서는 웹 개발 프로젝트 실습을 통해, 지금까지 배운 내용을 종합적으로 적용해볼 예정입니다. 간단한 풀스택(프론트엔드+백엔드) 미니 프로젝트를 만들어보면서, 개발 과정에서 어떤 점을 고려해야 하는지 실제 예시 코드를 살펴봅시다.

다음 글 예고
“웹 개발 시리즈 #6 – 풀스택 미니 프로젝트 실습 (React + Express + MongoDB)”

질문이나 추가로 다뤄줬으면 하는 내용이 있다면 댓글로 남겨주세요. 함께 의견을 나누며, 웹 개발 역량을 한 단계 더 끌어올려봅시다!