JavaScript 포맷터

업로드

0자

브라우저에서 동작하는 JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON 코드 포맷터. Prettier 스타일 세부 설정, Terser 압축·난독화를 지원하며 CodeMirror 에디터 내장, 실시간 미리보기, 단축키 작업, 파일 업로드·다운로드 기능을 탑재.

사용 사례

프론트엔드 개발 중 압축된 서드파티 JS 코드를 붙여넣어 빠르게 정리하여 읽기 쉽게 하고 디버깅 용이하게 함
팀 코드 리뷰 전에 JavaScript/TypeScript 코드를 통일 포맷하여 들여쓰기, 따옴표, 세미콜론 등 스타일 차이를 해소하고 로직 리뷰에 집중
레거시 프로젝트를 인계할 때 정리가 엉망인 오래된 JS 코드를 원클릭 포맷하여 코드 구조와 로직 계층을 빠르게 파악
프로덕션 환경 배포 전에 Terser를 사용하여 JavaScript 코드를 압축·난독화하여 파일 크기를 줄이고 웹페이지 로딩 속도 향상
온라인으로 JS/JSX 데모 작성 시 실시간 포맷으로 코드를 정리하여 동료나 커뮤니티와 공유하기 쉽게 함
Prettier 각 설정 항목의 효과를 학습할 때 옵션을 조정하면서 포맷 결과를 즉시 미리보기하여 tabWidth, trailingComma 등 파라미터 작용 이해
Stack Overflow, GitHub 등 플랫폼에서 복사한 코드 스니펫의 들여쓰기와 줄바꿈 문제를 자동 수정
JSON 설정 파일 작성 시 들여쓰기와 줄바꿈을 자동 포맷하여 쉼표, 괄호 오류로 인한 파싱 실패 회피
CSS/HTML 페이지 개발 시 동일 프로젝트 내 JS+CSS+HTML 코드를 일괄 포맷하여 스타일 통일
면접·필기시험 전 알고리즘 문제 JS 코드를 빠르게 정리하여 코드 보기 좋게 함

이용 방법

JavaScript 포맷터 도구 페이지를 열고 왼쪽 편집 영역에 코드를 직접 붙여넣거나 업로드 버튼을 클릭하여 로컬 파일(.js/.ts/.jsx/.tsx/.css/.html/.json 형식 지원)을 선택
해당 언어 유형 선택: 도구는 보통 자동 인식하지만 인식이 정확하지 않으면 언어 드롭다운에서 JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON을 수동 선택
포맷 옵션 설정: 프리셋 빠른 스타일(default/modern/classic)을 선택하거나 Prettier 옵션(들여쓰기 너비, 탭/스페이스, 줄 너비, 세미콜론, 따옴표, 후행 쉼표, 화살표 괄호)을 수동 조정
코드를 압축해야 하는 경우 압축 모드로 전환하여 Terser 압축 옵션(compress 활성화 여부, mangle로 변수명 난독화 여부, 최상위 변수 압축 여부), CSS 최적화 레벨, HTML 압축 옵션 설정
도구는 코드를 실시간으로 처리하며 오른쪽 편집 영역에 포맷 또는 압축 후 결과를 즉시 표시. 하단 상태 표시줄에 문자 수, 바이트 수, 압축률 통계를 실시간 표시
키보드 단축키를 사용하여 효율화: Ctrl+Shift+B로 포맷 실행, Ctrl+Shift+M으로 압축 모드 전환, Ctrl+Shift+O로 파일 열기, Ctrl+Shift+D로 결과 다운로드, Ctrl+Shift+K로 에디터 지우기
만족하면 복사 버튼을 클릭하여 결과를 클립보드에 복사하거나 다운로드 버튼을 클릭하여 로컬 파일로 저장. 공유 버튼을 클릭하여 코드와 설정이 포함된 URL 링크를 생성해 다른 사람과 공유도 가능

주요 기능

