Json 파일에 기록된 sql을 html에 출력

sql이 저장된 json 파일을 html에 보여주기

프로그램 구조

sql_viewer/
├── index.html
└── sqls.json

sqls.json

{
    "queries": [
        {
            "id": 1,
            "description": "사용자 리스트 가져오기",
            "sql": "SELECT * FROM users;"
        },
        {
            "id": 2,
            "description": "주문 내역 조회",
            "sql": "SELECT * FROM orders WHERE order_date >= SYSDATE - 30;"
        }
    ]
}

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SQL 문장 보기</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .sql-box { border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }
        .description { font-weight: bold; margin-bottom: 5px; }
        pre { background-color: #f4f4f4; padding: 10px; }
    </style>
</head>
<body>
    <h1>SQL 문장 리스트</h1>
    <div id="sql-container">로딩 중...</div>

    <script>
        fetch('sqls.json')
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('sql-container');
                container.innerHTML = '';

                data.queries.forEach(query => {
                    const box = document.createElement('div');
                    box.className = 'sql-box';

                    const desc = document.createElement('div');
                    desc.className = 'description';
                    desc.textContent = query.description;

                    const pre = document.createElement('pre');
                    pre.textContent = query.sql;

                    box.appendChild(desc);
                    box.appendChild(pre);
                    container.appendChild(box);
                });
            })
            .catch(error => {
                document.getElementById('sql-container').textContent = 'SQL 로딩 실패: ' + error;
            });
    </script>
</body>
</html>

실행 방법

브라우저 보안 정책 때문에 file:// 경로로는 fetch()가 JSON을 읽지 못할 수 있음.

1) 간단한 웹 서버 실행 (Python 사용)

현재 디렉토리에서 웹 서버 실행

python -m http.server 8000

http://localhost:8000/index.html

Comments