📅 오늘 한 일
1. 모집글 작성 기능 구현 완료
✏️ 무엇을 배웠나
1. 파이어베이스 currentUser.displayName이 null 값이 뜨는 이유
파이어베이스 getAuth.currentUser를 console.log로 찍어보면 안에 displayName과 profileImg가 뜬다.
유저 닉네임을 보여줄 용도로 currentUser.displayName을 변수에 넣어 로그를 찍어보면 에러가 뜨게 된다.
그래서 유저의 displayName과 profileImg를 유저 정보를 담는 컬렉션 안에 담은 뒤에, query와 getDocs를 사용해 닉네임과 이미지 url을 가져와서 해결했다.
// 유저 닉네임 - 프로필 가져오기 함수
const getUserInfo = async () => {
const q = await query(
collection(db, 'user'),
where('uid', '==', currentUser.uid),
);
getDocs(q).then((querySnapshot) => {
const user = [];
querySnapshot.forEach((doc) => {
user.push({
nickName: doc.data().nickname,
profileImg: doc.data().profileImg,
});
});
setNickName(user[0].nickName);
setGetProfileImg(user[0].profileImg);
});
};그런데 오늘 근본적인 해결 방법을 알게 되어서 기록으로 남긴다.
컴포넌트 내 최상단 레벨에서 currentUser.displayName을 변수에 할당하고 로그를 찍으면 에러가 뜨고, 컴포넌트 내 함수나 useEffect 안에 넣어서 로그를 찍으면 잘 찍힌다.
근본적인 원인은 auth가 초기화를 완료하지 않은 상태에 있을 수도 있기 때문에 그런 경우에 null값을 반환하게 된다. 즉 아직 값이 완전히 들어가지 않은 상태니까 currentUser.displayName이 null이 뜨게 된 것이다.
그런데 여기에 대한 예외처리를 하지 않았으니까 문제가 에러를 뱉고 앱이 종료되는 것. 아래 공식 문서에 나와 있다.
const currentUser = authService.currentUser;
if (currentUser !== null) {
const displayName = currentUser.displayName;
console.log(displayName); // print 'displayName'
}이렇게 조건문으로 제어해주게 되면 정상적으로 작동하는 것을 확인할 수 있었다.
currentUser에 접근을 못해서 상단의 코드처럼 우회해서 들어가는 것보다 훨씬 효율적이네.
🥵 무엇이 어려웠나
1. react-quill에서 텍스트 값 가져오기
편한 글쓰기를 위해 react-quill 에디터 라이브러리를 사용해서 기능을 구현하고 작성한 글을 파이어베이스에 보내는 것까지는 완료가 됐다. 그런데 위지위그 에디터라서 텍스트에 html 태그가 붙여서 나오고 있고, 실제 게시글 뷰로 그려줄 때는 텍스트를 어떻게 정제해서 보여줄 수 있는지 고민하고 있다.
