[Seoulvival] Trouble shooting

문제점             부연설명                                            해결방법

middleware에서 cookies().set() 이나 기타 비동기 함수의 사용 가능 여부	cookies() 의 경우 route 와 server 내에서 사용 가능하며 middleware에서 비동기 함수를 사용했을 때 비동기처리가 끝나기 전에 강제로 종료가 되는 듯한 모습을 보였다	middleware에서 토큰을 통해 사용자 구별을 하려했지만 server-component나 app-route 부분에서 처리하기로 하였다
좋아요 버튼과 ref를 사용한 입력창	props로 내리기에는 보기가 싫어서 전역적으로 ref를 관리해서 사용하면 어떨까라는 생각을 하게 되었다. 근데 ref객체 자체를 담아보니 답이 없이 에러가 뜨면서 current는 readonly니깐 변경하지말라는 에러가 뜬다	ref객체 자체를 담지 않고 current를 통해 해당하는 값만 담아서 사용해서 해결했다.
데이터 로딩 시 클라이언트 서버 과부하 우려	서울시 전체의 데이터를 한번에 가져오면 유저에게 최신의 다양한 데이터를 보여줄 수 없을 뿐만 아니라 클라이언트 서버 부하를 증가시킬 수 있기 때문에 비효율적일 것이라 생각했다.	Lazy Loading 도입: 사용자가 지도의 특정 부분 에 포커스를 맞추면(강남구, 송파구 …) 그 부분의 위도와 경도 정보를 저장한다. 그리고 나서 turf 라이브러리를 사용해 그 객체를 서울시 경계 좌표 Polygon 데이터를 이용하여 해당 구의 정보를 매칭한 후, 그 구에서만 데이터를 50개씩 가져오는 방법을 채택했다. 유저가 맵을 움직여서 센터를 바꾸고 구가 달라지면 새로운 데이터를 50개 더 가져온다. 이를 통해 UX/UI를 개선하고 서버의 부하도 방지할 수 있었다.
axios.instance의 활용	보통 react에서는 axois의 instance 기능을 통해서 response와 request시에 공통적으로 처리를 할 수 있는 부분이 있어서 사용하고 싶었지만 Next.js에서 bff에서 처리를 하다보니 axios의 response와 request를 모두 이용할 수 없었다	axios instance를 사용하지 않고 BFF에서 필요한 로직을 일괄적으로 처리를 하였다.
JWT토근의 효율적인 관리	JWT 토큰을 어떻게 관리하고 백엔드와 소통을 하는 것이 가장 좋을지에 대해서 생각을 하고 axios instance를 사용하지 못하는 만큼 조금 다른 방식으로 접근을 하였다	백엔드에서 JWT를 받으면서 maxAge를 설정해서 만료시간을 백엔드와 동일하게 설정을 하고 cookie에 넣어서 관리를 한다 그리고 cookie에 accessToken의 유무로 토큰에 대한 신청을 조절 할 수 있었다