자바스크립트 기초 (9)

새벽로즈·2023년 10월 10일

TIL 자바스크립트

TIL

목록 보기

21/72

코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

server-side rendering

서버에서 html을 미리 완성해서 유저에게 보내는 것
예시) 가격과 상품명을 이미 명시해서 보내는 것

client-side rendering

서버에 비어있는 html과 데이터를 유저에게 보내고 자바스크립트 이용해서 유저의 웹 브라우저 안에서 html을 완성하는 것
예시) html상에서는 가격과 상품명 단순하게 명시하고 자세한 데이터값은 자바 스크립트로 처리하는 것

요즘 client-side rendering을 많이 사용하는 추세임.

 var computer4 = {brand : '삼성', inch : 15.6, color : 'white'}
  document.querySelector('.brand').innerHTML = computer4['brand'];

위 예시가 client-side rendering의 예시임.

데이터 바인딩 : html에 데이터를 꽂는 것

자바스크립트로 데이터 넣기

<!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

새벽로즈

귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