2021-12-08 BE

ansunny1170·2021년 12월 8일
0

UVC BOOTCAMP.BE

목록 보기
2/9

블로그 내 코드 자료 출처
Node.js 교과서 개정2판(지음이 조현영)

복습

함수 Function()

function()을 사용해서 원하는 결과 반환 하는 방법 return문을 사용한다.

function() {
return x
}

여기서 x에 원하는 값 혹은 식을 넣을 수 있다.

함수를 선언하는 방법은 여러가지가 있다.
화살표 함수라고 부르는 선언 법이다.
1. function add1 (x,y) {};
2. const add2 = (x,y) => {};
3. const add3 = (x,y) => {x,y}

문자열 String

문자열을 이어 붙이는 방법
숫자 타입과 문자 타입을 더하면+ 문자열이 된다.
문자열을 더하는 방법은(이어 붙이는 방법) 두가지가 있다.
1. + 연산자 사용
2. ${문자열 변수명} 사용 이 때, +연산자는 사용하지 않는다.

배열 Array[]

두가지가 있다.
1. let A = new array('1','2'...)
2. const A =['1','2'...]
추천하는 방법은 2번째 const와 대괄호[ ]를 사용하는 방법이다.

관련 함수
1. concat()
2.

객체 Object{}

선언 방법
const 객체명 {};
객체 내용 안에는 속성명과 속성값이 있다. (키값, 키밸류 라고 부르기도 한다.)
형식은 속성명:속성값
속성값은 변수, 상수, 함수, 배열, 객체 등 다양하게 사용할 수 있다.

객체에 접근하는 방법은 객체명.속성명 이다.

  • this 명령어
    사용방법 this or this.속성명
    뜻, this는 상위 변수를 칭한다.(여기서 변수는 일반적으로 객체명이다.)

복습.실습

아래 1.~4.번 문제를 실행 시키자.
1. 변수

  • 변수 num1에 1(number)을 초기화(initial)하기
  • 변수 num1 콘솔에 찍어보기(print)
  • 변수 num2에 2(number)를 초기화(initial)하기
  • 변수 num2 콘솔에 찍어보기(print)
  • 변수 num1, num2를 더한 값을 콘솔에 찍어보기(print)
  • 변수 num1, num2를 뺀 값을 콘솔에 찍어보기(print)
  • 변수 str1에 "안녕하세요"을 초기화(initial)하기
  • 변수 str1 콘솔에 찍어보기(print)
  • 변수 str2에 "반갑습니다"를 초기화(initial)하기
  • 변수 str2 콘솔에 찍어보기(print)
  • 변수 myName에 자신의 이름을 초기화(initial)하기
  • 변수 str3 중간에 변수 myName 넣기. "안녕하세요 저는 (myName) 입니다"
  • 변수 str3 콘솔에 찍어보기(print)
<html>
  <body>
    211208 오전 복습
  </body>
</html>

<script>
  let num1 = 1
  console.log(num1)

  let num2 = 2
  console.log(num2)
  console.log(num1+num2)
  console.log(num1-num2)

  let str1 = "안녕하세요"
  console.log(str1)
  let str2 = "반갑습니다"
  console.log(str2)

  let myName = "김예찬"
  let str3 = `${str1 } 저는 (${myName}) 입니다`
  console.log(str3)
</script>
  1. 함수
  • 콘솔에 "함수 func1 입니다."를 프린트하는 함수 func1 만들기 (function으로 정의)
  • 함수 func1 호출하기
  • "함수 func2 입니다"를 반환(return)하는 함수 func2 만들기 (변수 = funtion으로 정의)
  • 함수 func2 콘솔에 프린트하기
  • 숫자20을 반환(return)하는 함수 func3 만들기 (화살표 함수로 정의)
  • 숫자10을 반환(return)하는 함수 func4 만들기 (화살표 함수로 정의)
  • 함수 func3, func4를 더한 값을 콘솔에 찍어보기
  • 함수 func3, func4를 뺀 값을 반환하는 함수 func5 만들기 (화살표 함수로 정의)
  • 함수 func5 콘솔에 프린트하기
