11일차

git: https://github.com/leeyulgok/3-Day-1

11일차도 지난 시간에 이어서 Javascript를 공부했다. 바닐라 문법뿐만 아니라 ES6문법, script 문법도 배웠다. 이번 시간을 좀 더 실사용 가능한 것들을 배웠고, html과 javascript에 대한 이해도 할 수 있는 시간이었다.

공부하고 배운 내용들을 토대로 하나하나 기록해보자.

Javascript

Javascript는 기존에 알고 있던 내용들이었다. 프로그래머스로 매일 코딩 연습을 하면서 공부한 것들이 나왔다. 기초적인 복습부터 시작해서 삼항연산자나 map() 메서드까지 배웠다.

코딩 연습을 하면서 배운 내용들이 나와, 스스로 잘하고 있었구나 하는 생각이 든 11일 차였다. 수업시간에 공부한 내용들이 복습위주라고 해도 가장 중요한 것은 실습이다. 실습은 정말 실사용이 가능한 내용을 위주로 배우기 때문에 이 시간만큼을 집중을 해서 풀어야 된다.

실습

실습은 공부하는 내용에 비해 상대적으로 어렵다. 단순히 배운 걸 응용하는 수준을 넘어선다. 바로 실제 적용가능할 수준으로 하기 때문에 최대한 집중을 해야 한다.

장바구니 만들기

이번에는 장바구니를 만드는 시간을 가졌다. 우선 결과 사진을 보고 설명을 한다.

결과

장바구니에 추가 버튼을 누르면 장바구니에 추가가 돼야 한다. 그래서 이를 어떻게 구현할 지 고민을 많이 하고 코드를 작성했다. 하나하나 코딩을 통해 설명하도록 하겠다.

코딩

1. html 코드

<div class="menu-container">
  <div class="menu">
    <h1 class="menu-title">치킨</h1>
    <p class="menu-price">20000</p>
    <button type="button" class="add-to-cart">장바구니에 추가</button>
  </div>
  <div class="menu">
    <h1 class="menu-title">피자</h1>
    <p class="menu-price">23000</p>
    <button type="button" class="add-to-cart">장바구니에 추가</button>
  </div>
</div>
<div class="cart">
  <h1 class="cart-title">장바구니</h1>
  <p id="cart-items"></p>
</div>

2. javascript 코드

const addToCartButtons = document.querySelectorAll(".add-to-cart");
const cartItemsElement = document.getElementById("cart-items");
const cartItems = [];

const addToCart = event => {
  const menuElement = event.target.parentElement;
  const menuTitle = menuElement.querySelector(".menu-title").innerText;
  const menuPrice = menuElement.querySelector(".menu-price").innerText;

  const item = `${menuTitle} - ${menuPrice}`;
  cartItems.push(item);

  updateCartItems();
}

const updateCartItems = () => {
  cartItemsElement.innerHTML = "";

  for (let i = 0; i < cartItems.length; i++) {
    const cartItemElement = document.createElement("div");
    cartItemElement.textContent = cartItems[i];
    cartItemsElement.appendChild(cartItemElement);
  }
}

addToCartButtons.forEach((button) => {
  button.addEventListener("click", addToCart);
});

장바구니를 만드는 핵심은 배열, 리스트다. 배열을 반복해서 장바구니에 보여줘야 한다. 이걸 중심으로 풀어가면 된다. 그래서 코드를 설명해보면 이와 같다.

1. 첫 3줄

첫 3줄은, 버튼과 배열을 보여주는 p태그, 그리고 장바구니 빈 배열이다.

2. 함수 addToCart

이 함수는 배열에 값을 넣는 함수다. 함수의 첫 3줄은 버튼을 눌렀을 때, 누른 div 자체를 가져온다. 그래서 그 안에서 이름과 가격을 가져오고, 이를 item이라는 상수로 만들어 카트에 넣고 updateCartItems()를 부른다.

3. 함수 updateCartItems

이 함수는 반복문을 통해 값을 보여주는 함수다. 첫 번째 줄은 가장 처음 정의한 cartItemsElement를 불러 값을 정의하고, 다음에 반복문을 통해 정의한 값에 새로운 div를 만들고 위에서 정의한 장바구니에 appendChild() 메서드를 웹 페이지에 보여준다.

4. 이벤트 핸들러

마지막은 이벤트 핸들러로 button이 클릭되면 정의한 함수들이 작동될 수 있도록 연결을 해준다.

말로 설명하는 것이 어렵지만, 어느 정도 느낌만 살려서 적었다. 이 부분이 첫 번째 실습이라 어려워서 애먹었다. 그래도 이해는 할 수 있었기 때문에 다행이었다. 실습이 어려워 정말 React 수업으로 들어갈 때가 걱정되기는 하지만 최선을 다 해야겠다.

정리하기

실습을 최대한 잘 이용하기.

아는 것이다. 장바구니가 어디에 사용되는지 알고 이런 느낌은 장바구니뿐만 아니라 다른 부분에서 실제 많이 사용된다. 그렇기 때문에 하나도 놓치지 않고 어떤 부분이 어떤 역할을 하는지, click을 했을 때인지 값이 change 됐을 때인지 등 어떤 변화를 통해 값을 보여줄 수 있는 것들을 스스로 응용해서 만들어 보는 노력이 필요할 것 같다.

아직은 많은 시간이 있기 때문에, 예습은 못할 지라도 지금 배운 것들을 충분한 복습을 통해 익히고 다음 step을 밟도록 하자!

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프