Invalid or unexpected token 에러 해결법 총정리
자바스크립트 코드를 실행했는데 콘솔에 SyntaxError: Invalid or unexpected token이라는 메시지가 나타나면 어디가 잘못됐는지 바로 찾기 어려울 수 있습니다.
코드가 멀쩡해 보이는데도 오류가 발생한다면 따옴표나 특수문자처럼 눈에 잘 띄지 않는 부분이 원인일 가능성이 있는데요.
Invalid or unexpected token 에러는 자바스크립트 엔진이 코드를 읽는 과정에서 문법적으로 사용할 수 없거나 예상하지 못한 문자를 발견했다는 의미입니다.
오늘은 정확한 뜻부터 자주 발생하는 원인과 초보자도 따라 할 수 있는 해결 순서까지 쉽게 알아보겠습니다.
Invalid or unexpected token 뜻은?
자바스크립트에서 token은 변수명, 숫자, 문자열, 연산자, 괄호처럼 코드를 구성하는 작은 요소를 의미합니다.
그런데 코드를 분석하던 자바스크립트 엔진이 현재 위치에서 해석할 수 없는 문자나 문법을 만나면 SyntaxError를 발생시킵니다.
쉽게 말하면 자바스크립트가 “이 문자는 여기서 어떻게 해석해야 할지 모르겠어요”라고 알려주는 것입니다.
// 잘못된 스마트 따옴표가 들어간 예
const message = “안녕하세요”;
// 올바른 예
const message = "안녕하세요";
두 코드는 눈으로 보면 비슷하지만 첫 번째 따옴표는 일반 큰따옴표가 아닌 스마트 따옴표입니다. 워드프로세서나 웹페이지에서 코드를 복사했을 때 이런 문자가 들어가면서 오류가 발생하기도 합니다.
Invalid or unexpected token 원인 8가지
1. 스마트 따옴표를 사용한 경우
가장 먼저 확인할 부분입니다. 자바스크립트 문자열에는 일반적인 ' 또는 "를 사용해야 합니다. 문서 프로그램에서 자동으로 변환된 ‘ ’, “ ” 같은 따옴표가 들어가면 문제가 발생할 수 있습니다.
2. 문자열 따옴표를 닫지 않은 경우
문자열을 시작하고 마지막 따옴표를 빠뜨리면 자바스크립트가 뒤의 코드를 정상적으로 해석하지 못합니다. 오류 위치가 실제 실수보다 뒤쪽으로 표시될 수도 있으므로 앞줄까지 함께 확인하세요.
// 잘못된 예
const name = "민수;
// 올바른 예
const name = "민수";
3. 일반 문자열에서 줄바꿈한 경우
큰따옴표나 작은따옴표 문자열을 그대로 다음 줄까지 이어 작성하면 문법 오류가 발생할 수 있습니다. 여러 줄 문자열이 필요하다면 백틱을 이용한 템플릿 리터럴을 사용하는 것이 편리합니다.
const message = `안녕하세요.
오늘도 좋은 하루 보내세요.`;
4. 템플릿 리터럴의 백틱이 닫히지 않은 경우
템플릿 리터럴은 `로 시작했다면 반드시 백틱으로 끝나야 합니다. ${} 표현식까지 사용하면 괄호 구조가 복잡해질 수 있으므로 백틱과 중괄호를 함께 확인하세요.
특수문자 때문에 SyntaxError가 발생할 수도 있어요
5. 복사·붙여넣기 과정에서 이상한 문자가 들어간 경우
블로그, PDF, 메신저 등에서 코드를 복사하면 눈에 잘 보이지 않는 유니코드 문자나 일반 공백과 다른 문자가 섞일 수 있습니다. 문제가 되는 줄을 지우고 직접 다시 입력했더니 해결되는 경우가 있는 이유입니다.
6. 잘못된 이스케이프 문자를 사용한 경우
문자열 안에서 역슬래시 \는 특별한 의미를 갖습니다. 경로나 특수문자를 표현하면서 역슬래시를 잘못 사용하면 의도와 다르게 문자열이 해석될 수 있으므로 주의해야 합니다.
// Windows 경로를 문자열로 표현하는 예
const path = "C:\\Users\\test";
7. 주석이나 문자열 문법이 중간에서 깨진 경우
여러 줄 주석 /* ... */이나 문자열이 제대로 닫히지 않으면 뒤에 있는 코드까지 영향을 받을 수 있습니다. 오류가 표시된 한 줄만 보지 말고 바로 위쪽의 주석과 문자열부터 확인해 보세요.
8. 현재 환경에서 처리할 수 없는 문법을 사용한 경우
JSX나 일부 최신 문법을 해당 문법을 변환할 수 없는 환경에서 그대로 실행하면 SyntaxError가 발생할 수 있습니다. React의 JSX라면 빌드 환경이 제대로 구성됐는지, 사용하는 자바스크립트 런타임이 해당 문법을 지원하는지도 확인해야 합니다.
Invalid or unexpected token 해결 순서
가장 먼저 해야 할 일은 콘솔에 표시된 파일 이름, 줄 번호와 열 번호를 확인하는 것입니다. 그 위치로 이동한 뒤 오류가 난 문자뿐 아니라 앞뒤 코드까지 함께 살펴보세요.
그다음 따옴표와 백틱을 확인합니다. 특히 코드를 직접 입력하지 않고 다른 곳에서 복사했다면 의심되는 따옴표를 삭제한 뒤 키보드로 다시 입력해 보는 것이 좋습니다.
| 순서 | 확인할 내용 |
| 1단계 | 콘솔의 파일·줄·열 번호 확인 |
| 2단계 | 오류 줄과 바로 앞줄 함께 확인 |
| 3단계 | 스마트 따옴표와 특수문자 확인 |
| 4단계 | 따옴표와 백틱이 제대로 닫혔는지 확인 |
| 5단계 | 줄바꿈과 이스케이프 문자 확인 |
| 6단계 | 문제가 의심되는 코드를 직접 다시 입력 |
| 7단계 | JSX·최신 문법의 실행 환경 확인 |
| 8단계 | 저장 후 다시 실행해 결과 확인 |
Unexpected token과는 무엇이 다를까?
Unexpected token과 Invalid or unexpected token은 모두 자바스크립트 코드를 파싱하는 과정에서 발생하는 SyntaxError라서 상당히 비슷합니다.
다만 Invalid or unexpected token은 문법 구조뿐 아니라 해석할 수 없는 문자 자체가 포함된 상황에서도 자주 볼 수 있습니다.
따라서 Unexpected token에서는 괄호, 쉼표, 객체 구조 등을 우선 확인했다면 Invalid or unexpected token에서는 따옴표, 특수문자, 줄바꿈, 백틱, 복사한 문자까지 꼼꼼하게 확인하는 것이 좋습니다.
눈에 안 보이는 문자는 어떻게 찾을까?
코드가 아무리 봐도 정상이라면 오류가 발생한 줄을 통째로 지운 뒤 직접 다시 작성해 보세요. 생각보다 단순하지만 숨겨진 문자나 잘못된 따옴표를 제거하는 데 효과적인 방법입니다.
VS Code에서는 공백 문자 표시 기능 등을 이용해 보이지 않는 문자를 확인할 수도 있습니다. Prettier나 ESLint를 사용하면 코드 형식과 일부 문법 문제를 빠르게 발견하는 데 도움이 되므로 프로젝트에 함께 적용해 두는 것도 좋습니다.
Invalid or unexpected token 예방 방법
코드는 가능하면 메신저나 워드프로세서를 거쳐 복사하기보다 코드 편집기에서 직접 작성하는 것이 안전합니다. 다른 웹페이지의 코드를 가져왔다면 따옴표와 특수문자를 먼저 확인하는 습관을 들여보세요.
또한 코드를 너무 길게 작성한 뒤 한 번에 실행하지 말고 작은 단위로 저장하고 테스트하는 것이 좋습니다. 새 코드를 추가한 직후 오류가 발생하면 방금 수정한 범위만 확인하면 되기 때문에 디버깅 시간이 크게 줄어듭니다.
Invalid or unexpected token은 쉽게 말하면 자바스크립트가 “현재 위치에서 정상적으로 해석할 수 없는 문자를 발견했다”는 의미입니다. 가장 먼저 따옴표와 백틱을 확인하고, 복사하면서 들어간 특수문자, 줄바꿈, 이스케이프 문자와 실행 환경까지 순서대로 살펴보세요.
코드가 정상으로 보이는데 오류가 계속된다면 해당 줄을 직접 다시 입력해 보는 것도 좋은 방법입니다.
앞서 살펴본 Unexpected token, Unexpected end of input, Unexpected identifier와 함께 알아두면 SyntaxError를 만났을 때 원인을 훨씬 빠르게 좁힐 수 있습니다.