[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 사전직무교육 4일차 (05.29)

학습기록

📜 DOM 조작

🟡 학습노트....

 👉🏻  나는 분명 열심히 따라 했는데 왜 정리된 노트가 없는지 모르겠음. 

 👉🏻  내... 머리속에 있겠지??? 

 👉🏻  돔 조작은 내가 조작하고 싶은 문서 객체를 잘 선택해서 선택된 문서객체를 잘 조작하면 된다는 것만 적혀있네....

 

📜 콜백함수

🟡 콜백함수란?

 👉🏻  매개 변수로 함수를 전달받아서 함수 내부에서 실행하는 함수

function func (callback) {
callback()
}
function callbackFunc () {
console.log("나는 콜백함수가 될거야")
}
func(callbackFunc) // 나는 콜백함수가 될거야

 

 👉🏻  아래의 코드는 출력값이 task2에서의 setTimeout 때문에 순서가 task1 task3 task4 all done task2로 나오는데

function task1() {
  console.log("task1")
}

function task2() {
  setTimeout(() =>console.log("task2")
  ,1000)
}

function task3() {
  console.log("task3")
}
function task4() {
  console.log("task4")
}
task1()
task2()
task3()
task4()
console.log('all done')

 

 👉🏻  함수 안에 callback 함수로 넘겨주면 순서대로 나온다.  task1 task2 task3 task4 all done

 👉🏻  하지만 이 과정이 많아지면 콜백 지옥이 펼쳐진다.

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("task all done")
      })
    })
  })
})

 

📜 Promise

🟡 Promise

 👉🏻  콜백지옥을 해결해보고자 나온 promise

 👉🏻  근데 이제 가독성만 좋아진...

 👉🏻  promise는 3가지 상태가 존재  pending(대기) fulfilled(이행) reject(거부)

 👉🏻  promise는 호출하지 않아도 바로 실행한다는 특징이 있음

// fulfilled(이행) => resolve호출하면 pending에서 fulfilled로 바뀐
const promise = new Promise((resolve, reject) => {
  console.log("promise....")
  resolve("done")
})
// 호출하지 않아도 바로 실행
console.log(promise)

// promise내부에서 resolve호출되지 않는 이상 pending상태에서 변하지 않음
promise.then((done) => {
  console.log("task", done)
})
// rejected(거부)
const promise2 = new Promise((resolve, reject) => {
  console.log("p2")
  reject()
})
promise2
  .then(() => {})
  .catch(() => {
    // reject에서 error handling할 때 사용
  })
  .finally(() => {
    console.log(
      "Finally,",
      "resolve나 reject 중 하나라도 호출되면 finally가 호출됨"
    )
  })
console.log(promise2)

 

 

📜 Async Await

🟡 Promise의 대안

 👉🏻  promise보다 가독성이 좋음 promise도 callback함수보다 가독성이 좋지만 promise지옥이라는 말도 있을 정도로 promise도 많이 쓰다 보면 가독성이 안 좋아지는데 그걸 해결하는 게 async await 문법

 

🟡 async

 👉🏻  function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환

 👉🏻  프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스로 값을 감싸 이행된 프라미스가 반환되도록 함

//promise
function getApple() {
  return new Promise((res, rej) => {
    res("🍏")
  })
}

//async
async function getPeach() {
  return "🍑"
}
getApple().then((apple) => console.log(apple)) //"🍏"
getPeach().then((peach) => console.log(peach)) //"🍑"

 

🟡 await

 👉🏻  await은 async 함수 내에서만 작동함

 👉🏻  자바스크립트는 await을 만나면 promise가 처리될때까지 기다려서 그 후에 결과를 반환

function delay(ms, value) {
  return new Promise((res) =>
    setTimeout(() => {
      res(value)
    }, ms)
  )
}
async function getPeach() {
  await delay(1000)
  return "🍑"
}
getPeach().then((peach) => console.log(peach)) // 1초후에 ... "🍑"

 

 

🟡 Promise.all

 👉🏻 여러 개의 promise를 동시에 처리한 후 모두 완료되었을 때 그 결과값을 반환하는 javascript 메서드

 👉🏻 async, await로 작업한 것들을 병렬처리할 수 있음

 👉🏻 단점 : 하나라도 에러가 나면 전체 에러가 남

