2025년 5월 19일 (월) 22:00에 Devcafe님의 편집

2025-05-19T22:00:56Z

← 이전 판		2025년 5월 20일 (화) 07:00 판
85번째 줄:		85번째 줄:
	http://localhost:8000/index.html		http://localhost:8000/index.html
	</source>		</source>

			[[category:json 로컬 파일 읽기]]

Devcafe: 새 문서: == sql이 저장된 json 파일을 html에 보여주기 == === 프로그램 구조 === sql_viewer/ ├── index.html └── sqls.json === sqls.json === { "queries": [ { "id": 1, "description": "사용자 리스트 가져오기", "sql": "SELECT * FROM users;" }, { "id": 2, "description": "주문 내역 조회", "sql": "SELECT *...

2025-04-10T13:29:59Z

새 문서: == sql이 저장된 json 파일을 html에 보여주기 == === 프로그램 구조 === <source lang=bash> sql_viewer/ ├── index.html └── sqls.json </source> === sqls.json === <source lang=html> { "queries": [ { "id": 1, "description": "사용자 리스트 가져오기", "sql": "SELECT * FROM users;" }, { "id": 2, "description": "주문 내역 조회", "sql": "SELECT *...

새 문서

== sql이 저장된 json 파일을 html에 보여주기 ==
=== 프로그램 구조 ===
<source lang=bash>
sql_viewer/
├── index.html
└── sqls.json
</source>

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

=== index.html ===
<source lang=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>
</source>

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

1) 간단한 웹 서버 실행 (Python 사용)
# 현재 디렉토리에서 웹 서버 실행
<source lang=python>
python -m http.server 8000
</source>
<source lang=python>
http://localhost:8000/index.html
</source>

Json 파일에 기록된 sql을 html에 출력 - 편집 역사

2025년 5월 19일 (월) 22:00에 Devcafe님의 편집