<script>
  function func1 () {
    console.log("함수 fun1 입니다.")    
  }
  func1()

  const func2 = () => {
    const funtion = "함수 func2 입니다"
    console.log(funtion)
    return funtion
  }
  func2()

  const func3 = () => 20
  const func4 = () => 10
  console.log(func3()+func4())

  function func5 () {
    return (func3()-func4())
  }
  console.log(func5())
</script>
  1. 배열
  • 변수 arr1에 숫자 1, 2, 3, 4를 초기화하기

  • 변수 arr1 콘솔에 프린트하기

  • 변수 arr1에 숫자 5 추가하기

  • 변수 arr1 콘솔에 프린트하기

  • 변수 arr1 맨마지막 아이템 제거하기

  • 변수 arr1 콘솔에 프린트하기

  • 변수 arr2에 숫자 5, 6, 7, 8를 초기화하기

  • 변수 arr2 콘솔에 프린트하기

  • 변수 arr2에 숫자 9 추가하기

  • 변수 arr2 콘솔에 프린트하기

  • 변수 arr2 맨마지막 아이템 제거하기

  • 변수 arr2 콘솔에 프린트하기

  • 변수 arr3에 arr1, arr2 이어붙인 값 초기화하기

  • 변수 arr3 콘솔에 프린트하기

  • 변수 arr4에 arr2, arr1 이어붙인 값 초기화하기

  • 변수 arr4 콘솔에 프린트하기

<script>
  const arr1 = [1,2,3,4]
  console.log(arr1)
  arr1.push(5)
  console.log(arr1)
  arr1.pop()
  console.log(arr1)

  const arr2 = [5,6,7,8]
  console.log(arr2)
  arr1.push(9)
  console.log(arr2)
  arr1.pop()
  console.log(arr2)

  const arr3 =arr1.concat(arr2)
  console.log(arr3)
  const arr4 =arr2.concat(arr1)
  console.log(arr4)
</script>
  1. 객체
  • 객체 person에 이름(name), 나이(age), 생일(birthday) 속성 추가하기

  • 객체 person에 "객체안에 함수"을 반환하는 함수 func 추가하기

  • 객체 person에 숫자 1, 2, 3이 들어있는 배열 array 속성 추가하기

  • 객체 person에 객체 ob 안에 name 속성에 "객체안에 객체" 문자열(string) 넣기

  • 객체 person 프린트하기

  • 객체 person의 속성 name 프린트하기

  • 객체 person의 속성 age 프린트하기

  • 객체 person의 속성 birthday 프린트하기

  • 객체 person의 속성 array 0번째 인덱스 값 프린트하기

  • 객체 person의 속성 array 1번째 인덱스 값 프린트하기

  • 객체 person의 속성 array 2번째 인덱스 값 프린트하기

  • 객체 person의 속성 func 프린트하기

  • 객체 person의 속성 ob 프린트하기

  • 객체 person의 속성 ob의 name 프린트하기

<script>
  const person = {
    name : "kim",
    age :"31",
    birthday : "910204",
    func(){
      return"객체안에 함수"
    },
    array:[1,2,3],
    ob:ob={
      name:"객체안에 객체"
    }
  }
  console.log("person : ",person)
  
  console.log("person name: ",person.name)
  console.log("person age: ",person.age)
  console.log("person birthday: ",person.birthday)

  console.log("person array0: ",person.array[0])
  console.log("person array1: ",person.array[1])
  console.log("person array2: ",person.array[2])

  console.log("person func: ",person.func())
  console.log("person ob: ",person.ob)
  console.log("person ob.name: ",person.ob.name)

</script>

수업

ES2015+

구조분해 할당

array[] 구조분해 할당p.73

let array = ["Baram", "Lee"]
let [firstname,lastname] = array

위와 같이 array라는 배열을 구조분해 할당 한것이다.
아래와 같은 성질을 갖게 되는데, 즉 변수를 선언하여 배열로 초기화한 것이다.

  const firstName = array[0]
  const lastName = array[1]
  • 코드 길이를 줄일 수 있는 장점이 있다.
    ※배열에서 특정 배열만 구조분해 하고 싶다면, 원하지 않는것은 빈칸으로 두고 작성하면 된다.
    let [,lastname] = array

