01 마켓

배열 Array

reduce
find
findindex
//findIndex 주어진 조건을 만족하는(true) 배열의 첫번째 요소의 인덱스 반환. 만족하는게 없으면 -1 반환.
//클릭한 상품의 id가 장바구니에 담긴 상품의 id와 같은지를 확인하고
//같으면 이미 담은 상품이라고 알려주자.

filter

location 객체

location.reload

이벤트 핸들링

onclick
onfocus
onblur

localStorage

localStorage.setItem
//1//장바구니에 해당 물품의 정보 저장
//🚨Storage.setItem은 string만 받을 수 있다.JSON.Stringify()를 사용하자.
//localStorage.setItem(' ',JSON.Stringify(productInfo));
//(key:카트를 나타내는 key, value: 값을 나타내는 정보)
//로컬스토리지에 값을 이렇게 저장하면 기존 값들이 다 날라가기 때문에 기존값을 저장해두고 새 값을 추가한다.

localStorage.removeItem
localSrotage.clear

//로컬스토리지에 있는 카트 내부 상품정보를 삭제해야함.
//로컬스토리지 정보 삭제 내장함수는 localStorage.removeItem(); 과 localStorag.clear();
//removeItem(); => key를 인자로 넘겨 해당 값만 삭제함. key값으로 CART_COOKIE_KEY 상수를 넣으면 cartInfo 라는 key:value가 삭제됨
//clear(); => 로컬스토리지의 모든 key:value가 삭제됨. 로컬스토리지는 다른 정보도 담을 수 있으므로 현 상황에는 적합하지 않음

DOM 다루기

getElementBy~
appendChild
insertBefore

네트워크 통신

JSON

목표까지 숫자 증가하는 함수

setInterval(함수,시간)
시간마다 함수가 실행된다.
유사 : setTimeout(함수, 시간) 시간 뒤에 함수가 실행된다.

setInterval() 은 clearInterval()과 같이 사용된다.

setInterval()은 브라우저 내부 타이머가 돌아간다.
이는 자원을 사용하는 것이므로
clearInterval()을 사용해 목표치가 되면 자원사용을 중지하도록 해야한다.
clearInterval()은 Number Type으로 된 핸들러를 받는다.
setInterval()값을 변수로 받아서 넘겨주면 된다.

// dom : innerHTML이 갱신 될 Node
// target : 목표숫자, 목표치
// second : target 도달 시간? ms 총 몇 초가 걸릴지? =>>>>>> 얘는 왜 있는지를 모르겠다. 🤔
// term : ms 몇 초 마다 함수를 실행할 지, 값 증가 간격 (term = 15 term 이 매개변수로 들어오면 들어온 값이 사용됨. 값이 안들어오면 15가 사용됨)
// countTerm : 증가 값 =>>>> second랑 term으로 계산해서 넣어주가
// 함수 실행 시 conuntTerm / term

// 🚨
// target/second = 1초에 몇씩 증가할지 (900/9 => 1초에 100씩 증가)
// 그럼 term초에는 몇 씩 증가해야 할까? => (target/second)*(term/1000) 
// term = 0.1초(100ms) 


export const countUp = (dom, target, second, term = 15,) => { 
  //dom 위치에 target 만큼의 값을 총 second 동안 증가 애니메이션이 한번에 term 만큼 동작하게 해줘
  
  //특정 DOM의 innerHTML을 갱신해주고 => innerHTML이 n 초 간격으로 갱신
  //갱신될 때마다 + n 만큼 value값이 증가하고 => 목표치 도달 시 애니메이션 종료

  if(!dom || isNaN(Number(target)) || isNaN(Number(second)) || isNaN(Number(term)) ) return;
  // if 조건에 부합하면 countUp 함수를 종료한다. (return)

  let nowNumber = 0;
  let countTerm = Math.floor((target/second)*(term/1000));
  // term 초 마다 nowNumber에 term 만큼의 숫자가 더해진다.
  // 만약 nowNumber의 수가 target보다 커지면 nowNumber는 target과 같아지고
  // clearInterval();함수가 실행되며 setInterval();은 종료된다.
  // clearInterval(Number Type의 handler) 가 필요하고 이는 
  // setInterval의 값을 변수(timerID)로 받아 넘기면 된다.
  const timerID = setInterval( () => {
    if (nowNumber >= target){
      nowNumber = target;
      clearInterval(timerID);
      return; //nowNumber >= target 이래야 target값보다 넘어서지 않고, return을 넣어야 애니메이션이 종료된다.
    }
    nowNumber += countTerm;

    // 이제 결과값이 입력받은 dom에 적어준다.
    dom.innerHTML = `${nowNumber.toLocaleString()}`;
  },term);
}

Math.floow()를 사용하면 수학적 내림값을 반환한다.(정수값만 반환)

