[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 4일차

이벤트

// 단일 click 이벤트
document.querySelector("input").addEventListener("click", function(){
   alert("Click!!");
});

// 복수 click 이벤트
document.querySelectorAll("input").addEventListener("click", function(){
   alert("Click!!");
});

querySelectorAll로 찾으면 NodeList가 반환된다
NodeList는 array가 아니기 때문에 array 의 인스턴스 메서드를 사용할 수 없다
만약 NodeList를 배열로 사용하고 싶다면 Array.from() 을 사용할 수 있다
기본적으로 for문, forEach()를 사용해서 NodeList를 순환하여 활용할 수 있다.

Dom 및 이벤트 실습

• Color Picker

• Name Toggle

  

callback

// 콜백지옥
function task1(callback) {
  console.log('task1');
  callback();
}

function task2(callback) {
  setTimeout(() => {
    console.log('task2');
    callback();
  }, 1000);
}

function task3(callback) {
  console.log('task3');
  callback();
}

function task4(callback) {
  console.log('task4');
  callback();
}

task1(() => {
  task2(() => {
    task3(() => {
      task4(() => {
        console.log('done');
      });
    });
  });
});

위와 같이 비동기적 작업으로 순서를 보장해준다. 하지만 현재 task4까지의 예시지만 만약 task10 ... task100이면 callback의 중첩 사용으로 가독성이 안좋아진다. 이 부분이 콜백지옥이다.

promise

< promise 상태>

• pending : 대기
• fulfilled : 이행
• rejected : 거부

// resolve가 호출 되면 prending(대기) -> fulfilled(이행) 으로 상태 변경

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("No network"));
  }, 2000);
});

promise
  .then((done) => {         // then은 비동기 함수의 처리가 끝난 후 작업 정의
    console.log("task1", done);
  })
  .catch((err) => {        // catch로 에러 발생 시 에러 처리
    console.log(err);
  })
  .finally(() => {        // finally는 처리 결과에 상관없이 항상 실행하는 작업 처리
    console.log("final!");
  });

async, await

async와 await는 js 비동기 코드를 간결하고 가독성 있게 작성하기 위해 사용하는 키워드

const delay = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const getApple = async () => {    // async는 함수 앞에 사용되어 해당 함수가 비동기 함수임을 나타냄
  await delay(2000);              // await은 async 함수 내에서만 사용하고 promise가 처리될때까지 기다림 
  return '사과';
};

const getBanana = async () => {
  return '바나나';
};

async function pickFruits() {
  // const pickFruits = async () => {
  //   const apple = await getApple();
  //   const banana = await getBanana();
  //   console.log(apple);
  //   console.log(banana);
  // };

  // all
  const [apple, banana] = await Promise.all([getApple(), getBanana()]);

  console.log(apple, banana);
}
pickFruits();

// promise all async로 감싸있는 부분을 한번에 병렬처리 할수있다.
// 만약 에러가 날 경우 allSettled를 사용하여 성공한 부분만 받아준다. -> 만약 all로 받고 따로 예외처리해도 됨

구조분해할당

• 배열이나 객체의 속성을 분리하여 그 값을 개별 변수에 담을 수 있는 표현식

< 배열 구조분해할당 >
const likeFoods = ['apple', 'banana', 'orange'];
const [a, b, c] = likeFoods;

console.log(a, b, c);

< 일반 객체 >
const animal = {
  animalName: '곰이',
  animalType: '고양이',
  animalAge : 20,
  animalGender : 'male'
};

const animalName = animal.animalName;
const animalType = animal.animalType;
const animalAge  = animal.animalAge;
const animalGender = animal.animalGender;
console.log(animalName);
console.log(animalType);
console.log(animalAge);
console.log(animalGender);

< 위 객체를 구조분해 할당 > 
const animal = {
  animalName: '곰이',
  animalType: '고양이',
  animalAge: 20,
  animalGender: 'male',
};

const { animalName, animalType, animalAge, animalGender } = animal;
console.log(animalName, animalType, animalAge, animalGender);

---

// 문제1
// [두 개의 정수(a, b)를 취하는 함수를 완성하고 입력 매개변수를 포함하여 입력 매개 변수 사의의 모든 정수 배열을 반환하게 하세요. 이때 매개변수 b는 a보다 크다고 가정합니다.]

const findNumberHander = (a, b) => {
  let arr = [];

  for (let i = a; i <= b; i++) {
    arr.push(i);
  }

  return arr;
};
console.log(findNumberHander(3, 10));


// 문제2
// [전화 번호 형식으로 해당 숫자의 문자열을 반환하는 10 개의 정수 배열 (0과 9 사이)을 허용하는 함수를 작성하십시오.] [[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]) // =>는 "(123) 456-7890"을 반환]

const createPhoneNumber = (number) => {
  let phoneNumber = '(';

  for (let i = 0; i < number.length; i++) {
    if (i === 3) {
      phoneNumber += ') ';
    } else if (i === 6) {
      phoneNumber += '-';
    }
    phoneNumber += number[i];
  }

  return phoneNumber;
};
console.log(createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]));


// 문제3
// [전달하는 문자열의 역순을 취하는 함수 reverseMessage를 구현해주세요.]

const reverseHandler = (str) => {
  return str.split('').reverse().join('');
};
console.log(reverseHandler('Good Bye'));
console.log(reverseHandler('Hello'));


// 문제4
// [함수에 배열로 숫자를 전달해서 가장 작은 2개의 숫자의 합을 반환하는 함수를 만들어보세요]

const sumTwoSmallestNumbers = (numberArr) => {
  let sortArr = numberArr.sort((a, b) => a - b);
  return sortArr[0] + sortArr[1];
};
console.log(sumTwoSmallestNumbers([10, 50, 20, 30, 40]));
console.log(sumTwoSmallestNumbers([10, 50, 0, 30, 40]));


// 문제5
// [어떤 숫자 n을 전달받아 n이 양의 정수 x의 제곱근인지 판별하고 제곱근이라면  양의 정수 x + 1 의 제곱근을 반환하는 함수를 만들려고합니다. 만약 전달된 임의의 수 n이 어떠한 수의 제곱근이 아니라면 -1을 반환하게 하세요. 이때 임의의 정수는 1 이상 50000000 이하라고 가정합니다.]

const isPow = (number) => {
  let check = Math.sqrt(number);

  if (check % 1 === 0) {
    return Math.pow(check + 1, 2);
  } else {
    return -1;
  }
}
console.log(isPow(121));
console.log(isPow(10));
console.log(isPow(9));

---