object{} 구조분해 할당p.72

아래 첫 번째 코드역시 객체를 구조분해 할당 하는 방법이다.

  const option = {
    title: "home",
    width: 300,
    height: 500
  }

  const title = option.title
  const width = option.width
  const height = option.height
  

아래와 같이 작성하면 더욱 간단하게 가능하다.

  const option = {
    title: "home",
    width: 300,
    height: 500
  }
  
  const {title, width, height} = option

아래와 같이 특수하게 사용 가능하다.
sister:baby 처럼 속성값의 변수를 변경 지정 해줄 수 있고,
grandfather 처럼 속성을 새로 추가할 수가 있다.

  let family = {
    grandmother : "Harrison",
    sister: "Ethan",
    brother: "Austin"
  }
  // const brother = family.brother
  // const baby = family.sister
  // const grandmother = family.father

  const { grandmother, sister:baby,brother, grandfather="Hudson"} = family
  console.log(baby)

※객체에서 속성 하나만 구조분해 하고 싶다면, 하나만 작성하면 된다.
const { brother } = famaily

프로미스 p.75

JS와 NODEJS에는 주로 비동기를 접한다. 특히 이벤트 리스너를 사용할 때 콜백 함수를 자주 사용한다. ES2015부터 JS와 NODEJS의 API들이 콜백 대신 프로미스(Promise)기반으로 재구성되며, 악명 높은 콜백 지옥(callback hell) 현상을 극복했다는 평가를 받고 있다.
프로미스는 반드시 알아두어야 하는 객체이다.

  • callback함수 -> 다시 호출하는 함수

비동기 처리란?

  • 특정 연산을 실행하고 끝나기 전에, 다음 코드를 실행시키는 JS의 특징
    예)
    add1(), add2()함수가 있다.
    add1(); //실행 시 소요시간 1분
    add2();
    위와 같은 순서로 함수를 실행 시키는데, add1()의 연산이 완료되는 시간은 1분이다.
    add1()을 실행시키고 add2()를 실행시키는데 걸리는 시간은 단 몇ms이기 때문에
    add1()연산 결과가 도출 되기 전에 add2()가 실행되고 어쩌면 add2()가 add1()보다 먼저 결과를 도출 할 수도 있다.

callback이란?

<script>
  const wait_count = (callback) => {
    console.log('ONE')
    setTimeout(()=>{
      console.log('TWO')
      callback()
    } , 1000)
  }
  const count3 = () => console.log('THREE')
  
  wait_count(count3)
</script>

예시 1

  function buyCoffee(coffeeName, price, quantity, callback)
  {
    console.log(`${coffeeName}를 ${quantity}개 구입하려 합니다.`)
    console.log(`${coffeeName} 한 개 ${price}원 입니다.`)
    setTimeout(()=>{
      //return price*quantity
      callback(price*quantity)
    },1000)
    
  }
  //buyCoffee('카라멜 마끼아또', 5000, 3)

  function pay(money){
    console.log(money, "원을 지불 하였습니다.")
  }

  buyCoffee('카라멜 마끼아또', 5000, 3, pay)


예시2

  function buyCoffee(coffeeName, price, quantity, callback)
  {
    console.log(`${coffeeName}를 ${quantity}개 구입하려 합니다.`)
    console.log(`${coffeeName} 한 개 ${price}원 입니다.`)
    setTimeout(()=>{
      //callback(price*quantity)
      callback(quantity)
    },1000)
    
  }
  //buyCoffee('카라멜 마끼아또', 5000, 3)

  function pay(money){ //커피값 계산 결과 출력 함수
    console.log(money, "원을 지불 하였습니다.")
  }

  function quantity(num){ //주문 수량 출력 함수
    console.log(`주문하신 수량은 ${num} 개 입니다.`)
  }
  
  buyCoffee('카라멜 마끼아또', 5000, 3, quantity)

