[8주차] 5. Javascript 비동기 처리 & HTML과 JS 연동

Javascript

비동기(Asynchronous) 처리

비동기 처리의 이해

• 동기적(Synchronous) 처리 : 작업이 끝나야 비로소 다음작업을 실행, 작업이 끝날 때까지 기다리는 동안 중지 상태가 돼서 다른 작업을 할 수 없다. ex) 1번 작업이 끝날 때까지 2번 작업 수행 못하고 2번 작업이 끝날 때까지 3번 작업을 수행하지 못함
• 작업을 비동기적 처리 할 때는 코드 실행 시 흐름이 멈추지 않는다. 그래서 동시에 여러가지 작업 처리 가능, 기다리는 과정에서 다른 함수를 호출도 가능
• 비동기 처리 예시
• Ajax Web API 요청: 서버 쪽에서 데이터를 받아와야 할 경우에는 요청을 하고 서버에서 응답을 할 때까지 대기를 해야 하기 때문에 주로 비동기 처리를 함
• 파일 읽기 : 주로 서버쪽에서 파일을 읽어와야 하는 경우에는 비동기적 처리
• 암호화/복호화 : 시간이 걸리는 경우가 있기 때문에 비동기적 처리
• 작업 예약 : 어떤 작업을 예약해야 할 때 예를 들어 몇초 후에 해야한다 하면 setTimeout 함수 사용해서 비동기적 처리

code sandbox에서의 실습

• sandbox.config.json 에서 infinite loop protection 비활성화(연산량이 많은 작업하는데 루프가 너무 많이 돌면 사전에 방지되서 비활성화)

setTimeout() 함수

• 비동기적 처리를 위해 사용

• setTimeout((parameter) => {실행할 작업}, 몇 ms 후 실행할 것인지 숫자 작성)

• 4ms가 브라우저에서 지정한 최소 값이기 때문에 0으로 작성해도 실제로는 4ms후 작업이 실행됨
• setTimeout 함수내에서 하고자 하는 작업이 백그라운드에서 수행되기 때문에 기존의 코드 흐름을 막지않고 동시에 다른 작업을 할 수 있다.

callback() 함수

• setTimeout 함수가 들어있는 함수가 끝난 다음에 작업을 하고 싶을 경우 그 함수의 parameter로 callback 넣어줘야 한다.
• 함수 타입의 값을 parameter로 넘겨주고 parameter로 받은 함수를 특정 작업이 끝나고 나서 호출해주는 것을 의미한다.
• setTimeout 함수가 들어있는 함수가 끝난 다음에 작업하고 싶은 것을 setTimeout 함수 중괄호 안에 callback(실행할 작업)으로 작성한다. 그 callback 함수의 인자가 후에 setTimeout가 들어있는 전체 함수를 호출 할 때 그함수의 인자 값으로 들어가게 된다.

Promise

• 비동기 작업을 조금 더 편하게 처리할 수 있도록 es6에 도입된 기능
• 이전에는 비동기 작업을 처리할 때는 어떤 작업이 끝나고 나서 뭘 해야 하는 경우에는 callback 함수로 처리했어야 했다. 하지만 callback 함수로 처리할 경우 비동기작업이 많아질 경우 코드가 쉽게 난잡해지게 되서 Promise 라는 기능이 생김.
• setTimeout 함수와 callback 함수 활용하여 비동기작업 처리할 경우 : 비동기 작업이 연달아 많은 작업해야 할 때 코드를 벌써 작성하기도 어렵고 보기에도 어려움 (이러한 복잡한 코드를 callback 지옥라고 부름)
• Promise를 사용해 비동기 작업을 할 경우 코드의 깊이가 깊어지지 않는다.
• 단점 : 어떤 부분에서 error가 발생했는지 파악하기 어려움, 특정 조건에 따라 분기를 나눈 작업도 어려움(then으로 이어지기 때문에 결과가 다른 것일 때 다른 작업을 해야 할 시 번거로움), 특정 값을 공유해가면서 작업을 연달아 하는 것도 번거롭다.

Promise 만드는 방법

• Promise 성공시 resolve 호출 / 실패시 reject 호출
  

  const Promise이름 = new Promise((resolve, reject) => { 
    setTimeout(()=>{
    	resolve(‘성공시 구현할 결과’);
    }, 대기시간ms )
  });​

• Promise 끝난 후 할 작업은 Promise이름.then(작업 내용)으로 작성 가능, .catch 중괄호 안에 e reject에서 error 일시 할 작업을 작성(.catch는 then 끝난 후 작성)
  

  Promise 이름.then(성공시 동작할 작업).catch (성공시 동작할 작업)​

• 처리해야 할 비동기 작업의 개수 많을 경우 Promise가 setTimeout과 callback 보다 깔끔하다. 왜냐하면 Promise 속성 중에서는 만약 then에서 등록한 함수에서 또 다른 Promise를 return하게 될 경우 then을 연달아 쓸 수 있기 때문이다.
  

  Promise이름.then(성공시 동작할 작업) .then(성공시 동작할 작업) .then(성공시 동작할 작업)​

async와 await

• 자바스크립트에서 비동기 처리를 할 때 Promise를 더욱 쉽게 처리하게 해주는 문법
• ES8에 소개된 문법
• promise 실행시키는 부분을 포함하고 있는 function 키워드 앞부분에 async 키워드 작성
• promise 실행시키는 앞부분에는 await 작성
• .then을 굳이 쓰지 않고 await으로도 성공했을 때 동작할 작업을 실행시킬 수 있다.
• async 함수 자체에서 흐름이 다른 함수로 넘어가고 그러지 않기 때문에 분기점을 만드는 것도 쉽고 어떤 변수를 공유하는 것도 쉬워서 로직을 작성하기 편해짐
• async 키워드가 붙은 function은 Promise를 반환하게 된다.
• 화살표 함수를 작성하게 될 때 async 사용 방법
  

  const 변수 = async () => { 
    await promise함수; 
    출력하고싶은내용;
  }​

