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

최근 회사에서 프로젝트를하면서 겪은 상황을 기록하려고 한다. 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)💡 쉽게 구분하는 방법위치로 구분하기매..

기존 코드는 https://www.npmjs.com/package/@react-oauth/google 라이브러리를 활용하여 구글 소셜 로그인만 구현한 상태였다.  이번에 카카오, 네이버 등등의 소셜 로그인을 구현하려고 했는데 앞전에 구현한 구글 소셜 로그인 기능 코드가 확장성이 좀 떨어지는것 같아 고민끝에 리팩토링을 하게 되었다. 기존의 과정은 이렇다, 기존 과정1) React에서 버튼을 클릭하여 구글 로그인 시도 -> 성공시 구글 소셜로그인 토큰을 받음import { GoogleLogin } from '@react-oauth/google'; { console.log(credentialResponse); // 여기에 구글 토큰이 딸려있음 }} onError={() => { console.l..