Navis 트러블 슈팅 일지

✔️ [FE] 소셜로그인 에러

리다이렉트 URL 오류

카카오톡 외부 API를 사용하는 과정에서 리다이렉트 경로 설정에 오류가 있었다. 프론트엔드 쪽 경로와 백엔드 쪽의 경로에 에러가 있었는데 이것을 빠르게 캐치하지 못했다.

해결

카카오 디벨로퍼의 공식 문서를 참고하여 올바른 리다이렉트 주소와 REST API KEY를 공유받아 해결할 수 있었음

 

권한 설정의 딜레마

나비스의 계정은 이메일만 가능하도록 설정하였는데, 소셜 로그인으로 가입하면 권한 동의에서 계정명(이메일)을 제공하는 항목이 필수가 아니라 선택이었다. 이로 인해 가입자가 이메일 제공에 동의하지 않고 가입하면, 계정명은 없는데 소셜 로그인이 가능한 기묘한 상황이 발생하였다.

 

1차 해결

기술 멘토링에서 이 문제에 대해 상담한 뒤, 이메일 제공을 받지 못한 계정은 임시 난수 ID를 생성하도록 하고(어차피 소셜 로그인으로 들어가기 때문에 복잡한 계정명을 받아도 유저가 신경쓸 부분은 없었다고 판단) 계정명이 필요한 작업이 생길 경우 프로필 페이지에서 본래 계정명을 바꾸도록 유도하는 예외 처리를 하였다.

2차 해결

카카오 디벨로퍼에서 공식 문서를 살펴보던 중 비즈앱 동의를 하면 계정명 제공 동의를 필수 항목으로 추가할 수 있다는 정보를 입수한 뒤 이를 실행하였다. 이 과정을 거친 덕에 더 이상 계정명의 부재에 대한 예외 처리를 할 필요가 없어졌다.

---

✔️ [FE] 리액트 쿼리 - invalidate

페이지를 넘어가도 살아있는 쿼리

A 페이지에서 다른 페이지로 이동한 다음 다시 A페이지로 돌아올 때, 기존에 있던 쿼리가 갱신되지않고 남아있어 useQuery로 데이터를 받아오지 않고 에러를 일으키는 문제를 발견함.

 

1차 문제 해결 - refetch, 새로고침

각 페이지에 접속할 때 문제가 될 수 있는 쿼리의 키값에 접근해 그것을 refetch하거나, 아예 window.location.reload()로 쿼리를 초기화 시키는 방법을 시도했었다.

 

2차 문제 해결 - 쿼리 삭제

그러해도 해결이 되지 않고, invalidate 관련 이슈를 찾다가, 아예 해당 페이지를 거쳐야 하는 부분에서 해당 쿼리키를 찾아 삭제하는 방법을 시도했다. 이렇게 함으로써, 모든 쿼리를 재갱신하지 않고 문제가 될 쿼리만 삭제하고 올바른 순간에 발동할 수 있도록 하였다.

---

 

✔️ [FE] 데이터 전송 - 방식의 차이

소통 오류

formData를 이용하여 과제 제출의 정보를 보내는데 있어 벡 프론트와의 의견차이가 있었다. 프론트 엔드 입장에서는 복수의 파일을 formData에 넣어 POST를 보내는데, 벡 엔드에서는 각각의 파일에 대응하는 formData를 만들어야 하는 것 아니냐는 의견 차이가 있었다.

 

해결

좀 더 심도깊은 대화와 비교를 거친 끝에, 이러한 의견 차이는 벡 프론트 간의 작업 방식에서의 차이에서 기인했음을 알 수 있었다. 벡 엔드 부팀장이 직접 프론트 엔드의 깃허브 레포지토리에서 코드를 받아 로컬 환경에서 실행하며 분석한 결과, 벡 엔드에서 프론트 엔드에서 보내는 방식에 맞춰 작업하는 것으로 마무리했다.