자바스크립트 오류 유형과 확인 방법

숩딩·2023년 2월 13일

오류, 사방에 오류.

개발을 열심히 하다가 오류가 나면 당황하는 나..는 ... (바보다..가 아니라)
앞으로는 오류가 나면 당황하지 않고 메세지를 읽고 뚝-딱!? 해결해 보고자 오류 유형과 확인, 해결하는 예제를 작성해보며 에러 메세지와 친해져 보겠다..

우선 MDN을 보면 자바스크립트 에러 레퍼런스와 해결방법이 잘 나와있다!

자바스크립트 오류 유형

자바스크립트 오류 유형에는 대표적으로 7가지가 있다.

SyntaxError
TypeError
EvalError
RangeError
ReferenceError
SyntaxError
URIError

이 에러들은 '자바스크립트 내장 에러 객체'라고 한다.
코드에 문제가 있을 때 오류 생성자가 콘솔창에 오류 유형을 보여줘서 이걸 보고 에러를 파악할 수 있다.

(일단 가장 자주 봤던 에러가 SyntaxError, TypeError, ReferenceError 이기 때문에 이 셋을 중점으로 작성해 보겠다.)

SyntaxError 구문 오류

오타가 있거나, 쉼표, 따옴표, 괄호 같은 기호 사용에 실수가 있을 때 나오는 에러 메세지이다. 이런 사소한 오입력으로 에러가 나고 이걸 잡느라 시간을 버리다 보면.. 현타가 오곤 한다. 하지만 개발자 도구에서 오류의 정확한 위치를 확인할 수 있게 때문에 개발자 도구를 이용한다면 시간을 줄일 수 있다.
근데 요즘에는 거의 ESLink, Prettier 같은 도구가 코드를 작성하는 시점에 경고하거나 수정해 주기 때문에 보기 힘든 오류이다.

아래 코드는 리액트의 onClick 이벤트 함수이다.
이 코드는 잘 동작 할 것인가 ..?

 const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (e.currentTarget.name === "error") {
      console.log("Error);
    }

콘솔창을 보니 .. 두둥

" 따옴표 하나가 없기 때문에 구문 오류가 나고있다!
사실 이건 에디터에서 충분히 잡을 수 있기는 하지만 유의할 점이라고 생각한다!

Reference Error

ReferenceError은 현재 범위에서 존재하지 않거나 초기화되지 않은 변수를 참조했을 때 발생한다.

e.currentTarget.name === "error" 일 때 콘솔창에 "error" 이라는 글씨가 나오게 해줘보자

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (e.currentTarget.name === "error") {
      console.log(error);
    }
  };

이 코드는 잘 동작할까 ..?
no ..

error 이 정의되지 않았기 때문에 동작하지 않는다. 라고 뜨는데 현재 범위에서 존재하지 않기 때문에 레퍼런스 에러가 뜨는 것 !

내가 원하는건 error 그 자체가 아니라 문자 "error"이기 때문에 따옴표를 작성해주면 오류를 해결할 수 있다.

TypeError

변수나 인자가 참조하고 있는 인스턴스를 잘 못 사용할 때 발생하는 에러이다.

TypeError: obj.map is not a function 이라는 메세지는 obj.map 함수는 여기서 쓰일 수 없다고 한다.
문제를 해결하기 위해 obj를 보자.

  const obj = { label: "label1", value: "value1" };

  return (
    <div className="container">
      <h1>Error Test</h1>
      {obj.map((item) => (
        <>
          <p>{item.label}</p>
          <p>{item.value}</p>
        </>
      ))}
    </div>

const obj = { label: "label1", value: "value1" };
배열이 아닌 오브젝트이다 .. !
map 함수는 Array 배열일 때만 사용이 가능하다
그래서 여기에서 오류가 나는 것 !

 const obj = [
    {
      label: "label1",
      value: "value1",
    },
    {
      label: "label2",
      value: "value2",
    },
  ];

  return (
    <div className="container">
      <h1>Error Test</h1>
      {obj.map((item) => (
        <>
          <p>{item.label}</p>
          <p>{item.value}</p>
        </>
      ))}
    </div>
  );

obj를 객체를 감싼 배열의 구조로 수정해주니 에러를 해결해줄 수 있었다 .

warning

콘솔을 통해 경고 메세지를 보여주기도 한다.
위의 코드 그대로 실행 후 콘솔을 보면 TypeError은 더이상 보이지 않지만 Warning 이 뜨는 것을 볼 수 있다.

Each child in a list should have a unique "key" prop.

내용은 간단하다 "key prop 을 넣어라 !"

const obj = [
    {
      label: "label1",
      value: "value1",
    },
    {
      label: "label2",
      value: "value2",
    },
  ];

  return (
    <div className="container">
      <h1>Error Test</h1>
      {obj.map((item) => (
        <div key={item.label}>
          <>
            <p>{item.label}</p>
            <p>{item.value}</p>
          </>
        </div>
      ))}
    </div>
  );