Object is possibly undefined ❓상황 axios에서 interceptors로 headers에 Authorization 값을 부여할때, 빨간 줄이 나오는 문제 🔎 원인 파악 config.headers는 axios request headers를 가질 수도 있고, undefined도 가질 수 있다. (property) AxiosRequestConfig.headers?: AxiosRequestHeaders | undefined 값이 undefined인 경우일때, 접근 한 경우 에러가 발생한다. How to fix config.headers.Authorization "Object is possibly undefined" when using axios interceptors I got the ..

Uncaught TypeError: Cannot read properties of undefined (reading 'map') ❓상황 API를 호출하여 얻은 배열 데이터를 map함수를 이용할때 발생하는 오류 🔎 원인 파악 API를 호출하여 얻은 배열 데이터가 없어서 발생하는 문제 ✨ 해결 방법 1. API 호출이 비동기 방식으로 구성이 되었는지 확인. 2. useState를 이용하여, API 호출값을 가지고 있을때와 없을때의 렌더링을 별도로 구현하기

구문에러 : 콘솔창에 에러메시지가 나오지 않는다. ❓상황 map 함수 사용하여 배열안의 요소들을 컴포넌트로 반환하고자 할 때, 반환이 안되는 현상 🔎 원인 파악 map 함수에서 return 될 값을 무엇인지 작성해주지 않아서 발생한 문제 // 문제의 코드 const UserList = ({ users }) => { return ( {users.map((user, idx) => { {user.name} ({user.age} years old) ; })} ); }; ✨ 해결 방법 return 문 생략 # 생략 버전 import React from "react"; const UserList = ({ users }) => { return ( {users.map((user, idx) => ( {user.name}..

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? ❓상황 Udemy React 강의 중, 디버깅 강좌를 따라하던 도중에 발생한 오류 return ( {content} ); 🔎 원인 파악 터미널에서 인접한 JSX요소들을 하나의 요소로 감싸야한다, JSX fragment를 사용하기를 원하나...? 라고 한다. 즉, JSX 요소들이 하나의 부모요소에 감싸져 있지 않아서 그렇다. ✨ 해결 방법 JSX 요소들을 하나의 부모 태그로 감싸도록 한다. return ( {content} );

쿠키란 무엇일까? 쿠키를 이용하여 데이터 CRUD 구현 ❓상황 localStorage를 이용하여 브라우저에 데이터를 저장하는 것 대신 다른 방법을 찾다가, cookie를 알게되었다. 또한, 넘블 쿠팡 클론코딩때 코드 리팩토링 진행시 cookie를 사용하는 것을 보고, 배울려고 찾게되었다. 📖 HTTP Cookie 란? 개념 HTTP 쿠키는 웹 브라우저에 저장되는 작은 크기의 문자열이다. HTTP 통신을 할 때 데이터를 주고받을 수 있도록 만들어진 보조적인 수단이다. 정확한 명세는 RFC 6265에 정의되어 있다. 정의 쿠키(Cookie)는 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공함으로써, 상태를 가질 수 있도록 하는 HTTP 상태 관리 개념이다. 쿠키는 주로 웹 서버에 의해 만들어지..