• 기술적 강점

  • [ FE ] : Refresh Token 적용
  • [ FE ] : AWS S3, Route53, CloudFront 사용해 배포
  • [ FE ] : Kakao Map API를 통한 현재위치기반 서비스 및 게시물 위치
  • [ FE ] : Websocket 적용 (SockJS, Stompjs)
  • [ FE ] : SSE 적용
  • [ BE ] :
  • [ BE ] :

• 기술적 의사결정

  FE

  요구사항	선택	선택 이유 및 근거
  CSS	styled-components	- CSS파일을 따로 나누지 않고 한 파일을 통해 관리할 수 있음

  • Global Style, Mixin 기능을 사용할 수 있음
  • SVG 파일을 컴포넌트화 해서 색 변경 | | 입력 | 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 | - 사용자에게 에러 메세지나 알림을 모달로 만들고 간편하게 모달을 열고 닫기위해 라이브러리 사용
  • 애니메이션을 쉽게 만들고 성능을 향상
  • 사용자에게 보다 나은 UX를 주기 위해 사용 | | QR코드 | 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 | - 유저 위치를 암호화하여 사용하기 위해 도입
  • 유저 위치를 한번만 받고 그값을 가져다가 사용하기 위해 (불필요한 로딩 줄이기 위해서 ) |

  BE

  요구사항	선택	선택 이유 및 근거
  자동 배포	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를 채택

• 이번 주 한 일

  • 팀 전체 (리더님께서 필두로 정리해 주세요.)

  • 팀원 개인별로 작성해 주세요.

• 유저 테스트

• 성별

• 연령

• 이용 플랫폼

• 이용 웹브라우저

• 반려동물 키우고 있는지?

• 어떤 반려동물인지?

• 직업군

• 유용하다고 생각했던 기능

• 서술 (당첨자 자료로 사용)

• 유기 동물 해결에 도움이 될 것 같은지?

• 입양 관심이 늘었는지?

• 실제로 서비스를 이용해볼 계획이 있는지?

• 공통부분 정리

공통적 부분 (버그)