[Spring-Boot] 마니또 커뮤니티 서비스 회고 (2) - Spring-Boot로 서비스 개발

이전 게시물대로, 프로젝트 개발을 시작했고 현재는 완료했다.

 

기술 스택

백엔드 개발은 수업에서 배운대로 스프링부트로 Java를 사용해 구현했다.

프론트엔드는 스프링부트에서 JSP와 Thymeleaf 중 고민하다 Thymeleaf를 이용해 구현했다. (파일 형식이 html이라는 점이 JSP보다 조금 더 마음에 들었다) 스타일 구현은 CSS를 이용했다.

그리고 데이터베이스는 MySQL을 이용해 SQL문으로 구현했다.

 

실제 서비스 구현

서비스를 구현하는 과정에서 우선 주어진 과제 기간인 일주일 동안에 전체 서비스 구현은 어렵다고 생각했다.

그래서 빠른(에자일한…) 개발을 위해 과제 기간동안에는 네비게이션 탭의 3가지 페이지 중, 커뮤니티 탭 기능을 구현했다. 하지만 로그인, 회원가입 기능이 없었기 때문에 사용자는 누구나 글을 추가하고 댓글을 작성할 수 있었다.

 

이는 서비스의 핵심 기능인 ‘마니또 표시’가 불가능한 상태였기 때문에 추가적인 개발이 급한 상황이었다.

따라서 바로 배포하지 않고 로컬로 돌려 발표하고 피드백을 받았고 일주일 내에 개발 완료 & 배포를 하겠다는 계획을 세웠다.

 

드디어 로그인/회원가입 기능을 완료하면서 이전 코드에도 수정이 필요했다.

가장 대표적이었던게 바로 게시글/댓글 삭제기능!

 

이 전에는 게시글이나 댓글의 작성자를 특정할 수 없어 어쩔수 없이 그냥 삭제할 수 있도록 구현했지만, 회원가입으로 작성자를 특정할 수 있게 되면서 본인이 작성한 글이 아닐 경우에는 삭제할 수 없도록 하고, 원래 게시글로 redirect 시켰다.

 

그리고 드디어 핵심기능인 '마니또 표시' 기능을 구현할 수 있게 됐다.

 

이는 댓글에서만 구현해주면 됐다. 나는 댓글 도메인에 DB에는 없는 Author라는 요소를 추가해줬고, 기본 default값을 '익명'으로 주었다. 그리고 getRepliesByManitoId라는 함수를 만들고 한 게시물에 대해 댓글들을 불러와 그 게시물을 작성한 UserId에 따라 Author를 '글쓴이', '마니또'로 설정해주었다. 그리고 이 Author들은 표시되는 글자 색도 다르게 해줘서 사용자가 이를 더 잘 인식할 수 있도록 구현했다.

색은 역시 서비스의 Primary color를 이용해 적용해줬다.

 

post-detail.html

<p class="reply-author" th:text="${reply.author}" 
	th:classappend="${reply.author == '마니또' ? ' manito-text' : (reply.author == '글쓴이' ? ' writer-text' : '')}">
		author
</p>

 

post-detail.css

.manito-text {
    color: var(--primary-color);
    font-weight: 600;
}

.writer-text {
    color: var(--mint);
    font-weight: 600;
}

 

이 외에도 최대한 UX를 개선시킬 수 있는 방향을 고민하면서 디테일한 부분을 수정했다. 각 코드들 또한 기능별로 폴더에 잘 나눌 수 있도록 노력했다.

 

폴더 구조

 

 

기능이 많은 서비스는 아니었지만 최대한 나눠서 구현하였다.

 

DTO

Post.java

 

Reply.java

 

Member.java

 

네비게이션 바

 

Thymeleaf는 처음 사용해 봤는데, 그 과정에서 svg 처리가 조금 어려웠다.

네비게이션 탭바를 구현하면서 평소와 마찬가지로 svg색을 currentColor로 설정하고 이를 css에서 설정해줬다. 하지만 색 적용이 안됐고 알아보니 Thymeleaf에서는 img태그에 svg의 currentColor 사용이 안된다는 것을 알게됐다. 이를 위한 방법을 고민하다가 svg 내부를 통째로 긁어서 넣어줬다.

 

이런식으로 넣어줬더니 클릭할 때마다 color를 변경시키는 것이 가능했다.

 

이미지 업로드

이 부분은 너무 감이 안잡혀서 GPT의 도움을 많이 받았는데, 나는 DB를 짤때 정한대로 BLOB형식으로 구현하길 원했다. 내가 의도한대로 코드 구현을 완료했는데 사진을 누를때마다 에러가 났다.

 

그래서 백엔드 친구에게 도움을 요청했는데 코드에는 이상이 없다고 했다. 그러면서 사진을 업로드해봤는데, 이번에는 제대로 업로드가 됐다. 알고보니 내가 BLOB으로 지정해놓으면서 DB의 Image 용량이 너무 작아 작은 사진은 업로드가 됐고, 큰 사진 업로드가 불가능한거였다. 그래서 BLOB을 LONGBLOB으로 단위변경(MEDIUMBLOB도 있다.)해줬고 그랬더니 사진업로드가 가능하게 됐다.

 

 

좋은 코드는 아닐것 같지만, 내가 의도한 부분은 기존 post를 수정/올리는 코드를 최대한 수정하지 않은 상태에서 구현하고 싶었고, 따라서 image가 null이 아니라면, 그때만 이미지를 추가한채로 업로드하고 아니라면 원래대로 업로드 되도록 설정했다.

그리고 그 과정에서 MultipartFile을 이용했는데 이 또한 백엔드 친구는 MultipartFile은 문제가 있을 때가 많아서 사용을 잘 안한다는 이야기를 들었다.(😢) 하지만 내 서비스는 단기 서비스이고 당장 이벤트 기간 내에 배포하는게 중요했기 때문에 그대로 진행했다.

이때 byte[]를 이용한 이유는, BLOB은 byte[]와 호환이 된다고 한다.

 

UI

글로벌 스타일을 지정하고 각 페이지 별 css파일을 따로 만들었다.

(색을 관리하는 과정에서 grey100, 200, 300이 점점 짙어지는 규칙을 못 지켰지만 중간에 색 변경이 있어서 그런거니 흐린눈으로 봐주시면 감사하겠습니다🙇‍♀️)

 

static 폴더에는 css, fonts, images 폴더를 생성해 구현해줬다.

 

templates폴더에는 html들을 넣어줬고 컴포넌트인 navbar는 fragments 폴더를 만들어 관리했다.

 

 

형상 관리

github를 이용했는데, issue를 생성해 issue 넘버와 함께 commit msg를 작성하고, pr을 날려 머지하는 방식을 이용했다.

 

 

브랜치명에도 이슈 번호를 넣고, 이슈와 연결시키는 방식을 이용했다.

issue

 

 

서비스 운행

서비스 구현 완료 후 AWS ec2를 이용해 배포했다. 이 과정은 게시물로 다시 작성해 태그할 예정이다.

 

배포 완료 후 슬랙의 마니또 게시판에 올려 직접 서비스 이용자를 모집했다.

 

 

서비스를 운행하며 로그가 찍히는 것도 처음으로 보게 됐다. 이 과정까지 모두 작성하려니 글이 너무 길어지는 관계로 다음글에 이어서 작성할 예정..!!