우주먼지 개발 log

오늘은 쉬었지만 어제 새벽에 한거랑 정리 좀.. 1. 로그인 안 했을 때 URL로 접근 하는 것 차단하기 React 에서 로그인 경로 차단 했던 방법 : 로컬스토리지 & 리덕스 로그인 state & 라우팅 차단 https://developer.happymunzi.com/41 지금의 프로젝트에서는 supabse의 onAuthStateChange를 사용하여 유저의 로그인 상태를 서버에서 감시하고, 페이지 공용 layout 으로 적용한 header component의 useEffect 에서 상태를 감시하고 로그인 시에는 db에서 user 정보를 읽어와 zustand로 저장하여 전역관리 하고있다. 어떤 페이지에서 새로고침 하더라도 로그인 상태를 다시 읽어오기때문에 로컬 스토리지를 쓰고 있지 않는데.. 페이지 U..

오늘도 화이팅! 1. Not-Found (App router에서 404 page 만들기) app router에 대한 블로그 글은 별로 없어서 -_- 공식 사이트를 참조하는 편이 빠른 것 같다. page router 에서는 page/404.js 로 구성했었고 https://nextjs.org/docs/pages/building-your-application/routing/custom-error app router 에서는 app/not-found.tsx 로 구성하면 된단다. 끝~ https://nextjs.org/docs/app/api-reference/file-conventions/not-found 2. next Link & Router next 에서 Link 를 쓰는 이유 https://eun-jee.c..

오늘도 화이팅! 1. 수파베이스 로그인 (유저 정보를 마이페이지에서 수정을 해도 auth의 값이 덮어 써짐) 새 이슈인데, 사실 user를 전역 관리 안하다가 이번에 급히 넣었더니 사이드 이펙트.. ㅠㅠ onAuthStateChange에서 주스탠드 전역 user state에 세션정보를 끊임없이 넣고 있어서 그렇다~ onAuthStateChange는 유저의 로그인이나 상태 변화를 감시하고 있는 애라서 처음 세션이 시작될때, 로그인되었을때로 걸어놓았지만, 저게 헤더에 있는데 리렌더링될때마다 다시 돌테고.. 왕왕 돌기때문에.. 수정 방향 다른조와 수다 떨다가 정보도 알아왔는데, 4조 감사감사 (코드도 잠쉬 첨부합니다) onAuthStateChange를 유저로그인 상태 파악으로만 사용하고 따로만들어 둔 실제 ..

오늘도 화이팅! 1. 아직도 헤매는 react query 이슈 : invalidateQueries 해서 새로 받아오는 것이 될 때도 있고 안될때도 있다~ ? 심지어 Delete All 디비를 다 지우면, 아예 onSuccess 안으로 안들어 오는 것 같은데 . . ㅇ0ㅇ 비슷한 분들이 많은데.. 내일 제정신으로 다시보자고~ [트러블슈팅] react-query useMutation onSuccess 안 되는줄 알았던 바보 여기있어요! 라이브러리를 알고 쓰자 / 코드는 거짓말하지 않는다 velog.io 공부 중 React Query(리액트 쿼리): Mutations Mutations Queries와 다르게 Mutations는 주로 데이터를 생성하거나, 업데이트하거나, 지우거나 혹은 서버 사이드 이펙트를 수행..

ㅠ.ㅠ 다시 열심히.. 1. 알람 구현 중 supabase realtime flow를 다시 정리해보면 ... 1) useEffect1 : realtime 을 걸어놓은 noti DB를 useQuery로 내 id에 해당하는 것만 읽어와서 state로 저장. 2) noti DB를 subscribe 해둔다. 3) DB에 신규 noti가 한줄 추가 되면, mutate를 이용, onSuccess 에서 쿼리 키를 invalidate 해준다. 그러면 새로 ~ 받아오것지? - 앗 이렇게 안했다?? / state만 업데이트 해주었다. 유저입장에서 보이는 것에 있어서는 바로 추가 되기는 하는데... 사실 3) 자체는 문제가 없는 것 같다. 4) 알람 하나를 클릭시 헤더에서 지워주기 위해, mutateFn에서 status를 ..

