창의융합종합설계2 회고록 (feat. Java, SpringBoot, Amazon EC2, Amazon S3, Redis, Docker)

3학년 2학기 한 학기를 쏟아부었던 창의융합종합설계2 회고록을 작성하고자 한다.

먼저, 우리 팀의 창의융합종합설계2 과목의 주제를 간단히 말하자면, 우리 학교 학생들이 편히 쓸 수 있는 코딩 웹사이트이다. 

 

목차는 다음과 같다.

1. 본 웹사이트의 목적
2. 내가 맡은 역할
3. API 명세서 (기능)
4. ERD 다이어그램
5. 시스템 구조 및 사용 기술
6. 내가 삽질했던 부분, 배웠던 점

 

1. 본 웹사이트의 목적

1. 교육

- 웹 사이트를 통해 코딩 문제를 풀고 채점한다.

- OpenAI API를 통해 사용자의 코드 리뷰를 제공한다.

2. 편의성

- 이용 목적에 맞는 사용자 수준 및 유사 문제 추천을 한다.

- 편리한 UI/UX

3. 소통의 장

- 선후배 간의 소통을 위한 커뮤니티를 제공한다.

- 다양한 커뮤니티 게시판 종류를 제공한다.

 

2. 내가 맡은 역할

나는 백엔드 역할을 맡았다.

- 데이터베이스 설계
- 웹 페이지 기능 구현
- 프론트엔드, 백엔드 서버(AWS EC2) 배포
- 프론트엔드, 백엔드 CI/CD
- 회의록 작성

 

 

3. API 명세서 (기능)

기능은 약 62개 정도로, 다른 팀보다 많은 편이었다. 원래 설계한 기능보다 개발하면서 추가된 기능들이 많았다. 

그래서 처음 설계할 때부터 기능을 제대로 잘 작성하는 것이 중요함을 깨달았다. 다음부터는 설계할 때부터, 꼼꼼히 기능 명세를 해야겠다고 생각했다.

 

4. ERD 다이어그램

위 이미지는 ERD 다이어그램이다. mysql을 사용했고 주요 테이블은 questions, users, code, ctf_questions가 있다.

 

 

5. 시스템 구조 및 사용 기술

 

1. 클라이언트

구분	개발 및 구동 환경
운영체제	Windows 10
개발 도구	VSCODE
개발 언어	JavaScript
개발 프레임워크	React
버전 관리 도구	Github,miricanvas

 

2. 서버

구분	개발 및 구동 환경
운영체제	Ubuntu
개발 도구	IntelliJ
개발 언어	Java17
개발 프레임워크	Spring Boot, Spring Security, Spring Data JPA
버전 관리 도구	Github

 

3. 인공지능 서버

구분	개발 및 구동 환경
운영체제	Ubuntu
개발 도구	Pycharm, VScode
개발 언어	Python 3.8
개발 프레임워크	Flask
버전 관리 도구	Github

 

4. DBMS

구분	개발 및 구동 환경
DBMS	MySQL 8.0.35
버전 관리 도구	ErdCloud

 

- 구현 기술

기술	설명
Spring Boot	Java 언어를 사용해 웹 애플리케이션을 개발할 수 있도록 도와주는 프레임워크
Spring Security	Spring 기반 애플리케이션의 보안(인증 및 권한 부여)을 담당하는 프레임워크
Spring Data JPA	JPA를 더 쉽게 사용하기 위한 Spring Data 프레임워크의 한 파트로 JPA를 이용한 구현체를 더 추상화시켜 더 쉽고 간편하게 JPA를 이용한 프로젝트를 개발할 수 있게 해 주는 Spring 모듈
Flask	인공지능의 결과 값을 웹에게 전달하기 위한 프레임워크
Anaconda	인공지능 개발을 위한 가상환경

 

 

6. 내가 삽질했던 부분, 배웠던 점

- Spring Data JPA, Spring Security, Redis를 이용한 로그인, 로그아웃

