SyntaxError: Unexpected token 완벽 해결법

1. 도입 – SyntaxError: Unexpected token이란?

JavaScript 개발을 하다 보면 가장 자주 마주치는 에러 중 하나가 바로 SyntaxError: Unexpected token입니다. 이 에러는 JavaScript 엔진이 코드를 파싱하는 과정에서 예상하지 못한 문자나 기호를 만났을 때 발생합니다. 초보 개발자부터 숙련된 개발자까지 누구나 한 번쯤은 겪게 되는 이 에러는, 코드의 문법적 오류를 나타내는 명확한 신호입니다. 다행히도 이 에러는 대부분 코드를 주의 깊게 살펴보면 쉽게 해결할 수 있습니다. 이 글에서는 SyntaxError: Unexpected token 에러의 원인과 해결 방법을 체계적으로 알아보겠습니다.

2. 에러 상세 분석

SyntaxError는 JavaScript의 구문 규칙을 위반했을 때 발생하는 에러입니다. ‘Unexpected token’이라는 메시지는 JavaScript 파서가 특정 위치에서 예상한 토큰과 다른 토큰을 발견했음을 의미합니다. 예를 들어, SyntaxError: Unexpected token '}'는 닫는 중괄호가 예상치 못한 위치에 있다는 뜻입니다.

이 에러는 코드 실행 전 파싱 단계에서 발생하므로, 코드가 한 줄도 실행되지 않습니다. 에러 메시지에는 일반적으로 문제가 발생한 파일명, 줄 번호, 그리고 예상치 못한 토큰이 무엇인지 표시됩니다. 브라우저 개발자 도구나 Node.js 콘솔에서 이 정보를 확인할 수 있으며, 이를 통해 문제 위치를 빠르게 파악할 수 있습니다. 주의할 점은 실제 오류 위치가 에러 메시지에 표시된 줄보다 앞에 있을 수 있다는 것입니다. 예를 들어, 함수의 시작 부분에서 중괄호를 빼먹었다면, 에러는 함수의 끝부분에서 발생할 수 있습니다.

3. 발생 원인 5가지

3.1 괄호 또는 중괄호 누락

가장 흔한 원인은 여는 괄호와 닫는 괄호의 짝이 맞지 않는 경우입니다. 함수, 객체, 배열, 조건문 등에서 중괄호 {}, 대괄호 [], 소괄호 ()를 빠뜨리거나 잘못 배치하면 발생합니다.

3.2 잘못된 JSON 형식

JSON 데이터를 다룰 때 후행 쉼표(trailing comma), 작은따옴표 사용, 키값에 따옴표 누락 등의 문제로 에러가 발생합니다. JSON은 엄격한 형식을 요구하므로 특히 주의해야 합니다.

3.3 세미콜론 누락 또는 잘못된 위치

JavaScript는 자동 세미콜론 삽입(ASI) 기능이 있지만, 모든 경우에 올바르게 작동하지 않습니다. 특히 return 문이나 화살표 함수에서 세미콜론 문제가 자주 발생합니다.

3.4 예약어 잘못 사용

class, const, let, function 등의 예약어를 변수명이나 속성명으로 사용하거나, 예약어를 잘못된 맥락에서 사용하면 에러가 발생합니다.

3.5 문자열 따옴표 불일치

문자열을 시작한 따옴표와 종료 따옴표가 일치하지 않거나, 문자열 내부에 이스케이프 처리하지 않은 따옴표가 있으면 문제가 됩니다. 템플릿 리터럴의 백틱(`)도 마찬가지입니다.

4. 해결방법 7가지 (코드 포함)

4.1 괄호 짝 맞추기

문제가 있는 코드:

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  // 닫는 중괄호 누락
  return total;
}

해결된 코드:

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

4.2 JSON 형식 수정

문제가 있는 코드:

const config = {
  "name": "MyApp",
  "version": "1.0.0",
  "settings": {
    "theme": "dark",
  }, // 후행 쉼표 제거 필요
};

해결된 코드:

const config = {
  "name": "MyApp",
  "version": "1.0.0",
  "settings": {
    "theme": "dark"
  }
};

4.3 세미콜론 올바르게 배치

문제가 있는 코드:

const multiply = (a, b) => 
  return a * b; // 화살표 함수에서 return 불필요
};

해결된 코드:

const multiply = (a, b) => {
  return a * b;
};

// 또는 간결하게
const multiply = (a, b) => a * b;

4.4 문자열 따옴표 일치시키기

문제가 있는 코드:

const message = "It's a beautiful day; // 따옴표 불일치
console.log(message);

해결된 코드:

const message = "It's a beautiful day";
// 또는
const message = 'It\'s a beautiful day';
// 또는 템플릿 리터럴 사용
const message = `It's a beautiful day`;
console.log(message);

4.5 객체 속성 선언 올바르게 하기

문제가 있는 코드:

const user = {
  name: "John",
  age: 30
  email: "[email protected]" // 쉼표 누락
};

해결된 코드:

const user = {
  name: "John",
  age: 30,
  email: "[email protected]"
};

4.6 조건문 괄호 확인

문제가 있는 코드:

if (score > 90)
  console.log("Excellent");
  grade = "A"; // 중괄호 없이 여러 문장
}

해결된 코드:

if (score > 90) {
  console.log("Excellent");
  grade = "A";
}

4.7 async/await 문법 확인

문제가 있는 코드:

async function fetchData() {
  const response = await fetch(url)
  const data = await response.json() // 세미콜론 권장
  return data
}

해결된 코드:

async function fetchData() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

5. 예방법과 베스트 프랙티스

코드 에디터 활용: VS Code, WebStorm 같은 현대적인 코드 에디터는 실시간으로 구문 오류를 감지하고 표시합니다. ESLint, Prettier 같은 린터와 포맷터를 설정하면 코드 작성 중 자동으로 문법 오류를 잡아줍니다.

일관된 코딩 스타일: 괄호를 같은 줄에 여는지 다음 줄에 여는지, 세미콜론을 항상 사용할지 등의 규칙을 팀 내에서 통일하면 실수를 줄일 수 있습니다. Airbnb JavaScript Style Guide 같은 표준 가이드를 따르는 것도 좋습니다.

코드 리뷰와 테스트: 동료와의 코드 리뷰를 통해 놓친 오류를 발견할 수 있습니다. 또한 유닛 테스트를 작성하면 코드가 실행 가능한 상태인지 지속적으로 확인할 수 있습니다.

점진적 개발: 한 번에 많은 코드를 작성하지 말고, 작은 단위로 코드를 작성하고 자주 실행해보세요. 이렇게 하면 에러가 발생했을 때 원인을 빠르게 찾을 수 있습니다.

6. 마무리

SyntaxError: Unexpected token 에러는 처음에는 당황스러울 수 있지만, 체계적으로 접근하면 쉽게 해결할 수 있습니다. 에러 메시지를 주의 깊게 읽고, 문제가 발생한 줄과 그 앞뒤 코드를 확인하세요. 괄호, 따옴표, 쉼표 같은 기본적인 구문 요소부터 점검하면 대부분의 문제를 해결할 수 있습니다. 좋은 개발 도구와 코딩 습관을 갖추면 이러한 에러를 미리 예방할 수 있습니다. 에러를 두려워하지 말고, 디버깅 실력을 키우는 기회로 삼으세요!