JavaScript 포맷터 & 최소화

JavaScript 포맷팅이란 무엇인가요?

주요 기능

예시

function add(a,b){return a+b}const doubled=[1,2,3].map(x=>x*2);console.log(doubled)

async function load(id){const r=await fetch(`/api/${id}`);if(!r.ok)throw new Error('bad');return r.json()}

const cfg={retries:3,timeout:5000,headers:{'Content-Type':'application/json'},onError(e){console.warn(e)}}

class Counter{#n=0;inc(){this.#n++}get value(){return this.#n}}

주요 사용 사례

최소화된 코드 읽기

최소화되거나 난독화된 스크립트를 정리하여 이해하고 디버깅하세요.

코드 리뷰

풀 리퀘스트 전에 JavaScript를 포맷하여 일관되고 비교하기 쉬운 코드를 만드세요.

더 작은 번들 배포

Terser로 프로덕션 JavaScript를 최소화하여 바이트를 줄이고 로드 속도를 높이세요.

스니펫 정리

콘솔이나 gist에서 복사한 코드를 깔끔하고 읽기 쉬운 형태로 재포맷하세요.

기술 세부 정보

js-beautify로 정리

예측 가능하고 설정 가능한 들여쓰기와 간격을 위해 검증된 js-beautify 엔진을 사용합니다.

Terser로 최소화

Terser는 사실상 표준 JavaScript 최소화 도구 — 지역 변수를 단축하고 죽은 코드를 제거하며 동작을 보존하면서 주석을 제거합니다.

브라우저 기반

완전히 클라이언트 측에서 실행됩니다. 코드는 기기를 벗어나거나 서버에 도달하지 않습니다.

모범 사례

소스는 포맷, 프로덕션은 최소화

저장소에는 읽기 쉬운 코드를 유지하고, 빌드 시 Terser로 최소화하세요.

최신 구문은 신중하게 최소화

Terser는 표준 JavaScript를 대상으로 합니다. 매우 새로운 제안은 먼저 트랜스파일 단계가 필요할 수 있습니다.

최소화 결과를 직접 편집하지 않기

단축된 변수명으로 인해 최소화된 코드는 유지 관리가 어렵습니다 — 소스를 편집한 후 다시 최소화하세요.

자주 묻는 질문