분류 전체보기

댓글기능을 만드는데 파이어베이스를 db로 사용하고 react-query로 비동기 요청을 사용했다. 댓글에 인피니트 스크롤을 적용하기위해 리액트쿼리의 useInfiniteQuery를사용하게 되었다. 리액트쿼리에서 제공하는 useInfiniteQuery 는 인피니트스크롤 편하게 하라고 만들어 놓은게 아닐까 생각....ㅎㅎ 🤔 useQuery를 무한적으로 불러오고 싶을때 사용하면 된다. //hook const useGetComment = async ({ postId, pageParam }: Tdata) => { const commentData: Tcomment[] = []; try { const commentRef = collection(db, 'comment'); const doc = query( comme..

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: preplay@1.0.0 npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! react@"^18.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^0.14.7 || ^15.0.0 || ^16.0.0" from react-lottie@1.2.3 npm ERR! node_modules/react-lottie npm ERR! re..

❗️❗️옵티미스틱 UI 낙관적인 접근법을 사용하는 UI라고 함. 서버에서 응답을 요청하고 받을때 이것은 오류 절대 ㄴㄴ~~~! 백퍼 성공적임 이라고 가정하고 사용자에게 보여주는것을 말한다. 옵티미스틱UI를 사용하면 사용자들에게 더 좋은 환경을 제공할 수 있다! 인스타그램의 좋아요 기능으로 예를 들어보자 1. 일반적인 접근법 (옵티미스틱 UI 사용 X 🙅‍♂️) 1. 좋아요 클릭 좋아요 버튼을 눌렀을때 서버로 요청을 보낸다 2.로딩 요청보낸것을 응답받을때까지 기다림 3.좋아요 활성화 응답에 성공했으면 좋아요 버튼 활성화 단점: 사용자는 서버에 응답이 올때까지 기다려야함 UX가 상당히 저하 장점: 서버와 UI가 데이터가 항상 같다는게 보장되어 있음! 2. 낙관적 접근 (옵티미스틱 UI 사용 O 🙆‍♂️) 1..

Python is not set from command line or npm configuration Error: Could not find any Python installation to use npm i 치는데 python 뭐시기 오류가남 강의땜에 뭐 설치하다가 오류난거라 다른 수강생분들의 큐앤에이를 보다 오류 해결,,!! sudo npm i -g node-gyp npm i bcrypt npm i sudo명령어 치고 맥 비번입력후 다음 명령어 순서대로 치니 정상적으로 npm 설치완~~!!!

컴포넌트를 props bg결과 값에 따라 노출하려고 수정해놨떠니 아래와 같은 오류가 났다.. 왓더?? 왜안되지..? 분명 props값을 true로 하면 컴포넌트 노출이 가능했는데 뭐야 진짜ㅡㅡ!! 바로 써치 ㄱㄱ 대충 번역해보니 리액트 엘리먼트 인자에 값이 null을 던졌다 웅앵~~~ 🤔 찾아보니 공식문서에 해결법이 나와있었음 https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering Conditional Rendering – React A JavaScript library for building user interfaces reactjs.org 드문경우지만 컴포넌트가 다른컴포넌트에 렌더링 되었을때 숨기기를..

TodoItem컴포넌트 props item에 type을 정의해줬는데 Property 'item' does not exist on type 'ITodoItem'. 라고 error가 났다. 그니까 ITodoItem 인터페이스에 porps item에 대한 type이 존재하지 않는다 뭐 이런 오류인거 같은데.. 분명 타입 정의를 해줬는데 왜 안되지 하면서 별의별 시도를 해보다가 원인을 알게됨. TodoItem컴포넌트에서 props item이 빈객체로 인식되기 때문에 프로퍼티에 type이 없다~~~이렇게 에러를 내뿜는것.. List컴포넌트에서 TodoItem컴포넌트에 props를 넘겨줘야 객체 프로퍼티가 들어오기 때문에 빈객체인게 당연했다. interface ITodoItem { [key: string]: any..

현재 회사에서 스와이퍼 캐러셀 많이 사용 하고 있다. 그런데 만약 캐러셀에 링크를 넣는다거나 다른 이미지에 링크를 걸고 다른페이지 이동후 원래 페이지로 돌아오면 캐러셀이 멈추는 현상이 있는것!!!! (모바일 크롬,사파리 등) 이것땜에 여러가지 방법을 시도하다가 이유를 찾아 나름의 방법을 찾았다..! 일단 멈추는 근본적인 원인은 bfcache(역캐시) 때문이었다 bfcache 는 접속한 브라우저 에서 뒤로가기/앞으로가기를 했을 경우 이전페이지를 캐싱하여 페이지로드를 따로 하지 않아 기존의 js를 그대로 보존하고 있는걸 말한다. 브라우저 자체를 아예 닫을때 까지 보존된다. 이렇게 되면 응답 속도가 빨라 사용자 경험이 좋아진다. 내폰이 아이폰이라 안드로이드는 확인 못해봤는데 ios에서 bfcache를 사용중이..

파이어베이스는 개발자가 ios,안드로이드,web,앱 을 만들 수 있도록 구글에서 서비스를 제공하는 개발 플랫폼 이다! 파이어베이스는 서버리스 개발이 가능한데 요것이 파이어베이스를 이용하는 이유 중 하나라고 생각한다. 보통 앱을 개발할때 프론트+백+db 포괄적으로 세 단계가 나누어져 있으며 db와 프론트를 연결하려면 중간에 백엔드 서버가 필요하다. 하지만 파이어베이스를 사용하면 백엔드+db를 자동적으로 구축,관리 해주기 때문에 프론트와 파이어베이스만 연결하면 끝이라는것~~ 고로 개발자는 프론트에 신경만 쓰면 된다는것!!(BaaS:백엔드기능을 클라우드 서비스 형태로 제공해주는 것) 🔸 주요 기능 1. 인증 - 파이어베이스에서 인증을 기본적으로 제공하기 때문에 로그인 ,회원가입 등 을 편리하게 사용 가능 - ..