들어가며 프론트엔드에서 API 데이터를 다루다 보면 아직 값이 없거나, 특정 필드가 내려오지 않는 상황을 자주 만납니다. 이때 안전하게 값을 읽기 위해 사용하는 문법이 Optional Chaining ?.입니다. 그리고 기본값을 넣을 때 자주 사용하는 문법이 Nullish Coalescing ??입니다. 두 문법을 함께 사용하면 방어 코드를 훨...

호이스팅이란? 호이스팅은 JavaScript가 코드를 실행하기 전에 선언을 먼저 인식하는 동작을 말합니다. 말 그대로 코드가 실제로 위로 이동하는 것은 아니지만, 실행 컨텍스트가 만들어지는 과정에서 선언 정보가 먼저 준비됩니다. 그래서 어떤 코드는 선언보다 앞에서 사용해도 동작하고, 어떤 코드는 에러가 발생합니다. var의 호이스팅 var...

async와 await가 필요한 이유 JavaScript에서는 API 요청, 타이머, 파일 처리처럼 시간이 걸리는 작업을 비동기로 처리합니다. 예전에는 Promise의 then을 이어 붙여서 처리하는 경우가 많았습니다. fetchUser() .then((user) => fetchPosts(user.id)) .then((posts) =...

발생한 경고 React에서 input을 만들다가 다음 경고를 만날 때가 있습니다. You provided a `value` prop to a form field without an `onChange` handler. 이 경고는 input에 value는 넣었는데, 값을 변경할 수 있는 onChange가 없을 때 발생합니다. 문제가 된 코드 ...

발생한 에러 부모 컴포넌트에서 만든 state와 setState 함수를 자식 컴포넌트로 넘기는 과정에서 다음과 같은 에러가 발생했습니다. setCount is not a function 값은 잘 넘어오는 것처럼 보이는데, setCount()를 호출하는 순간 함수가 아니라는 에러가 난 상황입니다. 문제가 된 코드 처음에는 자식 컴포넌트를 ...

발생한 에러 API 요청을 처리하던 중 다음과 같은 에러를 만났습니다. Cannot destructure property 'data' of '(intermediate value)' as it is undefined. 보통 이런 코드를 작성했을 때 발생할 수 있습니다. const { data } = await api.get("/users/me"...

발생한 에러 React Query를 사용하던 중 다음 에러가 발생했습니다. No QueryClient set, use QueryClientProvider to set one 이 에러는 React Query 훅이 사용할 QueryClient를 찾지 못할 때 발생합니다. 대표적으로 useQuery, useMutation을 사용하는 컴포넌트가 Qu...

interceptors란? axios interceptors는 요청이 서버로 나가기 전이나, 응답이 then/catch로 전달되기 전에 중간에서 가로채 처리할 수 있는 기능입니다. 쉽게 말하면 API 요청과 응답의 공통 처리 지점을 만드는 기능입니다. 예를 들어 모든 요청에 Authorization 헤더를 붙이거나, 401 에러가 발생했을 때 로...

들어가며 JWT를 처음 사용하면 로그인 후 토큰을 저장하고 API 요청에 붙이는 흐름은 금방 이해할 수 있습니다. 하지만 실제 서비스에 적용하려고 하면 곧바로 이런 질문을 만나게 됩니다. Access Token이 만료되면 어떻게 해야 할까요? 사용자가 계속 로그인 상태를 유지하게 하려면 어떻게 해야 할까요? 이 문제를 해결하기 위해 보통 Ac...

들어가며 로그인 후 서버에서 access token을 받으면, 그 안에 사용자 id나 권한 같은 기본 정보가 들어 있는 경우가 있습니다. 이 정보를 화면에 바로 보여주고 싶을 때 매번 사용자 정보 API를 다시 호출하는 대신, JWT의 payload를 읽어 활용할 수 있습니다. React에서는 jwt-decode 라이브러리를 사용하면 JWT pa...