React Query
서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 조금 더 편리하게 사용하기 위해 리액트 쿼리를 도입하였습니다.
Recoil
전역 상태 관리 라이브러리로는 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있으며, 리액트 쿼리와도 호환성 및 접근성이 뛰어난 리코일을 채택하였습니다.
Tailwind
또한 생산적인 디자인 시스템 구축을 위하여 코드의 유지보수에 뛰어나고 디자인툴인 피그마와도 잘 맞는 프레임워크인 테일윈드를 도입하였습니다.
WebSocket, Stomp
서버의 이벤트를 클라이언트로 보내는 방법 중에 서버에 부하가 덜 오게끔 양방향 통신이 가능한 websocket을 사용했습니다. 채팅 기능을 위해서 기반으로 동작하는 stomp를 이용해 topic을 생성하도록 했습니다.
Redis
비동기 통신을 하는 채팅 구현을 위해 메시지 브로커로는 레디스를 사용하였습니다. 여러 가지 메시지 브로커 중에 레디스를 선택한 이유는 Pub-sub구조여서 일대일 일대다 형태가 모두 가능하고 Key-Value를 사용하는 In-Memory 데이터 저장소이기 때문에 단기 메시지를 처리하기에는 매우 빠를 것이라고 판단하였기 때문입니다.
Oauth2
로그인을 구현할때 일반로그인은 유저들의 편의성을 떨어뜨린다고 생각하여 소셜 로그인 처리방식으로 편의성을 향상하고자 하였습니다. 소셜 로그인 중, 가장 보편적인 카카오, 구글 그리고 개발자 데이팅앱이기 때문에 깃허브까지 선택하게되었습니다.
스택과 지역 등 이용자의 취향 별 개발자 추천
맘에 드는 개발자에게 좋아요
상호 좋아요 일 경우 채팅 방 생성
실시간 채팅으로 상대와의 대화
profile 페이지 폼데이터 변환 과정 에러
- 프로필 설정 부분 폼데이터 과정중 img가 [object] 형식으로 가는 에러
- 해결 headers에 Content-Type를 multipart/form-data로 설정 후 에러를 해결 하였습니다.
추천 페이지 Internal server error 500에러
- QueryCache 는 queryKey 만 같다면 error response도 캐싱하고 그 이유로 같은 key로 query를 실행하면 캐싱되어 있던 error response를 사용한다. 별다른 설정을 하지 않았다면 캐시된 값을 사용하는 동시에 API request를 보내기 때문에 아래 코드를 queryClient.clear() 사용해 캐시 삭제 후 해결 완료
유저테이블 구현 시 문제점
소셜 로그인 시 받아오는 정보와 프로필 등록할 때 받아오는 정보를 User table 하나에 넣는 방법이 아니라 양방향 onetoone 연관 관계를 맺어서 서로 다른 테이블에 나눠서 넣으려고 시도하였습니다. 양방향 onetoone 연관 관계를 맺으면 N+1 문제가 발생할 것을 방지하기 위해 하나의 테이블로 만들어 소셜 로그인 시 정보들을 받아온 후 프로필 등록 시 받는 정보들을 putmappping을 통해 받아오는 방법을 선택했습니다.
TimeStamped 로컬시간 설정 에러
timestamped 클래스에서 LocalDateTime을 통해 받아와서 mySQL db에 시간대를 저장할 때 9시간 차이가 나는 문제점이 생겨서 실시간 채팅 메시지가 보내진 시간 역시 잘못 되어 있었습니다. ubuntu 서버 상에 있는 localtime을 확인해보니 미국 기준이어서 "sudo timedatectl set-timezone Asia/Seoul"를 통해 한국 기준으로 바꾸어 해결하였습니다.
