최종프로젝트 34일차.

해결한 문제점1.

• 팔로워/팔로잉 버튼 무한클릭시 팔로우/팔로잉리스트에 유저닉네임이 중복으로추가되는 오류.

원인파악

• 팔로워/팔로잉 요청이 중복으로 처리가되어도 팔로우/팔로잉 리스트를 보여주는 페이지에서 새로운 api를 호출하여 필로워/팔로잉리스트를 받아오기떄문에, 서버단에서 팔로워/팔로잉 api 요청을 받을떄 중복처리를 하지않았을것이라 판단.

서버측 답변

• 중복처리를 하고있는 상태였으며, 무한으로 누를시 이전요청이 db에 저장되기전에 다음요청이 보내져, 다음요청에대한 중복처리를 할 수 없는상태가되어 두 요청이 모두 db에 반영이됨.
  그래서 클라이언트에서 팔로우/팔로잉리스트 페이지로 이동하여 목록을 받아오는 api를 호출시 중복된 닉네임을 포함한 리스트를 불러오게됨.

해결을 위한 시도

1. lodsh의 debounce를 활용하여 팔로우/팔로잉 버튼을 눌렀을떄 일정시간이후 api를호출하는 콜백함수를 실행하여 해결하려함.

• 이에따른 추가적인 문제점발생

  • 최초엔 debounce시간을 150ms로 설정하였더니 클릭속도가 150ms보다 느려서인지 누를떄마다 이벤트가 발생하는상황이 자주는아니지만 가끔씩 발생함. 어느정도 개선이 되었지만, 100%를 위해선 debounce시간을 그이상으로 설정해야됬다고 판단.

  • 콜백함수가 실행되는 시간을 150ms이상으로 설정하게되면 사용자의 입장에서 버튼을 누른후의 응답을 보기까지의 시간이 너무길어 서비스측면에서 좋지않은 ux를 제공한다고 판단.

  -> 중복요청은 해결이됬으나, ux측면의 문제가 발생.

2. 팔로우/팔로잉 요청이 비동기적으로 발생한다는것을 이용하여 서버요청을 보냈을떄와 응답을 받기전의 상태를 관리하는 변수를 설정하여 응답을 받기전까지 버튼을 비활성화 시킴.

• 리덕스 툴킷중 비동기액션을 담당하는 createThunk함수에포함된 pending액션을 활용하여
  pending상태일떄 버튼을 비활성화시켜 중복요청과 버튼을 누른후 응답을 기다려야하는 이전문제점들을 모두해결.