119. (Library/Framework) [라이브러리] [Web] 자바스크립트 sql-formatter SQL 문 정렬(beautify) 포매터 라이브러리

---

[타이틀]

​

구 분 : Library / 라이브러리

​

제 목 : [라이브러리] [Web] 자바스크립트 sql-formatter SQL 문 정렬(beautify) 포매터 라이브러리

​

 

---

[설 명]

​

-----------------------------------------------------------------------------------------
[라이브러리 정보 및 환경]
-----------------------------------------------------------------------------------------

- 구 분 : Library / Framework


- 제 목 : [라이브러리] [Web] 자바스크립트 sql-formatter SQL 문 정렬(beautify) 포매터 라이브러리


- 환 경 : Web / JavaScript / sql-formatter / SQL


- 사전) SQL 간단 설명 정리 : 

  >> SQL (Structured Query Language) 은 관계형 데이터베이스(RDBMS) 에서 데이터를 조회·추가·수정·삭제(즉 CRUD 작업) 하기 위해 사용하는 표준화된 언어입니다.

  >> SQL 의 주요 역할 : 

    - 데이터 조회 (Query) : 가장 많이 사용하는 기능으로 SELECT 문을 이용합니다.
    - 데이터 조작 (DML, Data Manipulation Language) : 데이터를 직접 변경하는 명령들입니다. (INSERT 데이터 삽입 / UPDATE 데이터 수정 / DELETE 데이터 삭제)
    - 데이터 정의 (DDL, Data Definition Language) : 테이블 및 DB 구조를 정의하거나 변경합니다. (CREATE 테이블 및 DB 생성 / ALTER 구조 변경 / DROP 삭제)
    - 권한 제어 (DCL / TCL) : DCL – 권한 관리 (GRANT , REVOKE) / TCL – 트랜잭션 제어 (COMMIT , ROLLBACK , SAVEPOINT)


- 사전) 자바스크립트에서 sql-formatter 의존성 설정 코드 : 

    <script type="module">

        // ✅ [모듈 import] : jsDelivr ESM 방식
        // jsDelivr는 +esm 접미사를 통해 브라우저 ESM import를 지원합니다. 위와 같이 URL만으로 모듈을 불러와 사용할 수 있습니다.
        import { format } from "https://cdn.jsdelivr.net/npm/sql-formatter@15.7.1/+esm";

    </script>

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[설 명]
-----------------------------------------------------------------------------------------

1. sql-formatter 는 난잡한 SQL 을 일관된 규칙으로 보기 좋게 정렬 (beautify) 해주는 포매터 라이브러리입니다.
        
  
2. sql-formatter 는 여러 SQL 방언 (dialect) 을 지원하고, Node.js/브라우저/CLI 에서 모두 사용할 수 있습니다.


3. sql-formatter 핵심 특징 : 

  >> 들여쓰기/개행/대문자화 등 스타일을 표준화하여 가독성 향상

  >> 여러 SQL 방언(BigQuery, PostgreSQL, MySQL, Snowflake, Redshift, Spark 등) 지원

  >> 프리페어드 스테이트먼트의 플레이스홀더 치환 지원(?, :name, @name 등)

  >> CLI 제공 : 파일·표준입출력을 통해 일괄 포맷 가능

  >> 특정 구간 포매터 비활성화 주석 지원 (/* sql-formatter-disable */ ... /* sql-formatter-enable */) [github.com], [npmjs.com]


4. sql-formatter 한계 및 주의 사항 정리 :

  >> 저장 프로시저(Stored Procedures) 포맷팅은 지원하지 않습니다.

  >> 구문 구분자 ; 이외의 delimiter 변경은 지원하지 않습니다.

  >> 번들 사이즈 : 런타임에 language로 방언을 선택하면 여러 방언이 한꺼번에 번들링될 수 있습니다. 
  
    - 빌드 사이즈를 줄이려면 필요한 방언만 명시적으로 import 하는 API 를 사용하는 방식 (v12에서 도입) 도 고려 필요


5. sql-formatter 사용 예시 자바스크립트 코드 :

    <script type="module">

        // ✅ [모듈 import] : jsDelivr ESM 방식
        // jsDelivr는 +esm 접미사를 통해 브라우저 ESM import를 지원합니다. 위와 같이 URL만으로 모듈을 불러와 사용할 수 있습니다.
        import { format } from "https://cdn.jsdelivr.net/npm/sql-formatter@15.7.1/+esm";

        window.onload = async function() {

            // -------------------------------------
            // SQL 문 변수 선언                     
            // ------------------------------------- 
            const sql = `
              select id, name
              from users
              where created_at >= '2025-01-01' and status = 'active'
              order by created_at desc
            `;


            // -------------------------------------
            // ✅ SQL 문 포맷 출력 옵션 지정 수행
            // -------------------------------------
            // language : 포매팅 시 사용할 SQL 방언(dialect)을 지정합니다. (올바른 방언을 골라야 파싱 오류가 줄어듭니다.)
            // -------------------------------------
            // tabWidth : 들여쓰기 폭(스페이스 수)과 탭 문자 사용 여부를 제어합니다. (기본값은 2가 일반적입니다.)
            // -------------------------------------
            // keywordCase : SELECT, FROM 같은 키워드의 대/소문자를 강제합니다. ('upper' | 'lower' | 'preserve')
            // -------------------------------------
            // linesBetweenQueries : 쿼리 사이의 빈 줄 수를 지정합니다. 
            // -------------------------------------
            const pretty = format(sql, {
              language: "mysql",      // DB 방언 선택 (예: mysql, postgresql, bigquery, snowflake, transactsql, trino, clickhouse 등)
              tabWidth: 2,            // 들여쓰기 폭
              keywordCase: "upper",   // 키워드 대소문자: 'upper' | 'lower' | 'preserve'
              linesBetweenQueries: 1  // 쿼리 사이 공백 줄 수
            });


            // -------------------------------------
            // 포맷 된 데이터 로그 출력
            // -------------------------------------
            console.log("pretty : ", "\n\n", pretty);


            // -------------------------------------
            // ✅ 로그 출력 예시
            // -------------------------------------
            /*
            pretty :  

            SELECT
              id,
              name
            FROM
              users
            WHERE
              created_at >= '2025-01-01'
              AND status = 'active'
            ORDER BY
              created_at DESC
            */
           // -------------------------------------

        };

    </script>

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[SQL Formatter 라이브러리 jsdelivr 의존성 추가 참고 사이트]

https://www.jsdelivr.com/package/npm/sql-formatter


[온라인 SQL 정렬 출력 사이트]

https://codebeautify.org/sqlformatter


[SQL Test 무료 sql query 쿼리 연습 사이트 - oracle , mysql , mssql]

https://kkh0977.tistory.com/556

https://blog.naver.com/kkh0977/222291744679?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/556

26. SQL Test 무료 sql query 쿼리 연습 사이트 - oracle , mysql , mssql

---