https://devcafe.co.kr/w/index.php?action=history&feed=atom&title=%ED%95%B8%EB%93%9C%EC%98%A8%ED%85%8C%EC%9D%B4%EB%B8%94_%EA%B7%B8%EB%A6%AC%EB%93%9C_ORACLE_DB_%EC%97%B0%EA%B2%B0_%EC%98%88%EC%A0%9C
핸드온테이블 그리드 ORACLE DB 연결 예제 - 편집 역사
2026-04-04T04:28:49Z
이 문서의 편집 역사
MediaWiki 1.42.1
https://devcafe.co.kr/w/index.php?title=%ED%95%B8%EB%93%9C%EC%98%A8%ED%85%8C%EC%9D%B4%EB%B8%94_%EA%B7%B8%EB%A6%AC%EB%93%9C_ORACLE_DB_%EC%97%B0%EA%B2%B0_%EC%98%88%EC%A0%9C&diff=2329&oldid=prev
Devcafe: /* 서버 */
2025-10-17T07:23:22Z
<p><span dir="auto"><span class="autocomment">서버</span></span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ko">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← 이전 판</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2025년 10월 17일 (금) 16:23 판</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l279">279번째 줄:</td>
<td colspan="2" class="diff-lineno">279번째 줄:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>=== <del style="font-weight: bold; text-decoration: none;">서버 </del>===</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>=== <ins style="font-weight: bold; text-decoration: none;">Flask + 오라클 연결하여 데이터 조회/입력/삭제/수정 </ins>===</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang=html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang=html></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
</table>
Devcafe
https://devcafe.co.kr/w/index.php?title=%ED%95%B8%EB%93%9C%EC%98%A8%ED%85%8C%EC%9D%B4%EB%B8%94_%EA%B7%B8%EB%A6%AC%EB%93%9C_ORACLE_DB_%EC%97%B0%EA%B2%B0_%EC%98%88%EC%A0%9C&diff=2328&oldid=prev
Devcafe: /* 화면 */
2025-10-17T07:22:19Z
<p><span dir="auto"><span class="autocomment">화면</span></span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ko">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← 이전 판</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2025년 10월 17일 (금) 16:22 판</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">1번째 줄:</td>
<td colspan="2" class="diff-lineno">1번째 줄:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>=== 화면 ===</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>=== <ins style="font-weight: bold; text-decoration: none;">기본 </ins>화면 ===</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang=html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang=html></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l278">278번째 줄:</td>
<td colspan="2" class="diff-lineno">278번째 줄:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== 서버 ===</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== 서버 ===</div></td></tr>
</table>
Devcafe
https://devcafe.co.kr/w/index.php?title=%ED%95%B8%EB%93%9C%EC%98%A8%ED%85%8C%EC%9D%B4%EB%B8%94_%EA%B7%B8%EB%A6%AC%EB%93%9C_ORACLE_DB_%EC%97%B0%EA%B2%B0_%EC%98%88%EC%A0%9C&diff=2327&oldid=prev
2025년 10월 17일 (금) 07:18에 Devcafe님의 편집
2025-10-17T07:18:30Z
<p></p>
<a href="https://devcafe.co.kr/w/index.php?title=%ED%95%B8%EB%93%9C%EC%98%A8%ED%85%8C%EC%9D%B4%EB%B8%94_%EA%B7%B8%EB%A6%AC%EB%93%9C_ORACLE_DB_%EC%97%B0%EA%B2%B0_%EC%98%88%EC%A0%9C&diff=2327&oldid=2326">차이 보기</a>
Devcafe
https://devcafe.co.kr/w/index.php?title=%ED%95%B8%EB%93%9C%EC%98%A8%ED%85%8C%EC%9D%B4%EB%B8%94_%EA%B7%B8%EB%A6%AC%EB%93%9C_ORACLE_DB_%EC%97%B0%EA%B2%B0_%EC%98%88%EC%A0%9C&diff=2326&oldid=prev
Devcafe: 새 문서: <source lang=html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Handsontable 데이터 그리드</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/12.3.1/handsontable.full.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/12.3.1/handsontable.full.min.js"></script> <style> * { m...
2025-10-17T07:05:09Z
<p>새 문서: <source lang=html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Handsontable 데이터 그리드</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/12.3.1/handsontable.full.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/12.3.1/handsontable.full.min.js"></script> <style> * { m...</p>
<p><b>새 문서</b></p><div><source lang=html><br />
<br />
<!DOCTYPE html><br />
<html lang="ko"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>Handsontable 데이터 그리드</title><br />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/12.3.1/handsontable.full.min.css"><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/12.3.1/handsontable.full.min.js"></script><br />
<style><br />
* {<br />
margin: 0;<br />
padding: 0;<br />
box-sizing: border-box;<br />
}<br />
<br />
body {<br />
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;<br />
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);<br />
padding: 20px;<br />
min-height: 100vh;<br />
}<br />
<br />
.container {<br />
max-width: 1400px;<br />
margin: 0 auto;<br />
background: white;<br />
border-radius: 15px;<br />
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);<br />
padding: 30px;<br />
}<br />
<br />
h1 {<br />
color: #333;<br />
margin-bottom: 10px;<br />
font-size: 28px;<br />
}<br />
<br />
.subtitle {<br />
color: #666;<br />
margin-bottom: 25px;<br />
font-size: 14px;<br />
}<br />
<br />
.controls {<br />
display: flex;<br />
gap: 10px;<br />
margin-bottom: 20px;<br />
flex-wrap: wrap;<br />
}<br />
<br />
button {<br />
padding: 10px 20px;<br />
border: none;<br />
border-radius: 5px;<br />
cursor: pointer;<br />
font-size: 14px;<br />
font-weight: 600;<br />
transition: all 0.3s;<br />
color: white;<br />
}<br />
<br />
.btn-add {<br />
background: #10b981;<br />
}<br />
<br />
.btn-add:hover {<br />
background: #059669;<br />
transform: translateY(-2px);<br />
}<br />
<br />
.btn-remove {<br />
background: #ef4444;<br />
}<br />
<br />
.btn-remove:hover {<br />
background: #dc2626;<br />
transform: translateY(-2px);<br />
}<br />
<br />
.btn-export {<br />
background: #3b82f6;<br />
}<br />
<br />
.btn-export:hover {<br />
background: #2563eb;<br />
transform: translateY(-2px);<br />
}<br />
<br />
.btn-clear {<br />
background: #f59e0b;<br />
}<br />
<br />
.btn-clear:hover {<br />
background: #d97706;<br />
transform: translateY(-2px);<br />
}<br />
<br />
#grid-container {<br />
width: 100%;<br />
height: 500px;<br />
overflow: hidden;<br />
}<br />
<br />
.info {<br />
margin-top: 20px;<br />
padding: 15px;<br />
background: #f3f4f6;<br />
border-radius: 8px;<br />
font-size: 14px;<br />
color: #374151;<br />
}<br />
<br />
.info-item {<br />
margin-bottom: 5px;<br />
}<br />
<br />
.info-item strong {<br />
color: #1f2937;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="container"><br />
<h1>📊 Handsontable 데이터 그리드</h1><br />
<p class="subtitle">실시간 데이터 편집 및 관리 시스템</p><br />
<br />
<div class="controls"><br />
<button class="btn-add" onclick="addRow()">➕ 행 추가</button><br />
<button class="btn-remove" onclick="removeRow()">➖ 선택 행 삭제</button><br />
<button class="btn-export" onclick="exportData()">💾 CSV 내보내기</button><br />
<button class="btn-clear" onclick="clearFilters()">🔄 필터 초기화</button><br />
</div><br />
<br />
<div id="grid-container"></div><br />
<br />
<div class="info"><br />
<div class="info-item"><strong>🔍 기능:</strong> 셀 편집, 정렬, 필터링, 행/열 크기 조정</div><br />
<div class="info-item"><strong>💡 팁:</strong> 컬럼 헤더를 클릭하여 정렬, 드롭다운에서 필터 선택 가능</div><br />
<div class="info-item"><strong>⌨️ 단축키:</strong> Ctrl+C(복사), Ctrl+V(붙여넣기), Delete(삭제)</div><br />
</div><br />
</div><br />
<br />
<script><br />
// 샘플 데이터 생성<br />
const data = [<br />
{ id: 1, name: '김철수', department: '개발팀', position: '팀장', salary: 5500, email: 'kim@example.com', joinDate: '2020-01-15' },<br />
{ id: 2, name: '이영희', department: '영업팀', position: '대리', salary: 4200, email: 'lee@example.com', joinDate: '2021-03-20' },<br />
{ id: 3, name: '박민수', department: '개발팀', position: '과장', salary: 4800, email: 'park@example.com', joinDate: '2019-07-10' },<br />
{ id: 4, name: '최지현', department: '인사팀', position: '사원', salary: 3500, email: 'choi@example.com', joinDate: '2022-05-01' },<br />
{ id: 5, name: '정수진', department: '마케팅팀', position: '차장', salary: 5200, email: 'jung@example.com', joinDate: '2018-11-30' },<br />
{ id: 6, name: '강동원', department: '영업팀', position: '부장', salary: 6000, email: 'kang@example.com', joinDate: '2017-02-14' },<br />
{ id: 7, name: '윤서영', department: '개발팀', position: '사원', salary: 3800, email: 'yoon@example.com', joinDate: '2023-01-10' },<br />
{ id: 8, name: '임하늘', department: '마케팅팀', position: '대리', salary: 4300, email: 'lim@example.com', joinDate: '2021-08-25' },<br />
{ id: 9, name: '송민호', department: '인사팀', position: '과장', salary: 4900, email: 'song@example.com', joinDate: '2020-06-15' },<br />
{ id: 10, name: '한지우', department: '영업팀', position: '사원', salary: 3600, email: 'han@example.com', joinDate: '2022-09-01' }<br />
];<br />
<br />
const container = document.getElementById('grid-container');<br />
<br />
const hot = new Handsontable(container, {<br />
data: data,<br />
colHeaders: ['ID', '이름', '부서', '직급', '급여(만원)', '이메일', '입사일'],<br />
columns: [<br />
{ data: 'id', type: 'numeric', readOnly: true },<br />
{ data: 'name', type: 'text' },<br />
{ <br />
data: 'department', <br />
type: 'dropdown',<br />
source: ['개발팀', '영업팀', '인사팀', '마케팅팀', '재무팀']<br />
},<br />
{ <br />
data: 'position', <br />
type: 'dropdown',<br />
source: ['사원', '대리', '과장', '차장', '부장', '팀장']<br />
},<br />
{ data: 'salary', type: 'numeric', numericFormat: { pattern: '0,0' } },<br />
{ data: 'email', type: 'text' },<br />
{ data: 'joinDate', type: 'date', dateFormat: 'YYYY-MM-DD' }<br />
],<br />
rowHeaders: true,<br />
width: '100%',<br />
height: 500,<br />
licenseKey: 'non-commercial-and-evaluation',<br />
dropdownMenu: true,<br />
filters: true,<br />
columnSorting: true,<br />
contextMenu: true,<br />
manualColumnResize: true,<br />
manualRowResize: true,<br />
stretchH: 'all',<br />
autoWrapRow: true,<br />
autoWrapCol: true,<br />
fillHandle: {<br />
direction: 'vertical',<br />
autoInsertRow: false<br />
},<br />
language: 'ko-KR'<br />
});<br />
<br />
// 행 추가 함수<br />
function addRow() {<br />
const newId = hot.countRows() + 1;<br />
const newRow = {<br />
id: newId,<br />
name: '',<br />
department: '개발팀',<br />
position: '사원',<br />
salary: 3000,<br />
email: '',<br />
joinDate: new Date().toISOString().split('T')[0]<br />
};<br />
hot.alter('insert_row_below', hot.countRows(), 1);<br />
hot.setDataAtRow(hot.countRows() - 1, [<br />
newRow.id, <br />
newRow.name, <br />
newRow.department, <br />
newRow.position, <br />
newRow.salary, <br />
newRow.email, <br />
newRow.joinDate<br />
]);<br />
}<br />
<br />
// 선택 행 삭제 함수<br />
function removeRow() {<br />
const selected = hot.getSelected();<br />
if (selected && selected.length > 0) {<br />
const startRow = selected[0][0];<br />
const endRow = selected[0][2];<br />
const rowCount = endRow - startRow + 1;<br />
<br />
if (confirm(`선택된 ${rowCount}개의 행을 삭제하시겠습니까?`)) {<br />
hot.alter('remove_row', startRow, rowCount);<br />
}<br />
} else {<br />
alert('삭제할 행을 선택해주세요.');<br />
}<br />
}<br />
<br />
// CSV 내보내기 함수<br />
function exportData() {<br />
const exportPlugin = hot.getPlugin('exportFile');<br />
exportPlugin.downloadFile('csv', {<br />
bom: true,<br />
columnDelimiter: ',',<br />
columnHeaders: true,<br />
exportHiddenColumns: false,<br />
exportHiddenRows: false,<br />
fileExtension: 'csv',<br />
filename: 'employee_data_[YYYY]-[MM]-[DD]',<br />
mimeType: 'text/csv',<br />
rowDelimiter: '\r\n',<br />
rowHeaders: false<br />
});<br />
}<br />
<br />
// 필터 초기화 함수<br />
function clearFilters() {<br />
const filtersPlugin = hot.getPlugin('filters');<br />
filtersPlugin.clearConditions();<br />
filtersPlugin.filter();<br />
hot.render();<br />
}<br />
<br />
// 데이터 변경 이벤트<br />
hot.addHook('afterChange', function(changes, source) {<br />
if (source !== 'loadData') {<br />
console.log('데이터 변경:', changes);<br />
}<br />
});<br />
</script><br />
</body><br />
</html><br />
<br />
</source></div>
Devcafe