기술적 강점
기술적 의사결정
| 요구사항 | 선택 | 선택 이유 및 근거 |
|---|---|---|
| CSS | styled-components |
- CSS파일을 따로 나누지 않고 한 파일을 통해 관리할 수 있음 |
react-hook-form | - 라이브러리를 사용해 input 요소 여러개일 때 불필요한 리-렌더링 막기redux-toolkit, axios | - redux-toolkit 을 사용하여 기존 redux 의 보일러플레이트를 줄이고 기본으로 제공되는 immer를 통해 State의 불변성을 유지할 수 있음axios 를 통해 interceptors를 설정하여 통신하고, thunk 를 통해 통신과 동시에 State를 관리할 수 있음 |
| 캐러셀 | react-slick, slick-carousel | - 캐러셀 구현의 시간 단축을 위해 간편한 라이브러리 사용react-intersection-observer | - html 요소가 화면에 표시 됐음을 간편하게 관찰하기 위해 라이브러리 사용inView 를 통해서 스크롤의 위치를 감지해 해당 html 요소가 화면에 노출시 서버 통신을 통해 리스트를 받아옴 |
| Map | Kakao Map API | - Kakao Map API 사용을 통해 좌표를 주소로 검색, 주소를 좌표로 검색framer-motion | - 사용자에게 에러 메세지나 알림을 모달로 만들고 간편하게 모달을 열고 닫기위해 라이브러리 사용qrcode.react | - 원래는 QR코드로 변경해주는 구글 API를 사용하기로 했었으나 서비스 종료로 인해 qrcode.react 라이브러리를 사용해 원하는 주소를 간편하게 QR코드로 변경 |
| 포스터 저장 | html2canvas, file-saver | - 포스터 기능에서 원하는 html 요소를 간편하게 이미지 파일로 변환, 저장하기 위해 두 라이브러리 사용html2canvas 라이브러리를 통해 html요소를 이미지로 변환하고, file-saver 라이브러리를 통해 변환한 이미지를 파일로 저장 |
| 채팅 | SockJS, Stompjs | - 백엔드가 Spring이라서 SockJS 를 공식 지원하기 때문에 선택했고, SockJS를 통해 웹소캣이 지원되지 않는 브라우저에서도 실시간 통신 가능하게 처리해 Websocket 연결Stompjs 의 사용을 통해 메세지 전송 처리방식을 간편하게 함 |
| 실시간 알림 | SSE,
event-source-polyfill | - 채팅 내 게시물 댓글이 달리면 실시간으로 알림을 주기 위해 SSE 기능 도입
-event-source-polyfill 는 SSE를 지원하지않는 브라우저 에서도 SSE를 사용할 수 있어서 도입 |
| 암호화 | CryptoJS | - 유저 위치를 암호화하여 사용하기 위해 도입| 요구사항 | 선택 | 선택 이유 및 근거 |
|---|---|---|
| 자동 배포 | Github Action, |
|
Code Deploy |
클라우드에서 호스팅되는 서비스로 별도의 서버나 인프라를 구축하지 않고도 바로 사용할 수 있는 github action과 code deploy를 활용해 자동배포 | |
| 동물보호관리시스템 Open API | ||
| 호출 및 데이터 수집 | `Scheduler, | |
| kakaoMapAPI` | ||
| 동물보호관리시스템 Open API는 데이터 갱신 주기는 5분이며 해당 데이터에는 좌표 정보가 포함되지 않음 | ||
| KakaoMapAPI를 활용 좌표 정보를 수집하며, 스케줄러를 활용하여 데이터를 수집, 관리함 | ||
| 무한 스크롤 | Pageable |
스프링 데이터 JPA의 페이징과 정렬기능을 활용한 무한스크롤 |
| 채팅 | `WebSocket, | |
| SockJs, | ||
| STOMP` | 서버와 클라이언트 간 양방향 통신을 제공하는 WebSocket을 사용하여 통신함 | |
| WebSocket 위에서 작동하는 프로토콜로 메시지 브로커를 사용하여 메시지를 전달하는데 있어 더욱 효율적으로 구현할 수 있는 STOMP를 사용해 메시징 기능 구현 | ||
| SockJs를 통해 웹소켓이 지원되지 않는 브라우저에서도 실시간 통신 가능하게 처리 | ||
| 메일 전송 | JavaMailSender, |
|
Thymeleaf |
JavaMail api를 이용하여 계정 정지된 회원에게 메일 전송, | |
| Thymeleaf를 이용해 메일 html파일 작성 | ||
| 실시간 알림 | SSE |
양방향 통신이 가능한 웹소켓을 사용해도 되지만 보다 가볍고 기존의 HTTP 연결을 사용할 수 있는 (서버 - 클라이언트) 단방향 통신의 SSE를 사용해 실시간 알림 기능 구현 |
| 에러 및 로그 수집 | sentry |
자동배포 후 에러와 로그 수집이 번거로워져, sentry를 활용해 에러, 로그 수집 |
| 슬랙과 연동하여 오류/이슈 발생 시 즉각적인 알림을 받을 수 있고 사용성이 간편하고 쉬운 Sentry를 채택 |
이번 주 한 일
유저 테스트
성별
연령
이용 플랫폼
이용 웹브라우저
반려동물 키우고 있는지?
어떤 반려동물인지?
직업군
유용하다고 생각했던 기능
서술 (당첨자 자료로 사용)
유기 동물 해결에 도움이 될 것 같은지?
입양 관심이 늘었는지?
실제로 서비스를 이용해볼 계획이 있는지?
공통부분 정리