11개 언어: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown, GraphQL 13가지 SQL 방언과 키워드 대소문자 옵션 JS(Terser), CSS, HTML, JSON, SQL 압축 및 절감량 표시 들여쓰기 크기 또는 탭, 줄 너비, 따옴표, 세미콜론 설정 결과 복사·다운로드와 명확한 문법 오류 메시지

코드 포매터 & 압축기 - JS, TS, CSS, HTML, SQL

코드를 정리하고 압축하는 이유

코드 정리는 들여쓰기, 줄바꿈, 공백을 일관되게 맞춰 코드를 다시 작성하는 것으로, 읽기와 리뷰, 비교가 쉬워집니다. 압축된 코드 조각, 자동 생성된 SQL, 복사한 설정 파일을 볼 때 특히 유용합니다. 압축은 그 반대로 공백과 주석을 제거하고(JavaScript는 Terser로 지역 변수 이름도 줄임) 다운로드 크기를 줄입니다. 이 도구는 대부분의 JavaScript 프로젝트가 쓰는 Prettier와 MySQL, PostgreSQL, SQL Server, Oracle PL/SQL, BigQuery 등의 문법을 아는 sql-formatter를 사용합니다.

기능

• 11개 언어: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown, GraphQL
• 13가지 SQL 방언과 키워드 대소문자 옵션
• JS(Terser), CSS, HTML, JSON, SQL 압축 및 절감량 표시
• 들여쓰기 크기 또는 탭, 줄 너비, 따옴표, 세미콜론 설정
• 결과 복사·다운로드와 명확한 문법 오류 메시지

코드는 로컬에 머뭅니다

정리와 압축은 모두 브라우저에서 실행되므로 붙여넣은 API 키, 내부 쿼리, 비공개 코드는 업로드되지 않습니다.

Prettier + sql-formatter, 100% 클라이언트 측.

코드 포매터 사용 방법

1
언어 탭을 고르세요. JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown, GraphQL을 지원합니다. 예제를 누르면 샘플 코드를 불러옵니다.
2
입력 칸에 코드를 붙여넣고 들여쓰기 크기나 탭, 줄 너비, 따옴표, 세미콜론, SQL이라면 방언과 키워드 대소문자를 설정하세요.
3
정리를 누르면 Prettier나 sql-formatter로 코드를 정돈하고, 압축을 누르면 JavaScript, CSS, HTML, JSON, SQL을 줄입니다. 절감량은 출력 위에 표시됩니다.
4
결과를 복사하거나 파일로 내려받으세요. 문법 오류가 있으면 메시지에 줄과 열이 표시됩니다.

활용 예시

압축된 코드 읽기

서드파티 스크립트나 번들 파일은 긴 한 줄입니다. 정리하면 구조가 보여 디버깅할 함수를 찾을 수 있습니다.

로그 속 SQL 정리

ORM은 쿼리를 한 줄로 기록합니다. PostgreSQL이나 MySQL 방언으로 정리하면 SELECT, JOIN, WHERE가 각 줄로 나뉘어 검토와 최적화가 쉬워집니다.

커밋 전 스타일 통일

프로젝트와 같은 Prettier 규칙(공백 2칸, 80열, 큰따옴표)으로 정리하면 채팅에서 가져온 코드를 붙여넣어도 diff가 작게 유지됩니다.

빠른 압축

빌드 도구 없이 이메일 템플릿, CMS 입력란, 인라인 <script> 태그용 작은 스크립트나 스타일시트를 압축할 수 있습니다.

자주 묻는 질문

정리하면 코드 동작이 바뀌나요?+

아니요. 포매터는 공백, 줄바꿈, 그리고 선택한 경우 따옴표와 생략 가능한 세미콜론만 바꿉니다. Terser로 JavaScript를 압축하면 지역 변수 이름도 줄이지만 동작은 같습니다.

일부 언어에서 압축이 비활성인 이유는?+

YAML, Markdown, TypeScript, GraphQL은 압축해도 거의 쓸모가 없거나 의미가 바뀝니다(YAML은 들여쓰기에 의존). TypeScript는 보통 JavaScript로 컴파일한 뒤 압축합니다.

어떤 SQL 방언을 골라야 하나요?+

사용하는 데이터베이스를 고르세요. 방언마다 따옴표, 함수, 키워드가 다르며(MySQL의 백틱, PostgreSQL의 :: 형변환 등) 올바른 방언을 고르면 오류를 피할 수 있습니다.

코드가 서버로 전송되나요?+

아니요. Prettier, sql-formatter, Terser는 브라우저에서 실행되고 버튼을 누를 때만 로드되므로 비공개 코드와 인증 정보가 기기 밖으로 나가지 않습니다.