• Promise에서 error를 발생하고 싶을 때 throw를 사용하고 error를 잡아내고 싶을 땐 try-catch 문 사용(async function 내부에 만들기)
• try-catch문 사용법

async function 함수이름() {
    try {
        await throw가 있는 함수이름();
    } catch (e) {
        에러 날 시 출력할 내용(보통 console.error(e);로 작성
    }
}

Promise.all

• 여러 개의 Promise들을 동시에 처리할 때 유용하게 사용
• 실행시킬 Promise 함수들을 배열 안에 넣고 Promise.all로 감싼 다음에 await 키워드를 그 앞에 붙인다음 그것을 값으로 새롭게 변수를 선언한다.
• Promise.all로 감싼 배열로 만든 모든 Promise 들이 시작하고 나서 모두 끝나면 선언한 변수 안에 Promise들 각각 끝난 값이 한번에 배열로 반환된다.
  

  const 변수이름 = await Promise.all([실행시킬 Promise 함수들]);​

• Promise.all에 등록한 각 Promise에 대해 배열로 만들어진 결과물을 각각 다른 변수로 꺼내주고 싶을 때는 const [ ]안에 Promise 개수와 순서에 맞게 변수 이름 작성(,로 구분)
  

  const [변수이름, 변수이름] = await Promise.all([실행시킬 Promise 함수들]);​

• Promise.all에 등록한 각 Promise에 대해 하나라도 error 발생시 전체 Promise가 error가 난 것으로 간주
• Promise.all에 등록한 각 Promise에 대해 하나라도 error 발생시 try-catch 문으로 error를 잡아낼 수 있음
• 많이 사용하는 문법

Promise.race

• const 변수이름 = await Promise.race([실행시킬 Promise 함수들]);

• Promise.race로 감싼 배열 안 실행시킬 Promise 함수들 중 가장 빠른 Promise 함수 하나만 도출
• 등록한 Promise들 중 가장 빨리 끝난 것이 결과물이 된다
• 등록한 Promise들 중 가장 빨리 끝난 것 error 일 때만 error로 간주한다. 가장 빨리 끝난 Promise는 성공하고 나중에 그 이후 다른 Promise에서 error 발생시 error가 났다고 간주하지 않는다.
• Promise.race는 Promise 들 중 가장 빨리 끝난 것이 error 일 때만 error로 간주
• 어떤 작업을 시작하고 나서 도중에 취소하는 경우를 제외하곤 거의 사용하지 않는 문법
• 이런 것이 있다고만 알아두기

HTML과 Javascript 연동

• html 사용하면 브라우저에서 보여주고 싶은 UI(User Interface)를 보여줄 수 있다.
• 사용자의 interaction에 따라 동적으로 UI(User Interface)를 업데이트 하고 싶다면 자바스크립트를 사용해줘야 한다.
• 보통 interaction이 많은 경우 vanilla Javascript, 즉 별도의 라이브러리 혹은 프레임워크를 사용하지 않는 형태를 사용해서 하기에는 코드 양도 많아지고 코드 관리도 어려워져서 react, vue, angular 등의 도구를 사용

 

• document.getElementId(‘ ‘); : 괄호에 넣은 id값으로 html에서 그 id 값인 것들 다 찾아냄
• document.querySelectorAll(‘ ‘); : 태그 이름으로 찾아냄
• document.querySelector(‘.클래스이름‘) : 클래스 이름으로 찾아냄
• 변수이름.style.css기능 = ‘css기능값’;

 

• DOM
  • 각 태그에 대한 정보를 지니고 있는 JS 객체
  • 변수이름.DOM기능
  • DOM기능
    • innerText : 해당 태그 안에 있는 정보, 즉 text를 볼 수 있다.
    • offsetTop : 위치 Top에 대한 값을 알 수 있음
    • id : 해당 DOM이 가진 id 조회 가능
• event 설정
  • 예를 들어 버튼을 클릭하면 어떤 작업을 할 것이다.
  • 변수이름.event기능
• event 기능
  • onclick : 클릭 한번 됐을 때 발생하는 이벤트
  • ondblclick : 두번 클릭 됐을 때 발생하는 이벤트
  • onchange : 어떤 값을 수정했을 때 발생하는 이벤트
  • onmousemove : 해당 값 위에서 마우스 움직이면 발생하는 이벤트

Tips

• Date.now() 함수는 현재 날짜를 숫자 형태로 표시해 줌
  • ‘ms’ 는 + 앞에 있는 작업이 몇 ms 걸렸는가 알려주는 함수
• 코드를 처리하는 데 몇초 걸렸는지 확인 하는 코드
  

  const start = Date.now();
  실행할 코드
  console.log(Date.now()-start);​

• parseInt(숫자형으로 변환시켜줄 값, 몇진수로 변환시킬지) : 문자열을 숫자형으로 진수에 맞춰 변환시켜주는 것
• 모달 : 열고 닫을 수 있는 UI, 기존의 내용을 가리면서 나타내는 것

---

8주차 후기 : 다시 복습하면서 작성해도 비동기 처리는 항상 어렵다. 그래도 처음 학습했을 때 보다 다시 차근차근 복습해가면서 보니까 아예 모르던 부분도 왜 그런지 이해할 수 있었다. Promise에서 await를 왜 붙이는지 처음 배울 땐 정말 이해가 안갔는데 이제야 이해가 간다. 리액트 라이브러리 공부하기 전에 다시 한번 훑어봐야 겠다.