다국어 지원: JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON 등 프론트엔드에서 자주 사용하는 7개 언어의 포맷을 지원하여 프론트엔드 코드를 일원적으로 처리
Prettier 스타일 세부 설정: tabWidth 들여쓰기 너비(2/4/8 스페이스), useTabs 탭과 스페이스 선택, printWidth 줄 너비, semi 세미콜론, singleQuote 작은따옴표와 큰따옴표, trailingComma 후행 쉼표, arrowParens 화살표 함수 괄호 등 완전한 옵션 지원
코드 압축 기능: Terser 압축 엔진을 통합하여 compress 코드 압축, mangle 변수명 난독화, toplevel 최상위 변수 압축 등 프로덕션급 압축 옵션 지원
CSS 특별 최적화: CSS 최적화 레벨 설정을 제공하여 CSS 압축, 주석 제거, 공백 제거 등 특수 처리 지원
HTML 압축 옵션: HTML minify 설정에 대응하여 공백 접기, 주석 제거, 속성 따옴표 제거 등 가능
실시간 처리: 코드 입력 시 실시간으로 포맷 결과를 미리보기. 버튼 클릭 없이 정리 결과 확인 가능
CodeMirror 에디터: 전문 CodeMirror 에디터를 내장하여 구문 강조, 줄 번호 표시, 괄호 일치, 코드 접기 등 전문 편집 경험 제공
파일 업로드/다운로드: 로컬 .js/.ts/.jsx/.tsx/.css/.html/.json 파일 직접 업로드 지원. 포맷 후 처리된 파일을 원클릭 다운로드
공유 링크: URL hash로 코드와 설정을 저장하여 공유 링크를 생성, 동료에게 보내면 현재 포맷 설정 재현 가능
기록: 포맷 기록을 localStorage에 자동 저장하여 언제든지 이전 코드 버전과 설정을 다시 불러오기 가능
키보드 단축키: Ctrl+Shift+B 포맷, Ctrl+Shift+M 압축, Ctrl+Shift+O 파일 열기, Ctrl+Shift+D 다운로드, Ctrl+Shift+K 지우기 등 단축키 작업 지원
빠른 프리셋: default 기본, modern 모던, classic 클래식 3가지 빠른 설정 프리셋을 제공하여 자주 사용하는 스타일 원클릭 전환
문자 통계: 원본 코드와 처리 후 코드의 문자 수, 바이트 수, 압축률 비교를 실시간으로 표시
예제 코드: 각 언어의 예제 코드를 내장하고 있으며 클릭만으로 로드하여 바로 기능 체험 가능

자주 묻는 질문

포맷 후 JavaScript 코드 로직이 변경되나요?

아니요. 포맷은 코드의 공백, 들여쓰기, 줄바꿈, 괄호 위치, 따옴표 스타일 등 '레이아웃' 관련 내용만 조정하며, AST(추상 구문 트리) 기반 변환이므로 포맷 전후 코드의 AST 구조는 완전히 동일하며 실행 로직은 100% 같습니다. 코드가 구문적으로 올바르게 파싱될 수 있다면 포맷은 어떤 실행 동작도 변경하지 않으므로 안심하고 사용할 수 있습니다. 다만 압축(mangle)도 로직은 변경되지 않지만 eval, 전역 변수 export 등 특수 시나리오에 주의해야 하며 구성이 부적절하지 않도록 해야 합니다.

포맷 도구가 제 로컬 VS Code/Prettier 포맷 결과와 다르면 어떡하나요?

이 도구의 포맷 로직은 Prettier 공식 동작과 최대한 일치하도록 노력하고 있습니다. 결과가 다르면 구성 항목을 확인하십시오: tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens 이 핵심 옵션이 양쪽에서 완전히 같은지 확인하십시오. 또한 Prettier 버전 차이에 주의하십시오—Prettier 2/3은 기본 구성에 미세한 차이가 있습니다(v3은 기본 trailingComma: all, v2는 기본 es5; v2부터 arrowParens 기본 always). 로컬 프로젝트에 .prettierrc 구성 파일이 있으면 해당 옵션을 웹 페이지에서도 동일하게 조정하면 포맷 결과가 동일해집니다.

압축 후 코드를 되돌릴 수 있나요? mangle된 변수명을 복원할 수 있나요?

포맷된 코드는 완전히 되돌릴 수 있습니다—레이아웃만 변경되고 모든 식별자, 로직이 완전히 보존되기 때문에 다시 포맷하면 원래대로 돌아옵니다. 하지만 압축된 코드는: 공백과 주석 제거 부분은 다시 포맷하여 레이아웃을 복원할 수 있지만, mangle(변수명 난독화)은 비가역적입니다—원래 의미 있던 변수명 userName이 a로 변경되면 이 과정은 단방향으로 자동으로 원래 이름을 복원할 수 없습니다. 프로덕션 환경에서 압축된 코드를 디버깅해야 하는 경우 Source Map 파일 생성을 구성하여 Source Map으로 소스 위치를 매핑해야 합니다. 그러므로 압축 전 반드시 압축되지 않은 원본 소스코드를 보관하십시오!

어떤 브라우저를 지원하나요? 휴대폰에서도 사용할 수 있나요?

이 도구는 모든 현대 브라우저를 지원합니다: 최신 Chrome, Firefox, Safari, Edge 모두 정상 사용 가능합니다. IE 브라우저는 지원하지 않습니다(이제 IE로 개발하는 사람도 없습니다). 반응형 레이아웃으로 휴대폰 화면에 적응하지만 코드 편집은 작은 화면에서 경험이 좋지 않으므로 여전히 데스크톱 브라우저 사용을 권장하며 큰 화면이 효율적입니다. 모든 포맷과 압축 계산은 브라우저 로컬에서 실행되며 코드를 서버에 업로드하지 않으므로 코드가 브라우저를 벗어나지 않아 안전하고 믿을 수 있습니다.

