JSX 포맷터

0자

GeekFormat JSX 포맷터 도구는 Prettier v3 Standalone 엔진을 기반으로 React JSX/TSX 컴포넌트 코드를 전문적으로 정리합니다. 12가지 포맷 설정(들여쓰기 크기, 세미콜론, 따옴표 스타일, trailing comma, 괄호 간격, 화살표 함수 괄호, 인쇄 너비, JSX 단일 따옴표, JSX 괄호 같은 줄, 속성 따옴표 전략 등)을 지원하며 Terser 압축 엔진을 내장하고 JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON 일곱 가지 언어 전환을 제공합니다. CodeMirror 6 구문 강조 에디터, 좌우 분할 패널 실시간 비교, 파일 업로드/다운로드, 기록 기록, URL 공유, 한 번의 클릭 복사를 지원합니다. 순수 브라우저 사이드 처리로 코드는 서버에 업로드되지 않습니다.

관련 추천

JSX 압축

TSX 포맷터

JavaScript 포맷터

CSS 포맷터

JSON 포맷터

JSX 포맷에 대하여

JSX는 JavaScript XML의 약자이며 React 프레임워크에 의해 도입된 JavaScript 구문 확장입니다. JavaScript 코드 내에 직접 HTML과 같은 태그 구조를 작성할 수 있게 합니다. JSX는 컴파일 시 Babel이나 TypeScript 등의 도구에 의해 일반적인 React.createElement() 함수 호출로 변환됩니다. JSX는 개발자가 HTML을 쓰듯이 UI 구조를 기술하면서 JavaScript의 완전한 표현력을 얻을 수 있게 하므로 컴포넌트 코드 구조가 더 직관적이 됩니다. 그러나 JSX 코드에 표준화된 포맷이 없다면 — 태그 중첩 레벨이 어지럽고 속성 배치가 무질서하며 들여쓰기가 불일치 — 가독성과 유지 보수 효율에 심각한 영향을 미칩니다. 이것이 JSX 포맷터 도구의 가치이기도 합니다.

Prettier는 현재 JavaScript/JSX 생태계에서 가장 주류인 코드 포맷 도구이며 James Long에 의해 2017년에 만들어졌고 현재 사실상의 표준이 되었습니다. Prettier의 핵심 개념은 "독단적인 포맷터" (opinionated formatter)입니다 — 소수의 설정 가능 항목만 제공하며 나머지 규칙은 내장되어 있어 변경할 수 없습니다. 이 접근 방식의 장점은 팀 간 코드 스타일에 대한 끝없는 논쟁을 제거하는 것입니다. Prettier는 JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown 등 여러 언어와 형식을 지원하며 React, Vue, Angular 등 주류 프레임워크 커뮤니티에서 널리 채택되고 있습니다. 대부분의 모던 프론트엔드 프로젝트에서는 코드 스타일 일관성을 보장하기 위해 CI/CD 파이프라인에 Prettier를 통합하고 있습니다.

JSX 포맷의 핵심 규칙에는 다음이 포함됩니다: 첫째, 들여쓰기 레벨 — 중첩된 각 JSX 태그와 표현식은 들여쓰기를 한 레벨씩 늘려 DOM 트리 구조를 반영; 둘째, 속성 배치 — 태그에 여러 속성이 있고 줄 너비를 초과할 경우 각 속성은 한 줄씩 차지하며 정렬; 셋째, 괄호 처리 — 여러 줄 JSX 표현식은 보통 자동 세미콜론 삽입(ASI) 문제를 방지하기 위해 소괄호로 감쌈; 넷째, 자체 닫힘 태그 — 자식 요소가 없는 컴포넌트는 <Component /> 형식 사용; 다섯째, 문자열 따옴표 — JSX 속성은 기본적으로 이중 따옴표(HTML과 일치), JavaScript 문자열은 기본적으로 단일 따옴표; 여섯째, 공백 처리 — 태그 내 중괄호 {} 양쪽에 스페이스를 넣을지 여부는 설정 가능.

JSX 압축(minification)은 포맷의 반대 작업이며 JSX를 실행 가능한 최소 크기의 코드로 변환하는 것을 목적으로 합니다. 프로덕션 환경 배포 시 네트워크 전송량을 줄이고 로딩 속도를 높이기 위해 사용됩니다. JSX 압축에는 보통 다음 단계가 포함됩니다: 먼저 Babel을 사용하여 JSX를 React.createElement 호출(즉, 일반 JavaScript)로 컴파일한 다음 압축 도구(Terser, UglifyJS 등)를 사용하여: 주석과 공백 문자 제거, 변수명과 함수명 단축(mangling), 데드 코드 제거(dead code elimination), 식과 조건문 단순화, 선언 병합, 함수 인라인화 등을 수행합니다. 모던 빌드 도구(Webpack, Vite, Rollup)는 production 모드에서 자동으로 코드 압축을 실행합니다.

