우주먼지 개발 log

계획 계획 갑자기 P가 J가 되지는 않지만~ P를 일 시키는 것도 결국엔 계획이었다. 나는 약간 산만한 경향이 있기 때문에 집중해서 하나 하나 처리하려면 계획을 조금더 작은 단위로 작성할 필요가 있었다. 큰 덩어리일 때 보다 하나 하나 클리어해 가는 맛이 있다. 그래서 남들 할일 계획표에 비해 세부적인 경향이 있다. 헤더에 알람 받는 부분 구현 이라고 적고 그 안에 다시 - DB에 알람이 있으면 읽어와서 useState로 저장(useQuery) - DB에 알람이 들어오면 List에 추가 (invalidateQueries) - 알람 클릭시 게시물로 이동 및 알람내역에서 삭제 (useMutation) - 알람이 있으면 종 UI 변경 - dropdown 바깥 클릭시 닫힘 적용 등등을 자세히 명시해둔다. 이렇게..

뭔가 이날을 기념해 두고 싶어서 뒤늦게 작성해보는 TIL TIL 일것 까진 없지만 후기와 사진..? 1. 발표준비 중간발표 자료 기준으로 최종에 추가할 것 추가하고 발표자 효짱님이 스크립트 작성해주시고, 미뇽님이 시연영상 찍어주시고, (이거 영상 만들어서 진행하길 100배 1000배 잘했고 굳아이디어였다. 6분짜리 영상으로 만들고 2배속쯤 돌려서 우리 한 것 대부분을 보여줄 수 있어서 좋았다. 타이핑 하는 시간 화면넘기는시간 줄어서 진짜 굳!) 다른분들 발표 보면 2-3분 짜리 예정되어있는 시연을 최종이라 다 보여주고 싶으니까 5분넘게 하신조가 많았단 말이죠 ㅠ.ㅠ 효짱님이 당일 2번이나 시뮬레이션 해보고 피드백 받고 스크립트 수정해서 진행해주셨고 ~ 수고하셨습니다~ 나머지 분들과 전날까지 열심히 수정..

오늘도 화이팅! 1. tailwind 반응형 구현 굉장히 쉽다 우리는 사이즈를 일단 급히 적용하는 만큼 1개만 적용하여 lg (라지) 사이즈 이상 이하만 적용해보았다. 라지 이상일 때 사이즈를 300px로 라지 이하는 100px로 정하는 코드 ! 사용법은 쉽지만 적용은 안쉬움 반응형 구현으로 인한 이슈 야금야금 양산 하는 즁 이거 이렇게 맞추면 저거 망가지구 특히 Z 값은 주의가 필요하다. 제일 난리.. ^0^ 테스트도 많이 해봐야하고 세심한 코딩 필요하다!!! 프로젝트 진행 상황 ✓ 쟝님이 도메인도 구매하셔서 적용함 디벨로팜 입니다 : https://develofarm.site 많 관 부 .. ✓ 오늘 Main MVP 15~16 배포 현황 [Bugfix] CSS 정리정돈 [add]프로필 수정페이지에서..

내일 제출이라고~!?! 납기일이라고!!! 1. 알람 데이터 읽음 처리 시 바로 안되는 이슈 (invaildation Queries 바로 안될때 있음) 수정 - 개별삭제 시 간헐적으로 안됨/ 전체 삭체시 100% 안됨 문제였던 부분 : 1) 알람 온 게시물로 routing 을 하고, invalidationQueries를 해준 것 (이미 화면이 이동된 후라 제대로 동작 안한듯) 공식문서의 내용 확인 : Mutations | TanStack Query Docs Please keep in mind that those additional callbacks won't run if your component unmounts before the mutation finishes. 2) 알람 전체 삭제 시 안되었던 부분 ..

오늘은 쉬었지만 어제 새벽에 한거랑 정리 좀.. 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..