users collection의 각 유저의 팔로잉 목록을 collection으로 만들기 위해 아래와 같이 시도했다. await setDoc(doc(db, `users/${user.uid}/following`, userId), {}); 근데 안된다.... doc의 두번째 인자로 document를 만드려는 collection의 경로를 한 번에 주면 되는 줄 알았는데 아니었다. 그래서 구글링으로 아래의 방법을 찾아냈다. https://stackoverflow.com/questions/72132896/firebase-firestore-add-document-to-sub-collection-version-9 Firebase / Firestore Add Document to Sub collection Version..
프로젝트
문제 현재 트윗을 보여줄 때 트윗을 게시한 사람의 프로필 사진도 보인다. 이렇게 구현하기 위해 트윗이 마운트될 때 트윗을 게시한 사람의 정보를 갖고 오도록 아래와 같이 함수를 만들어 useEffect에 넣었다. // Name 가져오기 const getName = async () => { const docRef = await getDoc(doc(db, "users", userId)); setName(docRef.get("userName")); }; // 프로필 사진 가져오기 const getProfilePhoto = async () => { const fileRef = ref(storage, `avatars/${userId}`); try { await getDownloadURL(fileRef).then((..
map 함수를 이용할 때 Each child in a list should have a unique "key" prop. 에러를 가끔씩 볼 수 있다. 이 에러는 map으로 리스트를 만들 때 key prop을 주지 않아서 발생하는 문제다. 키값으로 사용할 고유한 값이 없다면 인덱스 값을 키값으로 사용할 수도 있긴 하다. 그렇지만 자바스크립트의 배열은 정적이지 않아서 배열의 길이나 원소가 변할 수 있다. 그렇기 때문에 잘못된 컴포넌트가 리렌더링되기도 할 수 있다. 그렇기 때문에 배열의 각 요소가 갖고 있는 고유한 값을 키값으로 이용하는 것이 좋다. {result.map((res) => ( {res.userName} {res.description} {res.photo ?? null} ))} 나는 result ..
우선 폰트는 무료 폰트 사이트인 눈누에서 찾아서 다운로드 받았다 눈누 상업용 무료한글폰트 사이트 noonnu.cc 폰트를 다운받으러 가면 여러 확장자로 폰트를 제공하는 것을 볼 수 있다. 각 확장자의 의미는 다음과 같다. ttf(true type font): 2차원 베지어 방식으로 일반적인 문서 작업에 사용. otf(open type font): 3차원 베지어 방식으로 주로 그래픽 작업과 고해상도 출력에 사용 woff(web open font format): 웹에서 사용하는 포맷 로딩 속도는 woff2 > woff > ttf cdn을 사용하는 것보다 직접 다운해서 넣는 것이 안정적이고 빠르므로 그냥 다운 받았다. 내가 다운 받은 폰트는 ttf 파일과 otf 파일 2가지가 있어서 ttf로 받았다. 이제 다..
회원가입할 때 사용자 정보를 firestore에 document로 저장하려고 했는데 Missing or insufficient permissions. 이런 에러가 뜨며 document가 생성되지 않았다. 원인을 찾아보니 firestore 규칙 때문인것 같다. firestore의 규칙으로 가서 확인해보자. 로그인하지 않은 사용자는 firestore에서 create를 할 수 없게 아래와 같이 규칙을 설정해놨었다. 그런데 회원가입할 때 firestore에 document를 create하려고 하니 에러가 난 것이다. 해결하는 방법으로는allow read, write: if true; 이렇게 모든 권한을 허용해주는 방법도 있지만 이건 아무나 API키만 안다면 나의 firestore에 접근하여 사용할 수 있는 것..
