[프로젝트] ARS 프로젝트 1차 개발

애이용·2021년 7월 25일

✔️ ARS 프로젝트 소개

ARS는 Algorithm Review Service의 약자로 알고리즘 복습을 할 수 있는 프로젝트이다.
(나만의..)

평소에 여기 벨로그에 알고리즘 문제 풀이를 포스팅했다. 하지만 올리면 다시 보기가 좀 번거롭기도 하고 들어가기가 참 귀찮았다. (글도 점점 많아져서 보기가 더 힘들어졌다.)
그리고 복습이 중요하다고 생각하는데 블로그 포스팅만으로는 내가 원하는 바를 충족하지 못했다.
그래서 ARS 프로젝트를 만들어보고자 했다.

간단하게 기능을 설명하자면
문제를 만들어 풀이 과정을 올리고, 계속해서 Review를 추가할 수 있도록 구현했다.
여기서 핵심!!!은 Slack으로 Review 알림을 주는 기능을 추가했다! 알림까지 온다면 더욱 더 의무감(?)이 생길 것이다. 그래서 IT쪽 분들이라면 많이들 접하는 Slack으로 알림 기능을 추가했다 😀

사실 처음에는 누구나 이용할 수 있는 방향으로 개발을 해왔다. 소셜 로그인을 추가하고, 인증 과정을 통해 자신이 작성한 문제, 리뷰들만 볼 수 있도록 구현했다.
하지만 개발을 할수록 인증 관련 기능을 구현하기가 까다로웠다. 맨 처음 작성할 때 아무것도 없을 때를 고려해야 하고, 태그별 문제 목록들을 조회할 때 벨로그처럼 다른 사람들이 작성한 글도 볼 수 있으면 좋지 않을까.. 했다.
그러면 비공개/공개 여부도 추가해야하는데, 그러기엔 개인 프로젝트가 너무너무 커질 것 같았다.

그래서 프로젝트 방향을 내가 작성한 알고리즘 문제들을 작성하는 것으로 바꿨다.
그래서 메인 페이지도 내가 작성한 알고리즘 문제 목록들이 보이게 하였고, 글 작성/수정/삭제 또한 나만 가능하도록 바꿨다.
조회 기능은 인증을 제거하여 모든 사람들이 볼 수 있도록 바꿨다.

나한테 지금 가장 중요한 것이 알고리즘 문제 풀이들을 기록하는 거여서 지금도 계속 해서 내가 만든 프로젝트에 작성하고 있다. (벨로그에 써놓은 것들도 다 옮길 예정 ㅎㅎ)
나는 만족스럽게 너무 잘 쓰고 있다. (나를 위한 서비스니 그러겠지)

✔️ 서버 아키텍처

나는 인프라 구축하는 것에 많은 힘을 썼다.
프리티어 EC2 서버 한 대인 나는... 많은 것을 경험해보려고 노력했다.
Nginx, ELB, Route53 등..
Nginx는 너무 도입해보고 싶어서 했는데, Gabia에서 구입한 도메인과 서버를 연결하려고 찾아보니 ELB와 Route 53을 이용하길래 새로 경험해봤다.
Nginx 무중단 배포는 정말.. 신기했다. 나는 포트 8082, 8083 포트에 스프링부트를 실행해놓고 무중단 배포를 하도록 했다. (여기서 Nginx는 리버스 프록시 역할을 한다.)

💻 기술 스택에 관해

요약 하자면
SpringBoot, JAVA, MySQL,Querydsl, JPA, CI/CD(Jenkins, CodeDeploy, S3), AWS EC2,
CodeDeploy, Nginx, ELB, Route 53

운영 환경과 로컬 환경을 분리해서 개발을 진행하였다.
운영 환경에서는 RDS(MySQL) 데이터베이스를, 로컬 환경에서는 PostgreSQL 로컬 데이터베이스를 이용했다.

✔️ 페이지 소개

📄 메인 페이지

엄청 간단하지만 깔끔하게 보이도록 엄청 노력했다...
벨로그의 태그 CSS를 가져오고, 내가 설정한 난이도로 ⭐️을 보이도록 했다.
이제 여기서 문제 제목을 클릭해보자.

📄 문제 상세 페이지

