프내기

마감된 데이터를 db에서 잘 받아왔는데 화면에서는 내 예상과는 다르게 보여준다 좀더 자세히 써보자면 마감된 게시물 + 필터링을 하게되면 조건에 따라 필터링된 마감된 게시물들이 화면에 정렬되기를 원했다. 그런데 화면에는 작성한 날짜, 글은 제대로 정렬이 되는데 좋아요수와 댓글수는 처음 최신 순서(default 필터링) 그대로 고정되는 것이다. 더 의아한건 진행중인 게시물(마감된 게시물 반대)은 필터링이 잘 된다는것. 차근차근 콘솔을 찍어보며 시작해보자. 1. 콘솔찍어보기 마감 + 최신순 text가 "aaaa", "bbb", "cccc" 게시물인 순서로 작성을 하였고 최신순으로 나열했으니 index 0 - "cccc", index 1 - "bbbb", index 2 - "aaaa" 로 잘 정렬되어있다. 즉,..

filter를 이용해 최신순, 오래된순, 좋아요순으로 불러온 게시물들을 filtering 하는 기능을 구현하다가 위와 같은 에러를 보았다. 확인해보니 오래된순으로 filtering하기 위해 원본데이터.reverse()를 한 부분에서 났다고 한다. 해석해보면 "read only 데이터에 할당할 수 없다."이다. mdn에서 array.reverse() 에 대해서 찾아보았다. reverse() 메소드는 원본배열을 destructing한다. 즉 원본을 바꿔버리는 것이다. 그러니 원본 배열을 mutating 하지않고 reverse시키는 방법을 찾으면 될 것 같다. 깊은복사하는 방법으로 에러를 해결해보자. 해결1 깊은복사 export const filteredPostListState = selector({ key:..

File Upload js에서 파일을 업로드를 하려면 type="file"을 속성으로하는 input을 만들어 사용한다. 그리고 해당 input에 onChange를 달아 파일을 업로드하면 onChange event가 발생하여 파일이 업로드가 된다. 이번 1차 qa 후 이 파일업로드 쪽에서 이슈가 하나 발생했다. 바로 이미지 업로드 -> 삭제 -> 이미지 업로드 시 이미지가 아무것도 업로드되지 않는 이슈였다. 여기서 중요한 점은 "같은" 파일을 재업로드했을 때만 해당 이슈가 발생한 것 이다. 다른 파일을 업로드하면 문제가 없다. onChange안에서 콘솔을 찍어보니 아무것도 뜨지않는다. mdn에서 onChange에 대하여 찾아보았다. "값을 변경할 떄" 발생한다고 한다. 내가 같은 파일을 올리니 값이 실질적..

db에서 받아온 데이터를 부모컴포넌트에서 props로 넘겨 자식 컴포넌트에서 state에 바로 할당을 해주었다. 이때 TotalCountType 인터페이스로 props의 타입을 체크를 해주었는데도 불구하고 해당 state가 undefiend일 수 있다. 라는 에러 메시지를 보았다. 타입을 선언해주었는데도 말이다. 해결 타입을 체크해준건 좋다. 하지만 타입체킹을 해준 데이터에 연산을 하는 과정에서 undefiend일 수도 있다고 한 데이터에 + 1, -1을 해주었기 때문에, "undefined 일 수도 있는데 왜 연산을 했지?" 타입스크립트로부터 타박을 받은 것이다. 타입이 number 일 때만 연산을 수행하겠다는 코드를 추가로 입력해주니 해결되었다. 끝.

파베에서 데이터 받아와서 클라이언트 측에 저장할라했더니 안됩니다 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..

목표 기본 이미지 / 업로드 이미지 파이어베이스에 업로드하기 문제 파베에 업로드하려면 file 혹은 Blob 객체로 올려야한다. 근데 기본이미지는 그냥 이미지 객체임. 이제 어쩔껀데? https://stackoverflow.com/questions/28042535/converting-image-object-to-file-object-javascript 여기보면 src를 이용해서 File 객체로 만드는 코드가 있는데, 한가지 에로사항이 있었다. 왜냐하면 이미지 객체엔 fileName이라던가 name 같은 프로퍼티가 따로 없었기 때문이다. 게다가 src path에서 뽑아와보려 했지만 실제 정적이미지 파일에는 없는 이상한 문자열이 추가되어 정확한 파일이미지를 가져올 수 가 없었다. 예를 들면, 내가 가지고 있..

No overload matches this call. 탭 컴포넌트를 구현 중 overload라는 처음 보는 단어를 담은 에러메시지를 보았다 목표 커스텀 스타일드 컴포넌트인 에 focused라는 props를 넘겨 true/false 냐에 따라 선택된 탭을 표시하기. 에러 해결 props를 넘기는 중에 다음과 같은 에러가 났다. "No overload matches this call." 오버로드는 저그의 인구수를 늘려주는 유닛으로써 100미네랄을 주면 뽑을 수 있습니다 overload란 정확히는 function overloading이라는 함수와 관련된 개념이다. 동일한 이름의 함수에서 들어오는 매개변수의 type에 따라 다른 코드를 실행하는 것을 말한다. ts에서는 각 함수의 매개변수의 개수도, 타입도 같..

Global style과 ThemeProvider을 이용하여 전역 css와 theme을 적용하고싶었다. 처음에 root layout 파일(layout.ts)에 태그를 두어 적용하려했지만 에러가 떴다. "그거 쓰려면 맨 위에 "use client" 써줄래?" 라고 한다. ``` {children} ``` 그래서 Global style과 ThemeProvider 태그를 지워보았더니 에러가 사라지며 화면이 잘 나온다. 이유가 궁금하여 스오플을 찾아보았더니 이 에러를 똑같이 경험한 사람의 글이 나온다. https://stackoverflow.com/questions/77164068/how-to-add-theme-provider-in-next-js-app how to add theme provider in nex..