?. 문법 const user = { name: "kim", }; console.log(user?.age) user가 null,undefined라면 .age가 아닌 바로 undefined를 반환한다 활용 예시로 TypeScript를 사용한다면 {list.data.map((value)=>( <ListItem></...

호이스팅(Hoisting)이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말하며, JS의 독특한 특징이다 실제로 코드가 끌어올려지는 것은 아니다. //눈에 보이는 실제 코드 console.log(a); // undefined var a = "A"; // var 변수 //호이스팅 된 코...

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...