코드 포맷은 왜 중요한가요? 팀 협업에서 통일된 코드 스타일은 가독성과 리뷰 효율을 크게 향상시킬 수 있습니다. 모든 개발자가 자신의 선호에 따라 코드를 포맷하면 Git diff에는 무의미한 포맷 변경이 넘쳐나 리뷰어가 진정한 로직 변경을 찾기 어려워집니다. 연구에 따르면 개발자가 코드를 읽는 시간은 코드를 쓰는 시간보다 훨씬 길며 일관된 포맷 스타일은 읽기 인지 부하를 크게 줄일 수 있습니다. Google, Meta, Airbnb 등 대기업은 모두 엄격한 코드 스타일 규범과 자동화된 포맷 툴체인을 가지고 있으며 이는 소프트웨어 엔지니어링 성숙도의 반영이기도 합니다.

Prettier와 린터(ESLint, TSLint 등)의 역할 분담은 모던 프론트엔드 엔지니어링의 모범 사례입니다: Prettier는 포맷(formatting)을 전문으로 — 줄 바꿈, 들여쓰기, 스페이스, 세미콜론, 따옴표, 쉼표 등 순수 스타일 문제; ESLint는 코드 품질(code quality)을 전문으로 — 미사용 변수, 잠재적 버그, 보안 문제, 모범 사례 등 논리적 문제. 둘을 함께 사용할 경우 충돌을 피하기 위해 eslint-config-prettier를 통해 ESLint의 중복되는 포맷 규칙을 꺼야 합니다. 많은 팀은 나아가 pre-commit 훅(husky + lint-staged 경유)을 설정하여 코드 제출 전 자동으로 Prettier와 ESLint를 실행하여 커밋되는 코드가 규범에 적합함을 보장합니다.

JSX 포맷터 도구를 선택할 때 고려해야 할 몇 가지 요인: 첫째, 엔진 선택 — Prettier를 엔진으로 우선적으로 선택. 이는 커뮤니티 표준이며 결과가 예측 가능하고 IDE 플러그인과 일치하기 때문; 둘째, 설정 가능성 — 팀 요구에 따라 조정 가능한 매개변수 수를 선택. 옵션이 너무 많으면 오히려 의사 결정 비용이 증가; 셋째, 보안 — 도구가 코드를 로컬에서 처리하고 서버에 업로드하지 않아 소스 코드 유출 리스크를 피하는지 확인; 넷째, 추가 기능 — 압축, 구문 강조, 기록 기록, 공유 등 기능은 사용 효율을 향상시킬 수 있음; 다섯째, 다국어 지원 — JS/TS/JSX/TSX/CSS/HTML/JSON 등 여러 언어를 하나의 도구로 커버하면 도구 전환 비용을 줄일 수 있음.

온라인 코드 포맷터 도구를 사용할 때의 보안 주의사항: 첫째, 순수 브라우저 사이드 처리 도구를 우선적으로 선택 — 이런 도구는 서버가 필요 없고 코드는 로컬에서만 실행되며 보안성이 가장 높음; 둘째, 기밀 정보가 포함된 코드를 붙여넣지 않기 — 데이터베이스 비밀번호, API 키, 내부 비즈니스 로직, 독점 알고리즘 등. 도구가 업로드하지 않는다고 주장해도 보안 의식을 가져야 함; 셋째, 도구가 HTTPS를 사용하는지 확인 — 전송 중 도청을 방지(로컬 처리 도구는 전송 필요는 없지만 페이지 자체도 안전하게 로드되어야 함); 넷째, 중요한 코드는 로컬 도구 사용 — 핵심 비즈니스 코드에 대해서는 온라인 서비스에 의존하지 않고 로컬에 설치된 Prettier CLI 또는 IDE 플러그인 사용을 권장; 다섯째, 도구의 신뢰성을 정기적으로 리뷰 — 오픈 소스인지, 커뮤니티 평가는 어떤지, 개인정보 처리방침이 있는지 등 확인.

