홍삼 : Uncaught runtime errors 에러 해결 과정

사이드로 진행하는 홍삼프로젝트 트러블 슈팅 기록

 

 

에러 문구

Uncaught runtime errors:
ERROR
Cannot read properties of undefined (reading 'map')
TypeError: Cannot read properties of undefined (reading 'map')
    at GameRules 

 

에러 상황

import React from 'react';
import styled from 'styled-components'

export const GameRules = (props) => {
  const { game } = props;

  return (
    <Container>
      <IntroContainer>
        <H3>인트로</H3>
        <ContentsContainer>
          <H4>{game.game_intro}</H4>
        </ContentsContainer>
      </IntroContainer>
      <RulesContainer>
        <H3>게임 룰</H3>
        
        {/* 여기부터 */}
        {game.game_rule.map((rule) => (
          <ContentsContainer>
          <H4>Stage {rule.stage} : {rule.description}</H4>
        </ContentsContainer>
        ))}
        {/* 여기까지 */}
        
      </RulesContainer>
    </Container>
  );
};

 

주석 '여기부터' '여기까지' 사이 코드를 주석 처리하면 에러가 발생하지 않지만, 이 부분 주석을 해제하면 에러가 발생했다.

이 컴포넌트가 포함되는 상위 페이지를 렌더링 할 때, game이 있을 때만 렌더링 하도록 조건을 달아두었기 때문에 왜 game이 있는데 에러가 발생하는지 헤맸다.

 

에러 원인

game.game_rule이 undifined 인데 map을 수행하려고 해서 에러가 발생한다.

 

해결 과정

1차 -> 미해결

{game?.game_rule.map((rule) => (
  <ContentsContainer>
    <H4>Stage {rule.stage} : {rule.description}</H4>
  </ContentsContainer>
))}

• game이 존재하는지 한 번 더 확인하도록 조건을 추가했다.
• 목표 : game 정보가 담기지 않았을 때, map 을 동작하지 않도록 하고 싶었다.
• 결과 : 여전히 Uncaugth runtime errors가 발생한다.

이 부분에서 한참 헤맸다.

game 정보는 존재하지만, game.game_rule은 undifined 상태라고 이해해 어떻게 그렇게 될 수 있는지 고민하다가 로그를 찍어봤다.

 

로그를 위한 코드

const { game } = props;

  console.log(game);
  console.log(game === false);
  console.log('게임룰은'+game.game_rule);

...

 

최초에는 game, game.game_rule만 로그를 찍었는데, game이 빈 배열이 출력되어 두 번째 줄을 추가했다.

 

개발자도구 콘솔 출력 결과

 

원인은 빈 배열이 false로 처리될 거라고 생각한 데에 있었다.

알고리즘을 풀 때 파이썬을 주로 사용해서, 다른 언어는 빈 배열을 true로 처리할 수 있다는 생각을 못해봤던 부분이 문제였다.

 

 

2차 -> 해결

{game.game_rule?.map((rule) => (
  <ContentsContainer>
    <H4>Stage {rule.stage} : {rule.description}</H4>
  </ContentsContainer>
))}

• map 전에 game.game_rule이 존재하는지 확인한다.
• 목표 : game.game_rule이 undefined 일 때 map을 수행하지 않는다.
• 결과 : 에러 해결 성공!

 

느낀점

자바스크립트는 Vue와 React를 다루며 익혀, 문법의 특징을 잘 모르고 있었던 것 같다.

기초적인 실수를 하지 않도록, 자바스크립트에 대한 공부도 따로 해봐야지.

챗지피티와 제미니로도 한참 해결을 못했는데, 로그로 금방 해결을 해서 허무했다. 스스로 생각하고 판단할 수 있도록 개발자도구를 열고 더 로그를 찍어보면서 개발을 하자.