개발새발 로그

useEffect의 의존성 배열의 경고로부터 매일 혼나다가 의문이 하나 생겼다. 먼저 아래 코드를 보자 useEffect(() => { setIsEmailDuplicate(true); setEmailDuplicateCheckMessage(''); }, [values.email, setEmailDuplicateCheckMessage, setIsEmailDuplicate]);실제 내가 사용했던 코드인데set함수가 useEffect내에 들어가 있고,set함수를 의존성 배열에 넣어줬다.  왜 set함수를 의존성 배열에 안넣었어?의존성 배열에 넣으라는 eslint 경고가 떴다.근데 나는 이렇게 생각했다. set함수도 함수니까 의존성 배열에 넣으면 무한 반복 되는거 아니야?그래서 useCallBack..

회원가입 페이지와 로그인 페이지를 만들면서 다양한 경험을 했다.form데이터를 관리하면서 중복되는 문제와해당 form데이터 마다 검증, 에러 메시지, 또한 의존되는 특정 form 데이터 등...이런 문제들을 어떻게 풀어갔는지 과정으로 설명해보려고 한다.   중복되는 Input 데이터와 Validation먼저 발견된 문제점은 이메일, 사용자 이름, 비밀번호를 입력하는 input이 동일한 기능과 validation을 갖고 있다는 점이었다.이 점을 염두해두고 개발을 시작했지만이메일, 사용자 이름, 비밀번호는 각각 다른 validation을 갖고 있고, onChange될 때마다 검증을 해야했으며이메일은 검증 후에 중복확인 API완료라는 조건이 있었고,비밀번호는 password와 confirmPassword 값을..

어느때와 같이 NextJS app router를 이용해서 프로젝트를 진행하던 도중에 문제가 생겼다. 보통 클라이언트 사이드에서는 useParams를 써서 동적 라우팅의 값을 가져오고 서버사이드에서 사용할 때는 아래처럼 props부분에 params를 넣어서 가져온다. 근데 이 로직을 사용하면서 문제가 생긴 것이다. 프로젝트에서 테스트를 하면서 만들었던 유저 데이터에서 프로필 이미지에 "string"(서버에서 지정한 기본 값으로 추정) 처럼 잘못된 값이 들어가게 됐고, 그 이미지 문자열을 next/image의 src에 넣어주면서 진행하고 있었다. 당연히 이미지는 깨진 상태로 나오게 됐다. 그래도 테스트니까 상관없어서 진행하고 있었는데 갑자기 문제가 생긴 것이다. params에 해당 Image의 "string..

NextJs app router를 사용하면서 문제가 있었다. 메인페이지와 경매상세페이지 라는 곳이 있었고 메인페이지에서 어떤 경매를 클릭하고 경매를 들어갈 수 있었다. 근데 여기서 문제가 있었다. 경매 상세 페이지에서 새로고침을 하고 헤더에 있는 뒤로가기 키를 누르면 아래와 같은 에러가 마구 쏟아졌다. Uncaught Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server. 오류에서는 async/aw..

이전에 두 번의 리팩토링을 거쳐 만든 모달에서 문제가 생겼다. 영상을 바로 보자 백그라운드로 있었던 요소들의 이미지가 갑자기 확 나오는 것이 보인다. 이게 왜 그런지 찾아보니 css스타일링이 문제였다. 조금 간단한 문제였는데 왜 생각을 못했는지 아쉬웠다. 사실 간단하게 해결이 가능한데 어떻게 해결했는지 적기위해 글을 쓰게 됐다. 1. 왜 뒤의 요소가 뿅하면서 튀어 나올까? 현재 모달요소를 아래와 같이 숨겨줬다. const animateOut = { grow: "scale-0 mx-auto", slide: "translate-x-[100vw]", raise: "translate-y-[100vh]" }; 여기서 isOpen이라는 값을 통해서 스타일을 바꾸고 transition을 줬다. isOpen ? "op..

Next를 사용하면서 TanStackQuery의 prefetchQuery를 사용해서 미리 서버에서 데이터를 갖고오고, 그 데이터를 getQueryData()로 가져와서 필요한 곳에 사용하는 방식을 자주 사용했다. reactQuery에 캐신된 데이터를 사용함으로써 모든 컴포넌트는동일한 상태의 데이터를 참조하게 되고, 이로 인해 데이터의 일관성을 유지했다. 즉, SSOT( single source of truth :단일 진실 공급원) 원칙을 지킬 수 있었다. 이 로직은 특정한 상황에서만 사용하기는 했지만 아주 유용했다. 근데 어느 순간 내가 알던 것과 다른 문제가 생겼다. 나는 layout.tsx에서 page.tsx가 children으로 들어가고, layout.tsx가 실행되고 page.tsx가 실행되는 건..

api요청에 토큰이 있어야하는 요청이 있을 때 나는 api 요청을 하기 전에 쿠키에 저장되어있는 accessToken을 가져와서 로그인 유무를 확인한 다음에 api요청을 막거나 허용하는 로직을 짜려고했다. 그러면 서버사이드에서는 next에서 제공하는 cookies를 이용해야했고, 클라이언트 사이드에서서는 getCookie()라는 함수를 만들어서 document.cookie를 통해서 갖고 와야했다. 그래서 두 함수를 authCheck라는 하나의 함수로 만들어줘서 간편하게 사용하도록 했다. 근데 여기서 문제는 두 쿠키가져오는 함수를 실행하고, 서버사이드와 클라이언트 사이드가 동일한 쿠키를 가져온 다음 동일하게 api 요청을 막거나 허용해야했다. 즉 서버사이드와 클라이언트 사이드에서 동일한 결과를 나타나게 해..

React Hook useEffect has a missing dependency: '~~~'. Either include it or remove the dependency array 이 경고는 다들 한 번씩, 아니 매일 볼 수 있는 경고다. 이 경고가 뜨는 경우는 아마 다들 이럴 것이다 "렌더링 되고 딱 한 번만 실행하게 하자!" "이 데이터가 변할 때만 실행되게 하자!" 보통은 useEffect를 사용하고 의존성 배열에 빈 배열을 넣는다. 근데 항상 그 안에서 실행하는 함수나 참조하는 데이터 때문에 의존성 배열에 경고가 뜬다. "이거 변할 수 있는데 얼른 의존성 배열에 넣어줘" 하지만 경고라서 무시하고 넘어가면 내가 원하는 대로 작동하긴 할 것이다. 그렇지만 이렇게 한다면 의존성 누락으로 인해 만약 ..