투케이2K

497. (javaScript) 자바스크립트 sql-formatter 라이브러리 사용해 기본 SQL 코드 자동 정렬 및 출력 수행 본문

JavaScript

497. (javaScript) 자바스크립트 sql-formatter 라이브러리 사용해 기본 SQL 코드 자동 정렬 및 출력 수행

투케이2K 2026. 3. 1. 09:49
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / sql-formatter / 라이브러리 / SQL


- 사전) SQL Formatter 라이브러리 간단 설명 : 

  >> SQL Formatter 는 자바스크립트로 작성된 SQL 코드 자동 정렬(포맷팅) 라이브러리입니다.

  >> SQL Formatter 는 다양한 SQL 방언 (예: MySQL, PostgreSQL, BigQuery, Snowflake, SQL Server 등)을 지원하며, 들여쓰기/대문자화/라인폭 등 옵션을 통해 읽기 좋은 형태로 변환합니다.

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

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

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





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <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";

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = async function() {
          console.log("");
          console.log("=========================================");
          console.log("[window onload] : [start]");
          console.log("=========================================");
          console.log("");

          try {

            // -------------------------------------
            // 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
            */
           // -------------------------------------

          }
          catch (exception) {
            console.error("");
            console.error("=========================================");
            console.error("[window onload] : [Exception] : 예외 상황 발생");
            console.error("-----------------------------------------");
            console.error(exception);
            console.error("=========================================");
            console.error("");

          }

        };

        // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

</body>

</html>

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





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

[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

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

499. (javaScript) 자바스크립트 동적 html 코드 작성 및 Script 스크립트 코드 작성 후 window open 동작 테스트  (0) 2026.03.01
498. (javaScript) 자바스크립트 forEach 사용해 태그 공통 스타일 지정 및 p , h1 , div 태그에 json 데이터 pretty 정렬 출력 수행  (0) 2026.03.01
496. (javaScript) 자바스크립트 AWS CloudWatch 특정 로그 스트림에서 로그 이벤트 (Log Events) 를 조회 수행 - GetLogEvents  (0) 2026.02.27
495. (javaScript) 자바스크립트 AWS CloudWatch 특정 로그 그룹안에 존재하는 로그 스트림 목록 조회 수행 - DescribeLogStreams  (0) 2026.02.24
494. (javaScript) 자바스크립트 AWS Lambda 함수 세부 정보 조회 수행 - GetFunction  (0) 2026.02.23
'JavaScript' Related Articles more
Comments