왜 어떤 코드는 포맷되지 않고 파싱 오류가 표시되나요?

포맷 도구는 먼저 코드를 AST로 파싱해야 작동할 수 있습니다. 코드에 구문 오류(괄호 짝 불일치, 문자열이 닫히지 않음, 키워드 오타, 불필요한 쉼표 등)가 있으면 파서가 코드 구조를 이해할 수 없어 오류를 보고합니다. 먼저 코드 자체의 구문 오류를 확인하십시오: 콘솔에 오류 정보가 있는지, 에디터에 빨간 물결선이 오류 위치를 표시하는지 확인하고 구문 오류를 수정하면 정상적으로 포맷할 수 있습니다. 또한 올바른 언어 모드를 선택했는지 확인하십시오—JSX/TSX 코드를 일반 JS로 선택하지 마십시오.

제 코드가 서버에 업로드되나요? 코드는 안전한가요?

아니요. 모든 포맷, 압축, 구문 강조는 전적으로 브라우저 로컬에서 JavaScript로 실행되며 코드는 어떤 서버에도 전송되지 않고 완전히 기기에서 처리됩니다. 네트워크를 끊고 테스트할 수 있습니다: 네트워크 연결을 끊어도 도구는 여전히 정상 작동합니다. 공유 링크 기능은 코드와 구성을 URL hash로 인코딩하는 것이며 공유 클릭은 URL을 생성할 뿐 코드를 업로드하지 않습니다—하지만 링크를 다른 사람에게 보내면 다른 사람이 링크를 열어 코드를 볼 수 있으므로 민감한 코드는 링크로 공유하지 마십시오.

Vue 단일 파일 컴포넌트(.vue 파일)를 포맷할 수 있나요? Svelte는요?

현재 이 도구의 다국어 지원은 JS/TS/JSX/TSX/CSS/HTML/JSON을 포함합니다. Vue의 <template>/<script>/<style> 단일 파일(SFC)과 Svelte 컴포넌트는 현재 직접 전체 포맷을 지원하지 않지만, script 부분(JS/TS), style 부분(CSS), template 부분(HTML)을 각각 복사하여 해당 언어를 선택하고 개별적으로 포맷할 수는 있습니다. 향후 Vue/Svelte SFC 포맷 지원 추가를 고려할 예정입니다.

팀 통일 포맷 규칙은 어떻게 설정하나요?

팀 통일 규범은 3단계로 구성할 것을 권장합니다: ①프로젝트 루트에 .editorconfig를 두어 에디터 기본 설정(들여쓰기, 줄바꿈 문자, 인코딩)을 통일; ②Prettier를 사용하고 프로젝트에 .prettierrc 구성 파일을 두어 모든 사람과 CI가 이 구성으로 포맷하도록 하며, 이 도구에서도 해당 옵션을 선택하여 구성과 일치시킬 수 있습니다; ③ESLint + eslint-config-prettier로 ESLint 스타일 규칙을 비활성화하고 코드 품질만 검사. 에디터에서 저장 시 자동 포맷(VS Code에 Prettier 확장 설치, editor.formatOnSave: true 설정)을 구성하고 CI에 lint 단계를 추가하여 제출된 코드가 규범을 준수하도록 합니다.

후행 쉼표(trailingComma)의 장점은 무엇인가요? 켜야 하나요?

후행 쉼표(최소 es5 레벨, all 레벨 권장)를 켤 것을 강력히 권장합니다. 후행 쉼표의 장점은: ①Git diff가 깨끗해짐: 마지막 요소 추가 시 이전 줄의 쉼표를 수정할 필요가 없어 추가된 줄의 diff만 있고 이전 줄 diff를 오염시키지 않습니다; ②요소 순서 재배치가 더 편리해지고 마지막 쉼표 문제를 처리할 필요가 없습니다; ③현대 브라우저와 Node.js는 모두 후행 쉼표를 지원하며 구형 IE는 지원하지 않지만 이제 IE를 고려할 필요가 없습니다. 유일한 단점은 쉼표가 하나 더 있다는 것뿐이지만 가져오는 편의성과 비교하면 충분히 가치가 있습니다. Prettier v3은 기본으로 all입니다.

압축 시 mangle을 켜야 하나요? compress와 mangle의 차이는 무엇인가요?

프로덕션 환경 압축은 compress와 mangle을 모두 켜는 것을 권장합니다. 이 둘은 독립적인 압축 옵션입니다: compress는 코드 최적화(상수 폴딩, 죽은 코드 제거, 표현식 단순화 등)로, 단순화할 수 있을 때만 코드 구조를 수정하고 변수명은 변경하지 않습니다; mangle은 지역 변수명 단축으로, 긴 변수명을 단일 문자로 변경하는 것이며 이는 부피 감소의 가장 큰 원천 중 하나입니다. 코드가 라이브러리로서 외부에서 직접 변수명으로 호출되는 것이 아니거나 eval로 변수명에 동적으로 접근하지 않는다면 mangle은 안전하며 부피를 크게 줄일 수 있습니다. 오픈소스 라이브러리로서 API 이름을 보존해야 하는 경우 mangle.reserved에 내보내는 이름을 보존하도록 구성하면 됩니다.

