본문으로 건너뛰기
yutils
예시

입력 (압축된 JS)

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

출력 (포맷팅)

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

참고

들여쓰기·줄바꿈만 조정 — 변수명·로직은 변경하지 않습니다. 정확한 minify 결과를 원하면 terser 같은 정식 도구를 별도 사용하세요.

사용법 / 자주 묻는 질문

이런 경우 사용하세요

  • minified bundle.js 의 가독성 1차 복구 (디버깅용)
  • AI 출력 한 줄 JS · 인라인 함수 코드 들여쓰기 보정
  • 이슈 · Slack · 노션에 JS 붙여 넣기 전 정리
  • 복잡한 chain method · arrow 함수 구조 시각화
  • minify 모드로 prod JS 1차 압축

자주 묻는 질문

Q.이게 정식 minify 도구를 대체하나요?
A.아닙니다. 본 도구는 들여쓰기 정리만 합니다. 실제 production minify(이름 mangling · dead code 제거 등)는 terser · esbuild · swc 가 담당.
Q.TypeScript 도 가능한가요?
A.JS-beautify 기반이라 TS-only 문법(`as`, `<T>` 제네릭 등)이 섞이면 결과가 부정확할 수 있습니다. Prettier / Biome 같은 정식 도구를 권장.
Q.JSX 는 어떻게 되나요?
A.기본은 plain JS 기준입니다. JSX 도 일부 동작하지만 복잡한 구조에서는 결과가 예쁘지 않을 수 있습니다.
재미있는 사실
  • JavaScript 는 1995년 Brendan Eich 가 Netscape 에서 단 10일 만에 만든 언어입니다. 'Java 와 비슷하게 보이게 만들어라' 는 마케팅 요구로 syntax 가 Java 처럼 됐지만 의미론은 Scheme + Self — 그 미스매치가 ASI (Automatic Semicolon Insertion) 같은 함정들을 남겼어요.

    Brendan Eich — Popularity
  • Prettier (2017, James Long) 가 등장하기 전까진 'tab vs space', 'semicolon vs no semicolon' 같은 코드 스타일 논쟁이 수십 년간 지속됐습니다. Prettier 의 슬로건 'opinionated' 는 그 논쟁을 도구 차원에서 끝낸다는 의도 — 옵션을 최소화한 게 결정적 채택 이유.

    Prettier 0.0.10 release
  • Linter 와 formatter 는 다릅니다 — ESLint 같은 linter 는 '버그 유발 패턴' 을 잡고, Prettier 같은 formatter 는 '시각적 일관성' 만 처리. 두 도구를 동시에 쓰는 게 modern JS 스택의 표준 (`eslint-config-prettier` 같이 충돌 해소).

    Prettier — vs Linters