사용 사례

  • 인터넷에서 복사한 React 컴포넌트 코드의 포맷이 어지러울 때 신속하게 포맷하여 읽기 쉽고 학습하기 쉽게 만들기
  • 기존 프로젝트를 인수할 때 JSX 컴포넌트 파일을 정리하고 코드 스타일을 통일한 후 2차 개발 진행하기
  • 코드 리뷰 전에 포맷하여 포맷 차이로 인한 무의미한 diff를 제거하고 로직 리뷰에 집중하기
  • 압축된 JSX 프로덕션 코드를 다시 포맷하여 프로덕션 환경 문제를 트러블슈팅할 때 난독화된 코드 읽기
  • 기술 블로그나 문서를 작성하기 전에 JSX 예제 코드를 정리하여 콘텐츠 전문성 높이기
  • 다른 포맷 설정의 효과를 비교하여 팀 Prettier 구성 선택의 참고 자료로 삼기
  • 교육 프레젠테이션에서 JSX 코드가 어지러운 상태에서 표준화된 상태가 되는 포맷 과정 보여주기
  • React 코드 스니펫을 온라인으로 디버깅할 때 먼저 포맷한 후 구조 분석하고 버그 위치 찾기
  • JSX 코드를 생성하는 컴포넌트 라이브러리 문서에서 예제 코드 스타일을 통일하고 아름답게 만들기
  • 면접 전에 자신의 React 프로젝트 코드를 정리하여 제출하는 코드 샘플 스타일이 규범을 따르는지 확인하기
  • AI가 생성한 JSX 코드를 포맷한 후 프로젝트에 추가하여 AI 출력의 포맷 불일치 해소하기
  • React Native나 Next.js 프로젝트를 개발할 때 온라인에서 컴포넌트 코드 스니펫을 신속하게 포맷하기

이용 방법

  1. 왼쪽 에디터에 JSX/TSX 코드를 붙여넣거나 업로드 버튼을 클릭하여 .jsx/.tsx 파일을 가져오거나 예제에서 직접 로드합니다
  2. 설정 버튼을 클릭하여 포맷 매개변수를 조정합니다: 들여쓰기 크기, 세미콜론, 따옴표, trailing comma, 인쇄 너비, JSX 옵션 등. 또는 기본 설정을 유지합니다
  3. 정리 버튼을 클릭하거나(단축키 누르기) 포맷을 실행하면 오른쪽 패널에 포맷 결과가 즉시 표시됩니다. 좌우로 드래그하여 패널 너비를 조정할 수 있습니다
  4. 압축이 필요한 경우 압축 버튼을 클릭하여 압축 모드로 전환합니다. Terser 엔진이 최소화된 JSX 코드를 출력합니다
  5. 복사 버튼을 클릭하여 결과를 클립보드에 복사하거나 다운로드를 클릭하여 파일로 저장하거나 공유 링크로 다른 사람에게 보냅니다

주요 기능

  • Prettier v3 엔진: 업계에서 가장 인기 있는 Prettier v3 Standalone을 포맷 엔진으로 사용하며 Babel 파서와 결합하여 VS Code의 Prettier 확장 프로그램과 동일한 포맷 결과를 보장하여 팀 코드 스타일을 통일
  • 12가지 포맷 설정: 들여쓰기 크기(2/4/8 스페이스 또는 Tab), 세미콜론, 단일/이중 따옴표, trailing comma(none/es5/all), 괄호 간격, 화살표 함수 괄호, 인쇄 너비, JSX 단일 따옴표, JSX 괄호 같은 줄, 속성 따옴표 전략 등 12가지 매개변수 조정 가능
  • JSX 구문 강조 에디터: CodeMirror 6 기반의 전문 코드 에디터. JSX/TSX 구문 강조, 줄 번호, 괄호 매칭을 지원하며 왼쪽 입력과 오른쪽 결과를 실시간으로 비교
  • JSX 압축 기능: Terser 압축 엔진 내장. 한 번의 클릭으로 JSX 컴포넌트 코드를 최소 크기로 압축. 변수명 난독화(mangle), 데드 코드 제거, console/debugger 정리 등 고급 압축 옵션 지원
  • 7개 언어 자유롭게 전환: JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON 일곱 가지 프론트엔드에서 자주 사용되는 언어 지원. 하나의 도구로 풀스택 포맷 요구사항 커버
  • 파일 업로드 및 다운로드: .jsx/.tsx/.js/.ts/.css/.html/.json 파일 직접 업로드하여 포맷 가능. 처리 후 다운로드하여 로컬에 저장 가능
  • 기록 기록 패널: 최근 포맷 기록 자동 저장. 과거 버전을 거슬러 올라가 확인할 수 있으며 다른 설정에서의 포맷 효과 비교 가능
  • 한 번의 클릭으로 결과 복사: 포맷 또는 압축된 코드를 한 번의 클릭으로 클립보드에 복사하여 IDE나 프로젝트에 직접 붙여넣어 사용 가능
  • URL 공유 기능: LZ-String 압축으로 코드와 설정을 URL hash에 인코딩. 링크를 복사하기만 하면 완전한 코드와 포맷 매개변수 공유 가능
  • 구문 오류 친절한 알림: 포맷 실패 시 구문 오류와 다른 오류를 구분하며 위치 정보를 표시하여 코드 문제를 신속하게 수정하는 데 도움
  • 드래그 가능한 분할 패널: 왼쪽과 오른쪽 패널 너비를 드래그로 자유롭게 조정 가능. 다양한 화면 크기와 읽기 습관에 적응
  • 브라우저 로컬 처리: 모든 포맷, 압축, 분석은 브라우저 JavaScript 내에서 완료. 코드 내용은 어떤 서버에도 업로드되지 않아 소스 코드 보안이 보장됨

