Firebase 변수 데이터 객체 형태 저장 방법

DressCode 개발일지

🤔발단

유저들이 자신만의 스타일을 업로드 하는데 그 스타일들을 분류하기 위해서 Style tag를 만들었고, 그 tag에는 내가 기본적으로 큰 틀로 제공하는 adminTag와 사용자가 좀 더 세분화해서 스타일을 관리하고 찾아볼 수 있도록 하는 userTag를 하나의 태그로 만들 생각이었다.

데이터를 저장하는 형식은 UserStyleTag라는 컬렉션을 만들고 그 안에 userTag : adminTag의 형식으로 데이터를 저장하려고 했다.

그런데 태그의 key값으로 사용하려고 했던 userTag가 변수가 아닌 "userTag"라는 문자열 상수로 저장이 되었다.

문자열이 값으로 들어가는 자리에 변수가 들어가야하기 때문에 템플릿 리터럴(template literal)를 사용해서 다음과 같이 코드를 생성했다.

 const doneClick = async () => {
    await updateDoc(doc(db, "UserStyleTag", `${user.uid}`), {
      `${userTag}`: adminTag,
    });
  };

하지만 코드 자체가 오류가 되는 현상이 생겼다.

🧑🏻‍💻해결

firebase에서 필드를 생서하는데 key값이 변수라면 템플릿 리터럴을 사용하는게 아니라 [ ]를 사용해야 한다는 점을 발견하고 코드를 수정하였다.

 const doneClick = async () => {
    await updateDoc(doc(db, "UserStyleTag", `${user.uid}`), {
      [userTag]: adminTag,
    });
  };

위의 코드로 기존의 문제는 해결됐지만 여기서 한가지 더 변화를 주고 싶었다.
굳이 UserStyleTag라는 컬렉션을 만들지 않고 기존의 User컬렉션에 StyleTags라는 map형식의 필드를 생성하는 것이다.
그 전에 User문서에서 StyleTags라는 필드가 존재하지 않는데 updateDoc을 사용하면 필드가 존재하지 않았어도 자동 생성이 되는지 확인을 해야했다.
그래서 대충 간단한 업데이트 코드를 만들고 실행시켜보았다.

   await updateDoc(doc(db,"User",`${user.uid}`),{
      userTag : adminTag
    })

확인 결과!!
updateDoc을 사용하면 새로운 필드를 생성하는 것도 가능하다는걸 알아냈다.
그래서 이 모든 것을 만족하는 새로운 코드를 작성하면 다음과 같았다.

  const doneClick = async () => {
    await updateDoc(doc(db,"User",`${user.uid}`),{
      [`StyleTags.${userTag}`] : adminTag 
    })
  };

위와 같이 코드르 작성하면 User라는 기존의 컬렉션에 StyleTags라는 새로운 필드를 만들고 변수인 userTag를 key값으로 가지고 adminTag를 value로 가지는 데이터를 생성할 수 있었다.