소셜미디어로 로그인하는 유저의 경우 새로운 user 컬렉션에 해당 유저 정보를 새롭게 추가해 주었다.
이렇게 코드를 작성해 두니 소셜 로그인을 할 때 마다 user 컬렉션의 정보가 새롭게 업데이트 되어 버리는 현상이 있었다.

어떻게 수정하면 좋을까?

1. user collection에서 현재 로그인하는 유저의 uid 쿼리 필터링하기, 이미 있는 유저인 경우 새로운 유저 컬렉션 생성하지 않기

2. user collection에 있는 모든 유저의 uid를 읽어와 로그인 하는 유저의 uid와 비교하기, 이미 있는 유저인 경우 새로운 유저 컬렉션 생성하지 않기

3. 더 있을 거 같은데 일단 이까지만 생각난다..

첫 번째 방법으로 해보기

제일 간단할거 같아서 1번을 선택해서 해보니 이미 소셜 로그인을 한 적이 있는 유저는 데이터가 초기화 되지 않고 잘 받아와 진다!
그런데 소셜 로그인을 한 적이 없는 유저의 경우 유저 컬렉션 까지 생성은 되는데 로그인 화면에서 홈 화면으로 자동으로 넘어가지 않는 현상이 발생했다.
콘솔을 찍어보니 유저의 데이터를 제 시간에 받아오지 못하기 때문으로 판단된다.

App(로그인하는 현재 유저 설정) > Router > Auth(로그인 폼 및 소셜 로그인 시 유저 컬렉션 생성) 순으로 작성해 두었기 때문에 새로운 소셜 로그인을 시도하니 유저 데이터를 제 시간에 받아오지 못해서 undefine만 뜬다.

그래서 App에 setTimeOut() 메서드를 활용하여 아주 단 시간 늦춰서 데이터를 잘 받아 올 수 했게 했더니 둘 다 잘 됐다.
그런데 여기서 또 문제가 발생하고 마는데... App이 제일 상위 컴포넌트이다 보니 하위 컴포넌트인 라우터에 속한 모든 페이지(Home이며 Profile이며 로그인하는 Auth)로 넘길 때 마다 타임아웃이 적용되서 로그인 화면이 아주 잠깐! 떴다가 페이지가 뜨는게 아닌가 ^^!

뚝딱뚝딱 물 줄줄 새는데 아무렇게나 막아놓고 좋아한 꼴이었다. 흑흑

두 번째 방법으로 해보기

그래서 두 번째 방법으로 넘어갔다.

1. App에서 모든 유저의 컬렉션 데이터를 받아와 모든 유저의 id를 담은 리스트를 만들어 state에 업데이트 한다.
   데이터를 array로 만들어 state에 업뎃할 때 useEffect를 사용해서 처음 렌더시 한 번 만 수행되게 한다.

2. state 값을 props으로 하위 컴포넌트인 Auth 컴포넌트에 보내 준다.

3. 현재 로그인하려는 유저의 id 값이 props으로 받은 어레이에 포함되는지 includes 메서드를 사용해 확인하고, 이미 있는 유저인 경우 새로운 유저 컬렉션 생성하지 않도록 한다.

솔직히 두 번째 방법으로 하니 초반부터 모든 유저의 데이터를 받아오는것이 과연 효율적일까 의문이 들긴 한다만 현재로서는 이 방법 외에는 떠오르지 않기 때문에 뚝딱뚝딱 메꿔 두었다. 🥲

혹 더 좋은 방법이 생각난다면 바꿔봐야지!