문제상황:
프로젝트에서 사용자의 데이터를 가져와서 화면에 표시하는 작업을 하고 있습니다. 그런데 데이터를 가져오는 과정에서 자주 발생하는 에러가 있어서 문제를 해결하고자 합니다.
에러가 발생한 코드와 이에 대한 설명:
// 사용자 데이터 가져오기
async function getUsers() {
const response = await fetch('https://api.example.com/users');
const data = await response.json();
return data;
}
// 사용자 데이터를 화면에 표시
function displayUsers(users) {
const userList = document.querySelector('#user-list');
userList.innerHTML = users.map(user => `
<li>${user.name} - ${user.email}</li>
`).join('');
}
// 메인 함수 실행
(async function main() {
const users = await getUsers();
displayUsers(users);
})();에러로그 내용:
TypeError: Cannot read property 'map' of undefined해결방법:
에러가 수정된 코드+ 수정된 부분에 대한 주석:
// 사용자 데이터 가져오기
async function getUsers() {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
return data;
}
// 사용자 데이터를 화면에 표시
function displayUsers(users) {
if (!users) return; // 수정된 부분: users가 undefined일 경우 처리
const userList = document.querySelector('#user-list');
userList.innerHTML = users.map(user => `
<li>${user.name} - ${user.email}</li>
`).join('');
}
// 메인 함수 실행
(async function main() {
try {
const users = await getUsers();
displayUsers(users);
} catch (error) {
console.error('Error:', error);
}
})();원인분석:
에러 발생 원인에 대한 자세한 설명: getUsers() 함수에서 API 응답이 제대로 오지 않았을 때, data 변수가 undefined가 되어서 발생하는 에러입니다. displayUsers() 함수에서 users.map을 호출하기 전에 users가 undefined인지 확인하는 코드를 추가하여 해결하였습니다.
참고링크:
- MDN Web Docs - Array.prototype.map(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
- MDN Web Docs - Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
728x90
