SyntaxError: Unexpected token 완벽 해결법

도입

JavaScript 개발 중 가장 자주 마주치는 에러 중 하나가 바로 SyntaxError: Unexpected token입니다. 이 에러는 JavaScript 엔진이 코드를 파싱하는 과정에서 예상하지 못한 문법 요소를 발견했을 때 발생합니다. 초보 개발자부터 숙련된 프로그래머까지 누구나 한 번쯤은 경험하는 이 에러는, 괄호 하나, 쉼표 하나의 실수로도 발생할 수 있습니다. 하지만 걱정하지 마세요. 이 가이드를 통해 SyntaxError: Unexpected token 에러의 원인을 정확히 파악하고, 효과적으로 해결하는 방법을 완벽하게 익힐 수 있습니다. 이제부터 이 성가신 에러와 작별할 준비를 해보세요.

에러 상세 분석

SyntaxError: Unexpected token은 JavaScript의 구문 분석(parsing) 단계에서 발생하는 에러입니다. 이는 코드가 실행되기 전, 즉 런타임 이전에 감지되므로 ‘Syntax Error’라고 불립니다. 에러 메시지에는 일반적으로 어떤 토큰이 예상치 못하게 나타났는지 표시됩니다.

예를 들어:

• SyntaxError: Unexpected token '}' – 예상치 못한 닫는 중괄호
• SyntaxError: Unexpected token ',' – 예상치 못한 쉼표
• SyntaxError: Unexpected identifier – 예상치 못한 식별자
• SyntaxError: Unexpected end of input – 입력의 예상치 못한 종료

이 에러는 코드의 문법 구조가 JavaScript 언어 사양을 위반했음을 의미합니다. 브라우저나 Node.js 환경 모두에서 발생할 수 있으며, 에러 메시지에 포함된 줄 번호와 파일 정보를 통해 문제 위치를 파악할 수 있습니다. 다만, 실제 에러 원인은 표시된 줄보다 앞에 있는 경우가 많으므로 주의 깊게 살펴봐야 합니다.

발생 원인 5가지

1. 괄호 불일치

가장 흔한 원인 중 하나는 여는 괄호와 닫는 괄호의 개수가 맞지 않는 경우입니다. 중괄호 {}, 대괄호 [], 소괄호 () 모두 정확히 쌍을 이뤄야 합니다.

