JavaScript 뷰티파이어
압축된 JavaScript·JSON을 보기 좋게 정렬 — 들여쓰기 1~10칸·탭, 중괄호 4종, 줄 바꿈 폭, JSX 옵션. 100% 브라우저 처리, 업로드 없음.
옵션 더 보기
🔒 브라우저에서 실행되며 업로드되지 않습니다.
압축된 JavaScript를 다시 읽기 쉽게
압축·난독화되거나 형식이 엉망인 JavaScript(또는 JSON)를 붙여넣으면 일관된 간격과 줄바꿈으로 깔끔하게 들여쓰기해 돌려줍니다. 정렬 버튼은 따로 없고 입력하는 대로 결과가 갱신됩니다. 많은 에디터가 쓰는 js-beautify 엔진으로 동작하며, 기본값은 스페이스 2칸·K&R 중괄호·빈 줄 1개 유지입니다.
프로젝트 스타일에 맞추기
들여쓰기는 스페이스 1~10칸 또는 탭으로 모두 11가지이며, 목록에 없는 값은 임의로 2칸으로 되돌리지 않고 거부합니다. 중괄호는 같은 줄(K&R)·다음 줄(Allman)·끝만 내림·원본 위치 유지 4가지 중에서 고릅니다. 원본 위치 유지는 작성자가 둔 줄에 중괄호를 그대로 둡니다. 여분 줄바꿈은 모두 제거, 1·2·3·4·5·10개까지 유지, 제한 없음으로 8가지입니다.
옵션 더 보기에는 줄 바꿈 기준 폭과 체크박스 7개가 있습니다. 폭을 비워 두거나 0이면 줄을 바꾸지 않고, 값을 넣으면 20~500 사이여야 합니다. 그 밖의 값(5, 900, 0.5, 숫자가 아닌 글자)은 적당한 폭으로 반올림하지 않고 이유를 알려주며 결과를 내보내지 않습니다. 체크박스는 JSX/e4x 문법으로 읽기, 쉼표를 줄 앞에, 배열 들여쓰기 유지, 메서드 체인 줄바꿈, 조건문 앞 공백, 문자열의 \xNN escape 해제, JSLint 방식 공백입니다.
코드는 기기를 벗어나지 않습니다
모든 처리는 브라우저에서 실행되어 코드가 업로드되지 않으므로 비공개·미출시 스크립트에도 안전합니다. 직접 입력하거나 붙여넣기 버튼을 쓰거나, 파일을 열어 불러올 수 있습니다(50,000바이트까지, 넘으면 파일 크기와 한도를 함께 알려주며 거부합니다). 결과는 복사하거나 내려받을 수 있고, 열어 둔 파일은 같은 이름으로 저장됩니다. 옵션을 기본값 그대로 두면 공백과 줄바꿈만 바뀌므로 코드 동작은 그대로입니다. 레이아웃 밖을 건드리는 옵션은 escape 해제 하나뿐이며, 문자열 안의 출력 가능한 이스케이프를 원래 문자로 되돌리되 따옴표·역슬래시는 다시 escape 해 문자열이 담은 값이 달라지지 않게 합니다. JSON 포맷터·HTML 포맷터와 짝으로 쓰기 좋습니다.
자주 묻는 질문
압축된(minified) JavaScript를 풀 수 있나요?
네 — 압축된 코드를 읽기 좋게 다시 들여쓰기합니다. 다만 minifier가 짧게 바꾼 원래 변수명까지 복원하지는 못합니다.
JSON에도 되나요?
네. JSON은 JavaScript 문법이므로 압축된 JSON을 붙여넣으면 들여쓰기해 정렬합니다.
코드 동작이 바뀌나요?
아니요. 옵션을 기본값 그대로 두면 공백과 줄바꿈만 다시 정렬하며 로직은 그대로입니다. 레이아웃 밖을 바꾸는 옵션은 escape 해제 하나뿐인데, 문자열 안의 출력 가능한 이스케이프를 원래 문자로 되돌리면서 따옴표·역슬래시는 다시 escape 하므로 문자열이 담은 값 자체는 같습니다.
코드가 업로드되나요?
아니요. 정렬은 전부 브라우저에서 이뤄져 비공개 스크립트가 기기를 벗어나지 않습니다.
들여쓰기는 몇 가지나 고를 수 있나요?
11가지입니다 — 스페이스 1·2·3·4·5·6·7·8·9·10칸 또는 탭. 기본값은 2칸이며, 목록에 없는 값은 조용히 2칸으로 되돌리지 않고 거부합니다.
중괄호 스타일은 어떤 것이 있나요?
4가지입니다 — 같은 줄(K&R), 다음 줄(Allman), 끝만 내림, 그리고 원본 위치 유지. 마지막 것은 중괄호를 옮기지 않고 작성자가 둔 줄에 그대로 둡니다.
빈 줄을 조절할 수 있나요?
네, 8가지 설정이 있습니다 — 모두 제거, 1·2·3·4·5·10개까지 유지, 제한 없음. 기본값은 2개까지로 빈 줄 하나가 남습니다.
긴 줄을 자동으로 바꿀 수 있나요?
네. 옵션 더 보기의 줄 바꿈 기준 폭을 쓰면 됩니다. 비워 두거나 0이면 바꾸지 않고, 값을 넣으면 20~500 사이여야 합니다. 범위를 벗어나거나 정수가 아닌 값은 이유를 알려주고 결과를 내보내지 않으므로, 요청하지 않은 폭으로 잘리는 일은 없습니다.
JSX도 되나요?
네. 옵션 더 보기의 “JSX / e4x 문법으로 읽기”를 켜면 됩니다. 끄면 <div className="a">{y}</div> 같은 마크업을 JSX가 아니라 비교 연산의 연속으로 읽습니다.
난독화·패킹된 스크립트를 풀어 주나요?
읽을 수 있게 다시 들여쓰기해 주지만 스크립트를 실행하지는 않습니다. js-beautify의 패커 탐지 기능은 붙여넣은 코드를 eval 로 실행하는 방식이라, 남의 스크립트를 브라우저 탭에서 돌리지 않기 위해 넣지 않았습니다. minifier가 짧게 바꾼 변수명도 복원하지 못합니다.
붙여넣기 대신 파일을 열 수 있나요?
네. 파일 열기 버튼은 .js, .mjs, .cjs, .jsx, .ts, .tsx, .json 을 50,000바이트까지 받고, 넘으면 파일 크기와 한도를 함께 알려주며 거부합니다. 정렬 결과는 같은 파일 이름으로 내려받습니다. 엔진은 js-beautify 의 JavaScript 뷰티파이어라서 TypeScript 전용 문법도 TypeScript로 파싱하지 않고 JavaScript로 정렬합니다.
한 번에 얼마나 큰 코드를 넣을 수 있나요?
입력 50,000자까지입니다. 넘으면 탭이 멈추는 대신 안내 문구를 보여줍니다. 괄호가 맞지 않는 코드처럼 결과가 1,000,000자를 넘는 경우에도 같은 문구를 보여주고 결과를 내보내지 않습니다.