Warning: You provided a value prop to a form field without an onChange handler. 발생 해결 기존 코드 import React, { useEffect, useState } from "react"; const Info = () => { const [id, setId]...

~~ is not a function 발생 부모 컴포넌트에서 생성한 useState를 자식 컴포넌트로 넘기려는데 state는 잘 전달됬지만 setState에서 아래와 같은 error가 발생했다…. 평소 같았다면 문제 없었을 코드인데…. 달라진건 이번엔 TypeScript를 쓴다는 것 ~~ is not a function 해결 기...

Cannot destructure property ‘data’ of ‘(intermediate value)’ as it is undefined. 발생 원래 평상시에 위처럼 찍혀야 할 error 코드가 아래처럼 나오기 시작했다…. 백에서 어떤 error인지 보내준 message 확인해야 하는데…. 원인 응답이 올 떄 통신을 가로채는 ...

No QueryClient set, use QueryClientProvider to set one 발생 아래 이미지와 같은 error 코드가 8줄 주르륵 발생했다 처음 검색 결과에는 QueryClientProviderd안에 하나의 컴포넌트만 있지를 않아서 발생하기도 한다는데 나는 App 컴포너트 하나이기 떄문에 이 이유는 아니었고 impo...

interceptors란? axios interceptors는 request와 response가 then과 catch에 의해 처리되기 전에 가로채서 먼저 처리해주는 axios library이다. 유용한 사용방법은 Header추가, 인증관리, error처리 등의 작업이 있다. 사용하는 이유 1. api 통신 처리시 반복될 부분 처리 ...

🚀 도입: 왜 우리는 JWT를 쓰는가? 초기 프로젝트를 진행할 때 세션(Session) 방식을 주로 사용했다. 하지만 서버가 늘어나면서 세션 동기화 문제에 직면했고, 이를 해결하기 위해 상태를 유지하지 않는(Stateless) JWT(JSON Web Token)를 도입하게 되었다. 단순히 토큰을 주고받는 것은 쉬웠지만, 실제 서비스에 적용하면서...

💡 도입: 왜 JWT를 디코딩해야 했을까? 최근 프로젝트를 진행하며 로그인 후 사용자의 닉네임과 권한(Role)을 즉시 UI에 반영해야 하는 상황을 겪었습니다. 백엔드에서 별도의 유저 정보 API를 제공하기도 하지만, 매번 네트워크 요청을 보내기엔 비효율적이라는 생각이 들었죠. 이때 accessToken의 Payload에 담긴 데이...

🚀 도입: 브라우저 기본 Alert, 그대로 쓰실 건가요? 사용자에게 중요한 알림을 띄울 때 브라우저 기본 alert()이나 confirm()을 쓰면 디자인이 일관되지 않고 제어도 까다롭습니다. 저 역시 프로젝트를 진행하며 “서비스 브랜딩에 맞는 깔끔한 모달이 필요하다”는 고민 끝에 SweetAlert2를 도입하게 되었습니다. 단순한 메시지 전달을 ...

🚀 도입: 왜 Outlet은 Props 전달이 안 될까? 리액트로 프로젝트를 하다 보면 중첩 라우팅(Nested Routing)을 자주 사용하게 됩니다. 공통 레이아웃을 잡고 내부 컨텐츠만 바꿔주는 방식이죠. 그런데 여기서 한 가지 문제에 직면했습니다. “부모 라우트에서 가지고 있는 상태값을 자식 라우트 컴포넌트에게 전달하고 싶은데, <O...

페이지 이동 See the Pen aTag href by taewok (@taewok) on CodePen. E-mail보내기 See the Pen aTag E-mail by taewok (@taewok) on CodePen. 마치며 혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요. ...