웹 개발

JS Minify / Beautify

프로덕션용으로 JavaScript를 압축하거나 압축된 코드를 읽기 쉬운 형식으로 포맷합니다.


                        
                    

Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.

How to use it

Common uses

Things to keep in mind

Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.

Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.

이 도구에 대한 아티클: JavaScript 압축: 압축과 난독화의 차이

자주 묻는 질문

압축기는 내부적으로 어떤 도구를 사용하나요?

현대적인 구문도 이해하는 널리 사용되는 JavaScript 압축기 및 압축 도구인 terser를 사용합니다.

압축된 JavaScript는 왜 디버깅하기 더 어렵나요?

Terser는 변수와 함수 이름을 축약하고 공백과 주석을 제거하며, 이 도구는 소스 맵을 생성하지 않으므로 브라우저 개발자 도구가 압축된 코드를 읽기 쉬운 원본 라인으로 매핑할 수 없습니다.

압축이 제 코드를 망가뜨리나요?

구문적으로 유효한 JavaScript의 경우 압축은 동작을 유지합니다. 구문 오류가 있으면 도구가 줄과 열을 보고하여 압축 전에 수정할 수 있게 합니다 — 모든 작업은 코드를 업로드하지 않고 로컬에서 실행됩니다.

Tree shaking은 압축과 어떻게 다른가요?

Tree shaking은 빌드 중에 모듈 의존성 그래프를 분석하여 어디에서도 사용되지 않는 코드를 번들에서 제거하는 반면, 압축은 이미 존재하는 코드의 텍스트 표현만 줄일 뿐 실제로 실행되는 함수는 전혀 제거하지 않습니다.

추가 테스트 없이 압축된 JavaScript를 프로덕션에서 사용해도 안전한가요?

예, 압축은 순전히 구문적인 변환으로 프로그램의 동작을 완전히 동일하게 유지합니다. 압축 후 동작에 차이가 생긴다면 이는 의도적인 로직 변경이 아니라 압축 도구 자체의 버그를 의미합니다.

아티클: 웹 개발

HEX, RGB, HSL: 색을 표현하는 방법이 이렇게 많은 이유

디자이너가 손으로 색조를 고를 때 HEX 대신 HSL을 자주 선택하는 이유.

CSS 압축: 파일에서 실제로 제거되는 것은 무엇이고 왜인가

압축된 CSS가 사람에게는 읽을 수 없게 되어도 브라우저에서 정확히 똑같이 작동하는 이유.

HTML 압축: 마크업 안의 공백이 애초에 왜 중요한가

<pre>나 textarea 안의 공백을 제거하면, 다른 거의 모든 곳과 달리 페이지의 모양이 깨지는 이유.

CSS 그라디언트: linear가 radial, conic과 다른 점

conic-gradient는 파이 차트에 적합하고, radial-gradient는 빛 웅덩이 효과를 만드는 이유.

Luhn 알고리즘: 카드 번호의 정확성을 확인하는 방법

Luhn 검사를 통과하는 카드 번호가 그 카드가 실제로 존재한다는 뜻은 아닌 이유.

IBAN: 국제 은행 계좌 번호가 구성되는 방식

IBAN의 첫 두 글자가 계좌 번호 자체의 일부가 아니라 국가 코드인 이유.

QR 코드: 픽셀로 된 정사각형 안에 링크가 들어가는 방식

가운데에 로고가 있는 QR 코드가 패턴 일부가 가려져도 여전히 스캔되는 이유.

바코드: Code 128이 EAN-13과 다른 점

매장 진열대 위 제품이 거의 항상 Code 128 대신 EAN-13을 사용하는 이유.

플레이스홀더 이미지: 개발 중 가짜 이미지가 중요한 이유

레이아웃이 아직 만들어지는 중일 때 개발자가 실제 사진 대신 일부러 회색 상자를 넣는 이유.