코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.
서버에서 html을 미리 완성해서 유저에게 보내는 것
예시) 가격과 상품명을 이미 명시해서 보내는 것
서버에 비어있는 html과 데이터를 유저에게 보내고 자바스크립트 이용해서 유저의 웹 브라우저 안에서 html을 완성하는 것
예시) html상에서는 가격과 상품명 단순하게 명시하고 자세한 데이터값은 자바 스크립트로 처리하는 것
var computer4 = {brand : '삼성', inch : 15.6, color : 'white'}
document.querySelector('.brand').innerHTML = computer4['brand'];
위 예시가 client-side rendering의 예시임.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="card-group container">
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
</div>
<script>
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
</script>
</body>
</html>
[내가 풀은 답]
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
for(let i = 0; i < 3; i++){
document.querySelectorAll('.title')[i].innerHTML = products[i]['title'];
document.querySelectorAll('.price')[i].innerHTML = products[i]['price'];
//풀은 과정
/*
document.querySelectorAll('.title')[0].innerHTML = products[0]['title'];
document.querySelectorAll('.price')[0].innerHTML = products[0]['price'];
document.querySelectorAll('.title')[1].innerHTML = products[1]['title'];
document.querySelectorAll('.price')[1].innerHTML = products[1]['price'];
document.querySelectorAll('.title')[2].innerHTML = products[2]['title'];
document.querySelectorAll('.price')[2].innerHTML = products[2]['price'];
*/
//document.querySelector('.title').innerHTML = products[1]['title'];
//document.querySelector('.price').innerHTML = products[1]['price'];
[해답]
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
for(let i = 0; i < 3; i++){
document.querySelectorAll('.card-body h5')[i].innerHTML = products[i]['title'];
document.querySelectorAll('.card-body p')[i].innerHTML = '가격 : ' + products[i].price + '원';
}
☞ CSS선택자 사용이 가능하다.
document.querySelectorAll('.card-body p')[i].innerHTML = '가격 : ' + products[i].price + '원';
☞ 문자열의 경우 + 하면 합쳐진다. 1 + 2 와 1 + '2'는 다르다.
var a = '반가워' //a를 안녕과 잘부탁해 사이에 넣고싶다면?
안녕[변수a]잘부탁해
'안녕' + a + '잘부탁해'
`안녕${a}잘부탁해`
☞ 백틱(`)을 사용하면 이렇게 문자 중간에 표현이 가능하다.
오늘의 한줄평 : 조금, 아주조금 실력이 향상된거같아서 기분이 좋다.
출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui