๋ฐ์ดํฐ ์ ์ก ํ์์ ์ข ๋ฅ์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ฆฌํ๋ค.
๐ CSV (Comma Separated Values)
CSV
- ๊ฐ ํญ๋ชฉ์ comma๋ก ๊ตฌ๋ถํด ๋ฐ์ดํฐ๋ฅผ ํํํ๋ค.
- XML๊ณผ JSON์ ๋นํด ๋ฌธ์ฅ์ด ์งง์ผ๋ฏ๋ก, ๋ง์ ์์ ๋ฐ์ดํฐ ์ ์ก ์ ์ ๋ฆฌํ๋ค.
- ๊ฐ๊ฐ์ ๋ฐ์ดํฐ๊ฐ ์ด๋ค ๋ด์ฉ์ธ์ง ํ์
ํ๊ธฐ ์ด๋ ต๋ค.
๐ ์๋ฒ์ ํด๋ผ์ด์ธํธ๊ฐ '์๋ฒฝํ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ๊ณต์ ํ ๊ฒฝ์ฐ์๋ง' ๊ฐ์ฅ ๋น ๋ฅผ ์ ์์
CSV ๊ตฌ์กฐ ์์
<!--jsp ํ์ผ-->
<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>
1,๊น์คํฌ,A,25
2,ํ์คํฌ,B,26
3,๋ฐ์คํฌ,C,28
๐ XML (eXtensible Markup Language)
XML
- tag๋ก data๋ฅผ ํํํ๋ค.
๐ tag๋ฅผ ๋ณด๋ฉด ๊ฐ data๊ฐ ๋ฌด์์ ์๋ฏธํ๋์ง ํ์ ํ ์ ์๋ค. - tag์ ์ฌ์ฉ์ ์ ์ ์์ฑ์ ๋ฃ์ ์ ์์ผ๋ฏ๋ก ๋ณต์กํ data ์ ๋ฌ์ด ๊ฐ๋ฅํ๋ค.
- tag๋ฅผ ํฌํจํ๊ธฐ ๋๋ฌธ์ ์ฉ๋์ด ์ปค์ง๋ค๋ ๋จ์ ์ด ์กด์ฌํ๋ค.
XML ๊ตฌ์กฐ ์์
<!--studentsXML.jsp ํ์ผ-->
<?xml version="1.0" encoding="UTF-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
<students>
<student>
<id>1</id>
<name>๊น์คํฌ</name>
<class>A</class>
<age>25</age>
</student>
<student>
<id>2</id>
<name>ํ์คํฌ</name>
<class>B</class>
<age>26</age>
</student>
<student>
<id>3</id>
<name>๋ฐ์คํฌ</name>
<class>C</class>
<age>28</age>
</student>
</students>
XML ํ์์ ๋ฐ์ดํฐ ์ฌ์ฉ ์์ ๊ตฌํ

