async & await이란? 자바스크립트는 비동기 처리가 기반인 언어이다. async와 await는 JavaScript에서 비동기 프로그래밍을 할 때 사용되는 키워드이다. 이 키워드를 사용하면 비동기 작업을 동기적으로 처리할 수 있어 코드의 가독성과 유지보수성을 높일 수 있습니다. async async 키워드는 함수를 비동기 함수로 ...

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란? jwt는 JSON Web Token의 약자로 인증에 필요한 정보들을 암호화시킨 토큰을 말하며 accessToken으로 사용한다. jwt를 생성하기 위해서는 Header(헤더), Payload(페이로드), VerigySignature(서명) 객체가 필요하다. jwt의 구성 Header 어떠한 알고리즘으로 암호화 할 것인지...

jwt-decode 사용상황 로그인이 정상적으로 성공했을때 백엔드에서 jwt token 즉 accessToken을 넘겨주는데 그안에 user에 nickname이나 권한 알려주고 싶은 정보를 담은 부분을 payload라고 한다. 하지만 암호화 해서 보내주기 때문에 알아볼 수 있게 해독하는 것을 decoding이라고 하며 그걸 위해 jwt-decod...

sweetAlert2 설치 npm install sweetalert2 sweetAlert2 사용 기본 Alert Swal.fire({ title: "Alert 실행", text: "질문이나 전달할 내용을 나타내는 곳", icon: "success", }); Confirm(확인) Alert 어떤 버튼을 눌렀는지에 따라...

사용 예시 다음의 router 구조가 있다고 가정하자 <Route path="/register" element={<Register />}> <Route path="/register/:RegisterType" element={<EmailConfirm />} /> </Route> 부모 컴...