팀 프로젝트 간에 firebase를 이용해서 회원가입을 할 때 사용자의 정보를 firestore에 저장을 하려는 계획을 가지고 계신 분이 있었다.

문제의 코드

리액트 쿼리를 이용해서 작성을 하셨다고 했는데 리액트 쿼리에 대해서 간략한 동작 원리에 대해서만 들었고 발생하는 문제점은 사용자가 입력한 정보가 Authentication에 제대로 저장을 되는 것은 확인이 됐는데 그 사용자의 정보를 firestore에 넣으려고 하니 에러도 안나오고 네트워크 상에서 지속적인 fetch와 ping만 오고 갈 뿐 저장이 안되는 것이 문제였다.

일단 에러부터 잡아보자

일단 에러부터 잡기 위해서 try catch문을 이용해서 에러를 찾아보았다. 그런데 에러가 뜨지도 않고 떳다 하더라도 에러의 호출 스택만 보여주고 그 외에 에러의 이름같은 아무런 내용도 없었다.
그래서 차라리 async await을 쓰지 말고 then catch를 사용해서 에러를 찾아보려고 했다.
이것마저도 아예 네트워크 통신만 반복될 뿐 뭔가 에러가 잡힌다거나 document가 등록된다는 동작이 없었다.
차라리 여기서 네트워크 통신에서 404에러라든지 400에러라든지가 나오면 문제점을 확인할 수 있었을 텐데 그런 에러도 뜨지 않고 200 정상 코드가 계속해서 통신만 했다(fetch, ping)

이렇게 에러를 바란 것은 처음이다

차라리 에러가 나왔으면 좋았을텐데 에러도 나지 않았다. 뭐가 문제인지를 전혀 모르겠다. firestore에서 제공하는 메서드가 잘못된건가 싶어서 setDoc이 아닌 addDoc을 했는데도 이상이 없었다.
로직 상에서는 전혀 문제가 없었다. 이렇게 에러를 바란 것은 이번이 처음인 것 같다

뜻밖의 해결

이 정도쯤 되면 문제가 우리가 아니라 firebase의 문제이거나 컴퓨터 상의 문제일 것 이라고 생각이 됐다. 물론 authentication은 제대로 동작했기 때문에 firebase의 문제가 아니겠지만 API키를 받으면 내 컴퓨터 상에서 한번 다시 실행을 해보고 여기서도 안된다면 firebase의 문제이지 않을까 싶어서 .env 파일을 눈으로 봤는데 .env 파일에서 각 값에 끝에 객체 마냥 ,이 찍혀있었다. 이거를 지우고나니 정상적으로 해결이 됐다.
아마도 맨 처음 API KEY를 제외한 나머지에서 ,가 붙어있었는데 그래서 API KEY까지는 값이 제대로 들어가고 그 외에 나머지 값들이 정상적으로 들어가지 않아 정상적으로 통신할 수 없었다.

초기에 프로젝트를 설정할 때 빼고는 더 이상 잘 건들이지 않는 파일 하나가 그렇게 문제일 것 이라고는 생각도 못했다. 이번 일을 통해서 다음에 해당 오류를 만났을 때 충분히 대처가 가능할 것 같다.