🛠️ 팀 일정 관리 웹앱 제작기: AWS EC2 + Express.js + React 실습 적용기

 

안녕하세요, 오늘은 제가 최근에 진행한 팀 일정 관리 웹 애플리케이션 프로젝트에 대해 소개해보려고 합니다. 특히 이 프로젝트는 단순한 로컬 테스트 수준을 넘어서, AWS EC2에서 MySQL 데이터베이스를 직접 세팅하고, 백엔드는 Express.js, 프론트엔드는 React로 구성해 실제 배포 환경에 가까운 구조를 직접 구현해봤다는 점에서 의미가 큽니다.

---

✅ 프로젝트 목적

리액트와 노드, 그리고 MySQL을 활용한 풀스택 웹 서비스 구조를 실제로 구축하며 실무 감각을 익히고자 했습니다.

• AWS EC2에 MySQL DB 구성
• 백엔드는 Express.js를 활용한 API 서버 구현
• 프론트는 React 기반으로 구성
• JWT 인증 기반의 로그인, 유저별 역할 기반 접근 제어까지 직접 구현

---

✨ 구현된 주요 기능

🔐 사용자 인증 (JWT)

• 로그인 시 토큰을 발급하고, 이후 모든 요청에 대해 인증을 거칩니다.
• 관리자(admin)와 일반 사용자(user) 권한을 분리해서 처리합니다.

👤 사용자 관리 (관리자 전용)

• 사용자 등록: 관리자 계정으로 로그인한 경우에만 새로운 유저를 생성할 수 있도록 제한했습니다.
• 사용자는 id, username, password, role, team 속성을 가집니다.
• bcrypt를 사용하여 비밀번호는 안전하게 해싱됩니다.

👉 관련 코드:

// userRoutes.js
router.post("/register", authenticateToken, async (req, res) => {
  if (req.user.role !== "admin") {
    return res.status(403).json({ error: "관리자만 사용자 등록이 가능합니다." });
  }
  ...
});

📅 일정 CRUD

• 일정은 작성 시 task, task_datetime, task_priority, created_by, team 등의 정보를 가집니다.
• 유저는 자신의 팀 일정과 공통(GENERAL) 일정을 확인할 수 있으며,
• 관리자는 모든 일정 조회, 수정, 삭제 가능, 일반 유저는 자신이 작성한 일정만 수정 및 삭제 가능하도록 구성했습니다.

👉 일정 필터링 예시:

// tasksRoutes.js
if (role !== "admin") {
  query += " WHERE team = ? OR team = 'General'";
  params.push(team);
}

---

🔧 개선이 필요한 점

🚫 사용자 생성 기능 미흡

현재 관리자만 유저를 생성할 수 있도록 했지만, 일반 회원가입 기능이 아직 구현되지 않았습니다.
→ 추후 회원가입 페이지 및 비로그인 상태에서의 사용자 등록 API를 도입할 계획입니다.

🧩 일정 우선순위 시각화 미흡

우선순위를 숫자로만 표시하고 있는데, 이를 시각적으로 강조하는 디자인 개선도 고려 중입니다.

📆 일정 반복 기능 없음

현재는 단일 일정만 추가 가능하고, 반복 일정 기능이 없어 실제 사용 시 불편할 수 있습니다.

🚫 기타 편의 기능 미구현

현재는 로그인 페이지에서의 enter로 로그인 기능 등 기타 기능 미구현

---

📌 프로젝트 의의

이 프로젝트는 단순한 코드 구현을 넘어서, 다음과 같은 실질적인 경험을 할 수 있었습니다.

• AWS EC2 서버에 직접 MySQL 설치 및 원격 연결 구성
• .env를 이용한 환경변수 관리
• 백엔드-프론트엔드 간 CORS 이슈 해결
• JWT 기반 인증 프로세스 경험
• React의 상태관리 및 페이지 보호 라우팅(Protected Route) 구성

즉, 학습했던 리액트 프로젝트들을 실제 서비스처럼 구현하고 배포하는 실습으로 큰 의미가 있었습니다.

---

🧪 마무리하며

React와 Express, 그리고 MySQL을 활용한 이 풀스택 프로젝트는 단순한 클론코딩에서 벗어나,
실제 서비스에 필요한 구조와 흐름을 직접 설계하고 적용해본 값진 경험이었습니다.

이번 프로젝트의 가장 큰 목표는 단순히 화면을 구현하는 것이 아니라,
실제 데이터를 주고받는 웹 개발의 흐름을 처음부터 끝까지 체험해보는 것이었습니다.

이를 위해

• AWS EC2 인스턴스를 직접 생성하고,
• MySQL을 설치해 데이터베이스를 세팅하고,
• Express.js 백엔드 서버와 연결해 실제 API 통신이 이루어지도록 구성했습니다.

공부하면서도 처음 접하는 개념이 많아 블로그 정리에 신경을 많이 못 썼지만,
그래도 “직접 통신이 되는 웹 서비스”를 만들 수 있었던 것만으로도 큰 성과라고 생각합니다.

앞으로는 기능을 하나씩 정리하고, 아키텍처 설명과 코드 흐름에 대한 블로그도 꾸준히 작성하며 기록해보겠습니다. 💪
부족하지만 계속 성장하는 개발자가 되겠습니다. 감사합니다!

---

📂 깃허브 링크 (예시)

https://github.com/k1212gh/todo_aws

---

로그인 페이지 화면

유저 계정 로그인 화면

어드민 유저 로그인 화면