먼저 Redis를 local에서 설치해서 테스트를 해봤어야했는데 왜인지 local에서 설치가 안됐다.. 결국 원인을 못 찾았고, 서버에서는 다행히 쉽게 설치가 되어서 서버에서 Redis를 바로 설치하고 테스트를 진행했다. 로그인, 로그아웃을 구현하고나서 프론트엔드에서 토큰을 검증해야하는데, 프론트엔드에서 토큰 유효성 검증을 기능 실행할 때마다 해야하는가에 대해 의문을 제기했다. 사실 백엔드에서 Spring Security filterChain을 이용하면 토큰 유효성 검증을 자동으로 할 수 있었는데, 그 점에 대해 나도 자세히 알지 못했어서 많이 헤맸었다.

 

- aws EC2 배포

<Spring Boot 의존성 주입 문제>

java와 mysql,  redis를 설치하는 간단한 세팅 과정은 어렵지 않았지만, Spring Boot 프로젝트를 올리는 과정이 힘들었다.. 우리는 중요한 정보를 yml 파일에 넣고, git submodule에 넣어뒀는데.. 그래서 그런지 Spring Boot를 올릴 때 의존성 주입 문제가 발생했다. 이 오류를 해결하기 위해서 docker를 공부해서 docker로도 배포를 진행했는데, 마찬가지로 잘 되지 않았다.. 그래서 다시 서버에서 직접 배포하기로 했는데, 사실 방법은 간단했다. yml 파일을 서버에서 직접 만들어서 의존성을 주입해주면 해결되는 문제였다. 

<Nginx를 사용한 React와 Spring Boot 배포>

백엔드 배포 이후에 프론트엔드 배포 작업을 진행했다.; 처음에는 S3를 사용해서 배포했는데, 403 오류가 발생해서 그 오류를 해결하는 데 한 3일정도 걸렸던 것 같다.. CORS 문제였다.. 백엔드와 프론트엔드에서 모두 설정이 필요했다. 이때, 내가 백엔드만 하더라도 다른 분야와 소통하기 위해서는 어느정도 다른 분야에 대해 알고 있어야겠다고 뼈저리게 느꼈다... 

 

- Github actions를 이용한 CI/CD

백엔드와 프론트엔드 모두 github actions의 workflow를 이용해서 CI/CD를 구축했다. 프론트엔드를 s3로 배포해서.. CI/CD를 어떻게 구축하면 좋을지 판단이 제대로 안 됐다. 그래서 또 결국 다시 프론트엔드와 백엔드를 같은 서버에 올리기로 결정했다. 지금 생각해보면 s3에도 어차피 github 주소로 올렸을테니 그냥 서버에 올리는 거랑 똑같이 github workflow에 배포 스크립트를 작성하면 됐지 않을까 싶다.. 어쨌든 NGINX를 이용해서 React와 Spring Boot를 같은 서버에 올렸다.

 

---

이번 프로젝트로 인해 직접 서버 배포도 해보고 Redis, Nginx와 같은 내가 한번도 써보지 않은 새로운 기술들도 많이 시도해보고 CI/CD도 구축해보고 docker도 공부해봤다. 한 학기동안 정말 많이 힘들었지만.. 새로운 것을 많이 배웠고, 얻었고, 익힐 수 있었다. 단지 기술적인 부분 뿐만 아니라 어떻게 해야 협업을 더 잘할 수 있을지, 어떻게 해야 팀원들 간의 소통을 더 원할하게 진행할 수 있을지에 대해서도 많이 고민해보았다. 팀플은 나 혼자서만 잘한다고 되는 일이 아니기에, 소통이 정말 정말 중요하다고 느꼈다.

또한, 나름의 효율적인 파일 구조를 생각해서 코딩을 했는데, 아직은 뭔가 체계적이지 못하다고 느꼈다.. 어떻게 하면 더 코드를 잘 짤 수 있을지 깊게 고민해봐야할 것 같다.. 정말 코딩은 끝이 없다... 한 번도 내가 코드를 완벽하게 짰다고 생각해본 적이 없는 것 같다.. 아직 한참 많이 부족하기에... 더 열심히 공부해야겠다고 생각했다.

참고로 다음은 이번 프로젝트에서 백엔드의 파일 구조이다.

백엔드 파일 구조

 

다음에는 무중단 배포와 docker에 대해서도 더 공부해서 더 발전된 모습으로 다음 프로젝트에 임해야겠다.