⭐️ 프로젝트 소개
자신이 읽은 책을 리뷰 해서 공유를 해보세요.
다른 사용자의 리뷰에 댓글을 달아서 자신의 생각을 적어 보세요.
리뷰가 마음에 들거나 댓글이 마음에 들면 좋아요를 눌러주세요.
🐢 프로젝트 이름
꼬북이들(Go-Book)
📆 개발기간
2022 . 2. 24 ~ 2022 . 3 . 2
🛠️ 기술스택
- FE
- React
- BE
- Java
- Spring Boot
- Spring Data JPA
- Spring Security
- MySQL
- AWS EC2
- AWS RDS
💡 구현기능
- 로그인 기능
- 유효성 검사를 통과한 ID, PW인 경우만 회원가입이 가능하다.
- JWT 토큰을 이용하여 Spring Security로 인증/인가를 구현한다.
- 독서 리뷰 등록
- 로그인을 하면 책에 대한 리뷰를 등록할 수 있다.
- 본인이 작성한 리뷰만 수정/삭제가 가능하다.
- 독서 리뷰 조회
- 모든 사용자가 작성한 독서 리뷰를 조회할 수 있다. - Pagination
- 책 카테고리별(ex. 인문 / 사회 / 경제 / 소설 등) 조회가 가능하다.
- 작성일자, 좋아요 개수 순으로 정렬할 수 있다.
- 마이페이지 조회
- 내가 작성한 리뷰를 볼 수 있다.
- 내가 좋아요한 리뷰를 볼 수 있다.
- 댓글 등록
- 독서 리뷰에 댓글을 달 수 있다.
- 본인이 작성한 댓글만 수정/삭제가 가능하다.
- 좋아요 기능
- 독서 리뷰, 댓글에 좋아요를 누를 수 있다.
- 이미 좋아요를 누른 상태에서 다시 한번 누르면 좋아요가 취소된다.
📋 와이어 프레임
📄 ERD
📜 API 문서
💻 결과물
🌠 트러블슈팅(문제해결)
- Spring Security 적용 후, 회원가입 시 successResponseDto가 리턴되지 않고 Exception 발생
- security config와 custom한 filter 로직을 하나씩 살펴봤지만 잘못된 것을 발견하지 못했다.
- 콘솔 로그를 보니, 회원가입할 때 DB에 insert 쿼리가 나가는 것까지 발견했다.
- 디버깅을 해보니 컨트롤러 리턴에서 에러가 발생했다.
- [원인] UserController에서 @Controller를 붙여서 생긴 문제였다.
- [해결] @RestController로 바꾸어 해결했다.
- RDS MySQL 연결 후, 회원가입, 리뷰 조회, 댓글 등록, 좋아요 등록 등 모든 기능은 정상적으로 되는데, 리뷰 등록만 exception이 발생
- 디버깅을 찍어보니 ReviewRepository에 Review 객체를 save하는 곳에서 에러가 발생했다.
- [원인] Review 엔티티의 ID만 GenerationType.AUTO로 설정하고 테이블이 생성되었었는데 중간에 GenerationType을 IDENTITY로 바꾸고 테이블을 새로 생성하지 않아 발생한 문제였다. →
ddl-auto : update로 하고 실행했음 - [해결] yaml jpa 설정 부분에
ddl-auto : create로 설정하여 실행한 후 해결했다.spring: config: activate: on-profile: "db-release" jpa: show-sql: true database: MYSQL hibernate: ddl-auto: create properties: hibernate: format_sql: true
📽️ 회고
Spring과 React가 협업해서 프로젝트를 진행하는 것은 이번이 처음이었다.
Spring 개인 과제만 진행하다가 백엔드 팀원들과 협업하는 것도 처음, 프론트엔드와 합쳐보는 것도 처음이라 어떻게 시작해야할 지 고민이 되었다.
우선, 일주일만에 프로젝트를 완성해야해서 스코프를 너무 크게 잡지 않고 구현할 수 있는만큼 기획하여 설계하기로 했다.
주제를 정하고, 와이어프레임을 같이 그리고, 백엔드 팀원들끼리 ERD를 먼저 그려보았다.
그리고 프론트 팀원들과 API 명세서를 함께 작성했다.
프론트에서 어떤 데이터를 넘겨줄 것이며, 어떤 데이터가 응답으로 필요한 지, 기능별로 얘기하면서 정하는 과정이 재밌었다. API 명세서는 백엔드와 프론트가 기능을 함께 구현하면서 정하는 약속이기 때문에 처음 작성할 때도 하나씩 서로 확인을 했고, 기능을 구현하다가 변경되는 사항은 서로서로 바로 공유를 해주었다.
API 명세서를 잘 정해서인지 기능을 구현함에 있어서는 큰 어려움은 없었다.
백엔드에서 팀원들과 기능을 나누어 구현해보니, 각자 코드 스타일도 다르고, 작업 속도도 달라서 처음에 적응하는데 조금 어려웠다. 커밋도 좀 더 신중하게 날리게 되고, 팀원들이 PR 보낸 코드도 하나씩 확인하다보니 시간이 많이 걸렸다.
처음 시작할 때 git 컨벤션만 정하고 시작했는데, 다음엔 코드 컨벤션도 정하고 시작해야겠다고 생각했다.
각자 기능별로 commit, push하면서 merge된 사항이 있으면 바로 pull을 받고 작업을 진행해서 충돌은 많이 없었다.
처음하는 협업이라 시간은 많이 걸렸지만, 커밋 메시지가 쌓이고 서로의 코드가 합쳐져 완성된 것을 보니 많이 뿌듯했다.
이번에 새롭게 느낀 것은, 프론트의 작업량이 어마어마하다는 것.
백엔드에서 API 기능 구현은 크게 어렵지 않았는데, 프론트는 API 요청 받는 작업도 해야되고, 화면도 꾸며야되고 작업량 자체가 많다는 것을 옆에서 보며 직접 느끼게 되었다.
다른 조들도 백엔드는 3일 정도면 작업을 거의 다 끝내고 리팩토링하면서 프론트의 작업을 기다렸다.
프론트… 화이팅… 마음속으로 무한 응원하며 백엔드는 리팩토링을 했다…
서버 통신은 한번에 문제없이 딱! 되지는 않았지만… 그래도 생각보다 수월하게 넘어갔다.
멘토 세션에서 Spring Security에서 cors 적용하는 예제를 보여줘서 참고하면서 어렵지 않게 해결할 수 있었다.
스프링 학습 주간에 항상 가졌던 의문이 ‘프론트는 리액트를 쓰고, 백엔드는 스프링을 쓰는데 어떻게 테스트하고 통신하는거지?’였는데, 이번에 같이 작업해보니 글로 읽고 설명을 듣는 것보다 훨씬 잘 이해되고 알게 되었다.
내일부터 시작하는 클론코딩은 이번주보다 좀 더 수월하게 시작할 수 있지 않을까..!하고 조금 기대해본다..!
