JavaScript 미화 작동 방식
미화기는 코드를 한 문자씩 읽으며 각 구문의 중첩 깊이를 추적한 뒤 일관된 간격으로 다시 출력합니다. 코드의 동작은 전혀 바뀌지 않으며, 오직 외형만 바뀝니다.
- 토큰화. 라이브러리는 입력을 키워드, 식별자, 문자열, 연산자, 구두점 등의 토큰 스트림으로 스캔합니다. 문자열 리터럴, 템플릿 리터럴, 정규식 리터럴은 단일 단위로 인식되기 때문에 문자열 안의 중괄호가 블록 구분자로 오인되지 않습니다.
- 중첩 추적. 토큰 스트림을 순회하면서 미화기는 실시간 들여쓰기 수준을 유지합니다. 여는 중괄호·대괄호·소괄호가 나타날 때마다 수준이 깊어지고, 대응하는 닫는 괄호가 나타날 때 수준이 되돌아옵니다. 이 깊이가 출력되는 각 줄 앞에 붙는 들여쓰기 단위 수를 결정합니다.
- 옵션 적용. 들여쓰기 선택(공백 2칸, 공백 4칸, 탭)이 한 수준의 너비를 결정합니다. 중괄호 스타일은 여는 중괄호가 앞 구문과 같은 줄에 붙는지, 아니면 독립 줄에 내려가는지를 결정합니다. 최대 빈 줄 수는 연속된 빈 줄을 설정한 수 이하로 줄입니다.
- 재출력. 마지막으로 포매터가 계산된 들여쓰기와 줄 바꿈으로 토큰을 출력합니다. 선택적으로 자동 세미콜론 삽입(ASI)이 런타임에 추가했을 세미콜론도 삽입합니다. 결과는 동일한 프로그램이 사람이 읽기 좋은 형태로 정리된 것입니다.
JavaScript를 미화하는 이유
- 압축 코드 읽기. 프로덕션 번들은 한 줄로 출시되며 변수 이름은 한 글자입니다. 미화하면 줄 바꿈과 들여쓰기가 복원되어, 소스맵 없이도 버그를 유발한 구문까지 실제로 추적할 수 있습니다.
- 일관성 없는 파일 정리. 여러 사람이 손댄 코드는 들여쓰기와 중괄호 스타일이 섞이기 마련입니다. 미화 한 번으로 파일 전체를 단일 레이아웃으로 정규화하면, 다음 diff에서 공백 잡음이 아닌 실제 로직 변경만 보이게 됩니다.
- 이 도구는 페이지에 부담을 주지 않습니다. 대부분의 온라인 포매터는 페이지를 열자마자 라이브러리 전체를 로드합니다. 이 도구는 미화 버튼을 클릭하거나 실시간 모드를 켤 때만 js-beautify를 지연 로드합니다. 그래서 페이지를 여는 비용이 수백 KB가 아닌 몇 KB에 불과하며 초기 렌더링이 빠르게 유지됩니다.
- 코드가 브라우저를 떠나지 않습니다. 미화기는 완전히 사용자의 기기에서 실행됩니다. 코드는 절대 서버에 업로드되지 않습니다. 검사하는 스크립트가 클라이언트 소유이거나 내부 API 경로를 포함하거나 기밀 유지 계약의 대상일 때 특히 중요합니다.
주요 활용 사례
읽히도록 작성되지 않은 코드를 읽어야 할 때마다 JavaScript 미화가 필요합니다.
- 프로덕션 디버깅: Network 탭에서 가져온 압축 번들을 붙여넣고 스택 트레이스만으로는 해독할 수 없는 함수를 찾습니다.
- 코드 리뷰 준비: PR을 열기 전에 기여자의 들여쓰기가 불일치한 파일을 재포맷해 리뷰어가 레이아웃 혼란이 아닌 로직을 볼 수 있게 합니다.
- 보안 및 규정 준수 감사: 서드파티 분석이나 광고 스니펫을 펼쳐서 라이브 적용 전에 정확히 어떤 동작을 하는지 확인합니다.
실제 예시
압축된 한 줄 코드를 사용해보겠습니다: function f(a){if(a){return a*2}else{return 0}}. 들여쓰기를 공백 2칸, 중괄호 스타일을 「같은 줄」로 설정하고 위에 붙여넣은 뒤 미화를 클릭하세요. 읽기 좋은 블록이 반환됩니다: function f(a) {, 그 아래 들여쓰기된 if (a) {, 한 수준 더 깊은 return a * 2; 구문, 아래에 정렬된 닫는 중괄호. 중괄호 스타일을 「새 줄」로 바꾸면 모든 여는 중괄호가 독립 줄로 내려갑니다. 들여쓰기를 탭으로 바꾸면 각 수준이 공백 두 칸에서 탭 문자로 바뀝니다. 구조는 동일하며 레이아웃만 바뀝니다.
FAQ
이것이 브라우저에서 실행되나요?
네. js-beautify 라이브러리는 처음으로 미화를 클릭하거나 실시간 모드를 활성화할 때 지연 로드된 뒤 캐시됩니다. 코드는 절대 페이지를 벗어나지 않으며, 서버 통신도 업로드도 없습니다.
미화와 압축 해제는 같은가요?
가독성 있는 서식(들여쓰기, 줄 바꿈, 간격)은 복원할 수 있지만, 압축 시 제거된 원본 변수 이름이나 주석은 되돌릴 수 없습니다. 소스맵이 있다면 브라우저 DevTools가 원본 이름을 복원할 수 있습니다. 미화기 자체는 파일에 남아 있는 내용만 처리합니다.
미화하면 코드 동작이 바뀌나요?
아니요. 미화는 공백과 줄 바꿈만 추가하거나 제거하며, 프로그램은 동일하게 실행됩니다. 토큰에 영향을 미치는 유일한 옵션은 「빠진 세미콜론 추가」로, ASI가 런타임에 자동으로 추가했을 구문 종결자를 삽입하여 나중에 다시 압축할 때 안전하게 만듭니다.
중괄호 스타일 옵션은 무엇을 의미하나요?
「같은 줄」은 여는 중괄호를 앞 구문과 같은 줄에 둡니다(if (x) {) — 일반적인 JavaScript 관례입니다. 「새 줄」은 모든 여는 중괄호를 독립 줄에 둡니다(Allman 스타일). 「끝 새 줄」은 여는 중괄호를 구문에 붙이지만 else와 catch는 닫는 중괄호 뒤 새 줄에 배치합니다.
브라우저 측 JavaScript 미화로 빌드 단계나 업로드 없이 읽기 쉬운 코드를 얻을 수 있습니다. 압축되거나 지저분한 스크립트를 붙여넣고 들여쓰기와 중괄호 스타일을 선택한 다음 결과를 복사하거나 다운로드하세요. 코드는 기기를 떠나지 않고 계정도 필요 없으며 라이브러리는 요청할 때만 로드됩니다. 이 페이지를 여는 비용은 메가바이트가 아닌 몇 킬로바이트입니다.