// 잘못된 예시
function calculateTotal(items) {
  return items.reduce((sum, item) => {
    return sum + item.price;
  // 닫는 중괄호 누락
}

2. 쉼표 누락 또는 추가

객체나 배열에서 쉼표를 빠뜨리거나 불필요하게 추가하면 에러가 발생합니다. 특히 객체 리터럴에서 마지막 속성 뒤에 쉼표를 넣는 실수가 많습니다.

// 잘못된 예시
const user = {
  name: 'John'
  age: 30  // 쉼표 누락
};

3. 문자열 따옴표 불일치

문자열을 시작할 때와 끝낼 때 다른 종류의 따옴표를 사용하거나, 문자열 내부에 이스케이프 처리 없이 같은 따옴표를 사용하면 에러가 발생합니다.

// 잘못된 예시
const message = "Hello World';
const quote = 'He said "Hello"';  // 이스케이프 필요

4. 예약어 잘못 사용

JavaScript의 예약어(reserved words)를 변수명이나 속성명으로 사용하면 구문 오류가 발생할 수 있습니다. class, const, let, function 등이 대표적입니다.

// 잘못된 예시
const class = 'myClass';  // 'class'는 예약어

5. JSON 파싱 오류

JSON 데이터를 파싱할 때 형식이 올바르지 않으면 SyntaxError: Unexpected token이 발생합니다. JSON은 엄격한 문법 규칙을 따라야 하며, 후행 쉼표나 주석을 허용하지 않습니다.

// 잘못된 예시
const data = JSON.parse('{"name": "John", }');  // 후행 쉼표

해결방법 7가지

1. 괄호 매칭 확인하기

에디터의 괄호 매칭 기능을 활용하거나, 코드 포맷터를 사용하여 괄호가 제대로 닫혔는지 확인하세요.

// 올바른 예시
function calculateTotal(items) {
  return items.reduce((sum, item) => {
    return sum + item.price;
  }, 0);
}

2. 쉼표 위치 점검하기

객체와 배열의 각 요소 사이에 쉼표가 있는지, 마지막 요소 뒤에는 없는지 확인하세요.

// 올바른 예시
const user = {
  name: 'John',
  age: 30,
  email: '[email protected]'
};

const colors = ['red', 'green', 'blue'];

3. 문자열 따옴표 통일하기

문자열 시작과 끝에 같은 종류의 따옴표를 사용하고, 필요시 이스케이프 처리하세요.

// 올바른 예시
const message = "Hello World";
const quote = 'He said "Hello"';
const escaped = "It's a beautiful day";
const template = `Multi-line
string support`;

4. 코드 린터(ESLint) 사용하기

ESLint와 같은 린팅 도구를 사용하면 코드 작성 중 실시간으로 구문 오류를 감지할 수 있습니다.

// .eslintrc.json 설정 예시
{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module"
  }
}

5. JSON 유효성 검사하기

JSON 데이터를 파싱하기 전에 온라인 JSON 검증 도구나 try-catch 문을 사용하여 유효성을 확인하세요.

// 올바른 예시
try {
  const data = JSON.parse('{"name": "John", "age": 30}');
  console.log(data);
} catch (error) {
  console.error('JSON 파싱 에러:', error.message);
}

6. 주석 처리로 문제 범위 좁히기

에러가 발생하는 정확한 위치를 찾기 어려울 때는 코드 블록을 주석 처리하면서 범위를 좁혀나가세요.

// 디버깅 예시
function complexFunction() {
  // const result1 = calculation1();
  // const result2 = calculation2();
  const result3 = calculation3();
  // return result1 + result2 + result3;
}

7. 브라우저 개발자 도구 활용하기

브라우저 콘솔에서 제공하는 상세한 에러 메시지와 스택 트레이스를 확인하여 정확한 에러 위치를 파악하세요.

// 디버깅을 위한 콘솔 로그 활용
console.log('Before error');
const problematicCode = () => {
  // 문제가 되는 코드
};
console.log('After error');

예방법과 베스트 프랙티스

코드 포맷터 자동화

Prettier와 같은 자동 포맷팅 도구를 사용하면 괄호, 쉼표, 들여쓰기 등의 기본적인 구문 오류를 예방할 수 있습니다. 저장 시 자동 포맷팅 기능을 활성화하는 것을 권장합니다.

TypeScript 도입 검토

TypeScript는 컴파일 단계에서 많은 구문 오류를 사전에 감지할 수 있어, JavaScript보다 더 안전한 개발 환경을 제공합니다.

코드 리뷰 문화

팀원 간 코드 리뷰를 통해 실수를 조기에 발견하고, 일관된 코딩 스타일을 유지할 수 있습니다. Pull Request 시 자동화된 린팅 검사를 포함시키세요.

테스트 주도 개발(TDD)

단위 테스트를 작성하면 코드 실행 전에 구문 오류를 발견할 수 있으며, 코드의 품질도 향상됩니다.

// Jest 테스트 예시
test('calculateTotal should return correct sum', () => {
  const items = [{price: 10}, {price: 20}];
  expect(calculateTotal(items)).toBe(30);
});

마무리

SyntaxError: Unexpected token 에러는 처음에는 당황스러울 수 있지만, 체계적인 접근 방법으로 충분히 해결할 수 있습니다. 에러 메시지를 주의 깊게 읽고, 괄호와 쉼표를 꼼꼼히 확인하며, 린터와 포맷터 같은 도구를 적극 활용하세요. 이 가이드에서 소개한 원인 분석, 해결 방법, 예방 기법을 실무에 적용한다면, 더 이상 구문 오류로 인한 개발 시간 낭비 없이 효율적인 코딩이 가능할 것입니다. 깨끗하고 오류 없는 JavaScript 코드를 작성하여 더 나은 개발자로 성장하세요!