자주 묻는 질문

JSX 포맷의 원리는 무엇인가요? Prettier와의 관계는?

이 도구는 기반으로 Prettier v3 Standalone 버전을 포맷 엔진으로 사용하며 Babel 파서를 통해 JSX 구문을 분석한 후 설정된 규칙에 따라 정리된 코드를 다시 출력합니다. Prettier는 현재 프론트엔드 생태계에서 가장 인기 있는 코드 포맷 도구이며 React/Vue/Angular 등의 프로젝트에서 널리 사용됩니다. 이 도구의 포맷 결과는 VS Code에 Prettier 확장 프로그램을 설치하여 JSX 파일을 포맷한 결과와 기본적으로 일치하며 로컬 IDE를 열지 않고도 온라인으로 신속하게 포맷하는 데 적합합니다.

어떤 포맷 옵션이 지원되나요? 들여쓰기와 따옴표 스타일을 사용자 정의할 수 있나요?

12가지 포맷 설정을 지원합니다: 1) 들여쓰기 크기: 2 스페이스/4 스페이스/8 스페이스 또는 Tab 사용; 2) 세미콜론 사용 여부; 3) 단일 따옴표 또는 이중 따옴표; 4) trailing comma 전략: none(없음)/es5(배열과 객체)/all(함수 매개변수도 포함); 5) 객체 중괄호 안에 스페이스 넣을지 여부; 6) 단일 매개변수 화살표 함수에 괄호 넣을지 여부; 7) 인쇄 너비(줄당 최대 문자 수); 8) JSX 속성에 단일 따옴표와 이중 따옴표 중 어느 것을 사용할지; 9) 여러 줄 JSX의 닫는 괄호를 내용과 같은 줄에 둘지 여부; 10) 객체 속성 따옴표 전략: as-needed/preserve/consistent; 11) HTML 공백 민감도; 12) Tab 들여쓰기 사용. 설정 패널에서 자유롭게 조정할 수 있습니다.

포맷은 JSX 코드의 로직을 변경하나요? 안전한가요?

포맷은 공백 문자(줄 바꿈, 들여쓰기, 스페이스)와 따옴표, 세미콜론 등의 문법적 설탕 형식만 조정할 뿐 코드 로직을 전혀 변경하지 않습니다. Prettier는 전 세계 수백만 개발자가 검증한 성숙한 도구이며 포맷 후 코드는 원래 코드와 의미론적으로 완전히 동등합니다. 다만 주의할 점: 원래 코드 자체에 구문 오류가 있는 경우(괄호 불일치, 태그 미닫힘 등) 포맷은 실패하고 구문 오류가 표시됩니다. 그 경우 먼저 코드 문제를 수정한 후 포맷하십시오.

JSX 압축 기능은 어떻게 구현되었나요? 어떤 압축 옵션이 지원되나요?

JSX 압축은 Terser 엔진(업계에서 가장 인기 있는 JavaScript 압축 도구 중 하나)을 사용하여 브라우저 로컬에서 실행됩니다. 압축에는 다음이 포함됩니다: 주석과 여분의 공백 제거, 변수명 단축 및 난독화(mangle), 데드 코드 제거(dead_code), 미사용 변수 제거(unused), 함수/변수 호이스팅 최적화, 조건식 단순화, 루프 최적화 등. 압축은 먼저 Babel을 통해 JSX를 일반 JavaScript로 컴파일한 후 압축 최적화를 실행합니다. 주의: 압축 후 코드는 가독성이 크게 떨어지므로 프로덕션 환경 배포에 적합하며 개발 및 디버깅에는 적합하지 않습니다.

TypeScript(TSX)는 지원되나요? JSX와의 차이점은 무엇인가요?

지원됩니다. 도구의 기본은 JSX 언어이지만 왼쪽 상단 모서리의 언어 전환 메뉴에서 TSX 모드로 전환할 수 있습니다. TSX 모드는 TypeScript 파서를 사용하며 TypeScript 타입 어노테이션(interface, type, 제네릭, 타입 단언 등)을 올바르게 인식할 수 있어 타입 구문으로 인해 오류가 발생하지 않습니다. JSX 모드는 Babel 파서를 사용하며 순수 JavaScript React 컴포넌트에 적합합니다. TSX 압축에서는 Terser 압축을 실행하기 전에 자동으로 타입 어노테이션이 제거됩니다.

입력된 JSX 코드는 서버에 업로드되나요? 프라이버시와 보안은 괜찮나요?

