JavaScript 포매터 & 미니파이어

JavaScript 포매터란?#

JavaScript 포매터는 읽기 어려운 코드 — 번들러가 내뱉은 minify된 결과, 채팅에서 복사해 낸 한 줄짜리 조각, 또는 그저 다섯 사람이 다섯 가지 들여쓰기 습관으로 편집한 파일 — 를 받아 구조가 드러나게 다시 씁니다. 들여쓰기가 중첩을 따라가고, 연산자에 일관된 간격이 생기며, 문장은 예상한 자리에서 끝납니다. 좋은 포매터는 반대 방향도 합니다. 가능한 한 가장 작은 페이로드가 필요할 때 모든 비본질적인 것을 벗겨 냅니다.

이 페이지는 두 작업을 모두 하며, 각각이 어떻게 동작하는지 정직합니다. 서식 은 Babel 파서를 쓰는 Prettier의 standalone 빌드로 구동됩니다. 많은 팀이 저장 시 편집기에서 실행하는 것과 같은 엔진이므로, 여기서의 출력은 여러분의 프로젝트가 만들 것과 일치합니다. 압축 은 의도적으로 보수적입니다. 주석을 벗기고 공백을 붕괴시키되 모든 줄바꿈은 유지하여, 자동 세미콜론 삽입(ASI)이 결코 깨지지 않게 합니다. esbuild나 terser 같은 토큰 수준의 미니파이어가 아닙니다. 변수 이름을 바꾸거나 데드 코드를 없애거나 프로퍼티 이름을 망가뜨리지 않습니다. 그래서 결과를 JS 엔진에 바로 먹여도 안전하지만, 프로덕션 번들을 줄이는 용도로는 틀린 도구입니다. 이 차이를 아는 것이 이 도구를 잘 쓰는 요점 전부입니다.

사용 방법#

1. 왼쪽의 JavaScript 패널에 코드를 붙여넣거나, 예제 를 눌러 짧은 예시를 불러오세요.
2. 도구 모음에서 들여쓰기 스타일을 고르세요. 2, 4, 또는 탭. 공백 2칸은 현대 프로젝트에서 거의 보편적인 기본값입니다. 탭을 쓰도록 설정된 편집기에 붙여 넣으려 할 때만 탭을 고르세요.
3. 동작 버튼을 누르세요.
   • 서식 — 선택한 들여쓰기로 코드를 Prettier를 통해 다시 인쇄합니다. 세미콜론은 Prettier의 표준 동작에 따라 기본적으로 붙여집니다.
   • 압축 — // 줄 주석과 /* */ 블록 주석을 제거하고, 공백과 탭의 연속을 붕괴시키며, 각 줄의 끝 공백을 떼어 냅니다. 줄바꿈은 의도적으로 보존됩니다.
4. 오른쪽 출력 패널에서 결과를 읽으세요. 출력 헤더의 복사 로 가져가세요. 지우기 는 양쪽 패널을 비웁니다.

서식 이 입력을 파싱하지 못하면(잘못된 괄호, 닫히지 않은 템플릿 리터럴), 상태 표시줄은 깨진 출력을 내는 대신 Prettier의 오류 메시지를 보여줍니다. 그래서 잘못된 재포맷을 쫓는 대신 진짜 문제를 고치게 됩니다.

주요 기능#

• 진짜 Prettier 엔진. 서식은 손으로 만든 뷰티파이어가 아니라 Babel + estree 플러그인을 곁들인 standalone Prettier 빌드로 실행됩니다. 여기서 얻는 것은 prettier --write 가 만드는 것과 같습니다.
• ASI-안전 압축. 압축 중에 줄바꿈이 보존되어, 자동 세미콜론 삽입에 의존하던 줄이 계속 동작합니다. 줄바꿈을 무작정 지우는 것이야말로 대충 만든 “미니파이어”가 버그를 끌어들이는 방식입니다.
• 문자열, 정규식, 템플릿 인식. 주석 제거기는 문자열 안의 // 와 진짜 줄 주석을 구분하고, 나눗셈의 / 와 정규식 리터럴의 시작을 구분하므로, 코드를 갉아먹지 않습니다.
• 두 패널, 복사 준비 완료. 입력과 출력이 나란히 있고, 출력은 읽기 전용에 한 번 클릭하는 복사 버튼을 가집니다.
• 전적으로 브라우저에서 동작. 백엔드도, 업로드도 없습니다. Prettier는 페이지에 꾸려 넣어지고 주문형으로 로딩되어, 스크립트가 엄격한 self-전용 콘텐츠 보안 정책을 여전히 만족합니다.

실전 예시#

오래된 gist에서 복사해 낸 함수로, 주석과 일관성 없는 들여쓰기가 섞여 있습니다.

입력:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

서식 을 2 칸으로 누르면:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier가 비뚤어진 들여쓰기를 고치고, 연산자에 일관된 간격을 주며, 세미콜론을 더합니다. 하지만 블록 주석은 정확히 제자리에 둡니다. 이제 원본 입력에서 대신 압축 을 누르면:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

주석은 사라지고, 삐죽빼죽한 들여쓰기도 사라졌지만, 모든 문장은 여전히 제 줄에 앉아 있습니다. 일어나지 않은 일을 주목하세요. fetchUser 는 줄어들지 않았고, "GET" 은 변환되지 않았으며, 화살표 함수는 매개변수 목록을 유지했습니다. 이것은 스크립트 태그에 다시 붙여넣기에 안전한 읽을 수 있는 압축이지, 빌드 시점에 번들러가 할 공격적인 맹글링이 아닙니다.

FAQ#

왜 압축은 변수 이름을 바꾸거나 번들을 줄이지 않나요?#

그것을 올바르게 하려면 전체 파서-코드젠 패스(스코프 분석, 프로퍼티 추적, 사이드 이펙트 탐지)가 필요하기 때문입니다. 이 도구의 압축은 의도적으로 스캐너입니다. 빠르고, 의존성이 가볍고, 런타임 동작을 바꾸지 않음이 증명됩니다. 프로덕션 번들에는 오프라인으로 진짜 번들러를 돌리세요. 이 페이지는 빠른 정리, 문서에 붙여넣기, 또는 누군가가 읽을 스니펫을 준비하는 용도입니다.

압축기가 문자열 안의 주석도 벗겨 내나요?#

아닙니다. 스캐너가 소스를 글자 단위로 걸으며, 현재 단일 따옴표 문자열 안인지, 이중 따옴표 문자열 안인지, 템플릿 리터럴 안인지, 정규식 리터럴 안인지 추적합니다. 그 어느 안에 나타나는 // 는 텍스트로 취급되어 그대로 남고, 진짜 주석만 제거됩니다.

TypeScript나 JSX도 처리하나요?#

서식 경로는 Babel 파서를 써서 JSX를 받아들입니다. TypeScript 타입 주석과 .ts/.tsx 특유의 문법은 여기서는 켜져 있지 않습니다. 그런 것이 필요하면 이 도구는 잘못된 출력을 조용히 만드는 대신 파싱 오류를 보고합니다. 이 페이지는 순수 JavaScript 전용으로 두세요.

제 코드는 어디로 업로드되나요?#

어디로도 업로드되지 않습니다. 모든 것이 여러분이 보고 있는 탭에서 실행됩니다. Prettier는 페이지에 꾸려 넣어지고 주문형으로 가져오며, 소스 텍스트는 메모리에서 파싱되고 네트워크로 결코 전송되지 않습니다.