클론 프로젝트 - 네이버 MyPlace

Doyeon·2023년 3월 9일

TIL 프로젝트

🍀 네이버 MyPlace 클론코딩

네이버 MyPlace 클론코딩입니다.

방문했던 음식점에 대한 리뷰를 작성하고, 다른 사람들이 남긴 리뷰를 확인할 수 있습니다.

마음에 드는 리뷰는 좋아요를 표시해보세요.

📆 개발기간

2023.03.03 ~ 03.09

🛠️ 기술스택

FE
- JavaScript
- React
BE
- Java
- Spring Boot
- Spring Data JPA
- Spring Security
- AWS EC2
- AWS RDS
- MySQL

💡 구현기능

회원가입
- 유효성 검사
  - 아이디 : 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.
  - 비밀번호 : 8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.
  - 닉네임 : 2~20자의 한글, 영문 대 소문자, 숫자를 사용하세요.
  - 입력안한 경우 : 필수 정보입니다.
로그인
- ID, PW 일치하지 않는 경우 : 다시 로그인해 주세요.
리뷰 CRUD
- 리뷰 작성, 수정, 삭제가 가능하다.
- 리뷰 등록 시, 이미지를 함께 올릴 수 있다.
- 리뷰 수정, 삭제는 작성자만 가능하다.
피드 탭
- 모든 리뷰를 조회할 수 있다.
- 무한 스크롤
방문 탭
- 내가 방문했던 음식점을 확인할 수 있다.
- 방문했던 음식점의 리뷰를 작성할 수 있다.
리뷰 탭
- 내가 작성한 리뷰를 볼 수 있다.
좋아요 기능
- 마음에 드는 리뷰에 좋아요를 누를 수 있다.

📋 와이어 프레임

와이어프레임.pdf

📄 ERD

📜 API 문서

트러블슈팅

사용자가 리뷰의 좋아요를 누르면 하트 색이 채워지는데, 리뷰 페이지를 조회하면 하트 색이 비워지는 문제
- 프론트에서 사용자가 리뷰 글에 좋아요를 눌렀는지, 안 눌렀는지 알 수 있는 response 값이 필요하다.
- Review 엔티티에서 Boolean 타입의 isPushed 필드를 만들고, 리뷰 조회 시 사용자가 해당 리뷰에 좋아요를 눌렀는지 확인하여 isPushed 값을 채워 리턴한다.
- 로그인하지 않은 경우(member == null)는 isPushed 를 false로 처리한다.
```
boolean isPushed = (member != null) && likeRepository.existsByMemberAndReview(member, review);
```
MySQL 연동 시, @OneToMany에 mappedBy를 쓰지 않아 연결 테이블이 생성되었다. mappedBy를 설정하고 다시 실행시켰지만, 에러가 발생하여 테이블도, 데이터도 그대로 남아 있었다.
- Review 와 Keyword 의 연결 매핑 역할을 하는 ReviewKeyword 엔티티에 @Table(name="REVIEWKEYWORD") 를 붙여 실행하니, reviewkeyword 테이블과 review_keyword 테이블로 엔티티 하나에 테이블이 두 개 생성된 상황이다. 여기서 나는 @Table 옵션을 모두 지웠고 ddl-auto 옵션을 create 로 해서 다시 실행했다. @Table 어노테이션을 지우니 hibernate는 엔티티명대로 review_keyword 테이블을 drop 시키나, reveiwkeyword 테이블은 그대로 존재하게 된다. drop 시키려는 테이블 목록과 현재 DB에 남아있는 테이블 목록이 일치하지 않아 drop & create 가 실패한 것으로 보인다.
- 모든 테이블을 일일이 drop 시킨 후 create하여 테이블을 생성하여 해결했다.
- DDL-AUTO 옵션
  - create : 애플리케이션이 시작될 때마다 데이터베이스 스키마 삭제 후 새로 생성한다. 데이터베이스의 모든 데이터가 삭제된다.
  - create-drop : 애플리케이션이 시작될 때마다 데이터베이스 스키마를 생성하고, 종료될 때 스키마를 삭제한다. 모든 데이터가 삭제된다.
  - update : 애플리케이션이 시작될 때마다 데이터베이스 스키마를 수정한다. 새로운 테이블 추가, 필드 추가가 가능하다.
  - validate : 애플리케이션이 시작될 때마다 스키마를 유효성 검사한다. 데이터베이스 스키마가 올바르게 생성되었는지만 확인한다.
  - none : Hibernate 에서 데이터베이스 스키마를 관리하지 않는다.

결과물

깃허브 주소

https://github.com/clone-project-myplace/Backend.git
시연 영상

클론 프로젝트 - 네이버 마이플레이스(My Place)

이번 협업을 하며 느낀 점

이번주 진행한 클론코딩의 대상은 네이버 My Place 였다.
그동안 배운 CRUD를 잘 활용하여 만들 수 있을 것 같아 주제로 선정되었다.
와이어프레임을 그리고 API 명세서를 작성할 때, 참고할 대상 사이트가 있으니 좀 더 수월하게 작성할 수 있었다.
이번에는 기능 구현 전에 서버를 먼저 올려서 통신이 되는지 테스트도 먼저 해보고, 기능이 하나씩 구현되면 바로 서버에 올려 프론트가 테스트할 수 있도록 환경을 만드는 것이 목표였다.
서버 통신은 잘 되었으나, 프론트가 테스트하려면 먼저 구현되어야 할 조회 부분이 조금 늦게 구현되어 프론트의 테스트 시간을 많이 확보하지 못한 점이 아쉬웠다.
다음에 협업을 진행할 때는, API 기능 명세서를 프론트와 함께 보면서, 어느 기능이 먼저 구현되어야 프론트 테스트가 수월한지 정하고, 백엔드는 우선순위에 따라 기능을 구현해서 서버에 올려야겠다.