완전히 안전합니다. 이 도구의 모든 기능(포맷, 압축, 구문 감지, 기록 기록)은 브라우저 내에서 JavaScript를 통해 로컬로 실행되며 코드 내용은 네트워크를 통해 외부 서버로 전송되지 않습니다. Prettier와 Terser는 모두 순수 JavaScript 구현 라이브러리이며 브라우저 사이드에서 직접 실행할 수 있습니다. 오프라인 상태에서도 이 도구를 사용할 수 있으며 모든 기능이 정상적으로 작동합니다. 기록 기록은 브라우저의 localStorage에 저장되며 현재 기기에서만 표시됩니다.

기록 기록은 어디에 저장되나요? 손실되나요?

기록 기록은 브라우저의 localStorage(로컬 스토리지)에 저장되며 특정 브라우저와 기기에 바인딩됩니다. 브라우저 데이터를 지우거나 브라우저를 전환하거나 시크릿 모드를 사용하면 기록 기록이 손실됩니다. 기록 기록은 최근 포맷한 코드 스니펫을 빠르게 거슬러 올라가 확인하고 다른 설정의 효과를 비교하는 데 편리합니다. 중요한 코드는 직접 파일로 저장하고 기록 기록 기능에만 의존하지 않는 것이 좋습니다.

URL 공유 기능은 코드를 서버에 업로드하나요?

아니요. URL 공유 기능은 코드와 설정을 LZ-String으로 압축하여 URL의 hash 부분(# 기호 뒤의 내용)에 인코딩합니다. URL hash에는 중요한 특성이 있습니다: HTTP 요청과 함께 서버로 전송되는 것이 아니라 브라우저 로컬에서 JavaScript에 의해 읽히고 분석됩니다. 수신자가 공유 링크를 열면 브라우저가 직접 hash를 분석하고 압축을 풀어 코드를 표시합니다. 전체 과정에서 서버의 참여는 필요하지 않습니다. 다만 주의하십시오: 공유 링크에는 완전한 코드 내용이 포함되어 있습니다. 코드가 기밀성이 높은 것이라면 공개 채널에서 공유하지 마십시오.

포맷이 실패하고 구문 오류가 표시되면 어떻게 해야 하나요?

포맷 실패의 가장 흔한 원인은 코드 자체의 구문 오류입니다: 1) JSX 태그가 닫히지 않음 — 모든 태그가 짝을 이루는지, 자체 닫힘 태그가 올바른지(<img>가 아니라 <img />) 확인하십시오; 2) 괄호가 일치하지 않음 — 중괄호{}, 소괄호(), 대괄호[]가 짝을 이루는지 확인하십시오; 3) 따옴표가 닫히지 않음 — 문자열 따옴표가 완전한지 확인하십시오; 4) 구문 오류 — 예를 들어 JSX에서 허용되지 않는 구문을 사용하는 등. 먼저 오류 프롬프트의 줄 번호와 오류 메시지를 확인하여 문제 위치를 파악하거나 코드를 단순화하여 단계적으로 트러블슈팅할 수 있습니다.

인쇄 너비(printWidth)란 무엇인가요? 얼마로 설정해야 하나요?

인쇄 너비(printWidth)는 Prettier의 핵심 매개변수 중 하나이며 코드 줄당 최대 문자 수를 나타냅니다. 코드 줄이 이 너비를 초과하면 Prettier가 자동으로 줄 바꿈합니다. 기본값은 80자입니다. 이는 오랜 프로그래밍 관례입니다(천공 카드와 터미널 너비에서 유래). 일반적인 설정 값: 80(클래식하고 보수적), 100(더 일반적), 120(와이드스크린 친화적). 너무 작게 설정하면 코드가 자주 줄 바꿈되어 오히려 읽기 어려워지고 너무 크게 설정하면 한 줄이 너무 길어 좁은 화면에서 읽기 어려워집니다. 팀 규범과 모니터 너비에 따라 80~120 사이의 값을 선택하는 것이 좋습니다.

trailing comma의 용도는 무엇인가요? 어떤 모드를 선택해야 하나요?

trailing comma란 배열, 객체, 함수 매개변수 등 여러 줄 구조의 마지막 항목 뒤에도 쉼표를 붙이는 것을 말합니다. 이점에는 다음이 포함됩니다: 1) 항목 추가/삭제 시 한 줄만 변경되므로 Git diff가 더 깔끔해짐; 2) 쉼표 붙이기를 잊어버려 발생하는 구문 오류를 피할 수 있음; 3) 일부 상황에서 파싱이 더 안정적임. Prettier는 세 가지 모드를 제공합니다: none(trailing comma 없음, 가장 간결), es5(ES5에서 지원하는 곳에만 추가, 즉 배열과 객체, 가장 호환성 높음), all(가능한 모든 곳에 추가, 함수 매개변수 포함, ES2017+ 또는 Babel/TS 지원 필요). 모던 프로젝트에서는 'all' 모드 사용을 권장하며 Babel 또는 TypeScript 컴파일과 함께 사용하면 완전히 문제 없습니다.

