프내기

useEffect useEffect(setup, dependencies?) 컴포넌트가 렌더링될 때 어떤 일(side effect)을 실행할 수 있도록 하는 hook. 여기서 말하는 Side effect란 화면이 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 외부 api를 가져오는 일이 이에 해당한다. 어떤 데이터를 가져오기 위해 일단 화면에 렌더링 할 수 있는 것들을 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 요청 즉시 1차 렌더링을 함으로써 api요청이 늦어지건 실패했을 때 영향을 최소화 시킬 수 있기 때문에 사용자 경험 면에서 좋다. Side Effect에는 두가지 종류가 있다. 정리(clean-up)가 필요한 것(컴포넌트가 삭제(unmount)되었을 때) ..

파베에서 데이터 받아와서 클라이언트 측에 저장할라했더니 안됩니다 const [posts, setPosts] = useState([]); useEffect(() => { async function getData() { const db = getFirestore(firebasedb); const querySnapshot = await getDocs(collection(db, "posts")); querySnapshot.docs.map((doc) => { setPosts([...posts, doc.data()]) }); } getData(); }, []); 파이어스토어에서 불러온 데이터 배열을 map을 돌려서 posts 배열에 업데이트 시키고 싶었다 querySnapshot.docs.map((doc) => {..

아까까지 잘 되던 애가 갑자기 왜이래.. ctrl + z를 쫙 돌려보니. fetch함수를 쓰고있는 toDataURL 함수에 로직을 중괄호로 묶어주는 과정에서 난 에러였다. 해결 void 라는 키워드와 중괄호를 떠올려보니 함수의 반환 방식에 오류있어 발생된 에러가 아닐까 하는 추측을 했다. 화살표 함수(arrow function)에 대해서 조금 찾아보았다. const arrowFn = () => ( Hello World ) arrowFn() // Hello World 화살표 함수는 중괄호를 쓰지않고 ()로만 묶어줘도 return 처리를 한다. 하지만 중괄호를 쓰고 return 을 명시해주지 않는다면, const arrowFn = () => { Hello World }; arrowFn() // undefie..