- addEventListenter๋ฅผ ์ฌ์ฉํ์ฌ ๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ๋ก XML ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๋๋ก ํ๋ค.
- CSV์ XML์ ๋ชจ๋ ๋ฐ์์ฌ ์ ์๋ response.text()๋ฅผ ์ด์ฉํด์ฃผ์๊ณ ,
๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ์ธ์๋ก ๋๊ฒจ makeList ๋ฉ์๋๋ฅผ ์คํํ๋ค. - makeList์์๋ ๋ด์ฅ ๊ฐ์ฒด DOMParser๋ฅผ ํ์ฉ, ๋ฐ์์จ .data๋ฅผ XML๋ก ๋ณํํ๋ค.
- querySelector๋ฅผ ํตํด id๋ฅผ ๋ฐ์์ค๊ณ , ํด๋นํ๋ id์ textContent๋ฅผ ๊ฐ์ ธ์ ์ถ๋ ฅํ๋ค.
๐ ์ฌ๊ธฐ์๋ id, name, class, age๊ฐ ๊ฐ๊ฐ ํ๋์ฉ๋ง ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๊ทธ๋ฅ querySelector๋ ๊ด์ฐฎ์ง๋ง
์ฌ๋ฌ ๊ฐ๊ฐ ์กด์ฌํ ๊ฐ๋ฅ์ฑ๋ ์๊ธฐ ๋๋ฌธ์ ์๋์ ๊ฐ์ด ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ์ ํํ๋ค.
querySelectorAll("id")[0] ํน์ getElementsByTagName("id")[0]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>XML</title>
<style type="text/css">
table {
width: 300px;
height: 100px;
}
th,
td {
text-align: center;
}
.first-view-bg {
background-color: darkgreen;
}
.first-view-color {
color: ivory;
}
</style>
</head>
<body>
<h3>ํ์ ์ ๋ณด</h3>
<button id="listBtn">ํ์ ์ ๋ณด ์กฐํ</button>
<table style="display: none">
<tr>
<th>ํ๋ฒ</th>
<th>์ด๋ฆ</th>
<th>๋ถ๋ฐ</th>
<th>๋์ด</th>
</tr>
<tbody id="studentinfo"></tbody>
</table>
<script>
let btn = document.querySelector("#listBtn"); // == document.getElementById("listBtn");
btn.addEventListener("click", function () {
// studentsXml.jsp ๋น๋๊ธฐ ํธ์ถ
fetch("studentsXml.jsp")
.then((response) => response.text()) // response.text()๋ CSV, XML ๋ชจ๋ ๋ฐ์์ฌ ์ ์์
.then((data) => makeList(data)) // makeList ํธ์ถ
});
function makeList(data) {
document.querySelector("table").setAttribute("style", "display: ;");
let tbody = document.querySelector("#studentinfo");
// XML parsing
let parser = new DOMParser(); // DOMParset ๋ด์ฅ ๊ฐ์ฒด
const xml = parser.parseFromString(data, "application/xml"); // ์
๋ ฅ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ XMLํ์์ผ๋ก ๋ฐ๊ฟ๋ผ!
initTable();
let students = xml.querySelectorAll("student");
students.forEach((student) => {
let tr = document.createElement("tr");
let idTd = document.createElement("td");
// id๊ฐ ์ฌ๋ฌ๊ฐ ์์ ๋๋ฅผ ๋๋นํ์ฌ All๋ก ๋ฐ์์จ ๋ค ์ธ๋ฑ์ค๋ก ์ ๊ทผ
// idTd.appendChild(document.createTextNode(student.querySelectorAll("id")[0].textContent));
idTd.appendChild(document.createTextNode(student.getElementsByTagName("id")[0].textContent));
tr.appendChild(idTd);
let nameTd = document.createElement("td");
nameTd.appendChild(document.createTextNode(student.querySelector("name").textContent));
tr.appendChild(nameTd);
let classTd = document.createElement("td");
classTd.appendChild(document.createTextNode(student.querySelector("class").textContent));
tr.appendChild(classTd);
let gradeTd = document.createElement("td");
gradeTd.appendChild(document.createTextNode(student.querySelector("age").textContent));
tr.appendChild(gradeTd);
tbody.appendChild(tr);
});
let first = document.querySelector("tr:first-child");
first.className = "first-view-bg";
first.classList.add("first-view-color");
let odd = document.querySelectorAll("tr:nth-child(even)");
odd.forEach(function (td) {
td.setAttribute("style", "background: lightgray;");
});
}
function initTable() {
let tbody = document.querySelector("#studentinfo");
let len = tbody.rows.length;
for (let i = len - 1; i >= 0; i--) {
tbody.deleteRow(i);
}
}
</script>
</body>
</html>
(CSV์ ๊ฐ์ง๋ง, CSV์ ๊ฒฝ์ฐ XML ํ์ฑ ๋์ '\n'์ ','๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ฝ๋๋ค๋ ๊ฒ์ด ์ฐจ์ด์ !!
๊ฑฐ์ ๋์ผํ๊ธฐ ๋๋ฌธ์ CSV๋ ์์ฑํ์ง ์์)
๐ JSON
JSON
- CSV์ XML์ ๋จ์ ์ ๊ทน๋ณตํ๋ค.
- JavaScript์์ ์ฌ์ฉํ๋ ๊ฐ์ฒด์ ํ์์ผ๋ก data๋ฅผ ํํํ๋ค.
- Ajax ์ฌ์ฉ ์ ๊ฑฐ์ ํ์ค์ผ๋ก ์ฌ์ฉํ๋ค.
JSON ๊ตฌ์กฐ ์์
<!--studentsJSON.jsp ํ์ผ-->
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
[
{
"id" : "1",
"name" : "๊น์คํฌ",
"class" : "A",
"grade" : 25
},
{
"id" : "2",
"name" : "ํ์คํฌ",
"class" : "B",
"grade" : 26
},
{
"id" : "3",
"name" : "๋ฐ์คํฌ",
"class" : "C",
"grade" : 28
}
]
JSON ํน์ง
- ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ๋ ์ธ ์ ์๋ ๊ฐ์ฅ ๊ฐ๋จํ ํ์ผ ํฌ๋งท์ด๋ค.
- ํ ์คํธ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ๋ณ๋ค.
- ์ฝ๊ธฐ ํธํ๋ค.
- Key์ Value ์์ผ๋ก ๊ตฌ์ฑ๋๋ค.
- ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ๋ ์ง๋ ฌํ, ์ญ์ง๋ ฌํ๋ฅผ ์ฌ์ฉํ๋ค.
- ํ๋ก๊ทธ๋จ ์ธ์ด๋ ํ๋ซํผ์ ์๊ด ์์ด ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค.
์ง๋ ฌํ(serialize)์ ์ญ์ง๋ ฌํ(deserialize)
์ง๋ ฌํ
- ๊ฐ์ฒด๋ฅผ ๋ฌธ์์ด๋ก ๋ณํํ๋ ์์ ์ด๋ค.
- ํต์ ํ ๋๋ ๋ฌธ์์ด๋ก ์ง๋ ฌํ ํ์ฌ ์ฃผ๊ณ ๋ฐ๋ ๊ฒ์ด ์์ ํ๋ค.
- ์ฌ์ฉ๋ฒ : JSON.stringify(JSON ํ์์ ๊ฐ์ฒด)
์ญ์ง๋ ฌํ
- ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ๋ณํํ๋ ์์ ์ด๋ค.
- ์๋ฒ๋ก๋ถํฐ ๋ฐ์ ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ์ญ์ง๋ ฌํ ํ์ฌ ์ฌ์ฉํ๋ค.
- ์ฌ์ฉ๋ฒ : JSON.parse(JSON ํ์์ ๋ฌธ์์ด)
JSON ํ์์ ๋ฐ์ดํฐ ์ฌ์ฉ ์์ ๊ตฌํ
- JSON์ ๊ฒฝ์ฐ response.json()์ ํตํด ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋ฉด ํจ์ฌ ํธ๋ฆฌํ๋ค.
- ์ฌ๊ธฐ์๋ student๊ฐ key : value ์ ํ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง ํ๋์ ๊ฐ์ฒด๋ก์ ๋ค์ด์ค๊ธฐ ๋๋ฌธ์
querySelector์ ๊ฐ์ ๋ฉ์๋ ๋์ , ๋ฐ๋ก student.id, student.name๊ณผ ๊ฐ์ด ๋ฐ๋ก ๊ฐ์ ์ฐพ์ ์ ์๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JSON</title>
<style type="text/css">
table {
width: 300px;
height: 100px;
}
th,
td {
text-align: center;
}
.first-view-bg {
background-color: blueviolet;
}
.first-view-color {
color: ivory;
}
</style>
</head>
<body>
<h3>SSAFY ๋ถ๋ฐ</h3>
<button id="listBtn">ํ์์ ๋ณด๋ณด๊ธฐ</button>
<table style="display: none">
<tr>
<th>ํ๋ฒ</th>
<th>์ด๋ฆ</th>
<th>๋ถ๋ฐ</th>
<th>์ฑ์ </th>
</tr>
<tbody id="studentinfo"></tbody>
</table>
<script>
let btn = document.querySelector("#listBtn");
btn.addEventListener("click", function () {
// studentsJSON.jsp ๋น๋๊ธฐ ํธ์ถ
fetch("studentsJSON.jsp")
.then((response) => response.json()) // CSV, XML๊ณผ์ ์ฐจ์ด์
.then((data) => makeList(data))
});
function makeList(data) {
document.querySelector("table").setAttribute("style", "display: ;");
let tbody = document.querySelector("#studentinfo");
initTable();
data.forEach((student) => {
let tr = document.createElement("tr");
let idTd = document.createElement("td");
idTd.appendChild(document.createTextNode(student.id)); // student๊ฐ ํ๋์ JSON ๊ฐ์ฒด์ด๋ฏ๋ก key๋ฅผ ํตํด ๋ฐ๋ก value๋ฅผ ๋ฐ์์ฌ ์ ์๋ค.
tr.appendChild(idTd);
let nameTd = document.createElement("td");
nameTd.appendChild(document.createTextNode(student.name));
tr.appendChild(nameTd);
let classTd = document.createElement("td");
classTd.appendChild(document.createTextNode(student.["class"])); // [""]์ ๊ฐ์ ํ์์ผ๋ก๋ ๊ฐ๋ฅ
tr.appendChild(classTd);
let gradeTd = document.createElement("td");
gradeTd.appendChild(document.createTextNode(student.grade));
tr.appendChild(gradeTd);
tbody.appendChild(tr);
});
let first = document.querySelector("tr:first-child");
first.className = "first-view-bg";
first.classList.add("first-view-color");
let odd = document.querySelectorAll("tr:nth-child(even)");
odd.forEach(function (td) {
td.setAttribute("style", "background: lightgray;");
});
}
function initTable() {
let tbody = document.querySelector("#studentinfo");
let len = tbody.rows.length;
for (let i = len - 1; i >= 0; i--) {
tbody.deleteRow(i);
}
}
</script>
</body>
</html>
๐ ์ ๋ฆฌ
CSV๋ comma๋ก ๊ตฌ๋ถํ๋ ๋ฌธ์์ด, XML์ ํ๊ทธ๋ก ๋์ด์๋ ๋ฐ์ดํฐ,
JSON์ JavaScript์ ๊ฐ์ฒด๋ก ํ๋กํผํฐ์ ์ด๋ฆ๊ณผ ๊ฐ์ผ๋ก ์ด๋ฃจ์ด์ง๋ค.
CSV๋ ๋ฐ์ดํฐ ์ฉ๋์ด ๊ฐ์ฅ ์์ง๋ง, ๋ด์ฉ์ ํ์ ํ๊ธฐ ์ด๋ ต๋ค๋ ๋จ์ ์ด ์๊ณ ,
XML์ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋ด์ฉ ํ์ ๊ณผ ๋ณต์กํ ๋ฐ์ดํฐ ์ ๋ฌ์ ์ ๋ฆฌํ ๋ฐ๋ฉด, ์ฉ๋์ด ๊ฐ์ฅ ํฌ๋ค๋ ๋จ์ ์ด ์๋ค.
JSON์ CSV์ XML์ ๋จ์ ์ ๋ชจ๋ ๊ทน๋ณตํ ๋ฐ์ดํฐ ํ์์ด๋ค.
CSV์ XML์ ๋ชจ๋ response.text()๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์จ๋ค๋ ๊ณตํต์ ์ด ์์ง๋ง,
CSV๋ '\n'์ \,\๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตฌ๋ถํ๊ณ , XML์ DOMParser์ ์ฌ์ฉํ์ฌ ๊ตฌ๋ถํ์ฌ ์ฌ์ฉํ๋ค๋ ์ฐจ์ด๊ฐ ์กด์ฌํ๋ค.
JSON์ response.json()์ผ๋ก ๋ฐ์์จ ๋ค, JSON ๊ฐ์ฒด์ ํค๋ฅผ ํตํด ๋ฐ๋ก value๋ฅผ ์ฐพ์ ์ ์๋ค.
'5๏ธโฃ CS > Web' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Web] SSR๊ณผ CSR (feat. MPA์ SPA) (2) | 2022.09.29 |
---|---|
[Web] ์ฟ ํค์ ์ธ์ (0) | 2022.09.22 |
๋๊ธ