3주차 프리코스 미션 '자판기'에서 배운 이론을 정리합니다.

2주차 피드백

📖 2주 차 프론트엔드 피드백.pdf

3주차 미션의 목표: 1주 차 미션의 목표는 함수를 분리하는 연습, 2주 차 미션은 1주 차 목표 + 클래스 분리하는 연습이었어요.

3주 차 미션의 목표는 여러 개의 클래스를 분리한 후 서로 관계를 맺어 하나의 프로그램을 완성하는 경험을 하는 것

element.querySelector('li').length

document.querySelector('li')는 dom 요소 선택자이다.

하지만 element.querySelector('li')는 element 내에 있는 li태그를 가져온다. (여기서 element는 li 태그의 부모 dom요소)

이때, element 아래의 모든 li를 가져오고 싶으면 querySelectorAll을 사용하면 된다.

🔗 reference

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

localStorage 관리

localStorage는 상태 관리 시스템이다. 여기서 상태란, 변하는 데이터다.
localStorage의 문법
- localStorage에 항목 추가
```
localStorage.setItem('key', 'value'); 
```
  localStorage는 기본적으로 key, value를 문자열으로 관리한다.
  
  만약 value로 객체를 넣고 싶다면, 객체를 문자열로 관리할 수 있는 방법이 있는데 JSON.stringify를 사용하면 된다.
  
  또한, 객체로 넣은 것을 가져오고 싶을 때는 JSON.parse를 통해 가져오면 된다.
  
  JSON.stringify(): 자바스크립트 객체 → JSON 문자열
  
  JSON.parse(): JSON 문자열 → 자바스크립트 객체
```
const store = {
  setLocalStorage(menu) {
    localStorage.setItem("menu", JSON.stringify(menu)); //key-value형태로 localStorage에 저장(그리고 반드시 string들어가야함)
  },
  getLocalStorage() {
    return JSON.parse(localStorage.getItem("menu"));
  }
}
```
- localStorage에 있는 항목 읽기
```
const tmp = localStorage.getItem('key'); //key에 해당하는 value값을 가져옴 
```
  getItem을 했는데, 'key'가 없다면 null을 리턴한다.
localStorage 업데이트 후 → rendering

🔗 reference

dataset