상세 페이지 스크롤
벨로그처럼 스크롤을 할 때 오른쪽 영역은 고정을 시켜놨다.
이제 리뷰 목록들이 생겨나면 목록들이 쭈르륵 생겨날 것이다. (복습 날짜 리스트)

만약 나임이 인증되었다면 (소셜 로그인을 통해)
별을 클릭하여 개수로 난이도를 수정할 수 있다.
만약 인증이 안되었다면
수정 권한 없음
이렇게 경고창을 뜨도록 했다. (삭제를 눌렀을 때도 마찬가지)
수정 및 Add Review를 클릭하면 로그인 페이지로 이동하도록 구현했다.

위에 보이는 문제 링크를 클릭하면 해당 문제 사이트가 나오도록 하였다.
(내 벨로그를 보면 알 수 있듯이 항상 문제 풀이 위에 문제 링크를 올려놓았는데 이걸 아예 편하게 볼 수 있도록 삽입을 했다.)

📄 문제 등록 페이지

벨로그 CSS를 따라서 구현했다. (벨로그 디자인 사랑..)
~~(음 저 제목이랑 태그 만 왜 더 오른쪽으로 치우쳐져 있지? 바꿔야겠다)~~
여기서 공을 기울인 건.. 태그와 작성 폼이다.
작성 폼은 TOAST UI 라이브러리를 이용했다.
처음에 마크다운을 코딩해서(구글링해서) 구현하려고 했지만 디자인도 꽝이고, 너무 복잡했다. 그래서 어떻게 하지.. 하고 엄청난 서치를 통해 찾았다. TOAST UI 사랑합니다....
디자인도 정말 이쁘고 편하고 짱짱이다.

📄 리뷰 등록 페이지

리뷰 등록 페이지는 간단하게 복습 알림 기한 설정과 작성 폼이 있다.
등록을 해보면

알림 예정일이 2주 후로 설정되고, 복습 리스트가 추가된 것을 확인할 수 있다.

📄 리뷰 수정 페이지

알림 예정일은 기본 설정된 8월 8일로 되어있고, 수정도 가능하다.
수정하기를 눌러보자. 수정 완료

슬랙 알림

알림은 스프링부트의 @Scheduled 어노테이션을 이용해서 오전 9시마다 알림 날짜를 확인해서 슬랙 알림을 주게 구현했다.
이렇게 알림이 오도록 구현했는데, 2차에는 링크까지 삽입할 예정이다. (이건 테스트용이라 오후 6시에 왔다.)

✔️ 후기

ARS 1차 프로젝트를 완료했다.
왜 1차냐.. React 로 따로 프론트엔드 개발할 예정이다.
나는 백엔드만 개발했다보니 프론트가 너무 어려웠다.
일단 Mustache로 프론트를 구현했는데 코드가 너무 더러워졌다..
리액트로 깔끔하게 코드를 작성해서 프로젝트를 완성하고 싶다.. 또 스프링부트를 완전한 REST API 서버로 구축하고 싶다.
그래서 간단하게(?) 1차 프로젝트를 끝냈다.

사실 기능들은 간단해 보이는데, 오래 걸렸던 이유는 Infra 구축까지 혼자서 처음 진행하다보니 오래 걸렸다.
엔진엑스, ELB, Route 53 모두.. 처음 접해봤는데, 인프라 참 재밌다는 걸 느꼈다.
전에는 간단한 CI/CD만 구축해봤는데, 이번 기회에 무중단 배포까지 경험할 수 있었다.
우선 1차 프로젝트에서의 아키텍처이다.
2차에선 docker까지 도입해 볼 생각이다.

또한 이번 프로젝트를 하면서 MapStruct와 Querydsl을 처음으로 적용해봤는데 너무 편리했다. 앞으로 계속해서 사용해야겠다. 특히 Querydsl은 문법을 좀 더 공부해야겠다.

그리고 테스트 코드 작성은 레포지토리 중심으로 작성하였다.
앞으로는 테스트 주도 개발을 해보고 싶다.

깃허브 링크이다.
나는 해야할 것들을 이슈에 등록해서 커밋 메세지[#33] ~~ 를 작성해서 해당 이슈에 커밋메세지를 추가하도록 했다.
처음엔 Add : , Fix : 이런 식으로 커밋 메세지를 작성하였는데 이슈별로 보는 게 더 좋을 것 같아서 중간에 바꿨다.