코드 공부중 별것도 아닌 기능 하나 넣겠다고 3시간은 넘게 태웠다.
원하는 대로 실행이 안되는 코드를 보며 머리를 쥐어짜냈지만
결국 문제는 s하나였다.
getDoc하고 getDocs의 차이였는데, 내가 쓰려던 데이터는 문서 한개였고
내가 복붙으로 긁어온 코드는 getDocs였을 뿐이다.
아니 그냥 하나로 통일하지 왜 이렇게까지 구분하는거야...
이 다음에도 막힌 부분이 있었는데, 이것 또한 다 완성하고 하나를 추가 안해서 작동이 안되는 거였다.
원래 오류가 나오면 오류문 전체를 긁어서 구글링이나 gpt한테 물어보는게 국룰인데, 내 오류메세지는
찾다보니 상당히 광범위한 오류였다.
즉 이 오류메세지가 뜨는 이유가 상당히 많다는 뜻이다.
머리를 싸매다가 어, 혹시? 하는 마음에 여러가지 시도를 하다가 지운 await라는 구문을 추가해보니...
잘 작동한다.
아래는 문제가 됐던 코드다.
let revisedata = getDoc(doc(db, "albums", docID));
console.log(revisedata);
let row = revisedata.data();
console.log(row);
getDoc이라는 놈은 비동기 함수라서 코드가 진행이 되는 동안 다른 작업 수행이 가능하다.
즉 firebase에서 문서를 받아오는 동안 다음 줄이 진행된다는 것.
여기서 revisedata라는 변수에는 getDoc에 의해 프로미스라고 하는 비동기함수 전용 객체가 들어간다.
다음 줄을 보면 row에 revisedata.data();가 할당되는데 .data()메소드는 문서의 내용을 받아오는 역할을 한다.
그런데 차마 getDoc으로 데이터를 다 받아오기 전에 row에서 revisedata의 내용을 읽어오라는 명령을 내린것이다.
당연히 읽을 수 있을리가 없겠지.
그래서 저런 비동기함수와 필수적으로 사용해야 하는게 await라는 구문이다.
말 그대로 작업 끝날때까지 기다리라는 뜻이다.
let revisedata = await getDoc(doc(db, "albums", docID));
console.log(revisedata);
let row = revisedata.data();
console.log(row);
위 코드처럼 await를 추가하면 귀신같이 잘 실행된다.
사실 await를 뺄 생각을 한 것도 처음에 말한 getDoc과 getDocs를 구분 못해서 이것저것 고쳐보다가 일어난 사태이다.
(넣어도 안되고 빼도 안되는데 그 중요성을 알 리가 있나..)
사실 이전에도 파이썬이나 C로 코딩하던 때에도 이런 사소한 걸로 막히는 경우는 많았다.
다만 원인을 알았을 때의 그 허탈함은 시원하기도 하지만 진이 다 빠진다.
오늘은 여기까지만 하고, 원하는걸 마저 구현하면 4주차 개발일지에 마저 작성해야겠다.
사실 4주차 강의는 모두 마쳤지만 시키지도 않은 걸 만드느라 시간이 좀 걸린다.
이게 맞는건가 싶기도 하다. 분명 공부효과는 있겠지만, 곧있으면 본캠프 시작이고, 지금 하는 코스는 왕초보 개발이니까.
매니져님은 왕초보 코스를 다 들으면 SQL강의도 주신다고 한다. 이럴 시간이 아니라 빨리 SQL 강의를 듣는게 맞을까?
잘 모르겠다.