JavaScript 포맷터

What

JavaScript 포맷터 정의

자바스크립트 포매터는 JS/TS 코드를 보기 좋은 레이아웃으로 정리합니다.

Cases

대표 활용 사례

1

난독화/압축 코드 디버깅

2

리뷰 전 코드 정리

3

들여쓰기/공백 표준화

How To

JavaScript 코드를 포매팅하는 방법

JS/TS 코드를 입력하고 옵션을 선택해 가독성 있게 정리하는 단계별 가이드입니다.

1

코드 입력

정리할 JavaScript/TypeScript 코드를 입력에 붙여넣습니다.

2

포맷 옵션 선택

들여쓰기, 줄바꿈, 공백 정리 옵션을 선택합니다.

3

정리 및 복사

포매팅을 실행하고 결과를 복사합니다.

Knowledge

JavaScript와 코드 스타일 이해하기

ASI(자동 세미콜론 삽입)

JavaScript는 세미콜론을 자동으로 삽입하지만, 예상치 못한 동작을 유발할 수 있습니다. 일부 팀은 세미콜론을 명시적으로 쓰고(Airbnb 스타일), 다른 팀은 생략합니다(Standard JS). 포매터로 일관성을 유지하는 것이 중요합니다.

Prettier와 ESLint

Prettier는 코드 포매팅을, ESLint는 코드 품질 검사를 담당합니다. 두 도구를 함께 사용하며, eslint-config-prettier로 충돌을 방지합니다. 저장 시 자동 포매팅을 설정하면 스타일 논쟁을 줄일 수 있습니다.

ECMAScript 버전

JavaScript는 ECMAScript 표준을 따릅니다. ES6(2015)가 큰 변화(화살표 함수, let/const, 클래스)를 가져왔고, 이후 매년 새 버전이 나옵니다. 대상 환경에 따라 Babel 등으로 트랜스파일링이 필요할 수 있습니다.

Minification과 가독성

프로덕션 JavaScript는 공백/주석 제거, 변수명 단축으로 축소(minify)됩니다. 브라우저 개발자 도구의 pretty-print나 포매터로 읽기 쉽게 복원할 수 있지만, 변수명은 복구되지 않습니다.

TypeScript와 포매팅

TypeScript는 JavaScript의 타입 확장이며, 대부분의 JS 포매터가 TS도 지원합니다. 타입 주석, 인터페이스, 제네릭 등이 추가되지만, 포매팅 규칙은 대체로 동일합니다.

FAQ