원본 JavaScript
옵션
포맷된 JavaScript
도구 소개
이 도구는 JavaScript 코드를 포맷하거나 압축합니다. Beautify 모드는 적절한 들여쓰기, 줄 바꿈, 간격을 추가하여 압축된 번들을 읽고 디버깅할 수 있게 합니다. Minify 모드는 공백, 주석, 불필요한 문자를 제거하여 파일 크기를 줄입니다. 검증기는 런타임 오류를 일으키기 전에 일반적인 구문 오류(불일치 중괄호, 대괄호, 괄호)를 감지합니다. 따옴표 스타일 일관성을 강제하고 세미콜론 삽입을 제어할 수 있습니다. 모든 것이 브라우저에서 실행되며 코드는 머신을 떠나지 않습니다.
사용 방법
- JavaScript를 붙여넣거나 .js 파일 업로드
- 들여쓰기 포맷은 Beautify, 압축은 Minify 선택
- 설정 조정: 들여쓰기 크기, 따옴표 스타일(작은/큰/유지), 세미콜론 처리
- 입력이나 설정 변경에 따라 출력이 자동 업데이트
- 결과를 복사하거나 파일로 다운로드
일반적인 사용 사례
- 프로덕션 번들 디버깅: 압축된 에러 스택을 받았나요? 소스를 포맷하여 문제를 일으키는 실제 줄 찾기
- 코드 리뷰: JavaScript를 일관되게 포맷하여 diff가 포맷 차이가 아닌 로직 변경을 표시
- 라이브러리에서 배우기: 압축된 jQuery나 React 빌드를 포맷하여 작동 방식 이해
- 빠른 최적화: 임베드 전에 스크립트를 30-40% 줄여야 하나요? 압축하세요
- 따옴표 정규화: 린팅 일관성을 위해 코드베이스 전체에 작은따옴표 또는 큰따옴표 강제
제한 사항
- 경량 포매터로 완전한 JavaScript 파서가 아닙니다—시맨틱 오류를 잡거나 tree-shaking 같은 고급 변환을 수행하지 않습니다
- 검증기는 괄호 불일치를 감지하지만 로직 버그나 타입 오류는 식별하지 않습니다
- 매우 큰 파일(5MB+)은 브라우저를 느리게 할 수 있습니다—프로덕션 번들에는 Webpack이나 esbuild 같은 빌드 도구 사용
- 괄호 문자가 포함된 문자열 내용은 오탐 검증 경고를 일으킬 수 있습니다
- ES6+ 구문(템플릿 리터럴, 구조 분해)이 지원되지만 엣지 케이스는 완벽하게 포맷되지 않을 수 있습니다
- 프로덕션 사용 시 압축 코드 디버깅을 위해 source map과 함께 사용