JSON 포맷 시 왜 일부 문자가 자동으로 이스케이프되나요?

JSON 규약에는 엄격한 구문 요구사항이 있습니다: 문자열은 반드시 큰따옴표를 사용하고, 후행 쉼표가 없어야 하며, 특수 문자는 반드시 이스케이프해야 합니다(개행→\n, 따옴표→\", 역슬래시→\\, Tab→\t 등). JSON 문자열에 이스케이프되지 않은 특수 문자가 있으면 포맷 시 JSON 규약에 따라 자동으로 이스케이프하는데 이는 올바른 동작입니다. 주의: JSON은 JavaScript가 아닙니다. JSON에 주석을 작성할 수 없고 작은따옴표를 쓸 수 없으며 undefined도 쓸 수 없습니다. 이들 모두 JSON 파싱 실패를 일으킵니다.

화살표 함수 매개변수에 항상 괄호가 있게 하려면? 아니면 괄호가 없게 하려면?

arrowParens 옵션을 조정하십시오: always는 항상 괄호를 추가하는 것((x) => x)으로 Prettier v2+ 기본값이며, 매개변수 추가/제거 시 괄호를 수정할 필요가 없어 diff가 깨끗합니다; avoid는 단일 매개변수에서 괄호를 생략(x => x)하는 것으로 코드가 더 간결해집니다. 팀 스타일에 따라 선택하면 되며 두 스타일 모두 옳고 그름이 없고 통일하면 됩니다. 주의: 매개변수 타입 주석, 기본 매개변수, 비구조화 매개변수는 어떤 구성이든 항상 괄호가 있습니다.

포맷으로 ESLint가 보고하는 스타일 문제를 자동으로 수정할 수 있나요?

이 도구는 Prettier 스타일 포맷이며 Prettier가 담당하는 스타일 문제(들여쓰기, 따옴표, 세미콜론, 후행 쉼표, 줄 너비, 공백 등)만 수정할 수 있습니다. ESLint가 보고하는 코드 품질 문제(미사용 변수, return 누락, === 문제 등)는 로직 문제이며 포맷 도구로는 자동 수정할 수 없어 수동으로 수정해야 합니다. ESLint에 eslint-config-prettier가 구성되어 있으면 Prettier 포맷 후 ESLint가 스타일 관련 오류를 더 이상 보고하지 않으므로 남은 품질 문제만 수동으로 수정하면 됩니다.

최대 어느 정도 크기의 코드 파일을 지원하나요? 큰 파일 포맷은 느린가요?

포맷이 브라우저 로컬에서 실행되므로 지원되는 파일 크기는 기기 성능에 의존합니다. 일반적으로 수십 KB에서 수 MB의 JS 파일은 정상 처리할 수 있으며 일반 프로젝트의 단일 파일 JS라면 충분합니다. 특별히 큰 번들링된 JS 파일(수십 MB)은 지연되거나 메모리 부족이 발생할 수 있습니다. 이런 초대형 파일은 로컬에서 Node.js+Prettier/Terser 명령줄로 처리할 것을 권장합니다. 일상 개발의 개별 소스 파일 크기는 보통 처리 범위 내입니다.

Chrome에서 Ctrl+Shift+B를 누르면 왜 북마크 관리자가 열리나요?

이것은 Chrome 브라우저 기본 단축키 충돌입니다: Ctrl+Shift+B는 Chrome 북마크 바 표시/숨기기 단축키이며 브라우저 단축키 우선순위가 웹페이지 JS 단축키보다 높아 Chrome이 인터셉트합니다. 해결 방법: ①포맷 버튼을 클릭하여 조작; ②Mac 사용자인 경우 Cmd+Shift+B는 Chrome과 충돌하지 않습니다; ③Chrome 설정에서 브라우저 단축키를 변경할 수 있습니다; ④먼저 에디터 내에 포커스를 맞추면 경우에 따라 에디터 포커스가 단축키를 캡처할 수 있습니다. 다른 브라우저에서도 단축키 충돌이 발생하면 언제나 버튼 조작으로 대응할 수 있습니다.

문제 해결

포맷 시 '구문 파싱 오류'가 보고되며 포맷할 수 없습니다

코드 자체에 구문 오류가 있습니다: 괄호 짝이 맞지 않음, 문자열이 닫히지 않음, 키워드 누락, 불필요한 쉼표 등. 구문 오류는 AST 파싱을 실패시켜 포맷할 수 없으므로 먼저 구문 오류를 수정하십시오 언어 모드 선택 오류: JSX/TSX 코드를 JavaScript로 선택한 경우, 제네릭 구문이 JSX 태그로 오판되거나 그 반대의 경우가 발생합니다. 수동으로 올바른 언어 유형을 선택하십시오 실험적 구문 포함: 코드가 아직 표준이 되지 않은 너무 새로운 JavaScript 구문 제안(데코레이터, Pipeline 연산자 등)을 사용하는 경우 파서가 지원하지 않습니다 파일에 BOM 헤더가 있습니다: UTF-8 BOM(EF BB BF) 세 바이트가 시작 부분에 있는 경우 일부 파서가 처리하지 못할 수 있습니다. BOM 없는 UTF-8로 저장해 보십시오 다른 언어 코드가 혼합됨: HTML에 내장된 템플릿 언어(EJS, Handlebars, Vue 템플릿 디렉티브)는 순수 JS/HTML이 아니므로 파서가 인식할 수 없습니다 코드에 종료되지 않은 블록 주석이 있습니다: /*에 해당하는 */이 없습니다. 주석이 닫히지 않으면 후속 코드가 모두 주석으로 처리됩니다 정규식 모호성: 나눗셈/연산자처럼 보이는 부분이 실제로는 정규식 리터럴인 경우 파서가 오판할 수 있습니다. 정규식 앞에 세미콜론을 추가하여 모호성을 해소할 수 있습니다

압축(Minify) 시 오류가 발생하고 압축할 수 없습니다

코드 구문 오류: 포맷과 마찬가지로 압축도 AST 기반입니다. 코드가 구문적으로 올바르지 않으면 압축할 수 없으므로 먼저 구문 오류를 수정하십시오 ES Module의 import/export를 사용하면서 모듈 유형이 올바르게 표시되지 않았거나 압축 구성이 모듈 유형과 일치하지 않습니다 속성명 mangle 시 문제: 속성명 mangle을 켠 경우(기본적으로 꺼져 있음), 동적 속성 접근 obj['key']가 속성을 찾지 못하게 됩니다. 속성 mangle을 함부로 켜지 마십시오 코드에 eval() 또는 with 문이 있습니다: Terser는 eval/with를 만나면 mangle이 오류를 일으킬 수 있습니다. eval은 스코프 변수명에 동적으로 접근할 수 있으므로 프로덕션 코드에서 eval 사용을 피하십시오 보존 이름 구성 오류: mangle.reserved를 구성했지만 철자가 틀렸거나 반드시 보존해야 할 이름(jQuery, $ 등 전역 라이브러리)을 누락하여 런타임 오류가 발생할 수 있습니다 toplevel 압축 구성 문제: 코드가 IIFE/모듈 내에 패키징되지 않고 전역 스코프에서 실행되는 경우 compress.toplevel: true를 켜면 전역 변수 참조가 손상될 수 있습니다 대상 브라우저 버전 구성이 너무 오래됨: Terser 압축 시 대상 브라우저가 지원하지 않는 구문이 사용될 수 있습니다. ecma 버전을 구성하여 출력 JS 구문 버전을 지정하십시오

한글/한글 주석 포맷 시 깨져 보입니다

파일 인코딩이 UTF-8이 아님: 업로드한 로컬 파일이 GBK/GB2312 등 한글 인코딩인 경우, 도구가 기본적으로 UTF-8로 파싱하여 깨져 보입니다. 에디터로 파일을 UTF-8 인코딩으로 변환하여 저장한 후 다시 업로드하십시오 브라우저 페이지 인코딩이 예기치 않게 변경됨: 현대 브라우저는 기본 UTF-8이지만 일부 구형 브라우저나 특수 설정으로 인해 인코딩이 잘못될 수 있습니다. 브라우저 메뉴에서 페이지 인코딩 설정을 확인하고 UTF-8로 설정하십시오 파일에 UTF-8 BOM 헤더가 있음: BOM은 보통 깨짐을 일으키지 않지만 일부 파서가 BOM을 비정상적으로 처리할 수 있습니다. 에디터로 BOM을 제거하고 BOM 없는 UTF-8로 저장하십시오 복사 붙여넣기 시 인코딩 변환 문제: 일부 오래된 소프트웨어(구 버전 메모장, Word)에서 코드를 복사하면 특수 문자(한글 따옴표, 전각 공백 등)가 잘못 변환될 수 있습니다. VS Code 등 현대 에디터에서 복사하십시오 글꼴 문제: 일부 고정폭 글꼴은 한글 지원이 좋지 않아 표시가 이상할 수 있습니다. 이는 인코딩 문제가 아니라 표시 글꼴 문제이므로 한글을 지원하는 고정폭 글꼴로 변경하면 됩니다 특수 Unicode 문자: 코드에 emoji, 폭 없는 공백, 제어 문자 등 보이지 않는 특수 문자가 포함되어 표시 이상이나 포맷 오류를 일으킬 수 있습니다. 에디터에서 보이지 않는 문자 표시를 켜고 확인하십시오 gzip 압축 또는 프록시 문제: 배포 후 접근 시 깨짐이 발생하는 경우 서버가 Content-Type: application/javascript; charset=utf-8 응답 헤더를 올바르게 설정했는지 확인하십시오

JSX/TSX 코드 포맷이 실패하거나 파싱 오류가 발생합니다

언어 모드를 JSX/TSX가 아닌 JavaScript로 선택함: 일반 JS 파서는 <태그> 구문을 인식하지 못하고 JSX 태그를 비교 연산자로 파싱하여 오류를 보고합니다. 수동으로 JSX 또는 TSX 언어를 선택하십시오 TSX 제네릭 구문 모호성: <T> 제네릭 매개변수가 TSX에서 JSX 태그로 오판될 수 있습니다. 예: const f = <T>(x: T) => x. <T> 뒤에 쉼표 <T,>를 추가하여 모호성을 해소할 수 있습니다(이것은 TSX의 일반적인 작성법입니다) JSX 태그가 닫히지 않음: JSX는 모든 태그가 올바르게 닫혀야 합니다. 자체 닫기 태그는 반드시 />가 있어야 하며 HTML과 달리 <img>는 <img/>로 작성해야 합니다 JSX 내 JS 표현식 괄호 문제: {} 안의 JS 표현식은 올바르게 닫혀야 합니다. {obj.prop}에서 }를 쓰지 않으면 후속 파싱이 엉망이 됩니다 Fragment 단축 구문 문제: <></> 빈 태그는 React 16+ 지원이 필요하며 반드시 올바르게 닫혀야 합니다; <Fragment>를 사용하는 경우 올바르게 import해야 합니다 JSX 속성값 따옴표 문제: JSX 속성값이 문자열인 경우 반드시 따옴표(큰따옴표)를 사용해야 하고 표현식인 경우 {}를 사용해야 하며 혼용하지 마십시오 TSX 파일 확장자가 .ts가 아니라 .tsx임: TypeScript 파서는 .tsx 확장자일 때만 JSX 파싱을 활성화합니다. .ts 확장자로 JSX를 작성하면 오류가 발생하므로 올바른 확장자를 사용하십시오

