today_is
[ js ] json 파일로 화면 구현 본문
오늘의 목표
json 파일을 이용하여, 화면 구현해보자
01 관련 기초 문법 익히기
element
div 를 이용하여 데이터를 미리 구성해둔 다음,
그 데이터를 출력하는 방법에 대해 배워보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>element.html</h1>
<hr />
<div id="root">
<div class="item">
<div class="name">이지은</div>
<div class="age">31</div>
</div>
<div class="item">
<div class="name">홍진호</div>
<div class="age">42</div>
</div>
<div class="item">
<div class="name">나단비</div>
<div class="age">5</div>
</div>
</div>
<script>
// 1) id 를 지정하여 단일 요소를 불러오기
// 문서상에서 id는 유일해야하기 때문에, 반환형은 단일 요소
const root = document.getElementById("root");
// 2) css 선택자를 이용하여 단일 요소를 불러오기
// 만약, 선택자로 지정한 요소가 여러개라면, 가장 첫번째 요소 하나만 불러온다
const firstItem = document.querySelector(".item");
// 3) css 선택자를 이용하여 여러 요소를 한번에 불러오기
// 이때, 반환형은 NodeList 타입이며, forEach 정도만 호출가능
// 배열로 형변환을 원한다면 Array.from(nodeList) 를 이용하면 된다
const itemList = document.querySelectorAll("#root > .item");
console.log(root);
console.log(firstItem);
console.log(itemList);
itemList.forEach((item) => {
console.log(item.querySelector(".name").innerText);
});
const itemArray = Array.from(itemList); // 배열로 바꾼다
const dataArray = itemArray.map((item) => {
// 배열로 map 함수 호출가능
const ob = {};
ob.name = item.querySelector(".name").innerText;// innerText : 태그 없이 내용만 가져옴
// innerHTML : 사용된 태그까지 다 가져옴
ob.age = +item.querySelector(".age").innerText; // 문자열 앞에 (+)를 붙이면 숫자로 변경됨(parseInt와 동일)
return ob;
});
console.log(dataArray); // 값만으로 구성한 객체 배열
</script>
</body>
</html>
appendChild
appendChild() : 새로운 요소를 추가하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>6_appendChild.html</h1>
<hr>
<div id="root"></div>
<script>
// 자바스크립트에서 HTML 요소를 생성해서 문서에 반영할 수 있다
// 1) document 내장함수 createElement 활용
const e1 = document.createElement('div') // 태그이름
e1.className = 'item'
e1.innerText = '돈까스'
root.appendChild(e1) // root 에 자식요소로 e1 을 추가
// 2) innerHTML 을 이용하여 문자열 형식으로 태그를 작성하여 추가하기
const e2 = '<div class="item">초밥</div>'
root.innerHTML += e2
// 3) 백틱 문자열(``)을 이용하여 추가하기
// JSP 에서는 EL 문법과 겹치기 때문에 사용할 수 없고,
// .html 과 .js 에서는 이용가능함
const food = '라멘'
const e3 = `<div class="item">${food}</div>`
root.innerHTML += e3
// appendChild 는 신규요소를 마지막에 추가함 <> createElement
// 만약, 추가하는 요소가 이미 문서에서 불러온 요소라면 마지막으로 자리를 옮긴다
const item1 = document.querySelector('.item')
root.appendChild(item1) // 새로고침하면 원래 있던 요소는 맨 마지막으로 감(재배열할때 사용 가능)
const tag = document.querySelector('.item').outerHTML // 시작 태그 ~ 마무리 태그 까지 전부
root.innerHTML += tag
</script>
</body>
</html>
02 데이터를 직접 넣고 화면에 출력해보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#root {
width: 900px;
margin: auto;
}
.item {
display: flex;
border: 2px solid black;
margin: 10px;
padding: 10px;
}
.item > div {
flex: 1;
}
.item > div:nth-child(2) {
flex: 3;
}
</style>
</head>
<body>
<h1>7_ JS 화면 구현</h1>
<hr />
<!--
먼저 출력 형식 틀은 html 로 만들어둔 다음,
script 로 데이터를 만들어 놓고 forEach 를 이용하여 원하는 틀대로 데이터 출력시켜보기
-->
<div id="root"></div>
<script>
// 스프링에서 myBatis 로 select 를 수행한 결과를 List<DTO>로 받았다고 가정
const arr = [
{
idx: 1,
name: "새벽 겨울 딸기 500G(팩)",
salesPrice: 9990,
grade: 4.6,
},
{
idx: 2,
name: "알큰 딸기 700G(박스)",
salesPrice: 14990,
grade: 4.5,
},
{
idx: 3,
name: "살살 녹는 장희 딸기 750G(팩)",
salesPrice: 22990,
grade: 4.1,
},
{
idx: 4,
name: "슈퍼푸드 블루베리(칠레) 310G(팩)",
salesPrice: 9990,
grade: 4.6,
},
];
console.log(arr);
// arr 에 있던 요소들을 div root 에 넣기
const root = document.getElementById("root");
arr.forEach((dto) => {
let tag = "";
tag += `<div class="item">`; // 백틱(``) 을 이용
tag += ` <div class="idx">${dto.idx}</div>`;
tag += ` <div class="name">${dto.name}</div>`;
tag += ` <div class="salesPrice">${dto.salesPrice}</div>`;
tag += ` <div class="grade">${dto.grade}</div>`;
tag += `</div>`;
root.innerHTML += tag;
});
</script>
</body>
</html>
03 다른 사이트에 있는 json 파일 내용을 출력하기
장점
- 미리 데이터를 준비하지 않아도 된다.
- 데이터를 내가 직접 관리할 필요가 없다
주의할 점
- 해당 파일이 어떤 내용을 가지고 있는지 먼저 파악해야한다 (이름이 일치해야 출력할 수 있기 때문)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#root {
width: 900px;
margin: auto;
}
.item {
display: flex;
border: 2px solid grey;
margin: 20px;
padding: 20px;
background-color: ivory;
}
.item > div {
flex: 1;
}
.item:hover {
background-color: rgb(123, 155, 181);
border: 2px solid black;
color: rgb(255, 255, 255);
font-weight: bold;
}
.item > div:nth-child(2) {
flex: 1;
}
</style>
</head>
<body>
<h1>JSON 파일 내용 불러와서 화면에 출력하기</h1>
<hr />
<div id="root"></div>
<script src="homeplus(berry).js"></script>
<script>
console.log(arr);
const root = document.getElementById("root");
// 원하는 조건으로 정렬한 이후에 json 데이터로 반영할 수 있다
// 가격순 또는 상품명순 으로 정렬 가능
// 이러한 기능들은 특정 기능을 함수로 만들어두는 것이 좋음
arr.sort((a, b) => a.price - b.price)
// json 데이터를 화면에 반영하는 코드
arr.forEach((dto) => {
let tag = "";
tag += `<div class="item">`;
tag += ` <div class="name">${dto.name}</div>`;
tag += ` <div class="price">${dto.price}원</div>`;
tag += ` <div class="salePrice">${dto.salePrice}원</div>`;
tag += ` <div class="salesCount">${dto.salesCount}</div>`;
tag += ` <div class="grade">${dto.grade}점</div>`;
tag += ` <div class="reviewCount">${dto.reviewCount}</div>`;
tag += `</div>`;
root.innerHTML += tag;
});
</script>
</body>
</html>
study_review
미리 데이터를 직접 준비하지 않아도 된다는 점이 너무 편하다
그러나, 여태껏 DB에 있는 데이터를 불러와서 출력하는 경우가 많았기 때문에,
dto.컬럼이름으로 값을 불러오기만 하면 됐었는데
다른 사이트에 있는 데이터의 속성에는 어떤 것이 있는지 미리 파악하는 것이 좋은 방법이라 생각한다
'front' 카테고리의 다른 글
| [ javascript ] hidden 을 이용한 다중필터 (0) | 2024.02.21 |
|---|---|
| [ javascript - AJAX ] (0) | 2024.02.20 |
| [ javascript ] 검색필터 (0) | 2024.01.26 |
| [ javascript ] 클릭이벤트 (0) | 2024.01.24 |
| [ javascript ] 정렬 (0) | 2024.01.22 |
'front' Related Articles
more
