[따라하며 배우는 자바스크립티, 리액트 A-Z - John Ahn]

1주차 회고:

우선 시작하기 앞서 변명을 하자면, 지원 마감 공고가 몰려있어 자기소개서와 포트폴리오 수정으로 입사 지원에 시간을 더 쏟아 스터디에 집중하지 못했다. 그 결과 일주일 동안 day 2 파트(section 2~4)만 수강하게 되었다. 시간 관리의 중요성을 깨닫게 되는 한 주였다.

그럼에도 불구하고 매일 1강이라도 들으려고 노력했고, 그 과정에서 개념은 알고 동작 과정을 자세히 몰랐던 내용을 학습할 좋은 기회가 되었다. 이번 주에는 입사 지원에 시간을 많이 할애했지만, 다음 주부터는 스터디에 집중할 수 있으므로 오전에 강의를 수강하여 하루를 시작하는 방식으로 생활 습관을 바꾸고자 한다.

또한 밀린 강의와 과제를 리액트가 시작되기전에 마무리할 것이다. (아좌좌 💪🏻)

강의를 통해 배울 수 있었던 내용 정리

• 섹션 2: 자바스크립트 기초

console 객체는 항상 console.log()만 사용했었는데 다양한 객체가 존재하고 활용할 수 있는 방법을 알게 됐다.

호이스팅 개념만 알고 어떻게 동작하는지 자세하게 몰랐는데 이번 기회를 통해 알게 됐다.

Template Literals: backtick(`)을 사용하여 문자열을 표현한 것의 정확한 명칭을 알게 됐다.

• 섹션 3: Window 객체 및 DOM

Window 객체: 브라우저 창 정보

DOM 객체: 브라우저 내 웹 페이지 콘텐츠 정보

CRP의 흐름을 배울 수 있었다.

1. HTML로 부터 DOM Tree 생성

2. DOM과 CSSOM을 결합하여 Render Tree 생성하여 콘텐츠, 스타일 정보 포함

3. Render Tree로 부터 Layout 실행하여 요소의 크기 위치 계산

4. Layout로 부터 Paint 실행하여 실제 화면 그리기

• 섹션 4: Event

이벤트 버블링이란 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달 되는 것

이벤트 캡쳐링이란 이벤트가 하위 요소로 전파되는 단계

이벤트의 3단계 흐름: 캡처링 → 타깃 → 버블링

이벤트 위임이란 하위 요소의 이벤트를 상위 요소에 위임하는 것

• 1번 과제(Day2)

음식 메뉴 앱

gitbub: https://github.com/thayoon/study/tree/main/%5BFE%5DInflearn_WarmingUP_Club_Study_2nd/day_2

최대한 배운 내용을 생각하며 만들었습니다.

기능 개요

스타일: Bootstrap v5.3 CDN
참고 메뉴판: 청자다방

1. 카테고리 버튼 생성

• 카테고리 버튼들이 한 그룹으로 모여 사용자에게 카테고리별로 메뉴를 볼 수 있는 기능 제공

• 각 버튼의 id는 해당 메뉴의 카테고리와 일치하도록 설정

2. 카테고리별 필터링 기능 구현

• 사용자가 특정 카테고리 버튼을 클릭하면 해당 카테고리에 속하는 메뉴만 화면에 표시

• 카테고리 버튼 클릭 이벤트는 이벤트 위임(Event Delegation) 방식을 사용해 효율적인 이벤트 처리를 구현

3. 메뉴 리스트 생성 및 동적 출력

• 메뉴 아이템은 Bootstrap의 카드 레이아웃을 사용하여 그리드 형태로 출력

• 메뉴 데이터를 바탕으로 각 메뉴의 이미지, 이름, 가격, 상세 설명이 동적으로 생성됨

구현 세부사항

1. 카테고리 버튼 생성 및 이벤트 등록

1. categorys 클래스를 포함한 <div> 요소 내에 버튼들이 배치, 각 버튼에 카테고리별 ID 설정

   <div class="categorys d-flex justify-content-center flex-wrap">
     <button type="button" id="all" class="btn">ALL</button>
     <button type="button" id="coffee" class="btn">커피</button>
     <button type="button" id="ade" class="btn">에이드/주스</button>
     ...
   </div>

2. 버튼 클릭 시 해당 카테고리에 맞는 메뉴를 필터링하여 표시

   const categoryButtons = document.querySelector(".categorys");
   categoryButtons.addEventListener("click", (event) => {
     if (event.target.type !== "button") return; // 버튼 외 요소 무시
     if (event.target.id === "all") {
       createMenuItems(menus); // 모든 메뉴 표시
     } else {
       createMenuItems(
         menus.filter((item) => item.category === event.target.id)
       ); // 카테고리별 메뉴 표시
     }
   });

2. 메뉴 리스트 동적 생성

1. 메뉴 정보는 JavaScript 객체 배열로 관리, 각 메뉴 항목을 Bootstrap 카드 형태로 출력

   const createMenuItems = (menus) => {
     const menuList = document.querySelector(".menu-list");
     menuList.innerHTML = ""; // 이전 메뉴 리스트 지우기
   
     for (const menu of menus) {
       const col = document.createElement("div");
       col.classList.add("col");
   
       const card = document.createElement("div");
       card.classList.add("card");
   
       const img = document.createElement("img");
       img.src = menu.img;
       img.classList.add("card-img-top");
   
       const cardBody = document.createElement("div");
       cardBody.classList.add("card-body");
   
       const title = document.createElement("h5");
       title.classList.add("card-title");
       title.textContent = menu.title;
   
       const desc = document.createElement("p");
       desc.classList.add("card-text");
       desc.textContent = menu.desc;
   
       const price = document.createElement("div");
       price.classList.add("d-flex", "justify-content-end");
       price.textContent = menu.price;
   
       menuList.appendChild(col).appendChild(card).appendChild(img);
       card.appendChild(cardBody);
       cardBody.append(title, desc, price);
     }
   };

3. 초기 메뉴 출력

1. 페이지가 로드되면 모든 메뉴가 표시되도록 window.onload 이벤트를 활용해 초기 메뉴를 출력

   window.onload = function () {
     createMenuItems(menus);
   };