Javascript 공부 #4

Array / Object 자료형

---

여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형들

 

 

 

배열 Array

---

var car = ['소나타', 50000, 'white'];

다음과 같이 배열에 저장 가능

 

 

Object

---

var car2 = { name : '소나타', price : 50000 };

딕셔너리 처럼 사용

자료를 꺼내쓸 때는 car2[’name’] 또는 car2.name와 같이 사용할 수 있다.

 

 

 

실제 웹서비스 개발 2가지 방식

---

사용자가 사이트로 접속하면 HTML 을 잘 만들어서 보내주는 것을 웹서비스 라고 한다.

HTML을 누가 완성하는지에 따라 개방방식의 차이가 존재

 

1. 서버에서 HTML을 미리 완성해서 고객에게 보내줌

이러한 방식을 server-side rendering 이라고 한다.

 

 

2. 서버가 비어있는 HTML과 데이터만 보내줌

그리고 자바스크립트를 이용하여 고객 브라우저 안에서 HTML을 완성한다.

이러한 방식을 client-side rendering 이라고 한다.

요즘은 2번 client-side rendering 이 유행이라 데이터를 서버에서 가져와서 데이터바인딩 하는 방법을 배우고 있는 것

 

하지만 데이터바인딩을 하는 문법이 너무 길고 복잡하기에 작은 사이트는 자바스크립트 만으로도 커버가 가능한데, 프로젝트의 규모가 클 경우 사람들이 라이브러리를 설치해서 사용하는 것이다.

jQuery, React, Vue 등 사용하면 코드가 짧아진다.

 

1번, 2번 방식 둘다 각각 장단점이 존재한다.

 

 

 

Array, Object 활용한 데이터바인딩 예제

---

 

 

<div class="card-group container">
  <div class="card">
    <img src="https://via.placeholder.com/600">
    <div class="card-body">
      <h5>Card title</h5>
      <p>가격 : 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>Card title</h5>
      <p>가격 : 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>Card title</h5>
      <p>가격 : 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>

위의 HTML 코드에 이름과 가격 데이터바인딩

var cardTitle = document.querySelectorAll(".card-body h5");
      var cardPrice = document.querySelectorAll(".card-body p");
      var cardNum = cardTitle.length;
      console.log(cardNum);

      for (let i = 0; i < cardNum; i++) {
        cardTitle[i].innerHTML = products[i].title;
        cardPrice[i].innerHTML = "가격 : " + products[i].price;
      }

HTML 코드에 class 달아준 후, 위와같이 코드 완성

 

 

 

문자열 중간에 변수 삽입하고 싶을 때

`` (벡틱) 사용하면 된다.

 

 

 

Select Input

---

<form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>모자</option>
      <option>셔츠</option>
    </select>
</form>

<select> 는 <input> 과 같은데, 사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 <input> 이다.

그냥 <input>을 사용하면 사용자에게 정해진 답변을 강제할 수 있다는 장점이 있다.

선택지는 <option>을 사용하면 된다.

• <select> 태그도 선택시 input, change 이벤트가 발생한다.
• <select> 태그도 .value 로 유저가 입력한 값 가져올 수 있다.

 

 

동적으로 태그 생성하기

---

var pants = [28, 30, 32, 35];
      var shirts = [95, 100, 105];
      var cap = ["free-size"];

      $(".form-select")
        .eq(0)
        .on("change", function () {
          if ($(this).val() == "shirts") {
            $(".form-select").eq(1).html("");
            shirts.forEach(function (data) {
              $(".form-select").eq(1).append(`<option>${data}</option>`);
            });
          } else if ($(this).val() == "cap") {
            $(".form-select").eq(1).html("");
            cap.forEach(function (data) {
              $(".form-select").eq(1).append(`<option>${data}</option>`);
            });
          } else if ($(this).val() == "pants") {
            $(".form-select").eq(1).html("");
            pants.forEach(function (data) {
              $(".form-select").eq(1).append(`<option>${data}</option>`);
            });
          }
        });

위와 같이 서버에서 배열형식으로 데이터들을 받아왔다 가정하고

 

forEach() 반복문을 사용하여 배열안에 있는 값들을 순차적으로 가져올 수 있다.

forEach() 함수는 괄호안에 콜백함수 사용하여 위와같은 문법으로 사용하는 것을 볼 수 있다.

콜백함수 안의 파라미터는 2개까지 작명 가능한데 첫 번째 파라미터는 반복문을 돌 때마다 array 안에 있던 하나하나의 데이터가 되고, 두 번째 파라미터는 반복문을 돌 때마다 0부터 1씩 증가하는 정수가 된다.

 

 

 

object 자료형 사용할 때는 for in 반복문을 사용해준다

var obj = { name : 'kim', age : 20 }

for (var key in obj){
	console.log(key);
	console.log(obj[key]);
}

위와같이 obj 안에 있는 key 와 value 출력할 수 있다.

 

 

반복문 사용 용도

1. 코드 복붙하고 싶을 때
2. array, object 자료 전부 꺼내서 쓰고 싶을 때

 

 

arrow function 문법

---

콜백함수 만들 때 자주 쓰는 방식인 arrow function

var pants = [28, 30, 32];

pants.forEach(function(a){
  console.log(a)
});

pants.forEach((a) => {
  console.log(a)
});

function 키워드 대신 ⇒ 를 사용한다. 

 

arrow function은 파라미터가 하나이면 () 소괄호 생략해도 괜찮다.

함수 중괄호 안에 return 한 줄 밖에 없으면 {} return 동시에 생략해도 괜찮다. 간결하기 때문에 콜백함수에 자주 사용된다.

 

 

그냥 함수와 arrow function 의 기능차이 하나가 있는데

함수 안에서 this를 써야하는 경우

• 그냥 함수는 함수 안에서 this 를 알맞게 재정의 해준다.
• arrow function 은 함수 안에서 this 를 재정의해주지 않고 바깥에 있던 this 를 그대로 쓴다.

그래서 이벤트리스너 콜백함수 안에 this 를 써야할 때 arrow function 을 쓰면 의도와 다르게 동작할 수도 있다. 그런곳에선 쓰면 안된다.