JSX 단일 따옴표와 JSX 괄호 같은 줄의 효과는 각각 무엇인가요?

JSX 단일 따옴표(jsxSingleQuote): JSX 속성 값에 단일 따옴표와 이중 따옴표 중 어느 것을 사용할지 제어합니다. 기본은 끔(이중 따옴표)이며 이는 HTML 속성 관례와 일치합니다. 켜면 JSX 내의 속성 문자열은 단일 따옴표를 사용합니다. JSX 괄호 같은 줄(jsxBracketSameLine): 여러 줄 JSX 요소의 닫는 오른쪽 꺾쇠 괄호(/> 또는 >)를 마지막 줄 끝에 둘지(같은 줄) 새 줄에 둘지(다른 줄) 제어합니다. 기본은 끔(새 줄)이며 켜면 오른쪽 괄호가 마지막 속성과 같은 줄에 배치됩니다. 팀마다 선호가 다르므로 프로젝트와 일치하는 스타일을 선택하십시오.

여러 파일의 일괄 포맷이 지원되나요?

현재 웹 버전 도구는 주로 단일 파일 신속 포맷 시나리오를 위해 설계되었으며 단일 파일 업로드 처리를 지원합니다. 많은 JSX/TSX 파일을 일괄 포맷해야 하는 경우 프로젝트에 Prettier CLI 도구를 설치하고 명령줄로 일괄 처리하는 것이 좋습니다(예: npx prettier --write "src/**/*.jsx"). 이 도구의 기반 엔진은 Prettier와 완전히 일치하며 포맷 결과도 동일합니다. 향후 버전에서 일괄 처리 기능 추가를 고려할 수 있습니다.

ESLint와 함께 사용할 수 있나요?

네. 실제 프로젝트에서는 Prettier에 코드 포맷(줄 바꿈, 들여쓰기, 스페이스, 따옴표 등)을 담당시키고 ESLint에 코드 품질(미사용 변수, 잠재적 버그, 모범 사례 등)을 담당시키는 것이 좋습니다. 둘을 함께 사용하기 위한 모범 사례는: 1) eslint-config-prettier를 설치하여 Prettier와 충돌하는 ESLint의 포맷 규칙을 끄는 것; 2) 먼저 Prettier로 포맷한 다음 ESLint로 검사하는 것. 이 도구는 포맷(Prettier가 잘하는 부분)에 특화되어 있으며 ESLint의 코드 검사 기능은 포함되어 있지 않습니다.

휴대폰에서도 사용할 수 있나요? 모바일에서의 사용감은 어떤가요?

모바일 브라우저에서 사용할 수 있습니다. 이 도구는 반응형 디자인을 채택하고 있으며 작은 화면 기기에서는 자동으로 레이아웃이 조정됩니다 — 좌우 분할 패널이 상하 분할 패널이 되고 툴바 버튼은 터치하기 쉬운 크기로 최적화됩니다. 다만 모바일에서의 코드 편집 사용감은 데스크톱만큼 좋지 않으므로 주로 컴퓨터에서 사용하는 것이 좋습니다. 모바일 기기에서 자주 코드를 처리해야 하는 경우 Prettier를 지원하는 모바일 코드 에디터 앱을 사용하는 것이 좋습니다.

문제 해결

포맷이 실패하고 구문 오류가 표시되면 어떻게 해야 하나요?

먼저 코드가 완전한지 확인하십시오: JSX 컴포넌트는 보통 export가 필요하거나 적어도 JSX를 반환하는 함수를 포함해야 합니다. 일반적인 구문 오류에는 다음이 포함됩니다: 1) JSX 태그가 닫히지 않음 — 각 시작 태그에 대응하는 끝 태그 또는 자체 닫힘 마커가 있는지 확인; 2) 중괄호 불일치 — JSX 내 {} 표현식의 괄호가 짝을 이루는지; 3) 문자열 따옴표 미닫힘 — 모든 단일 따옴표/이중 따옴표/백틱 확인; 4) JSX에서 예약어 사용 — 예를 들어 class는 className, for는 htmlFor로 써야 함; 5) 여러 루트 요소 — JSX는 하나의 루트 요소만 허용하며 여러 요소는 <>...</> 또는 <div>로 감싸야 함. 오류 메시지에는 보통 줄 번호와 이유가 표시되므로 그에 따라 위치를 파악할 수 있습니다.

파일을 업로드해도 반응이 없거나 포맷이 틀린가요?

