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

현재 위치가 곧바로 return 되지 않는 문제 ❓상황 navigator.geolocation API 를 react의 hook인 usePosition()으로 만들고 나서, return 값 저장시 undefined로 발생 🔎 원인 파악 API 호출 시 API 호출 값을 받기 전까지, 실행되지 않게 설정하지 않아서 발생한 문제(비동기 설정 X) 또한, gelocation 메소드는 return 반환이 없다는 것. ✨ 해결 방법 1. 함수에 new Promise 를 정의하여, 반환되는 값 나오게 만들기 function get() { return new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition( (position) => resol..

error Command failed with exit code 1. (https://ntl.fyi/exit-code-1) ❓상황 netlify를 이용하여 미세먼지 프로젝트 배포시 발생한 오류 🔎 원인 파악 개발작업시 warning이 발생하는 경우도 있는데, 개발할때는 이걸로 인해 문제가 생기지는 않는다. netlity 에서 배포할때 자체적으로 test를 진행한다. test 진행시, warning을 error로 진단하여 오류가 발생한다. 따라서, netlify에다가 warning은 error가 아니라고 알려줘야한다. ✨ 해결 방법 build command # yarn CI= '' yarn build