예시1 + 예시2 동시에 출력하기

  function buyCoffee(coffeeName, price, quantity, callback,callback1)
  {
    console.log(`${coffeeName}를 ${quantity}개 구입하려 합니다.`)
    console.log(`${coffeeName} 한 개 ${price}원 입니다.`)
    setTimeout(()=>{
      callback(price*quantity)
      callback1(quantity)
    },1000)
    
  }
  //buyCoffee('카라멜 마끼아또', 5000, 3)

  function pay(money){ //커피값 계산 결과 출력 함수
    console.log(money, "원을 지불 하였습니다.")
  }

  function quantity(num){ //주문 수량 출력 함수
    console.log(`주문하신 수량은 ${num} 개 입니다.`)
  }
  
  buyCoffee('카라멜 마끼아또', 5000, 3, pay, quantity)

밖에서 정의된 pay()함수를 callback으로 받아서 함수화 시키는 것이다..
callback이라는 함수가 있는데 정의는 밖에서(pay())에서 해라...

  let ramenList = ''

  const addSamyang = (name) => {
    ramenList = name
    console.log(ramenList)
    setTimeout(addShin, 500, '신라면')
  }
  const addShin = (name) => {
    ramenList += ', ' + name
    console.log(ramenList)
    setTimeout(addJin,500,'진라면')
  }

  const addJin = (name) => {
    ramenList += ', ' + name
    console.log(ramenList)
    setTimeout(addNuguri,500,'너구리')
  }

  const addNuguri = (name) => {
    ramenList += ', ' + name
    console.log(ramenList)
  }

  //addSamyang('삼양라면')
  setTimeout(addSamyang, 500,'삼양라면')

callback_hell

setTimeout() 함수에는 사실 3번째 인자를 입력할 수 있다.
setTimeout((name)=>{console.log(name)},1000,'김예찬'
이렇게 하면 결과는 1초후에 김예찬을 출력한다.

아래는 callback을 이용하여 최초 '꼬꼬면'출력이후 0.5초후 마다 다음 문자열을 출력하게 만드는 코드다.

  setTimeout((name)=>{
    let ramenList =name
    console.log(ramenList)
    setTimeout((name) => {
      ramenList += ', ' + name
      console.log(ramenList)
      setTimeout((name) => {
        ramenList += ', ' + name
        console.log(ramenList)
        setTimeout((name) => {
          ramenList+= ', ' + name
          console.log(ramenList)
        }, 500,'어딜감히 삼양라면');
      },500,'불마왕')  
    },500,'신라면')
  },500,'꼬꼬면')

callback 설명 블로그

(참조 : https://dalkomit.tistory.com/65)

Promise(promise object)

<html>
  <body>
    promise object
  </body>
</html>

<script>
  new Promise((resolve)=>{
    let name = '삼양라면'
    resolve(name) //여기 name변수가 아래 .then(result로 들어간다)

  })
  .then((result)=>{
    console.log(result)

  })
</script>

  • .then을 한번더 사용하면 undefined가 나온다.
  • 상위 .then에서 promise()를 한번더 선언하면 하위 .then에서 사용할 수 있다.

아래는 일반 콜백처럼 setTimeout을 설정했을 때이다.

  • setTimeout을 사용했다 하더라도 일반적인 상황이면 다음.then으로 넘어가야 한다.
    하지만 결과는 각각의 resolve 실행을 완료하고 다음 .then으로 넘어갔다.
    이유는.. Promise()의 고유 기능이다.
    Promise()는 해당하는 resolve가 실행 될 때까지 기다렸다가 다음 단계로 넘어가는 것이다.
<script>
  const addRamen = (name, prevName) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        let newName = ''
        if(prevName) {
          newName = `${prevName}, ${name}`
        } else {
          newName = name
        }
        console.log(newName)        
        resolve(newName)
      }, 500);
    })
  }
  addRamen('삼양라면')
  .then(ramenList => addRamen('신라면', ramenList)) // '삼양라면', '신라면'
  .then(ramenList => addRamen('진라면', ramenList)) // '삼양라면', '신라면', 진라면
</script>

profile
4년차 설비 개발 연구원에서 IT 웹 서비스 개발자로 경력 이전을 준비 중입니다. Node.js/Vue.js를 공부하고 있으며, 백엔드 기반 풀스택 개발자를 목표로 하고 있습니다.

0개의 댓글