먼저 파일 확장자가 올바른지 확인하십시오 — .jsx/.tsx/.js/.ts/.css/.html/.json 파일은 모두 업로드 가능합니다. 파일 확장자가 표준적이지 않은 경우 도구가 언어 포맷을 올바르게 인식하지 못해 포맷 결과가 기대와 다를 수 있습니다. 해결 방법: 1) 파일 확장자가 표준 형식인지 확인; 2) 업로드 후 왼쪽 상단 모서리 언어 선택이 올바른지 확인하고 올바르지 않으면 수동으로 전환; 3) 파일 내용이 바이너리가 아닌 플레인 텍스트인지 확인; 4) 파일이 너무 크면(1MB 초과) 브라우저가 버벅일 수 있으므로 데스크톱 도구로 처리하는 것이 좋습니다.

포맷 후 코드가 로컬 Prettier 결과와 다른가요?

가능한 원인: 1) 버전 차이 — 이 도구는 Prettier v3를 사용합니다. 프로젝트가 v2 버전을 사용하는 경우 일부 세부 사항이 다를 수 있습니다(trailing comma 기본값 변경 등); 2) 설정 차이 — 인쇄 너비, 들여쓰기, 따옴표, trailing comma 등 매개변수가 프로젝트 설정과 일치하는지 확인; 3) 파서 차이 — JSX는 Babel 파서, TSX는 TypeScript 파서를 사용하므로 올바르게 선택되었는지 확인; 4) 플러그인 차이 — 로컬 Prettier에 추가 플러그인(prettier-plugin-tailwindcss 등)이 설치된 경우 이 도구에는 이러한 플러그인이 포함되어 있지 않습니다. 이 도구의 설정을 프로젝트의 .prettierrc와 일치하도록 조정하는 것이 좋습니다.

JSX 압축 후 코드가 정상적으로 작동하지 않나요?

JSX 압축은 Terser 엔진을 사용하며 먼저 JSX를 일반 JavaScript로 컴파일한 후 압축합니다. 압축 후 코드가 작동하지 않으면 다음을 확인하십시오: 1) 압축 설정이 너무 공격적이지 않은지 — 예를 들어 toplevel을 활성화하면 모듈 동작이 바뀔 수 있음; 2) 코드에서 eval 또는 동적 속성 접근을 사용하지 않는지 — 변수 난독화로 인해 이름 불일치가 발생할 수 있음; 3) 특정 함수명 또는 클래스명에 의존하지 않는지 — 그럴 경우 keep_fnames 또는 keep_classnames 옵션을 활성화해야 합니다. 프로덕션 환경의 압축은 프로젝트 빌드 도구(Vite/Webpack)를 사용하여 수행하는 것이 좋습니다. 그쪽이 설정과 플러그인 생태계가 더 충실합니다.

용어집

JSX
JavaScript XML의 약자. React에 의해 도입된 JavaScript 구문 확장으로 JS 내에 HTML과 같은 태그 구조를 작성할 수 있으며 컴파일 후 React.createElement() 호출로 변환됩니다.
Prettier
현재 가장 인기 있는 독단적인(opinionated) 코드 포맷 도구. JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown 등을 지원하며 프론트엔드 코드 포맷의 사실상 표준이 되었습니다.
Babel
JavaScript 컴파일러. ES6+/JSX/TS 등 새로운 구문을 구형 브라우저와 호환되는 ES5 코드로 변환할 수 있으며 Prettier가 JSX를 분석하기 위한 기반 엔진으로도 기능합니다.
Terser
업계에서 가장 인기 있는 JavaScript/JSX 압축기(minifier). 변수 난독화, 데드 코드 제거, 코드 압축 등을 지원하며 Webpack/Vite 등 빌드 도구의 기본 압축기입니다.
Print Width
Prettier의 핵심 매개변수 중 하나. 코드 줄당 최대 문자 수를 나타내며 이 너비를 초과하면 자동으로 줄 바꿈합니다. 기본 80자, 일반적인 설정은 80/100/120입니다.
Trailing Comma
배열, 객체, 함수 매개변수 등 여러 줄 구조의 마지막 항목 뒤에 쉼표를 붙이는 것. Git diff를 더 깔끔하게 하고 구문 오류를 피할 수 있습니다. Prettier는 none/es5/all 세 가지 모드를 지원합니다.
Mangle
코드 압축에서의 변수명/함수명 단축 기술. 의미 있는 긴 변수명을 a/b/c 등 짧은 이름으로 바꾸어 코드 크기를 줄이는 동시에 가독성도 떨어뜨립니다.
Dead Code Elimination
압축기 최적화 기술. 결코 실행되지 않는 코드(false 조건 하의 코드, 미사용 변수와 함수 등)를 제거하여 프로덕션 빌드 크기를 줄입니다.
CodeMirror
이 도구가 사용하는 브라우저 사이드 코드 에디터 컴포넌트(버전 6). 구문 강조, 줄 번호, 괄호 매칭 등 전문적인 편집 기능을 제공하며 각종 온라인 IDE에서 널리 사용됩니다.
LZ-String
JavaScript로 구현된 LZ 압축 알고리즘. URL hash에 코드 내용을 효율적으로 압축하여 저장하는 데 사용됩니다. 압축률이 높고 복호화 속도가 빨라 공유 링크 시나리오에 적합합니다.
localStorage
브라우저가 제공하는 로컬 키-값 스토리지 API. 용량은 약 5-10MB이며 데이터는(명시적으로 지우지 않는 한) 영구적으로 저장됩니다. 이 도구에서는 포맷 기록 기록 저장에 사용됩니다.
ESLint
JavaScript/TypeScript 정적 코드 검사 도구(Linter). 주로 코드 품질과 모범 사례를 담당하며 보통 Prettier와 함께 사용됩니다(Prettier가 포맷을 관리하고 ESLint가 품질을 관리).

