[프로젝트 회고록] 쌍용교육센터 3차 프로젝트 (Next.js, Spring Boot, JPA, MySQL ,AWS ,Docker)

 

프로젝트 설명

 

 

 

주제 및 기획 의도

1. 프로젝트 JOBGEM은 어떻게 탄생하게 되었나??

우리 상황에 가장 어울리면서 공부하기 가장 좋은 사이트가 뭐가 있을까 하다가 구인구직 플랫폼의 영감을 얻어 개발자만을 위한 개발자 구인구직 플랫폼을 만들게 되었습니다.

(잡코리아나 사람인 등 기존 사이트를 참고하여 학습용으로 제작하였습니다.)

 

2. 왜 이름이 JOBGEM ??

JOB(직업) + GEM(보석) = JOBGEM(모든직업은 보석이다)

나름 뜻이 있는 이름으로 생각해 지어봤습니다 ㅎㅎ

 

환경 및 구조

요약

프로젝트명	구인구직 플랫폼 JOBGEM
프로젝트 기간	2024.09.02 ~ 2024.10.11
인원	6명
개발 플랫폼	Window 11, linux(ubuntu)
개발 툴	IntelliJ
프론트엔드	Next.js, TailwindCSS
백엔드	JAVA (JDK 17), Spring Boot, JPA, MySQL
형상관리	Git
서버	AWS EC2, S3
CI/CD	Git Action, Docker

 

프로젝트 아키텍쳐

아키텍쳐

 

EC2를 두 개로 FrontEnd와 BackEnd 서버를 따로 구성 했습니다.

파일은 S3에서 따로 관리 중이며 CI/CD는 Git Actions와 docker를 사용했습니다.

 

다이어그램

ERD

 

ERD

 

1차 2차( 8개 9개 정도 ??) 프로젝트와 다르게 이번엔 테이블이 무려 33개...

설계를 할때에는 기능을 말로 풀어 (ex. 구직자가 기업이 올린 공고에 공고지원을 한다.)  키워드 들을 뽑아 테이블 화 시켜가며 설계를 했었습니다.

설계를 완벽하게 했으면 좋았을텐데 중간에 수정을 거쳐가며 프로젝트를 완성해 나갔습니다.

값이 여러개가 들어가야 하는 컬럼 같은 경우에는 중간다리를 넣어 검색 기능을 처리했습니다.

 

유스케이스

 

아직도 졸라맨이 익숙하지 않고 뭔가 장난식으로 만들어놓은 느낌이 나긴하지만

프로젝트 메뉴 구성도나 기능 요구사항을 파악하기엔 아주 유용한 다이어그램인 것 같다.

 

그 외에 클래스다이어 그램, 시퀀스다이어 그램 등등 너무 많아서 첨부 생략하겠슴다.

 

주요 기능 및 담당 기능

프로젝트 주요 기능

1. JWT 로그인

2. 공고 검색

3. 채팅 (Websocket)

4. 관리자 대시보드

5. 대표 이력서

6. 인재 추천

7. 공고 등록

8. 관리자 카테고리 관리

 

담당 기능

1. 채팅 (Websocket)

2. 알림 (SSE)

3. 인재 추천

4. 인재 찜하기

5. 인재 신고

6. 인재 차단

7. 기업 리뷰

8. 면접 리뷰

 

UI는 어떻게 했나??

ChatGPT를 활용했다. 어느정도 UI 형태를 주면 코드를 만들어준다. 그리고 나중에 알았는데 Vercel에서 만든 V0라는 AI도 있다. V0는 Next를 만든 회사에서 만든 거라 그런지 좀 더 친화적으로 잘 만들어 줬다. UI 구성에서 시간을 너무 많이 쓰면 기능적인 구현이 떨어질 수도 있을 것 같아서 사용했는데 아주아주 잘 쓴 것 같다. 시간적으로 매우 절약이 되었다.

 

문제가 되었던 부분과 해결 방법

1. 토큰을 어떻게 처리할 지

 

