[멋쟁이 사자처럼 프론트엔드 스쿨] 39일차 TIL - jQuery, Swiper, 계산기 만들기, 모듈화

🍰 요즘은 그냥... 수업으로 한 방에 이해하는 건 이미 포기했다. 이번 주는 뭘 했는 지 흔적만 남기는 것에 의의를 두기로...

🍴 jQuery

https://jquery.com/

jQuery

 

🍴 Swiper

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

🍴 계산기 실습

import { attr, getNode, insertLast, clearContents } from './lib/index.js';

function phase1() {
  /* 
1. input value 값 가져오기 (first, second)
  - input 선택하기
  - input에게 input 이벤트를 걸어준다.
  - input.value 값을 가져온다.
*/
  const first = getNode('#firstNumber');
  const second = getNode('#secondNumber');
  const result = getNode('.result');
  const clear = getNode('#clear');

  function handleInput() {
    const firstValue = Number(first.value);
    const secondValue = +second.value;
    const total = firstValue + secondValue;
    // 명시적 형변환 Number()
    // 암시적 형변환 +

    clearContents(result); // 비워주기

    insertLast(result, total);
  }

  function handleClear(e) {
    e.preventDefault();

    clearContents(first);
    clearContents(second);
    result.textContents = '-';
  }

  first.addEventListener('input', handleInput);
  second.addEventListener('input', handleInput);
  clear.addEventListener('click', handleClear);
  // 글자를 쓰는 순간마다 계속 함수 실행하니까 이 코드는 위험할 수 있음
  // debounce(handleInput), throttle(handleInput) 이런 식으로 사용하기
}

phase1();

function phase2() {
  const calculator = getNode('.calculator');
  const result = getNode('.result');
  const clear = getNode('#clear');
  const numberInputs = [...document.querySelectorAll('input:not(#clear)')];

  function handleInput() {
    const total = numberInputs.reduce((acc, cur) => acc + Number(cur.value), 0);

    clearContents(result);
    insertLast(result, total);
  }

  function handleClear(e) {
    e.preventDefault();
    numberInputs.forEach(clearContents);
    result.textContent = '-';
  }

  calculator.addEventListener('input', handleInput);
  clear.addEventListener('click', handleClear);
}

🍴 모듈 

: 애플리케이션을 구성하는 개별적 요소. 재사용 가능한 코드 조각.

• 기능을 기준으로 파일 단위로 분리함.
• 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함
• 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능 => export
• 모듈 사용자 - 모듈이 export한 자산 중 일부/전체를 택해 자신의 스코프 내로 불러들여 재사용 가능 => import