ㅠ.ㅠ 다시 열심히.. 1. 알람 구현 중 supabase realtime ERD 짜고, 알람씬 다시 정하고, notifications DB생성 함 테이블에 추가하면 noti 오는 것 까지 확인. 그 이후는 플로우를 잘 모르겠어서, 이전 팀에서 알람 구현하신 용스님의 도움을 받아봄 감사. flow를 다시 정리해보면 ... 1) useEffect1 : realtime 을 걸어놓은 noti DB를 useQuery로 내 id에 해당하는 것만 읽어와서 state로 저장. 2) noti DB를 subscribe 해둔다. 3) DB에 신규 noti가 한줄 추가 되면, mutate를 이용, onSuccess 에서 쿼리 키를 invalidate 해준다. 그러면 새로 ~ 받아오것지? - 앗 이렇게 안했다?? / stat..

에러 시작~! puppeteer version : 21.9.0 Error: Failed to launch the browser process! [475:475:0127/171203.505723:ERROR:zygote_host_impl_linux.cc(100)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180. 시도 1 : https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md 에러 1-2 : Error [ERR_REQUIRE_ESM]: require() of ES Module /vercel/path0/node_modules/str..

오늘도 화이팅! 1. 빌드에러 puppeteer 버셀오류 못잡아서 크롤링 기능 빼고 배포했다 *^^* 일단........몰라서 정리를 못하겠다. https://github.com/puppeteer/puppeteer/issues/9121 처음 에러 / 수정해보니 달라진 에러 정리하고싶은데 .. 수정해본 내용 : [fix] 빌드에러잡자 얘는 왜나는지 모르겠는데 에러로는 안잡혀서 패스한다. https://github.com/supabase/supabase-js/issues/641 프로젝트 진행 상황 ✓ 빌드에러 잡기 (다 잡기는-.- 실패... 유저테스트 용으로 메인화면에 크롤링 기사 부분 삭제함) ✓ 유저 테스트 용 배포 완료 ✓ 유저테스트 글 주말에 올릴 예정 (새벽에 올리면 묻힐까봐) ✓ 원래 하려고했..

오늘도 화이팅! 1. TipTap 에디터 focus 기능 고민 : 에디터의 글쓰는 창 부분을 어디든지 클릭 시 써야하는 곳으로 포커스가 잡히게 하는 기능 처음 글 쓸 때는 포커스 할 부분이 시작점 한 부분 밖에 없어서 상관이 없어서 기본 포커싱으로 설정해 주었다. 글 쓸 때가 문제인데 아래부분 누르면 마지막 글쓴 위치로 포커싱되는거 어떻게 구현한 걸까… 현재 기본 포커싱을 사용하는 상황에서는 다른데를 클릭했다가 다시 에디터 div 클릭 시 마지막 포커스 되어있던 부분 (글쓰고 있던 부분?) 을 포커스 해주고 있다.. 처음 생각은 글이 있으면 end로 두면 다 되는거 아니야? 생각했는데 글쓰고 있는 부분을 클릭해도 end로 빠져서 뭔가 조건을 줘야하는데 잘 모르겠다. 위치로 주는걸까...🥲 TipTap ..

오늘도 화이팅! 프로젝트 진행 상황 ✓ MVP 기능 보충해서 합치기 중 (10 %정도 남지 않았을까) ✓ css 맞추다가 밤샐 듯 내 진행 상황 오늘 한일 1. csssss 2. 에디터 제목 본문 누를 때 드디어 줄에 적용된 걸로 표시 됨 ㅎ 무식한 코드지만 드롭다운으로 바꾸면서 이렇게 밖에 못함. 핸들러도 빼두었다. onClickFontSizeHandler(e)} > { {/*이 부분 !!! ㅋㅋㅋㅋ */} {editor.isActive("heading", { level: 1 }) ? "제목 1" : editor.isActive("heading", { level: 2 }) ? "제목 2" : editor.isActive("heading", { level: 3 }) ? "제목 3" : editor.is..