[코딩애플] JavaScript 강의 정리 (Level3 1강 ~ 2강)

이언덕·2024년 4월 30일
스터디코딩애플프론트엔드

코딩애플

목록 보기
14/37
post-thumbnail

1강 / Array 와 Object 자료형

let car = '소나타';
let carPrice = 50000;
let carColor = 'white';

갑자기 여러 데이터들을 변수에 저장할 일이 생겼다.
그럼 코드 위처럼 짜도 되겠지만
자료가 몇십개면 변수도 몇십개 귀찮게 만들어야 될 것 같다.
그냥 한 변수에 여러개의 자료를 저장하는 방법도 있다.

Array 자료형

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

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

대괄호를 열고 자료를 콤마로 구분해서 집어넣으면 된다.
그럼 여러 자료를 엑셀처럼 저장가능하다.


let car = ['소나타', 50000, 'white'];
console.log(car[1]);

array 자료에서 데이터 뽑을 땐 대괄호를 뒤에 붙이면 된다.

  • [x] 라고 쓰면 x번째 자료를 출력해준다.

한번 위 코드를 콘솔에 출력해보자


let car = ['소나타', 50000, 'white'];
car[1] = 60000;
console.log(car[1]);

array 자료를 수정하고 싶으면 등호 이용해서 수정하면 된다.
자료 추가도 된다.
그래서 결론은 여러 자료를 변수 하나에 저장하고 싶으면 array를 사용하면 편리하다.

array 수정

array 추가

let car = ['소나타', 50000, 'white'];
car[3] = 60000;
console.log(car);

위 설명만으로 부족하니 Array에 대해 사이트를 참고하여 수정, 추가, 삭제 등을 어떻게 하는지 & Array의 또 다른 것들 또한 알아보자
Array


Object 자료형

이것도  여러가지 자료를 한곳에 저장하고 싶을 때 사용하는 자료형이다.

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

중괄호를 열고 자료를 콤마로 구분해서 집어넣으면 된다.
그런데 자료 왼쪽에 자료의 이름을 붙여서 저장해야한다.
자료의 이름은 key, 실제 자료는 value라고 부른다.
그래서 object 자료형은 key : value 형태로 자료를 저장할 수 있다.


let car2 = { name : '소나타', price : 50000 };
console.log(car2['name']);
console.log(car2.name);

array 자료에서 데이터 뽑을 땐 대괄호를 뒤에 붙이면 되는데
object 자료에서는 [자료이름] 이렇게 써야한다.
.자료이름 이렇게 써도 가능하다.

한번 위 코드를 콘솔에 출력해보자

실제 출력되는 것은 value 부분이 콘솔에 출력되는 것을 볼 수 있다.


let car2 = { name : '소나타', price : 50000 };
car2['name'] = '그랜저';
console.log(car2['name']);

object 자료를 수정하고 싶으면 등호 이용해서 수정하면 된다.
자료 추가도 된다.
그래서 결론은 여러 자료를 변수 하나에 저장하고 싶으면 object 사용해도 편리하다.

object 수정

object 추가

let car2 = { name : '소나타', price : 50000 };
car2.option = 'full'
console.log(car2);

위 설명만으로 부족하니 Object에 대해 사이트를 참고하여 수정, 추가, 삭제 등을 어떻게 하는지 & Object의 또 다른 것들 또한 알아보자
Object


Array/Object 차이

그래서 둘 중 아무거나 골라서 맘대로 쓰면 되는데
상품명, 가격, 연식, 색상, 옵션여부, 카드할인여부 ... (뒤에 10개 더 있음)
이런 데이터를 변수하나에 보관하고 싶으면 array 써야할까? object 써야할까?
나라면 object 사용할 것 같다.

let car = ['소나타', 50000, 2030, 'white', false];

▲ array쓰면 저장시엔 간단하겠지만
나중에 자료 뽑을 때 약간 어렵다.
가격뽑을 때 "가격자료가 몇번째 위치에 있었지?" 를 기억해내야하기 때문이다.


let car = { name : '소나타', price : 50000, year : 2030 };

▲ object로 넣으면 저장은 귀찮겠지만
가격뽑을 때 "가격의 key 이름이 뭐였지" 를 기억하면 된다.
우리가 컴퓨터가 아니라 인간이면 순서기억보다 key값 기억해내는게 훨씬 쉬울 것이다.
이런 차이점이 있으니 array 쓸지 object 쓸지 잘 고민해봐야한다.


Array/Object 차이 2