포맷 후 들여쓰기가 맞지 않고 예상과 다릅니다

tabWidth 구성이 맞지 않음: 들여쓰기 너비 구성이 2인지 4인지 확인하십시오. 팀에서 주로 2스페이스를 사용하므로 4스페이스가 예상이면 tabWidth 옵션을 수동으로 조정해야 합니다 useTabs 구성이 맞지 않음: 팀에서 Tab 들여쓰기를 사용하는데 스페이스로 구성했거나 그 반대인 경우, useTabs 옵션이 올바른지 확인하십시오 코드 자체에 구문 오류가 있음: 구문 오류는 AST 구조를 비정상적으로 만들어 포맷 결과 들여쓰기가 엉망이 됩니다. 먼저 빨간 물결선이 표시하는 구문 오류를 수정하십시오 Tab과 스페이스가 혼용됨: 원본 코드의 일부는 Tab 들여쓰기이고 일부는 스페이스인 경우, 포맷은 구성한 스타일로 통일하지만 원본 코드가 너무 엉망이면 여러 번 포맷이 필요할 수 있습니다 printWidth 설정이 너무 작음: 줄 너비를 너무 작게(예: 40) 설정하면 코드가 자주 줄바꿈되어 들여쓰기가 엉망으로 보입니다. 80 또는 100으로 설정하는 것이 더 적합합니다 bracketSameLine/arrowParens 등 레이아웃 옵션 구성이 예상과 다름: 중괄호 위치, 화살표 함수 괄호 등 스타일은 구성으로 결정되는 것이지 들여쓰기 문제가 아닙니다. 해당 옵션을 조정하십시오 EditorConfig와 로컬 에디터 구성 충돌: 로컬 에디터가 .editorconfig로 들여쓰기를 자동 설정하여 웹 페이지에서 구성한 옵션과 다르면 양쪽 포맷 결과가 일치하지 않습니다. 구성을 통일하십시오

