JavaScript 포맷 도구
JavaScript 포맷팅이란?
JavaScript 포맷팅은 지저분한 JS 코드를 규범적이고 읽기 쉬운 형식으로 정리하는 과정입니다. 좋은 코드 형식은 가독성을 높이고, 디버깅을 용이하게 하며, 오류 발생을 줄일 수 있습니다. 포맷팅에는 통일된 들여쓰기, 적절한 줄 바꿈, 연산자 공백, 괄호 정렬 등이 포함됩니다. 압축은 모든 공백과 주석을 제거하여 파일 크기를 크게 줄이고 페이지 로딩 속도를 향상시킵니다.
사용 방법
사용 방법
- 왼쪽 입력란에 JavaScript 코드를 붙여넣거나 입력하세요
- 들여쓰기 크기, 따옴표 스타일, 세미콜론 설정을 선택하세요
- '포맷'을 클릭하여 코드를 정리하거나, '검증'을 클릭하여 구문을 확인하세요
- 오른쪽에서 결과를 확인하세요 (구문 강조 포함)
- '복사'를 클릭하여 클립보드에 복사하세요
옵션 설명
키보드 단축키
- Ctrl + Enter포맷
- Ctrl + Shift + C결과 복사
JavaScript 팁
- 포맷팅은 런타임 정확성을 보장하지 않습니다. 자동 세미콜론 삽입이나 빌드 변환에 의존하는 JavaScript를 변경한 후 테스트를 다시 실행하거나 브라우저에서 확인하세요.
- 붙여넣은 코드를 검증할 때, 브라우저 파서 지원이 대상 런타임이나 번들러 설정과 다를 수 있음을 기억하세요.
활용 사례
기술 원리
JavaScript 프리티 프린터는 ECMA-262 문법을 기반으로 정의된 3단계 파이프라인입니다. 렉서(lexer)는 IdentifierName, NumericLiteral, StringLiteral, TemplateHead/Middle/Tail, Punctuator, Keyword, LineTerminator 토큰 스트림을 생성하고, 파서는 ESTree 호환 AST(@babel/parser, acorn, esprima가 사용하는 형식)를 구축하며, 프린터는 트리를 순회하여 들여쓰기 크기와 목표 인쇄 폭 기반의 규칙에 따라 텍스트를 출력합니다. Prettier는 AST를 group, indent, line, softline 원시로 구성된 Doc 중간 표현으로 컴파일한 뒤, 레이아웃 알고리즘이 출력이 printWidth(80, 100, 120)에 맞도록 줄 바꿈 지점을 선택합니다. ESLint --fix는 원본 소스에 대해 토큰을 제자리에서 다시 작성하여 주석을 더 적극적으로 보존하지만, 자동 수정을 지원하는 규칙만 수정합니다. 프린터는 자유롭게 줄 바꿈을 삽입할 수 없습니다. ECMA-262 §11.9.1 자동 세미콜론 삽입(ASI)은 다음 토큰이 연속 토큰이 아닌 경우 모든 LineTerminator에서 문장을 종료합니다. 구체적으로, `(`, `[`, `` ` ``, `+`, `-`, `/` 또는 `++`/`--` 토큰으로 시작하는 줄 앞에서 줄 바꿈하면 의미가 조용히 변경되며, `return`, `throw`, `break`, `continue`, `yield` 직후에 줄 바꿈하면 세미콜론이 삽입되어 피연산자가 무시됩니다. 템플릿 리터럴(백틱)은 내부 바이트를 그대로 보존하며, 내부에 포함된 `${}` 표현식은 JS로 재포맷되지만 주변 공백은 변경되지 않습니다. 주석은 leading/trailing/innerComments 배열을 통해 인접 AST 노드에 재부착되어 라운드트립 시에도 유지됩니다. 렉싱과 프린팅 모두 소스 길이에 대해 O(n)이며 상수가 작습니다. 파서는 ECMA-262 LR(1) 스타일 문법의 단일 토큰 전방 탐색 덕분에 형식이 올바른 코드에 대해 실질적으로 선형입니다. 표준 JavaScript 파싱은 JSX, TypeScript 타입 주석, 데코레이터, Flow를 지원하지 않으며, 이들은 @babel/parser 플러그인 또는 @typescript-eslint/parser가 필요합니다. 순수 JS 도구로 .tsx 파일을 처리하면 `: type` 주석이 거부됩니다. 소스맵(Source Map v3)은 빌드 단계에서 스택 트레이스 충실도를 유지해야 할 때 원본 줄/열 매핑을 보존할 수 있으며, 줄 끝 문자(LF vs CRLF)는 파싱 시점이 아닌 쓰기 시점에 정규화됩니다.
- 파이프라인: 렉서(토큰 스트림, ECMA-262 §12) -> ESTree AST(acorn/@babel/parser/esprima) -> 프린터. 렉서와 프린터는 O(n), 파서는 단일 토큰 전방 탐색으로 O(n).
- ECMA-262 §11.9.1의 ASI 함정: `(`, `[`, `` ` ``, `+`, `-`, `/`로 시작하거나 `++`/`--` 앞에서 줄 바꿈하지 말 것. `return`/`throw`/`break`/`continue`/`yield` 직후에도 즉시 줄 바꿈하지 말 것.
- Prettier vs ESLint --fix: Prettier는 AST를 Doc IR(group/indent/line)로 낮추고 printWidth(80/100/120)에 맞는 레이아웃을 선택. ESLint --fix는 토큰을 제자리에서 다시 작성하고 fixer 태그가 지정된 규칙만 적용.
- 주석 보존: leading/trailing/innerComments가 AST 노드에 바인딩됨. 선언 바로 위의 JSDoc 블록은 부착 상태가 유지되어 프린터가 이전 문장으로 분리하지 않음.
- 템플릿 리터럴(백틱)은 바이트 단위로 보존됨. `${}` 내부의 JS만 재출력. 정규식 리터럴과 문자열 리터럴의 따옴표는 선택한 단일/쌍따옴표 스타일로 정규화되고 `\` 이스케이프가 재계산됨.
- 방언 지원: 순수 JS 파서는 JSX, TypeScript 타입, 데코레이터, Flow를 거부. .tsx/.ts 파일에는 @babel/parser 플러그인 ['jsx','typescript','decorators-legacy'] 또는 @typescript-eslint/parser가 필요.
- 출력 정규화: 설정에 따라 줄 끝 문자를 LF 또는 CRLF로 기록(입력과 무관), 여러 줄 배열/객체/호출에 후행 쉼표 정책 적용, 도구체인이 원본 줄/열 정보를 유지해야 할 때 Source Map v3 출력.
예시
포맷팅 전
function greet(name){if(!name){return 'Hello, stranger';}const greeting=`Hello, ${name}!`;console.log(greeting);return greeting;}포맷팅 후 (들여쓰기 2칸)
function greet(name) {
if (!name) {
return 'Hello, stranger';
}
const greeting = `Hello, ${name}!`;
console.log(greeting);
return greeting;
}압축(Minify) 후
function greet(n){if(!n)return"Hello, stranger";const e=`Hello, ${n}!`;return console.log(e),e}자주 묻는 질문
포매터는 어떤 스타일을 사용하나요?
대부분의 빌드는 Prettier 기본 설정을 사용합니다. 80자 줄 너비, 세미콜론, 큰따옴표, 들여쓰기 2칸, ES5에서 허용되는 위치의 후행 쉼표가 적용됩니다. 프로젝트가 다른 스타일을 사용한다면 옵션을 변경하세요. 동일한 설정에서는 결과가 결정적이며, 같은 입력은 항상 같은 출력을 만듭니다.
내 JS 코드가 실행되나요?
아니요. 소스 코드를 파싱한 뒤 다시 출력할 뿐입니다. 부수 효과, 네트워크 호출, 런타임 오류는 무관합니다. 포매터는 스크립트를 절대 실행하지 않습니다.
문법 오류도 고쳐 주나요?
아니요. 파서는 잘못된 JavaScript의 포매팅을 거부하고 파싱이 실패한 위치를 알려줍니다. 문법 오류를 먼저 고치세요. 흔한 원인은 괄호 누락, IIFE 후 세미콜론 누락, 백틱이 짝지 않은 템플릿 리터럴 등입니다.
JSX와 TypeScript도 지원하나요?
최신 빌드 대부분은 JSX가 포함된 JavaScript와 TypeScript 문법(.ts, .tsx)을 파싱할 수 있습니다. 포매터는 파싱 결과에 따라 어떤 문법인지 자동으로 인식합니다. 순수 ES5 환경이라면 거짓 양성 오류를 피하기 위해 TypeScript 모드를 끄세요.
JS를 압축할 수도 있나요?
일부 빌드는 변수 이름 변경, 공백 제거, 데드 코드 제거를 수행하는 minify(Terser 방식) 모드를 제공합니다. 결과물은 작지만 가독성은 거의 없습니다. 압축은 프로덕션 빌드용, 포매팅은 코드 리뷰용으로 사용하세요.
내 코드가 업로드되나요?
아니요. 파싱과 출력은 JavaScript 기반 파서를 통해 브라우저 안에서 모두 처리됩니다. 붙여넣은 코드는 외부로 전송되지 않습니다.
왜 주석 위치가 살짝 바뀌나요?
Prettier 같은 포매터는 주석을 가장 가까운 AST 노드에 결합합니다. 두 함수 사이에 있는 주석은 AST상 아래쪽 함수에 '소속'으로 판단되어 위치가 옮겨질 수 있습니다. 줄 끝 인라인 주석은 보통 그대로 보존되지만, 떠다니는 주석은 이동할 수 있습니다.