array는 순서개념이 있다. (왼쪽에 적을 수록 더 앞에 있는 자료임)
object는 순서개념이 없다. (가장 왼쪽에 적었다고 해도 1빠임을 보장해주지 않는다.)
그래서 array 자료는 순서개념이 있다보니

  • 가나다순 정렬
  • x번 자료부터 x번 자료까지 자르기
  • x번 자료 바꾸기
  • 맨 뒤, 맨 앞에 자료 넣기
  • 원하는 자료가 들어있나 검색
    순서개념이 필요한 많은 것들을 할 수 있다.
    array자료.sort() 하면 가나다순 정렬되고
    array자료.slice(x, y) 하면 x번부터 y번 전까지 자를 수 있고
    array자료.push(x) 하면 x를 맨 뒤에 입력할 수 있고
    이런 기본함수들이 준비되어있다.
    array 자료 조작이 필요할 때 검색해서 써보도록 하자.

array에 대한 함수를 더 알아보고 싶으면 아래 사이트를 참고하면 된다.
array 함수

array 조작할 수 있다면 object 또한 조작할 수 있다. 아래 사이트를 참고하여 object에 대한 함수를 알아보자
object 함수


숙제

<div class="container mt-3">
  <div class="card p-3">
    <span>상품명</span>
    <span>가격</span>
  </div>
</div>
<script>
  let car2 = { name : '소나타', price : 50000 }
</script>

여기서 car2 에 저장된 소나타라는 상품명과 50000이라는 가격을 뽑아서 html에 집어넣어보십시오.
자바스크립트 작성해서 구현합시다.


html에 클래스 생성

<div class="container mt-3">
  <div class="card p-3">
    <span class="product">상품명</span>
    <span class="price">가격</span>
  </div>
</div>

js에 product price인 클래스 요소 변수로 지정해서 가져오기

const product = document.querySelector(".product");
const price = document.querySelector(".price");

각 맞는 요소에 object를 불러와서 HTML로 집어넣기

product.innerHTML = car2.name;
price.innerHTML = car2.price;

상품명 / 가격이 object의 value로 대체된 것을 볼 수 있다.


index 전체코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Level3</title>
  </head>
  <body>
    <div class="container mt-3">
      <div class="card p-3">
        <span class="product">상품명</span>
        <span class="price">가격</span>
      </div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>

index.js

const product = document.querySelector(".product");
const price = document.querySelector(".price");

let car2 = { name: "소나타", price: 50000 };

product.innerHTML = car2.name;
price.innerHTML = car2.price;


2강 / 약간 복잡한 Array & Object 데이터바인딩

조금 더 복잡한 자료를 다뤄봅시다

<div class="container mt-3">
  <div class="card p-3">
    <span class="product">상품명</span>
    <span class="price">가격</span>
  </div>
</div>

<script>
const product = document.querySelector(".product");
const price = document.querySelector(".price");

let car2 = { name: "소나타", price: 50000 };

product.innerHTML = car2.name;
price.innerHTML = car2.price;
</script>

car2 에 저장된 자료를 저렇게 복잡하게 바꿔보자.
왜 저런게 가능하냐면
object 안에 array/object도 집어넣을 수 있어서 그렇다.
array 안에 array/object 넣어도 상관없다.


Q. 그럼 car2 에 있는 50000 이라는 데이터를 뽑아서 html의 가격표시부분에 꽂아넣고 싶으면 코드를 어떻게 짜야할까?

const product = document.querySelector(".product");
const price = document.querySelector(".price");

let car2 = { name: "소나타", price: [50000, 3000, 4000] };

product.innerHTML = car2.name;
price.innerHTML = car2.price[0];

이런식으로 object형식으로 먼저 출력해준뒤 그 안에서 array형식으로 출력해주면 50000이 화면에 나타나는 것을 볼 수 있다.


복잡한 데이터에서 자료꺼내려면

console.log 써서 복잡한 자료를 출력부터해보면 된다.
콘솔창에선 복잡한 자료도 어떻게 생겼는지 쉽게 축약해서 알려주는데
우리는 여기서 시작기호만 잘보면 됩니다.