키보드 단축키가 동작하지 않고 눌러도 반응이 없습니다

포커스가 에디터에 있지 않음: 단축키는 에디터가 포커스를 얻었을 때만 동작합니다. 포커스가 버튼, 입력창 또는 페이지의 다른 부분에 있으면 단축키가 트리거되지 않으므로 먼저 에디터 영역을 클릭하여 포커스를 맞추십시오 브라우저 단축키 충돌: 일부 단축키(예: Chrome에서 Ctrl+Shift+B는 북마크 바 열기, Firefox에서 Ctrl+Shift+O는 방문 기록 열기)는 브라우저가 사용합니다. 버튼을 클릭하여 조작하거나 (Mac의 경우) Ctrl 대신 Cmd를 사용해 보십시오 입력기 문제: 한글 입력기 상태에서 일부 단축키가 차단될 수 있습니다. 영어 입력기로 전환한 후 단축키를 시도하십시오 다른 확장/플러그인 점유: 브라우저에 설치한 단축키 확장, 유저스크립트, 프록시 플러그인이 단축키를 점유할 수 있습니다. 시크릿 모드에서 페이지를 열어 시도해 보십시오 시스템 단축키 충돌: 운영체제나 실행 중인 다른 소프트웨어(캡처 소프트웨어, 입력기, IDE)의 전역 단축키가 해당 조합키를 점유할 수 있습니다. 다른 소프트웨어의 단축키를 수정하거나 이 도구의 버튼을 사용하여 조작하십시오 Mac/Windows 키보드 차이: Mac은 Cmd(⌘) 키를 사용하고 Windows/Linux는 Ctrl 키를 사용합니다. 혼동하지 마십시오; Mac의 Option은 Windows의 Alt에 해당합니다 브라우저 보안 제한: 파일 접근과 관련된 일부 단축키는 브라우저 보안 정책에 의해 제한되어 JS로 완전히 시뮬레이션하지 못할 수 있습니다. 필요한 경우 해당 버튼을 직접 클릭하여 조작하십시오

