JavaScript 뷰티파이어
압축된 JavaScript를 즉시 포맷하고 들여쓰기
원본 JavaScript
옵션
정리된 JavaScript
개요
JavaScript 뷰티파이어는 압축되거나 난독화되거나 들여쓰기가 엉망인 JS를 깔끔하고 읽기 쉬운 코드로 다시 포맷합니다 — 올바른 들여쓰기, 일관된 따옴표 스타일, 명확한 줄바꿈으로 실제로 읽고 디버깅할 수 있게 해줍니다. 압축된 JS, 번들 파일, 또는 어디서든 지저분해진 코드를 붙여넣으면 즉시 포맷된 결과를 얻을 수 있습니다.
이 뷰티파이어가 제어하는 항목
- •들여쓰기: 공백 2칸, 4칸, 또는 탭
- •따옴표 스타일: 작은따옴표, 큰따옴표로 통일하거나 그대로 유지
- •세미콜론 삽입: 누락된 세미콜론을 자동으로 추가
- •주석 보존: 포맷 중 주석을 유지하거나 제거
- •체이닝 메서드 분할: 긴 .filter().map().reduce() 체인을 별도의 줄로 분할
- •기본 구문 검증: 입력하는 동안 일치하지 않는 중괄호, 소괄호, 대괄호를 표시
JavaScript를 정리해야 할 때
- •브라우저 개발자 도구에서 오류를 디버깅하기 위해 압축된 프로덕션 번들 읽기
- •채팅 메시지, PDF, 이메일에서 복사되어 원래 들여쓰기를 잃은 코드 재포맷
- •코드 리뷰 전에 따옴표 스타일과 들여쓰기 표준화
- •난독화되거나 번들된 서드파티 스크립트를 무엇을 하는지 이해할 수 있을 만큼 읽기 쉽게 만들기
- •커밋하기 전에 다른 도구가 생성한 코드 정리하기
JavaScript를 정리하는 방법
- 1.JavaScript를 입력 편집기에 붙여넣거나 .js 파일을 업로드하세요
- 2.들여쓰기(공백 2/4칸 또는 탭)와 따옴표 스타일을 선택하세요
- 3.필요에 따라 주석 보존, 세미콜론 삽입, 체이닝 메서드 분할을 켜세요
- 4.입력하는 대로 포맷된 결과가 자동으로 나타납니다
- 5.결과를 복사하거나 .js 파일로 다운로드하세요
알아두어야 할 예외 상황
- •한 글자 변수명을 가진 심하게 압축된 코드는 구조적으로는 읽기 쉬워지지만, 변수명 자체는 복원되지 않습니다 — 뷰티파이어는 압축으로 손실된 의미를 복구할 수 없습니다
- •중괄호와 비슷한 문자를 포함하는 템플릿 리터럴과 정규식은 신중하게 처리되지만, 매우 특이한 정규식 패턴은 가끔 들여쓰기를 흐트러뜨릴 수 있습니다
- •괄호/중괄호/소괄호 검사기는 발생 가능한 구문 문제를 표시하지만 이는 완전한 JavaScript 파서가 아닌 휴리스틱입니다 — 모든 종류의 구문 오류를 잡아낼 수는 없습니다
제한 사항
- •이것은 포맷팅 도구이지 린터가 아닙니다 — 논리 오류, 정의되지 않은 변수, ESLint 스타일의 문제는 잡아내지 못합니다
- •매우 큰 파일(수 MB의 번들)은 브라우저에서 처리하는 데 느릴 수 있습니다 — 대규모 코드베이스 포맷팅에는 빌드 도구에 통합된 포맷터(Prettier)를 고려하세요
- •팀 전체의 프로덕션 코드 스타일을 강제하려면, 에디터/CI에 통합된 Prettier나 ESLint 같은 전용 도구가 임시방편적인 브라우저 포맷팅보다 더 적합합니다
반대 방향 작업이 필요하신가요?
읽기 쉬운 JavaScript가 있고 프로덕션을 위해 파일 크기와 로드 시간을 줄여야 한다면, 대신 JavaScript 압축기를 사용하세요. 주석과 공백을 제거하고 정확한 크기 감소율을 보여줍니다.