🐸 공지사항context로 하는게 가장 베스트였습니다.zustand로 변경할 수도있겠지만 유저 로그인후 상태 관리는 어차피 user state하나만 있는거라 zustand는 오히려 오버스펙일수도 있겠다는 생각이 듭니다. 그리고 추가로 인증된 사용자만 들어올수있는 페이지나 게시글 작성시에는requireAuth 같은 훅을 따로 써서 처리를해주면 될것같습니다 글을 지울까 했으나 쓴 시간이 아까워 그냥둡니다..ㅠㅠ 0. 배경현재 계약직으로 있는 회사에서 회원가입,로그인 기능을 내가 구현하지 못해 아쉬움이 있어서supabase,nextjs로 supabase template을 만든 개인 토이 프로젝트를 했었다.  회사에서는 로그인 및 회원가입 supabase로 인증 처리후 contextAPI status에 담아 ..

react-query의 mutate()를 사용할 때 주의해야할 점이있다고 한다.바로 mutate()의 콜백 함수들은 뮤테이션이 끝나기 전에 해당 컴포넌트가 언마운트되면 실행되지 않는 특징이 있는데, 그래서 다른 페이지로 리다이렉트 혹은 결과를 toast로 띄우는 것과 같은것에 주의해야한다고한다.  참고자료: https://velog.io/@ooo3289/useMutation-%ED%9B%85%EC%9C%BC%EB%A1%9C-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0 useMutation 훅으로 분리하기참고로 FSD architecture로 파일 분리가 되어있음. 🎀 훅으로 분리하기 전에 준비 📌 dto 파일 생성해서 타입 모으기 src/shared/api/authenticati..

난 매우 스튜핏 금붕어대가리인듯.🐟🧠 아래 사이트에서 타입스크립트 문제풀이하는데 클로드한테 힌트 부탁부탁해서 풀어놓은 문제다시풀면 또 그부분에서 헤매고있다. 그래도 7번 문제 돌파했는데 이젠 조금 이해의 영역에 다가선듯하다..https://bigfrontend.dev/ BFE.dev - 前端刷题，提升前端开发实力，拿到心仪的Offer。BFE.dev - 前端刷题， 帮助你训练前端开发，准备前端面试，拿到心仪offerbigfrontend.dev

React에서 데이터 패칭을 위한 다양한 방법: ISR과 React QueryReact 애플리케이션에서 데이터를 패칭하는 방법에는 ISR (Incremental Static Regeneration)과 React Query 등이 있다. 이 글에서는 각 방법의 특징과 차이점에 대해 기록하려고 한다.(fetch방식도 있긴하지만.. react-query가 더 좋다는 개인적인 생각에 이건 패스)(자세한 사용방법, 기타 옵션등은 생략..) React Query를 이용한 데이터 패칭React Query 라이브러리를 사용하면 데이터 패칭과 캐싱을 간편하게 처리할 수 있다.React Query는 데이터 캐싱, 옵션 설정 등 다양한 기능을 제공한다.React Query를 사용한 데이터 패칭 플로우는 다음과 같다.1. '/..

최근 회사에서 프로젝트를하면서 겪은 상황을 기록하려고 한다. 1. Miss 한가지에 꽂히면 다른 대안은 생각도 안하고 밀어붙이기 Set의 이용가치를 알고는 있었지만, 막상 실무에서 사용할 상황이되자 다른거에 정신이팔려 전혀 생각지도 못했었다. 여담이지만 나중에 Set의 활용을 멘토링받았을땐 소름이 돋았다..나는 'react-hook-form'으로 하나의 form을 관리하고 있었고,이 react-hook-form의 dirtyFields를 사용하여 기존에 있던 배열중 삭제된 값과 추가된 값 수정된 값들을 구해서supabase에 쿼리문을 날려 순차적으로 업데이트(upsert사용)해주려 했었다.참고로, dirtyFields는 react-hook-form 라이브러리의 기능중 하나로,form의 필드 값이 defau..

함수의 매개변수(Parameter)와 인수(Argument) 이해하기함수를 사용할 때 헷갈리기 쉬운 용어인 '매개변수'와 '인수'에 대해 기록.1. 매개변수 (Parameter)함수를 정의할 때 사용되는 변수함수 내부에서 사용될 변수의 이름을 지정형식적 매개변수(formal parameter)라고도 함function greet(name) { // name이 매개변수(parameter) console.log(`Hello, ${name}!`);}2. 인수 (Argument)함수를 호출할 때 전달하는 실제 값매개변수에 대입되는 실제 데이터실인수(actual parameter)라고도 함greet("Alice"); // "Alice"가 인수(argument)💡 쉽게 구분하는 방법위치로 구분하기매..