[WEEK14] Day 1

발제

• 과제: 자신이 선택한 프레임워크로 게시판의 프론트/백엔드를 구현하기
• 기능 요구사항
  • 회원가입 / 로그인
  • 게시물 작성 / 목록 보기 / 읽기
  • 댓글 작성
• 개발범위
  • 프론트: 게시판 UI를 구현
  • 백엔드: 게시판 Server API 구현
  • 추가적 구현 가능 (기술적 챌린지 요소)

---

프레임워크 선정

원칙상 이번 주차의 프로젝트는 개인 프로젝트로 진행되기 때문에, 결국에는 프론트와 백엔드를 둘 다 다룰 줄 알아야 한다. 프레임워크는 처음 다루게 된 것이기도 하고, 자바보다는 자바스크립트를 더 잘 사용하기 때문에 React와 Node.js를 선택하기로 했다.

구분	React	Node.js
실행 환경	브라우저	서버 (런타임)
역할	사용자 인터페이스(UI)	서버 로직, API, DB 처리
기술 분류	프론트엔드 프레임워크	백엔드 런타임 (with Express 등)
사용 언어	JavaScript / TypeScript	JavaScript / TypeScript
학습 난이도	입문자 친화적	상대적으로 더 많은 지식 필요

---

개발 환경 세팅 (참고)

🔹 Node.js 설치하기: https://nodejs.org/ko에서 LTS 버전을 다운로드해서 설치한다.

🔹 React 설치하기

• 다음 명령어를 입력해 vite 프로젝트를 빌드한다: npm create vite@latest
  • 다음 명령어를 입력해 npm 패키지를 설치한다: npm install
  • 다음 명령어를 입력해 개발 서버를 실행한다: npm run dev
• 또는 다음 명령어를 사용해 프로젝트를 빌드한다: create-react-app my-app
  • 다음 명령어를 입력해 서버를 시작한다: npm start

※ Vite는 빠르고 가벼운 프론트엔드 개발 도구로, 주로 React / Vue / Svelte / Vanilla JS 프로젝트를 개발할 때 사용되며, 기존의 Webpack보다 훨씬 빠른 개발 환경을 제공한다고 한다.

기능	설명
빠른 개발 서버	코드 변경 시 실시간(HMR) 반영이 매우 빠름 (ESM 기반)
빠른 빌드 속도	Rollup을 사용하여 프로덕션 빌드가 빠르고 효율적
간단한 설정	최소한의 설정으로 시작 가능 (vite.config.js)
플러그인 지원	Rollup 플러그인 및 Vite 전용 플러그인을 쉽게 사용 가능
모듈 방식	브라우저의 ESM(ES Modules)을 그대로 사용해서 별도 번들 없이 동작 가능

개발 서버를 연 모습

🔹 Express 설정하기

• 다음 명령어를 입력해 Express를 설치한다: npm install express
• package.json에 express가 추가되었는지 확인한다.

---

(예) 프로젝트 폴더에서 React(Vite) + Node.js(Express)를 세팅하려는 경우

• 백엔드: Express 서버 (/server/index.js)

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

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from Express!' });
});

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

cd server
npm install express

• 프론트엔드: React + Vite 프로젝트 (/client/)

cd ..
npm create vite@latest client --template react
cd client
npm install

• Vite에 프록시 설정 추가 (client/vite.config.js)

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:3000', // Express로 프록시
    },
  },
})

• React에서 API 요청

// src/App.jsx
import { useEffect, useState } from 'react';

function App() {
  const [msg, setMsg] = useState('');

  useEffect(() => {
    fetch('/api/hello')
      .then((res) => res.json())
      .then((data) => setMsg(data.message));
  }, []);

  return <h1>{msg}</h1>;
}

export default App;

• 실행 방법

# 백엔드 실행
cd server
node index.js

# 프론트엔드 실행
cd ../client
npm run dev

• 배포 환경에서는 React 앱을 npm run build로 빌드한 뒤, Express 서버에서 정적 파일로 서빙한다.

// server/index.js (배포용)
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, '../client/dist')));

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello again!' });
});

// React 라우팅 처리
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});

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

# 빌드
cd client
npm run build

# Express에서 React 빌드된 정적 파일 제공
cd ../server
node index.js

상황	방식
개발 중	Vite dev 서버 + Express 서버 → proxy로 연결
배포 시	React build → Express에서 정적 파일 서빙

---

MySQL 설치하기

이전에 사용했던 mongoDB는 JSON처럼 문서 형태로 정보를 저장하는 NoSQL이다. 이와는 반대로 데이터를 테이블 형태로 저장하고 테이블 간의 관계를 정의할 수 있는 DB를 관계형 DB(RDB)라고 한다. 그 중에서도 JSON를 지원하는 오픈 소스 RDBMS인 MySQL을 사용하기로 선택했다.