손상된 JavaScript를 여기에 붙여넣고 "JS 수정하기!!"를 클릭하여 복원하세요유효하지 않은 JS 입력

JS 수정 도구란?

문서나 채팅 스레드에서 복사한 코드 조각을 붙여넣었더니 파서가 터진다. ASI가 도와주지 못한 곳에 세미콜론이 빠져 있다. 중괄호 하나가 사라졌다. 문자열이 줄 끝에서 닫히지 않는다. 이 도구는 그런 손상된 JavaScript를 받아 엔진이 실제로 받아들일 수 있는 형태로 돌려줍니다.

JavaScript의 문법은 TC39의 ECMAScript 명세에 정의되어 있고, 모든 브라우저와 Node.js가 코드 파싱 시 이를 따릅니다. MDN의 JavaScript 레퍼런스가 그 규칙을 평이한 언어로 풀어 설명해 줍니다. 자동 세미콜론 삽입(ASI)은 그 문법의 일부로 — 대개는 편하지만, 예기치 않은 줄바꿈이 코드의 의미를 조용히 바꿔 놓을 때는 골치 아픕니다. 이 도구는 구문 단계의 깨짐을 노립니다. 추가로 전체 포매팅이 필요하다면 결과를 Prettier에 한 번 더 통과시키세요.

모든 처리는 브라우저를 거쳐 백엔드로 가고 다시 돌아옵니다. 파일에 ESLint를 적용하기 전 첫 단계로 사용하세요 — 코드가 적어도 파싱되고 나면 대부분의 규칙 위반은 훨씬 읽기 쉬워집니다.

JS 수정 도구 사용법

세 단계입니다. 각 단계는 이 페이지의 실제 버튼과 패널을 사용합니다.

손상된 JS 붙여넣기 또는 샘플 불러오기

손상된 JavaScript를 왼쪽 편집기에 붙여넣으세요. 샘플 JS를 클릭하면 도구가 처리하는 입력의 예시를 볼 수 있습니다. 흔한 모습 — 누락된 세미콜론, 객체 리터럴의 빠진 쉼표, 짝이 맞지 않는 중괄호, 따옴표 없이 적힌 문자열이어야 할 값:

function processOrder(customer) {
  const order = { id: "ORD-9001" customer: customer, status: pending }
  return order

도구는 누락된 세미콜론, `{`/`}`, `[`/`]`, `(`/`)`의 불일치, 객체·배열 리터럴의 빠진 쉼표, 따옴표 없는 값, 종료되지 않은 문자열, 비정상적인 연산자 결합 등을 처리합니다.

"JS 수정하기!!" 클릭

녹색 JS 수정하기!! 버튼을 누르세요. 코드는 백엔드로 전송되어 수정된 뒤 파싱 가능한 상태로 돌아옵니다. 처리되는 동안 로딩 표시기가 나타나며, 보통 1~2초면 끝납니다.

결과 확인

오른쪽 패널에 수정된 코드가 표시됩니다. 의미는 입력에 가능한 한 가깝게 유지되며 — 구문만 수정됩니다. 결과를 복사해 편집기로 가져간 뒤 포매터나 린터를 돌리세요.

이 도구를 활용하는 상황

복사·붙여넣기 코드 복구

Slack 스레드, StackOverflow 답변, PDF에서 가져온 코드는 따옴표나 줄 연결, 구두점이 통째로 사라지는 일이 잦습니다. 손으로 한 줄씩 고치기 전에 이 도구로 한 번 통과시키세요.

추출한 미니파이드 코드 디버깅

프로덕션 번들의 스택 트레이스에서 일부를 떼어 살펴볼 때, 일단 파싱되도록 만드는 게 절반의 싸움입니다. 먼저 구문을 고치고, 다음에 보기 좋게 포매팅하고, 그다음에 분석에 들어가세요.

ASI 함정

자동 세미콜론 삽입에 의존한 코드는 미묘하게 깨집니다 — 예컨대 `return` 뒤에 줄바꿈이 오면 조용히 `undefined`를 반환합니다. 도구는 파서가 원하는 자리에 세미콜론을 명시적으로 보충해 다음 사람이 읽기 쉽게 만듭니다.

AI가 만든 스텁 정리

LLM이 생성한 코드 조각은 가끔 중괄호가 빠지거나 쉼표를 건너뜁니다. 결과를 Babel이나 번들러에 넣기 전에 여기서 구문을 정리하세요.

자주 묻는 질문

제 코드가 어딘가에 저장되나요?

AI 모델이 수정할 수 있도록 백엔드로 보내고, 결과만 다시 돌려드립니다. 코드를 기록하지 않으며, 학습에 쓰지 않으며, 이 한 번의 요청을 수정하는 것 외에는 어떤 용도로도 사용하지 않습니다.

어떤 종류의 오류를 수정하나요?

구문 단계의 문제들 — 누락된 세미콜론, 짝이 맞지 않는 중괄호·대괄호·괄호, 객체·배열 리터럴의 빠진 쉼표, 문자열이 와야 할 자리의 따옴표 없는 값, 종료되지 않은 문자열·템플릿 리터럴, 잘못된 연산자 결합. 논리 버그(잘못된 조건, off-by-one)는 다루지 않습니다.

제 코드의 의미가 바뀌지는 않나요?

바뀌지 않도록 최선을 다합니다. 의미는 그대로 두고 문법만 수정하는 게 목표입니다. 해석이 필요한 가장자리 사례(분명히 문자열이 와야 할 자리에 따옴표 없는 토큰이 있는 경우 등)에서는 가장 그럴듯한 의도를 선택합니다. 항상 결과를 눈으로 확인하세요.

TypeScript도 지원하나요?

TypeScript 고유 구문(타입 어노테이션, 제네릭, 데코레이터)은 다루지 않습니다. TS의 JS 부분(클래스, async/await, 템플릿 리터럴, 최신 배열 메서드 등)은 깔끔하게 파싱됩니다. 본격적인 TS 변환이 필요하면 JS에서 TypeScript로 도구를 보세요.

프로덕션 코드에 사용해도 될까요?

구문 수정 도구이지 린터나 타입 체커의 대체물이 아닙니다. 결과는 시작점으로 다루고 — ESLint와 테스트 스위트를 거친 뒤에 배포하세요.

도저히 못 고치는 코드도 있나요?

있습니다. 입력이 너무 단편적이거나 원래 의도가 진짜로 모호한 경우(여러 가지 그럴듯한 수정안이 있는 경우)에는 도구가 하나를 선택합니다 — 그러나 그 결과는 구문상으론 맞지만 의미상 틀릴 수 있습니다. 짧은 입력일수록 결과를 꼼꼼히 검토하세요.

JS 수정 도구