HTMLㆍCSSㆍJS 포매터

HTMLㆍCSSㆍJS 포매터 사용 안내

한 줄로 압축된 코드를 사람이 읽기 좋게 정렬하거나, 반대로 공백ㆍ주석을 제거해 파일 크기를 줄여 배포에 사용할 수 있습니다.

Beautify

js-beautify 라이브러리를 사용해 HTML/CSS/JS 코드를 표준 코딩 컨벤션에 맞춰 들여쓰기ㆍ줄바꿈합니다.

Minify

JavaScript는 Terser로 안전하게 압축하며, HTML/CSS는 공백과 주석을 제거해 용량을 줄입니다. 원본 대비 절감률을 함께 보여줍니다.

안전성

모든 처리는 브라우저에서 이루어지며 코드는 서버로 전송되지 않습니다.

코드 안에서 JSON 데이터를 다룬다면 JSON 포매터ㆍ변환기를, SQL 쿼리를 정리해야 한다면 SQL 포매터를, 텍스트 인코딩이 필요하면 Base64 인코더ㆍ디코더를 함께 활용하세요.

HTMLㆍCSSㆍJS 포매팅 흔한 실수

포매터가 자동으로 잡아주는 영역과 직접 챙겨야 하는 영역을 구분하면 코드 리뷰ㆍ머지 충돌이 크게 줄어듭니다.

들여쓰기에서 자주 보는 문제

• 탭과 스페이스 혼용 - 한 파일에 둘이 섞이면 에디터 설정에 따라 들여쓰기 너비가 다르게 보입니다. .editorconfig로 팀 단위 강제.
• 2칸 vs 4칸 혼용 - JavaScript는 2칸이 다수, Python은 4칸이 표준. 같은 프로젝트에서 일관성이 중요.
• 중첩이 너무 깊음 - 4단계 이상 들여쓰기는 코드 분리 신호. 함수 추출ㆍearly return으로 평탄화 권장.

JavaScript에서 자주 놓치는 부분

• 세미콜론 자동 삽입(ASI) 의존 - return 다음 줄에 값이 있으면 ASI가 끼어들어 undefined가 반환됩니다. 명시적 세미콜론이 안전.
• 작은따옴표 vs 큰따옴표 혼용 - 둘 다 동작하지만 한 파일에 섞이면 가독성이 떨어집니다. 프로젝트 컨벤션에 맞춰 통일.
• Trailing comma - 객체ㆍ배열 마지막에 콤마를 두면 diff에 한 줄만 잡혀 코드 리뷰가 깔끔합니다. ES2017+ 함수 인자에도 허용.
• Minify 후 디버깅 - 프로덕션 압축본만 있으면 스택 트레이스가 의미 불명. Source map 함께 배포 필수.

HTML에서 자주 보는 실수

• self-closing 태그 처리 - HTML5에서 <br />도 유효하지만 <br>가 표준. XHTML 문법을 굳이 섞을 필요 없음.
• 인라인 스타일 남용 - style="..."는 캐시ㆍ재사용 불가. CSS 클래스로 분리.
• 속성값 따옴표 누락 - 공백ㆍ특수문자가 있는 값은 따옴표 없으면 파싱 오류. 일관성 위해 모든 값에 따옴표.
• 중복 ID - id는 문서 내 유일해야 함. document.getElementById가 첫 번째만 반환해 디버깅 시 혼란.

CSS에서 자주 놓치는 부분

• 속성 순서 비일관 - 포지셔닝 → 박스모델 → 타이포 → 시각 효과 순서가 통상적. 무작위 순서는 가독성을 떨어뜨림.
• !important 남용 - 한 번 쓰면 다른 곳에서 또 써야 함. 선택자 특이도(specificity) 재설계가 우선.
• 벤더 프리픽스 잔재 - -webkit-ㆍ-moz-는 대부분 불필요. autoprefixer로 자동 처리.
• 매직 넘버 - margin: 17px 같은 임의 값은 디자인 토큰(예: 4ㆍ8ㆍ16px 단위)으로 통일.

자주 묻는 질문

Minify 후에도 동작이 동일한가요?

JavaScript는 Terser로 변수명까지 안전하게 압축하지만, 동작은 동일하게 유지됩니다. 큰 프로젝트라면 빌드 도구의 minify를 권장합니다.

JSX나 TypeScript도 지원하나요?

표준 ES2020 JavaScript와 HTML, CSS만 지원합니다. JSX/TSX/TypeScript는 별도 트랜스파일러가 필요합니다.

Prettier와 무엇이 다른가요?

Prettier는 자체 AST로 재조판하는 반면, 이 도구는 js-beautify 기반의 경량 포매터로 브라우저에서 바로 정렬합니다. 대규모 프로젝트는 Prettier를, 즉석 정렬은 이 도구가 적합합니다.