뜬 구름
1인 프로젝트, 커뮤니티 사이트
ReactTypeScriptSpring BootMySQLAWS EC2Nginx
뜬 구름
1인 프로젝트, 커뮤니티 사이트
프로젝트 개요
기획부터 개발, 디자인, 배포까지 모든 단계를 직접 수행한 개인 프로젝트입니다. 바닐라 JavaScript와 Express로 시작하여 React와 Spring Boot로 마이그레이션하며 풀스택 개발 역량을 강화했습니다.
팀 구성
- 개인 프로젝트
주요 기능
- 로그인 및 회원가입, 회원 약관 동의하기, 메일 인증
- 오늘의 인기글, 주간 인기글
- 게시글 작성, 수정, 삭제
- 게시글 좋아요, 싫어요
- 댓글 작성, 수정, 삭제
기술 스택
| 구분 | 기술 |
|---|---|
| 언어 | HTML, CSS, JavaScript, TypeScript, Java |
| 프레임워크 | React, Spring Boot, Express |
| 라이브러리 | VanillaJS, JPA, JDBC, Google SMTP |
| DB | Node.js, MySQL (로컬, AWS RDS), AWS EC2, Nginx, Tomcat |
역할 및 업무
프론트엔드 화면 설계 및 초기 구현
- 디자인 및 화면 설계, 기능 설계 내용을 바탕으로 HTML과 CSS 작업을 수행
- 바닐라 JavaScript를 사용하여 설계된 화면에 필요한 기능을 구현
- 회원가입, 로그인, 게시글 작성, 수정, 삭제, 보기, 댓글 작성, 수정, 삭제 등 단순한 커뮤니티 기능을 구현
백엔드 및 데이터베이스 설계
- Node.js와 Express를 사용하여 API 서버를 구현
- MySQL 데이터베이스를 설계하고 SQL 쿼리를 작성하여 로컬 DB 서버에서 필요한 데이터를 저장 및 관리
- 프론트엔드와 연동하여 회원 정보 및 게시글 데이터를 처리
기능 확장 및 기술 스택 마이그레이션
- HTML, CSS, JavaScript로 구현된 프론트엔드를 TypeScript 기반 React로 마이그레이션
- Node.js와 Express로 작성된 백엔드를 Spring Boot로 마이그레이션
- SMTP Gmail을 활용한 이메일 인증 기능 구현
- 게시글에 '좋아요', '싫어요' 기능을 추가하여 주간 및 일간 인기글 생성 및 표시 기능 구현
배포 및 서버 설정
- EC2 서버에 직접 SSH 및 SCP 명령어를 사용하여 배포 환경 구축
- Tomcat, Java, Nginx 설치 및 설정
- 로컬 PC에서 빌드한 React와 Spring Boot 프로젝트를 SCP로 전송 후 Nginx를 통해 배포
주요 문제 해결
(1) AWS 배포 초기 어려움
- AWS EC2에 Spring Boot와 React 애플리케이션을 배포하는 과정이 처음이라 서비스 환경 구성(EC2, Nginx, Tomcat 설치 및 설정)과 배포 절차에 어려움을 겪음
- EC2 인스턴스에 Java, Nginx, Tomcat을 설치하고 설정 파일을 수정하면서 인프라 환경 구성에 익숙해짐. 이를 통해 배포 절차를 이해하고 배포 자동화의 중요성을 깨달음
(2) CI/CD 구축 실패
- GitHub Actions를 활용해 CI/CD 파이프라인을 구축하려 했으나, AWS EC2와 관련된 시크릿 키 관리 및 설정 문제로 인해 CI/CD 구현에 실패함
- CI/CD 도입 대신, 임시로 SCP 명령어를 사용해 로컬 PC에서 빌드된 파일을 EC2로 전송하는 방식으로 배포를 진행. 이후 다른 프로젝트에서 CI/CD 환경을 재학습하고 구축에 성공하며 경험치를 쌓음
성과
기술 스택 및 개발 역량 고도화
- 바닐라 JS 및 Express에서 React와 Spring Boot로 마이그레이션하며 프론트엔드·백엔드 전반 역량 강화
- TypeScript 도입을 통한 오류 방지 및 효율적인 개발 환경 구축
- Spring Boot 어노테이션 활용 및 IDE 적응을 통해 백엔드 로직 구현 능력 향상
클라우드 배포 및 인프라 경험 축적
- AWS EC2, RDS, VPC, Nginx를 활용한 인프라 구성 및 서비스 배포 경험
- 서버 보안 설정, 리눅스 명령어 활용 등 실무적인 배포 환경 이해도 향상
- Github Actions 시크릿키, env 파일을 통한 API 키 관리로 보안 강화 방법 습득
전 과정 개발 프로세스 경험
- 기획부터 개발, 디자인, 배포까지 모든 단계를 직접 수행하며 전체 개발 흐름 이해도 상승
- Google SMTP를 활용한 이메일 인증 기능 구현으로 서비스 안정성 및 신뢰성 강화
향후 개선 및 확장 계획
- 도메인 연결 및 CI/CD 환경 구축에 대한 학습 계획
- 이전 경험을 바탕으로 더욱 완성도 높은 프로젝트를 구현할 기반 마련
참고 자료
- GitHub (Vanilla): https://github.com/mepwj/cloud-story-vanilla
- GitHub (React): https://github.com/mepwj/cloud-story-react
- GitHub (Backend): https://github.com/mepwj/cloud-story-be