| CloudFront |
사용자에게 제공되는 정적 컨테츠의 전송 속도를 높이고 보안을 위한 HTTPS를 적용시키기 위해 사용되었다. |
| Sock.js |
실시간 데이터 통신으로서, 실시간으로 owner 와 renter가 채팅으로 정보 공유가 가능해졌다. 또한 실시간 알림을 통해 답장이 왔는지 알수 있게 되었다. |
| Redux-Toolkit |
액션타입, 리듀서, 액션 생성 함수, 초기상태를 하나의 함수로 편하게 선언할 수 있고, 불변성 유지를 위해 번거롭게 코드들을 작성하지 않고 유지를 해준다. |
| Chart.js |
사용자에게 수익을 한눈에 볼 수 있게끔 데이터를 시각화 하였다. |
| React-Multidate-Picker |
오너의 편의성을 위해 등록날짜, 예약날짜를 구분하기 위함과 동시에 오너가 한 눈에 볼 수 있게 달력을 사용. |
| Kakao Map API & Daum Postcode API |
두 가지 API를 같이 사용한 이유는 우선 kako map api 성능은 google map 다음으로 빠르다. google map은 대한미국에서 사용하기에 적잘하지 않기 때문에 kakao map 을 사용했고, daum postcode api는 카카오 맵과 호환성이 뛰어나고, 우리 서비스상 필요한 상세주소가 다 담겨져 있어서 사용하기 편했다. |
| Intersection Observer |
scroll-height로 계산하여 무한스크롤 사용이 가능하지만, Intersection Observer 를 사용하면 이미 설정한 element가 노출이 되었는지 판단하고 감지가 되어서 이 점을 활용하여 무한스크롤을 구현했다. 불필요한 요청을 줄이고 필요할때만 요청이 가게끔 했다. 그리고 debounce & throttle 같이 추가적으로 코드를 안써도 되고, offsetTop으로 layout에 정확한 값을 구하기 위해 Reflow를 하는데, Intersection Observer를 사용하면 매번 Reflow를 할 필요없다. |
| browser-image-compression |
이용자들이 고의적으로 많은 양에 고화질 이미지들을 업로드 했을때 s3 비용과 서비스 렌더링 속도에 악 영향을 미칠수 있기에, 프론트쪽에서 이미지 용량을 압축해서 s3로 보내기 위해서 도입 하였습니다. |
| SSE(Server-Sent Event) |
물론 WebSocket으로도 알림 기능을 구현 가능하지만 알림이라는 것이 양방향으로 데이터를 주고 받기보다는 서버에서 클라이언트로 일방적으로 보내주는 것이기 떄문에 overkill이라고 생각되는 websocket이 아닌 SSE를 통해 알림을 구현했다. |
| QueryDSL |
검색을 위해서는 복잡한 쿼리가 필요한데, JPQL의 경우에는 컴파일 시점에서 문법 오류를 잡지 못한다. 그래서 JPQL보다 동적인 쿼리 작성이 편리한 QueryDSL을 사용하여 검색 기능을 구현했다. |
| Swagger |
Spring REST Docs는 개발기간이 짧은 항해99 실전 프로젝트의 특성상 문서 작성에 드는 시간이 길고 복잡하다. 그러나 Swagger는 비교적 쉽고 간편하게 적용이 가능해서 Swagger를 통해 API 문서를 자동화했다. |
.png)
.png)