용어집

Prettier: 현재 가장 보편화된 프론트엔드 코드 포맷터. Opinionated 설계 철학을 채택하여 JS/TS/CSS/HTML/Markdown 등 다중 언어를 지원하고 코드 스타일을 강제로 통일하여 팀 스타일 논쟁을 종식시킵니다.
Terser: 최신 JavaScript 압축 도구. UglifyJS의 ES6+ 호환 포크이며 ES6+ 구문 압축·난독화를 지원하고 Webpack, Rollup, Vite 등 최신 빌드 도구의 기본 압축기입니다.
UglifyJS: 고전적인 JavaScript 압축 도구로 Terser의 전신이지만 ES5 이전 구문만 지원하고 ES6+ 신기능을 지원하지 않아 현재 신규 프로젝트에서는 일반적으로 Terser가 대신 사용됩니다.
AST (Abstract Syntax Tree): 추상 구문 트리. 소스코드 구문 구조의 트리 표현으로 각 노드는 코드의 한 구문 구조를 나타냅니다. Babel, Prettier, Terser, ESLint 등 도구는 모두 AST를 기반으로 구현됩니다.
ESLint: JavaScript/TypeScript 생태계에서 가장 인기 있는 코드 검사 도구(Linter)로 코드 품질 문제 발견과 코드 스타일 통일에 사용되며 Prettier와 함께 사용할 수 있습니다.
EditorConfig: 에디터 간 코드 스타일을 통일하는 설정 파일로 들여쓰기 스타일, 들여쓰기 크기, 줄바꿈 문자, 인코딩 등 기본 설정을 정의하여 다른 에디터가 같은 프로젝트를 열어도 일관되게 표시되도록 합니다.
CodeMirror: 브라우저단 코드 에디터 컴포넌트로 구문 강조, 줄 번호, 괄호 일치, 코드 접기, 다중 커서 등 전문 편집 기능을 제공하며 웹단 코드 에디터의 주류 선택지 중 하나입니다.
minify: 코드 로직을 변경하지 않고 공백, 주석 제거, 변수명 단축, 코드 최적화 등 수단으로 코드 부피를 최소화하는 과정. 프로덕션 환경에서 로딩 속도를 높이는 데 사용됩니다.
mangle: 압축 과정에서 변수명, 함수명, 매개변수명을 단일 문자로 단축하는 단계로, 코드 부피를 크게 줄이는 동시에 코드를 읽기 어렵게 만듭니다. 변수명 난독화라고도 합니다.
beautify: 코드 포맷팅을 의미합니다. 압축되거나 엉망인 코드의 들여쓰기, 줄바꿈, 공백을 다시 정리하여 가독성을 높이는 작업으로 minify의 반대입니다.
trailing comma: 객체, 배열, 함수 매개변수의 마지막 요소 뒤에 오는 쉼표. 요소 추가 시 Git diff가 깨끗해지도록 하며 ES5+ 환경에서 지원됩니다.
arrow parens: 단일 매개변수 화살표 함수의 매개변수를 괄호로 감쌀지 여부, 예: x => x (괄호 없음) vs (x) => x (괄호 있음).
printWidth: 포맷팅 시 한 줄이 몇 자를 초과하면 자동 줄바꿈할지 지정. Prettier 기본값은 80자이며 팀은 모니터 크기에 따라 100 또는 120으로 조정할 수 있습니다.
semicolons: JavaScript 문장 끝에 세미콜론을 추가할지 여부. JS에는 ASI 자동 세미콜론 삽입 기구가 있지만 대부분의 시나리오에서 여전히 세미콜론을 추가하여 예기치 않은 문제를 피할 것을 권장합니다.
single quote: 문자열에 작은따옴표를 사용할지 큰따옴표를 사용할지. JS에서는 기능이 완전히 동일하며 스타일 선호의 문제일 뿐입니다. JSON 규약은 큰따옴표를 강제합니다.
double quote: 큰따옴표로 문자열을 감싸는 방식. 많은 언어의 기본 스타일이며 JSON 규약에서 요구하는 문자열 형식이기도 합니다.
tab width: 각 들여쓰기 레벨에 해당하는 스페이스 수. 프론트엔드 커뮤니티는 주로 2스페이스를 사용하고 백엔드 언어는 주로 4스페이스를 사용합니다.
BOM (Byte Order Mark): 바이트 순서 표시. UTF-8 인코딩 파일 시작 부분에 나타날 수 있는 EF BB BF 세 바이트로 인코딩을 표시하는 데 사용되며 일부 시나리오에서 JS 파싱 오류를 일으킬 수 있습니다.
UTF-8: Unicode Transformation Format 8비트. 현재 Web 및 프론트엔드 프로젝트의 표준 파일 인코딩으로 모든 Unicode 문자를 지원하며 기본 권장 인코딩입니다.
source map: 압축/트랜스파일된 코드를 원본 소스 위치로 매핑하는 파일. 프로덕션 환경 디버깅에 사용되며 압축된 코드에 오류가 발생했을 때 소스 줄 번호를 찾을 수 있도록 합니다.