상단 navigator 클릭 시 해당 위치로 스크롤이 이동되는 함수

1. 내가 클릭할 navi dom과 클릭 후 이동할 dom을 잡는다.

const seclectAnchorDom = document.getElementById('anchor-to-select');

const seclectSectionDom = document.getElementById('participate-section');

2. 직접구현
   📍window.scrollTo(x,y)
   브라우저의 해당 위치로 이동시켜준다.
   📍window.scroll(x,y)
   📍window.scroll( { top : x, left : y, behavior : 'smooth', })
   MDN window.scroll

export const setTabMenu = () => {
  //AnchorDom 클릭 => SectionDom 으로 스크롤 이동
  //<1. 직접구현 >
  //1-1.SectionDom 의 위치 받아오기
  //1-2.window.scrollTo 를 이용해 해당 위치로 이동하기
  //>>>> 📍 이걸 써보고 <2. scrollIntoView > 메서드 사용해보기 

  //1-3. AnchorDom을 누르면 실행되도록 onclick 함수 연결하기
  seclectAnchorDom.onclick = () => {
    //1-1.SectionDom 의 위치 받아오기
    const scrollTargetY = seclectSectionDom.offsetTop; //console.log(scrollTargetY) => 628
    //1-2.window.scrollTo 를 이용해 해당 위치로 이동하기
    // window.scrollTo(0,scrollTargetY)
    window.scroll({
      top : scrollTargetY,
      left : 0,
      behavior : 'smooth',
    });
}

3. scrollIntoView 메서드 사용
   MDN scrollIntoView

🚨얘는 아직 개발중이므로 직접구현한걸로 써라

scrollIntoView 쓰니까 얘가 헤더 높이를 인지못하고 가리길래
헤더의 offsetHeight값을 받아와서 더해주라고 하더니
scrollIntoView에는 더할 곳이 없다내 차암나

// 2. scrollIntoView
    // 헤더가 가려지는 것을 인지하지 못해서 원하는 위치보다 더 올라간다.
    // 이때는 헤더의 dom을 받아와서 offset-height값을 가져와서 더해주면 된다. 
	// >>>>>ㅋㅋㅋㅋㅋㅋㅋㅋㅋ이걸쓰려면 직접구현한걸로 써야함
     seclectSectionDom.scrollIntoView({
       behavior: 'smooth',
     }) 

3. 모듈화

const selectScrollHandler = (dom, target) => {
  dom.onclick = () => {
    const scrollTargetY = target.offsetTop;
    window.scroll({
      top : scrollTargetY,
      left : 0,
      behavior : 'smooth',
    });
  };}

export const setTabMenu = () => {
  selectScrollHandler(seclectAnchorDom, seclectSectionDom)//최애과자뽑기
  selectScrollHandler(resultAnchorDom, resultSectionDom)//결과보기
  selectScrollHandler(mbtiAnchorDom, mbtiSectionDom)//과자유형검사

클릭하는 dom으로 select className이 옮겨지는 함수🚨⭐️

카드를 선택하면 id 값을 받아 localstorage에 저장하고 css를 바꾸고
다른 카드를 선택하면 기존 카드 id를 확인해 css를 변경하고
내가 새로 선택한 카드의 id를 localstorage에 저장하고 css를 바꾼다.

🚨 여기 주목!!!
 const originalSelectedCard = document.getElementsByClassName('select')?.[0];
//? => 옵셔널체이닝. select가 있다면 0번째 꺼에 접근

 originalSelectedCard?.className = 'a'
 //className 하나에 접근하는 건 이런 식
 originalSelectedCard.classList = [ 'snack-card', 'select' ];
//classList는 여러 개의 className을 넣을 수 있고,
 originalSelectedCard.classList.add('')
 originalSelectedCard.classList.remove('')
// .add .remove를 이용한 className 추가, 삭제도 가능하다

originalSelectedCard?.classList.remove('select');
//originalSelectedCard에 해당하는 dom이 있다면 ? select 라는 classname을 모두 지운다.


⭐️이거 신기하다
선택할 id 또는 class 의 일부만 필요할 때
'select-1' 'select-152' 이럴 때 숫자만 가져오는 법
document.getElementById(`select-${cardId}`);

브라우저의 url 클립보드에 복사하기

공유하기 버튼 누르면 해당 페이지 url이 클립보드에 복사되도록 하려면

1. 공유하기 버튼 dom에 접근
2. 해당 dom.onclick = () => {} 이벤트 주입
3. navigator.clipboard MDN

<// writeText는 promise 반환
navigator.clipboard.writeText(location.href).then(() => {
  성공 시
},{ 실패 시 }

마우스 커서 관련

랜덤 수 생성

keyboard 이벤트 핸들링

배열 매서드

location 객체

localStorage

콜백함수