지원되는 언어와 파일 형식

도구는 7가지 프론트엔드에서 자주 사용되는 언어를 지원하며 왼쪽 상단 모서리 메뉴에서 자유롭게 전환할 수 있습니다:

언어파일 확장자포맷 엔진압축 엔진
JavaScript.js, .mjs, .cjsPrettier (Babel)Terser
TypeScript.ts, .mts, .ctsPrettier (TypeScript)Terser (types removed first)
JSX.jsxPrettier (Babel)Terser
TSX.tsxPrettier (TypeScript)Terser (types removed first)
CSS.cssPrettier (PostCSS)CSSO
HTML.html, .htmPrettier (HTML)Custom implementation
JSON.jsonPrettier (JSON)JSON.stringify

포맷 설정 항목 개요

12가지 설정 가능한 포맷 매개변수와 그 효과:

설정 항목선택 가능한 값기본값설명
tabWidth 들여쓰기 크기2 / 4 / 8 / Tab2 spaces들여쓰기 레벨당 스페이스 수, 또는 Tab 문자 사용
semi 세미콜론true / falsetrue문장 끝에 세미콜론을 붙일지 여부
singleQuote 단일 따옴표true / falsefalse (double quotes)JS 문자열에 단일 따옴표와 이중 따옴표 중 어느 것을 사용할지
trailingComma Trailing Commanone / es5 / alles5여러 줄 구조 마지막 항목 뒤에 trailing comma를 붙일지 여부
bracketSpacing 괄호 간격true / falsetrue객체 중괄호 안쪽에 스페이스를 넣을지 여부
arrowParens 화살표 괄호always / avoidalways단일 매개변수 화살표 함수에 괄호를 넣을지 여부
printWidth 인쇄 너비number (recommended 80-120)80줄당 최대 문자 수, 초과 시 자동 줄 바꿈
jsxSingleQuote JSX 단일 따옴표true / falsefalseJSX 속성 값에 단일 따옴표 사용(기본은 이중 따옴표)
jsxBracketSameLine JSX 괄호 같은 줄true / falsefalse여러 줄 JSX 오른쪽 괄호를 마지막 속성과 같은 줄에 둘지 여부
quoteProps 속성 따옴표as-needed / preserve / consistentas-needed객체 속성명에 언제 따옴표를 붙일지

JSX 압축 전후 비교

전형적인 React 컴포넌트를 예로 압축 전후의 크기 변화를 보여줍니다:

비교 항목포맷(개발)압축(프로덕션)압축률
코드 크기약 2.5 KB약 0.8 KB~68%
줄 수약 80 줄1 줄~99%
변수명의미 있는 이름a/b/c/d 단일 문자—
주석모든 주석 유지모두 제거—
가독성높음(디버깅 가능하고 읽기 쉬움)매우 낮음(기계 판독만 가능)—
유스케이스개발, 디버깅, 리뷰프로덕션 배포, CDN 배포—

Privacy & Security

이 JSX 포맷터 도구의 모든 작업은 완전히 브라우저 로컬에서 완료됩니다: 입력하거나 업로드한 코드는 브라우저 JavaScript 내에서 포맷과 압축 처리가 이루어질 뿐 네트워크를 통해 외부 서버로 전송되지 않습니다. Prettier와 Terser는 모두 순수 JavaScript 라이브러리이며 브라우저 사이드에서 직접 실행할 수 있습니다. 기록 기록은 브라우저 localStorage(로컬 스토리지)에 저장되며 현재 기기와 브라우저에서만 표시됩니다. URL 공유 기능은 코드를 LZ-String으로 압축하여 URL hash 부분(# 이후 내용은 서버로 전송되지 않음)에 인코딩합니다. 페이지는 Cookie 추적을 사용하지 않으며 사용자가 입력한 코드 내용을 수집하지 않습니다. 오프라인 상태에서도 이 도구를 사용할 수 있으며 핵심 기능은 정상적으로 이용 가능합니다.

Authoritative References