Prettier 핵심 옵션 참조표

옵션명	기능	선택 가능 값	기본값	설명
`tabWidth`	들여쓰기 너비(스페이스 수)	`2, 4, 8`	`2`	useTabs가 false일 때 적용. 프론트엔드에서 2스페이스가 일반적
`useTabs`	Tab 탭 문자로 들여쓰기	`true/false`	`false`	true는 Tab 들여쓰기, false는 스페이스 들여쓰기
`printWidth`	줄 너비 제한(문자 수)	`80, 100, 120`	`80`	너비 초과 시 자동 줄바꿈. 엄격한 제한 아님
`semi`	문 끝에 세미콜론 추가	`true/false`	`true`	false일 때 ASI가 실패할 수 있는 위치에만 세미콜론 추가
`singleQuote`	작은따옴표 사용	`true/false`	`false`	true 작은따옴표, false 큰따옴표. JSX 속성은 항상 큰따옴표
`trailingComma`	후행 쉼표 모드	`none, es5, all`	`all (v3+)`	none 후행 쉼표 없음, es5 객체/배열에 추가, all 함수 매개변수에도 추가
`arrowParens`	화살표 함수 단일 매개변수 괄호	`avoid, always`	`always (v2+)`	avoid 단일 매개변수에서 괄호 생략, always 항상 괄호 추가
`bracketSpacing`	객체 중괄호 내 공백	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	HTML/JSX 닫는 괄호 위치	`true/false`	`false`	true 닫는 괄호가 마지막 줄 끝에, false 별도 줄에
`vueIndentScriptAndStyle`	Vue 파일 script/style 들여쓰기	`true/false`	`false`	Vue SFC 내 script 태그와 style 태그 내 코드를 들여쓰기할지 여부

JavaScript 코드 압축 전후 비교 예시

최적화 항목	포맷 후 코드(개발 버전)	압축 후 코드(프로덕션 버전)	부피 감소 비율
공백과 줄바꿈	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
주석 제거	`// 두 수의 합을 계산 function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
지역 변수 mangle	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	~40%
상수 폴딩	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
불리언 단순화	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
전체 예시(여러 최적화 포함)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

키보드 단축키 참조표

단축키 (Win/Linux)	단축키 (Mac)	기능 설명	사용 빈도
`Ctrl+Shift+B`	`Cmd+Shift+B`	포맷/정리 실행	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	포맷/압축 모드 전환	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	로컬 파일 열기	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	처리된 파일 다운로드	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	에디터 내용 지우기	★★★
`Ctrl+S`	`Cmd+S`	다운로드(저장)	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	찾기 / 찾아 바꾸기	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	실행 취소 / 다시 실행	★★★★★
`Ctrl+/`	`Cmd+/`	줄 주석 토글	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	들여쓰기 증가 / 감소(선택 시)	★★★★
`Alt+클릭`	`Option+클릭`	다중 커서 추가	★★★
`Ctrl+D`	`Cmd+D`	다음 같은 단어 선택	★★★
`Home / End`	`Cmd+← / Cmd+→`	줄 맨 앞 / 줄 맨 뒤	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	파일 맨 앞 / 맨 뒤	★★★