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} );

국민내일배움카드로 국비지원받고 프론트엔드 학습 열공 챌린지 8주차 파이널 프로젝트 🎥 목차 더보기 1. 목표 2. 알게된 점 3. 아쉬웠던 점 4. 파이널 프로젝트 🚀 목표 패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 8주차 학습강의 듣기가 학습 목표이다. 그리고, 파이널 프로젝트를 진행하여 프로젝트를 제출한다. 💡 알게된 점 portal portal이란, 자식 컴포넌트가 시각적으로 튀어나오도록 적용시킬때 사용한다. 예를 들어서 modal창이 튀어나오는 컴포넌트를 구현했을때, 이 컴포넌트가 다른 형제 컴포넌트보다 아래에 있을때만 형제 컴포넌트를 덮고, 그렇지 않으면 형제 컴포넌트가 위에 튀어나오는 구조가 기본적으로 되어있다. # Modal창이 형제 컴포넌트를 덮는다. const App = () =..

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