그래서 console.log(car2) 해보았는데
시작기호가 { 이거면 무조건 object 자료형이다! (무조건은 아니고 90% 확률)
그래서 object 자료에서 자료꺼내는 문법부터 작성하면 된다.



한번 console.log(car2.price) 도 출력 해보았는데
시작기호가 [ 이거면 무조건 array 자료형이다. (무조건은 아니고 90% 확률)
그래서 array 자료에서 자료꺼내는 문법부터 작성하면 된다.
console.log(car2.price[1]) 이렇게 했더니 3000 잘 출력되고
console.log(car2.price[0]) 이렇게 했더니 50000 잘 출력되는 것을 볼 수 있다.
이렇게 하나하나 데이터 뽑아가면 아무리 어려운 것도 잘 뽑을 수 있다!


근데 왜 배우는 걸까?

Q. 그냥 html에 50000 이렇게 하드코딩해놓으면 안될까?
A. 안바뀌면 그래도 되는데 실제 사이트는 html이 맨날 바뀌어야합니다.

예를 들어 차에 대한 쇼핑몰을 만든다고 하면 차 가격이 맨날 바뀔 것이다.
가격을 매일매일 서버에서 받아와서 html로 보여줘야할텐데
그러면 html 안에 50000 이렇게 해놓거나
document.querySelector('.price').innerHTML = 50000;
이렇게 대충 적어놓으면 나중에 수정하기 어렵다.
그래서 "서버에서 받아온 데이터를 저기 꽂아넣어주세요~" 라고 코드짜는 중인 것일 뿐이다!


실제 웹서비스 개발할 땐 2개 방식이 있는데

그냥 누가 내 사이트로 접속하면 html 이쁘게 만들어서 보내주는걸 웹서비스라고 한다.
근데 html을 누가 완성하는지에 따라 개발방식의 차이가 있다.

1. 서버에서 html을 미리 완성해서 고객에게 보내줌
이걸 server-side rendering 이라고 한다.



2. 서버가 비어있는 html과 데이터만 보내줌
그리고 자바스크립트를 이용해서 고객 브라우저안에서 html을 완성한다.
이걸 client-side rendering 이라고 한다.


요즘은 2번이 유행이라 우리도 데이터를 서버에서 가져와서 데이터바인딩하는 방법을 배우고 있는 것이다.
근데 데이터바인딩하는 문법이 너무 길고 복잡하기 때문에 작은 사이트는 쌩 자바스크립트 써도 커버가능한데
큰거 만들 땐 사람들이 라이브러리 설치해서 쓰는 것이다.
jQuery, React, Vue 이런거 사용하면 코드가 짧아진다.
더 최근엔 2번에 질려서 또 1번으로 돌아가는 움직임이 있다.
각각 장단점이 있다고 보면 될 것 같다.


숙제

list.html 만들고 하단 코드를 복사붙여넣기합니다.
그럼 상품 3개를 진열할 수 있는 카드레이아웃이 나옵니다. (bootstrap 필요)
products 변수안에 상품데이터도 준비되어있는데
자바스크립트를 열심히 짜서 3개의 상품 제목, 가격을 html에 전부 꽂아넣어오십시오.

<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>
let products = [
  { id : 0, price : 70000, title : 'Blossom Dress' },
  { id : 1, price : 50000, title : 'Springfield Shirt' },
  { id : 2, price : 60000, title : 'Black Monastery' }
];

HTML의 제목 & 가격에 클래스 생성

<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>

<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>

<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>

제목 & 가격 요소에 대한 변수 지정

const cardTitle = document.querySelectorAll(".title");
const cardPrice = document.querySelectorAll(".price");

array안에 있는 object 뽑기

현재 products가 어떻게 생겼는지 알기 위해 콘솔에 찍어보았다.

console.log(products);


이것만으로는 array안에 object가 있는 것을 파악하기 어렵기 때문에 array에서 첫번째거를 뽑아보았다.

console.log(products[0]);


사진에서 보이는 것과 같이 object가 출력되며
array안에 object가 있는 것을 파악할 수 있었다.


코드완성

const cardTitle = document.querySelectorAll(".title");
const cardPrice = document.querySelectorAll(".price");

let products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];

cardTitle[0].innerHTML = products[0].title;
cardTitle[1].innerHTML = products[1].title;
cardTitle[2].innerHTML = products[2].title;

cardPrice[0].innerHTML = "가격 : " + products[0].price;
cardPrice[1].innerHTML = "가격 : " + products[1].price;
cardPrice[2].innerHTML = "가격 : " + products[2].price;


list 전체코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Level3</title>
  </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 src="./list.js"></script>
  </body>
</html>

index.js

const cardTitle = document.querySelectorAll(".title");
const cardPrice = document.querySelectorAll(".price");

let products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];

cardTitle[0].innerHTML = products[0].title;
cardTitle[1].innerHTML = products[1].title;
cardTitle[2].innerHTML = products[2].title;

cardPrice[0].innerHTML = "가격 : " + products[0].price;
cardPrice[1].innerHTML = "가격 : " + products[1].price;
cardPrice[2].innerHTML = "가격 : " + products[2].price;
profile
이언덕
이전 포스트

[코딩애플] JavaScript 강의 정리 (Level2 11강 ~ 12강)

다음 포스트

[코딩애플] JavaScript 강의 정리 (Level3 3강 ~ 4강)

0개의 댓글