로그인 하면 토큰이 발급되는데 그 토큰 값에 따라 프론트에서 처리해야 하는 페이지 이동과 로그인 정보를 받아와야 했다. 로컬스토리지를 이용하면 어떻겠나는 의견도 있었으나 그렇게 하게 되면 디버깅모드에서 로컬스토리지에 저장된 토큰을 훔쳐보는게 가능했다. 그래서 쿠키에 담는게 가장 좋다는 정보를 얻어서 쿠키에 담기로 결정했다. 쿠키에 저장된 토큰 값에 따라 페이지가 이동하는 부분은 next.js에 미들웨어를 사용해 공통적으로 처리했다. 모든 페이지 요청오기전 미들웨어를 거치도록 프레임워크가 작동했다. 쿠키를 받아오는 것도 클라이언트 컴포넌트에선 안되서 공통 서버컴포넌트를 하나 만들어서 사용했다. 

 

2. 파일 관리

 

기존 프로젝트들은 배포가 되는게 아니라 로컬 환경에서 파일처리를 했기 때문에 문제가 되지 않았다. 그러나 배포를 하게되면 경로도 달라질 것이고 프로젝트 크기에도 영향을 주기 때문에 따로 관리하는 것이 필요하다. 그래서 어떤 것을 많이 쓰나 검색해서 살펴본 결과 EC2와 호환이 잘되고 속도도 빠른 S3 라는 것을 알게되었다. 백엔드 쪽에서 저장 요청을 보내고 프론트 쪽에서는 직접 URL로 접근해 파일을 불러오는 식으로 사용했다.

 

3. 배포 후 환경 문제

 

배포 하는 환경도 또 다른 컴퓨터라는 점을 계속 인지해야 했다. 내 컴퓨터에는 프로그램들도 잘 깔려있고 포트도 전부 내부에서 열려 있기 때문에 따로 세팅해줄 필요가 없었다. 배포하고 나서 안됬던 이유는 인바운드 설정 그리고 예를 들어 redis를 껴서 채팅을 구현했는데 EC2에 redis가 없어서 생겨난 문제, 그리고 중간에 nginx가 껴서 websocket이나 SSE 통신이 1분마다 자동으로 끊긴점 그리고 시간 설정도 잘못되어서 방금 친 채팅이 UTC 시간으로 불러와 지는점 등등 다양한 문제가 발생하였다. 그래서 본 서버는 냅두고 EC2를 새로 파 거기서 테스트를 한후 본 서버로 다시 올리고 하는 작업을 반복하며 문제를 해결했다.

 

4. 탈퇴, 로그, 알림, Restful을 고려한 설계 및 구현

 

이번 프로젝트에서의 가장 아쉬운 점이였다. 애초에 구현할 때 부터 이런 것들을 생각하며 했으면 수정하는 일이 덜 했을텐데 하고 생각이 들었다. 로그를 적용할 때도 CRUD에 맞게 함수명 통일이 필요했고, RESTful한 api를 구현하기 위해 대규모 통일 수정을 하게 되었다. 하지만 그 과정에서 그런 팀워크의 중요함을 알 았고 REST api 설계 규칙에 대해서도 인지할 수 있었다. 다음 프로젝트를 할 땐 좀 더 잘할 수 있는 자신감과 아쉬움이 들면서 프로젝트를 마무리했다.

 

마무리 하며..

 

24.03.25 ~ 24.10.14 약 6.5 개월 JAVA 기초부터 Spring, Spring boot, mysql, mybatis, jpa, html, css, react, next, aws, docker 등등.. 여러가지 기술스택을 배우고 프로젝트를 하며 정신없이 시간이 지나 간 것 같다. 원래 웹 퍼블리셔 및 프론트엔드로 일하다 백엔드가 궁금해져서 시작하게 되었는데 맨날 만들어준 것만 쓰다가 직접 만들어보니 재미있었고 좀 더 폭넓은 시야가 생겼다. 웹에 전반적인 이해에 양쪽 다 해본 경험은 매우 도움이 된 것 같다.

 

(솔직 강의 후기)

오x주 선생님의 강의를 들으며 가장 좋았던점은 기술 스택을 배울때 그것을 왜 쓰게 되었는가에 대한 설명 그리고 그 기술 스택을 사용하기 전에 불편함을 느끼게 하는 것이였다. JAVA 기초 부터 MVC , Spring 으로 넘어 갈 때의 그 자연스러움은 내가 들은 강의 중 최고 였다.

3강의실 화이팅~

 

 

 

 

 

프로젝트 깃허브

https://github.com/jong-jang/jobgem_FE

GitHub - jong-jang/jobgem_FE: 3차 프로젝트 프론트엔드

https://github.com/jong-jang/jobgem_BE

GitHub - jong-jang/jobgem_BE: 3차 프로젝트 백엔드 팀 레퍼지토리