async function getApple() {
  // throw new Error("error");
  await delay(2000) // delay 1s
  return "🍎"
}

async function getBanana() {
  await delay(4000) // delay 1s
  return "🍌"
}

async function pickFruits() {
  const [apple, banana] = await Promise.all([getApple(), getBanana()])

  console.log(apple, banana)
  // Promise.all로 병렬처리가 됨으로써 속도는 빨라지지만 하나라도 에러가 발생하면 통째로 에러가 남
  // allSettled를 사용하면 각자 처리가 되어서 성공한 것은 fulfilled, 오류난 것은 reject
  // 하지만 allSettled은 resolve와 reject 각각 작성해줘야하는 번거로움이 있음
}
pickFruits()

 

📜 TypeScript

🟡 타입스크립트란?

 👉🏻 타입스크립트는 별도의 새로운 언어가 아니라, 자바스크립트에 타입(type)을 추가한 확장 언어

 

🟡 타입스크립트 설치

 👉🏻 타입스크립트로 작성된 코드를 실행하려면 타입스크립트 코드를 자바스크립트 코드로 ‘변환’해주는 작업이 필요 (컴파일 작업)

 👉🏻 node.js로 컴파일

 👉🏻 npm 패키지 초기화 (global보다는 작업할 폴더에...)

npm init -y // 기본 값으로 npm 초기화 간편하게
npm install typescript --save-dev // 개발모드로 설치
node ./node_modules/typescript/bin/tsc --init  // 타입스크립트 초기화
node ./node_modules/typescript/bin/tsc [이름].ts // 타입스크립트를 자바스크립트로 변환해줌

 

 

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

function print(a, b) {
  let result = []
  for (let i = a; i <= b; i++) {
    result.push(i)
  }
  console.log(result)
}
print(num1, num2)



🟡 Q.1-2 두 개의 정수(a, b)를 취하는 함수를 완성하고 입력 매개변수를 포함하여 입력 매개 변수 사의의 모든 정수 배열을 반환하게 하세요. 단, a와 b의 크기 상관관계는 정해진 게 없다.

function print2(a, b) {
  let numArr = [a, b].sort((a, b) => a - b)
  let result = []
  for (let i = numArr[0]; i <= numArr[1]; i++) {
    result.push(i)
  }
  console.log(result)
}

print2(num2, num1)

 

🟡 Q2. 전화 번호 형식으로 해당 숫자의 문자열을 반환하는 10 개의 정수 배열 (0과 9 사이)을 허용하는 함수를 작성하십시오.

function createPhoneNumber(numbers) {
  let first = numbers.splice(0, 3).join("")
  let second = numbers.splice(0, 3).join("")
  let last = numbers.join("")
  console.log(`(${first}) ${second}-${last}`)
}
createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])

 

🟡 Q3. 전달하는 문자열의 역순을 취하는 함수 reverseMessage를 구현해 주세요.

function reverseMessage(msg) {
  console.log(msg.split("").reverse().join(""))
}
reverseMessage("Good Bye")

 

🟡 Q4. 함수에 배열로 숫자를 전달해서 가장 작은 2개의 숫자의 합을 반환하는 함수를 만들어보세요

function sumTwoSmallestNumbers(numbers) {
  let sortNumber = numbers.sort((a, b) => a - b)
  console.log(sortNumber[0] + sortNumber[1])
}
const sum = sumTwoSmallestNumbers([10, 50, 20, 30, 40]) // 30 (가장 작은 수 10 + 20)
const sum2 = sumTwoSmallestNumbers([10, 50, 0, 30, 40]) // 10 (가장 작은 수 10 + 0)

 

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

function isPow(n) {
  let sqrtN = Math.sqrt(n)
  console.log(Number.isInteger(sqrtN) ? Math.pow(sqrtN + 1, 2) : -1)
}

const result = isPow(121) // 144
const result2 = isPow(10) // -1
const result3 = isPow(9) // 16

 

---

4일 차 후기

3일 반 만에 자바스크립트를 후루룩 끝내고 4일 차부터 타입스크립트를 들어가는 수업 어떤데? 

정리를 할 시간이 부족. 합니다 (핑곈가..?) 

---

본 후기는 [유데미 x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.