aspe

1. p tag 개행 표시 방법 whitespace-pre-line 설정해주면 된다. 2. 작가들을 위한 포트폴리오 관리, 커뮤니티 시스템 프로젝트 Ollim 시작 3. useCallback을 사용해야할 때 But in some cases you need to maintain a single function instance between renderings: A functional component wrapped inside React.memo() accepts a function object prop When the function object is a dependency to other hooks, e.g. useEffect(..., [callback]) When the function has som..

1. Framer Motion에서 layout attribute를 사용하여 반응형 UI를 만들 때 AnimatePresence 를 같이 사용하지 않으면 UI가 이상하게 변하는 현상이 발생하므로 꼭 같이 사용하자. 2. 경매 시스템에서 Timer 구현 맨 처음에는 express 서버로 경매 생성 요청을 보내면 setInterval을 이용해 1초마다 Realtime Database에 있는 경매 남은 시간을 갱신 시키고 setTimeout으로 30분 후에 경매를 종료시키는 방법을 사용할려고 했으나 setInterval을 사용 할 때 생기는 delay가 setInterval로 실행하는 함수를 한 번 실행 할 때마다 약 7.2ms가 발생하여 30분동안 약 18초가 발생하여 너무 큰 오차가 발생했다. (JavaSc..

1. Tailwind css ver 2.xx에서 jit mode를 사용하고 싶을 때 tailwind.config.js에 mode: "jit", purge에 ts와 tsx가 있는 경로를 명시 mode: "jit", purge: [ "./public/**/*.html", "./src/components/*.{js,jsx,ts,tsx}", "./src/components/**/*.{ts,tsx}", "./src/page/*.{ts,tsx}", ], Window 사용 시 npm install cross-env -D (POSIX와 Window의 prompt의 환경변수 사용 방법이 달라서 install) package.json에서 "start": "cross-env TAILWIND_MODE=watch craco s..

1. firestore().collection("comments").where("__name__", "in", array).get(); array에 존재하는 Document ID에 해당하는 Document를 get하고 싶다면 where에 "__name__" 를 사용하면 된다. 하지만 이 방법은 array의 크기가 10이 넘어갈 수 없다. 2. Tailwind svg fill when hover 그냥 hover:fill-current 하면 원하는대로 작동하지 않는다. tailwind.confing.js에 다음과 같이 작성하면 정상 작동한다. 3. Array(length).fill(0).map() length만큼 jsx를 return 하고 싶을 때 사용한다. 4. Object.assign({}, object..

1. Firebase Realtime Database firebase.database.Query.on("child_changed") vs firebase.database.Query.on("child_add") child_add는 초기 값을 다 받아오고 listen하지만 child_changed는 초기 값을 받지 않고 listen한다. firebase.database.Query.on("value") vs firebase.database.Query.on("child_add") value와 child_add는 초기 값을 다 받아오고 listen한다는 점에서 동일하지만 child_add는 초기 값을 하나씩 받아오고, value는 초기 값을 한 번에 가져온다. 그러므로 초기값을 불러오는 것과 listen을 분리하..

useState 1. Object와 Array useState Object나 Array를 state로 사용하고 싶다면 useState를 할 때 불변성을 꼭 지켜서 삽질하는 일이 없도록 하자. 지키지 않는다면 error도 안 뜨고 프로그램도 돌아가지만 state가 set되지 않는 그야말로 무엇이 문제인지 모르는데 의도한 대로 돌아가지 않는 상황이 벌어지고 엄청난 시간 낭비로 이어진다. 2. useState는 async 함수이다. 그렇기 때문에 state를 set하고 바로 console.log를 시도하면 값이 나오지 않는다. 원한다면 useEffect의 dependency에 추가하여 console.log하자. Firebase Real time Database 3. ref.child.on("child_adde..

글쓰는 시간에 코딩을 하자는 마인드였지만 기록이 필요할 것 같아 나만이 알아 볼 수 있는 방식으로 기록을 하려고 한다. 개발 초기 부터 글을 썼어야 좋았겠지만, 그러지 못해 지금이라도 시작해보려한다. 이 글에서는 이전에 해결하기 힘들었던 것들과 새로 알게된것들을 기록한다. 코드 하나 하나에 이유가 있어야한다. 그것은 작동 방식을 정확하게 이해해야 가능하고 그래야만 안전한 코드가 나온다. 최근 해결하기 힘들었던 것들 1. firebase를 이용한 Infinite scroll을 어떻게 해결할것인가? 새로운 Post의 query를 요청 할 때 모든 post를 re-rendering하지 않고 불러온 post만 rendering하게 해야한다. 어디까지 query를 요청했는지 기록해야한다. 2. Sidebar가 나..