SyntaxError: Unexpected token 완벽 해결 가이드

도입

JavaScript 개발 중 가장 흔하게 마주치는 오류 중 하나가 바로 SyntaxError: Unexpected token입니다. 이 에러는 코드의 문법적 구조가 JavaScript 파서의 예상과 다를 때 발생하며, 초보 개발자부터 숙련된 개발자까지 누구나 경험하는 문제입니다. 브라우저나 Node.js 환경에서 코드를 실행할 때 갑자기 나타나는 이 에러 메시지는 당황스러울 수 있지만, 원인을 정확히 파악하면 빠르게 해결할 수 있습니다. 이 글에서는 SyntaxError: Unexpected token 에러의 모든 것을 다루며, 실제 코드 예제와 함께 효과적인 해결 방법을 제시합니다.

에러 상세 분석

SyntaxError: Unexpected token은 JavaScript 엔진이 코드를 파싱하는 과정에서 예상하지 못한 토큰(token)을 만났을 때 발생합니다. 여기서 ‘토큰’이란 코드를 구성하는 최소 단위로, 키워드, 연산자, 괄호, 식별자 등을 의미합니다. 예를 들어, 중괄호가 열렸지만 닫히지 않았거나, 쉼표가 빠졌거나, 예약어를 잘못 사용한 경우 이 에러가 발생합니다.

에러 메시지는 보통 다음과 같은 형식으로 나타납니다:

SyntaxError: Unexpected token '}'
SyntaxError: Unexpected token ','
SyntaxError: Unexpected token '<'
SyntaxError: Unexpected identifier

이 메시지는 어떤 토큰이 문제인지 알려주며, 대부분 에러가 발생한 줄 번호도 함께 표시됩니다. 하지만 실제 문제는 표시된 줄보다 이전 줄에 있을 수 있어 주의가 필요합니다.

발생 원인 5가지

1. 괄호, 중괄호, 대괄호 불일치

가장 흔한 원인으로, 여는 괄호와 닫는 괄호의 개수가 맞지 않거나 순서가 잘못된 경우입니다. 복잡한 중첩 구조에서 특히 자주 발생합니다.

2. 쉼표 누락 또는 추가

객체 리터럴이나 배열에서 속성 사이에 쉼표를 빠뜨리거나, 반대로 마지막 요소 뒤에 불필요한 쉼표를 추가한 경우 에러가 발생할 수 있습니다.

3. 따옴표 불일치

문자열을 시작할 때 사용한 따옴표와 종료할 때 사용한 따옴표가 다르거나, 문자열이 제대로 닫히지 않은 경우입니다.

4. 예약어 잘못 사용

JavaScript의 예약어를 변수명이나 속성명으로 사용하거나, 문법에 맞지 않는 위치에 키워드를 배치한 경우 발생합니다.

5. JSON 파싱 오류

JSON.parse()를 사용할 때 유효하지 않은 JSON 형식의 문자열을 전달하면 이 에러가 발생합니다. JSON은 JavaScript 객체 리터럴보다 엄격한 문법 규칙을 따릅니다.

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

해결법 1: 괄호 매칭 확인

여는 괄호와 닫는 괄호가 정확히 짝을 이루는지 확인하세요.

// 잘못된 코드
function calculate(a, b) {
  if (a > b) {
    return a * b;
  // 중괄호 누락
}

// 올바른 코드
function calculate(a, b) {
  if (a > b) {
    return a * b;
  }
}

해결법 2: 객체 리터럴 쉼표 수정

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

// 잘못된 코드
const user = {
  name: "홍길동"
  age: 30,  // 이전 줄에 쉼표 누락
  city: "서울",  // 마지막 쉼표는 ES5+에서 허용됨
}

// 올바른 코드
const user = {
  name: "홍길동",
  age: 30,
  city: "서울"
}

해결법 3: 따옴표 일치시키기

문자열의 시작과 끝에 동일한 따옴표를 사용하세요.

// 잘못된 코드
const message = "Hello World';
const greeting = 'Hi there";

// 올바른 코드
const message = "Hello World";
const greeting = 'Hi there';
const template = `Hello ${name}`;

해결법 4: JSON 형식 검증

JSON 데이터는 키를 반드시 큰따옴표로 감싸야 하며, 함수나 undefined 값을 포함할 수 없습니다.

// 잘못된 코드
const jsonString = "{ name: 'John', age: 30 }";
JSON.parse(jsonString);  // 에러 발생

// 올바른 코드
const jsonString = '{"name": "John", "age": 30}';
const data = JSON.parse(jsonString);
console.log(data.name);  // "John"

해결법 5: 화살표 함수 문법 확인

화살표 함수에서 객체를 반환할 때는 소괄호로 감싸야 합니다.

// 잘못된 코드
const getUser = () => { name: "홍길동", age: 30 };

// 올바른 코드
const getUser = () => ({ name: "홍길동", age: 30 });
const result = getUser();
console.log(result.name);

해결법 6: async/await 문법 검증

await 키워드는 반드시 async 함수 내부에서만 사용해야 합니다.

// 잘못된 코드
function fetchData() {
  const data = await fetch('/api/users');  // 에러
  return data;
}

// 올바른 코드
async function fetchData() {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
}

해결법 7: 세미콜론 자동 삽입(ASI) 주의

JavaScript는 세미콜론을 자동으로 삽입하지만, 때로는 의도와 다르게 동작할 수 있습니다.

// 잘못된 코드 (의도와 다르게 동작)
const value = 10
[1, 2, 3].forEach(n => console.log(n))
// 10[1,2,3] 처럼 해석되어 에러 발생

// 올바른 코드
const value = 10;
[1, 2, 3].forEach(n => console.log(n));

예방법과 베스트 프랙티스

1. 린터(Linter) 사용

ESLint와 같은 도구를 프로젝트에 도입하면 코드 작성 중 실시간으로 문법 오류를 감지할 수 있습니다. 이는 에러가 런타임에 발생하기 전에 미리 방지하는 가장 효과적인 방법입니다.

2. 코드 포맷터 활용

Prettier와 같은 자동 포맷팅 도구는 일관된 코드 스타일을 유지하고 괄호 매칭 문제를 자동으로 해결해 줍니다.

3. IDE 기능 활용

VS Code, WebStorm 등 현대적인 IDE는 괄호 매칭, 문법 검사, 자동 완성 기능을 제공합니다. 이러한 기능을 적극 활용하면 타이핑 실수를 크게 줄일 수 있습니다.

4. 코드 리뷰 문화

동료 개발자와 코드 리뷰를 진행하면 자신이 놓친 문법 오류를 발견할 수 있으며, 더 나은 코딩 패턴을 학습할 수 있습니다.

마무리

SyntaxError: Unexpected token 에러는 처음에는 어렵게 느껴질 수 있지만, 원인을 이해하고 체계적으로 접근하면 누구나 쉽게 해결할 수 있습니다. 에러 메시지를 주의 깊게 읽고, 문제가 발생한 위치 주변 코드를 꼼꼼히 확인하는 습관을 기르세요. 린터와 포맷터 같은 도구를 활용하면 이러한 문법 오류를 사전에 예방할 수 있으며, 더 깨끗하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 이 가이드가 여러분의 JavaScript 개발 여정에 도움이 되기를 바라며, 에러 없는 즐거운 코딩 되시기 바랍니다.