[2023.11.13] 개발자 교육 36일 차 : 강의-JavaScript with 실습 [구디 아카데미]

DaramGee·2023년 11월 13일

promise 비동기 이벤트 콜백함수

오늘 정리

복습

강의 내용

강의 마무리

클라우드 활용 자바개발자 양성과정(구디)

목록 보기

36/95

오늘 정리

자바스크립트 언어는 동기적인 언어다? 하지만 비동기 처리를 할 경우가 생기기 때문에 비동기를 처리하는 방식을 익히는 것이 필요하다. 그렇지 않으면 여러 이슈가 발생할 수 있다.

비동기 처리 방식은? 콜백함수, promise, **a**sync/await 등의 방식이 있다.

복습

비동기 처리

네트워크 통신 포함 리소스 취득 인터페이스 제공

fetch의 경우, XMLHttpRequest(https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest)보다 강력하고 유연함.

Ajax	fetch API	Axios
빠르게 동작하는 동적 웹페이지 개발 용이	내장 라이브러리, import없이 사용	브라우저, Node.js위한 promise API 활용 라이브러리
핵심 객체 XMLHttpRequest 객체(웹페이지 일부 갱신 가능(비동기처리))	XMLHttpRequest의 대체자(비동기 요청 더 쉽게)	브라우저 호환성 뛰어남.
최근은 JQuery 내 ajax가 대세?	promise기반 동작→콜백지옥 탈출	자동으로 JSON 형식으로 변환, React에서 주로 사용
콜백지옥 생길수도..	구형브라우저 지원x, API요청 취소x	라이브러리 설치 필요, 아직 fecth보다 기능 적음

var requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch("https://www.googleapis.com/youtube/v3/search?part=snippet&key=AIzaSyCcvgxRhPCt-yVa-BcpGUi1dmM4hKYiEi4&type=video&q=슬릭백", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

// WARNING: For GET requests, body is set to null by browsers.

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://www.googleapis.com/youtube/v3/search?part=snippet&key=AIzaSyCcvgxRhPCt-yVa-BcpGUi1dmM4hKYiEi4&type=video&q=%EC%8A%AC%EB%A6%AD%EB%B0%B1");

xhr.send();

강의 내용

자바스크립트는? (https://learnjs.vlpt.us/basics/)

순차적으로 진행되며, 동기적인 언어이다.→ js의 흐름을 바꾼다? 논리적 오류, 트러블 슈팅이 가능해야 함.

동기코드vs비동기코드?

동기코드(직렬적) : 한 작업이 실행되는 동안, 다른 작업은 멈추고 차례를 기다린다(앞의 코드와 뒤의 코드가 종속적)
비동기(병렬적) : 특정 코드 연산 끝날 때까지 기다리지 않고, 다음 코드를 먼저 실행(함수도 호이스팅이다)

💡When? 비동기상황이 필요한 순간이 있음.
💡How?
- setTimeout()으로 지연하여 호출,
- 세번째 인자에 콜백함수 넣어 호출(일급함수) → 순서유지, 확정 가능

예: setTimeout(콜백함수, 시간)

console.log('1');
setTimeout(()=>{
 console.log('timeout');
},5000);
console.log('2');
/*
> 1
> 2
> timeout
*/

const hap = (a, b, colback) => {
  setTimeout(() => {
    colback(a + b)
    console.log(`hap ${colback(a + b)}`)
  }, 1000)
}

//세번째 인자에 들어가는 콜백함수 선언
const first = (x) => {
  console.log(`first x : ${x}`)
  return x + 1
}

const x = hap(1, 2, first) //
console.log(`x : ${x}`)
const y = x //
console.log(`y : ${y}`)

/*
$ node 비동기1해결.js 
x : undefined   1초 뒤 실행
y : undefined   1초 뒤 실행
first x : 3
hap 4
*/

비동기처리

콜백함수 : but, 콜백 헬이 발생할 수 있음.

상품조회(() => {
  카트담기(() => {
    주문하기(() => {
      결제하기(() => {
        배송하기(() => {})
      })
    })
  })
})

promise(ES6 이후)(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)

비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄(높은 복잡도, 유지보수 어려움 → 동기함수처럼 값을 반환할 수 있음)
과정 : 대기(pending) → 이행(fulrfiled)→거부(rejected)

이행, 거부는 누가? promise가

let myFirstPromise = new Promise((resolve, reject) => {
  // 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout(function () {
    resolve("성공!"); // 와! 문제 없음!
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage는 위에서 resolve(...) 호출에 제공한 값입니다.
  // 문자열이어야 하는 법은 없지만, 위에서 문자열을 줬으니 아마 문자열일 것입니다.
  console.log("와! " + successMessage);
});

//닭 -> 달걀 -> 후라이
const getHen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      //비동기처리
      resolve('🐔')
    }, 1000)
  })
}

const getEgg = (hen) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${hen}=>🥚`)
    }, 1000)
  })
}

const cook = (egg) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${egg}=>🍳`)
    }, 1000)
  })
}

getHen()
  .then((hen) => getEgg(hen))
  .catch((error) => {
    return 'error' + error
  })
  .then((egg) => cook(egg))
  .then((response) => console.log(response)) //'🐔=>🥚=>🍳'

비동기 상황 대비
- html + 서블릿
- html + jsp
- html + 스프링
- html + 자바스크립트(promise) + 스프링
- html + 스프링 + 오라클
- 왜 오라클? html, css, js 는 클라이언트 다운로드 / 자바, 서블릿, jsp, 스프링, 오라클, mysql
```
<form method=get action =’http://172.16.2.3:8000/dept/deptList,.jsp(do or gd)>
</form> 
```

유튜브 인기영상 사이트(실습 - 해커뉴스 API 활용 실습 두 번째 버전)

💡 화면과 로직의 분리 → DOM API 가독성 떨어짐 → 문자열로 수정페이지 묶기(ejs) → handlebars 등장(태그 사이에 자바, js코드 안 보임.)

📖step1. 학습목표
1. 외부 서버 활용하기
2. 비동기 통신 객체 활용 처리 - XMLHttpRequest & open & send
3. Restful API? - get방식 처리
4. 내장 객체로 속성, 함수 호출(왜? DOM API는 직관적x) → ejs 템플릿 엔진으로 처리하였다.

코드양은 늘지만 복잡도는 늘지 않는다.(가독성 높음)

//JSON 정보를 아래처럼 각 영역으로 불러오는 법 다시 복습 필요 
let content = ''
content += `<ul class="videos">`
for (let i = 0; i < items.length; i++) {
  //25번 반복 - 25개의 li
  content += `<li class="container">`
  content += `<div class="video">`
  content += `<img class="thumbnail" src='${items[i].snippet.thumbnails.medium.url}'/>`
  content += `<div>`
  content += `<p class="title">${items[i].snippet.title}</p>`
  content += `<p class="channelTitle">${items[i].snippet.channelTitle}</p>`
  content += `</div>`
  content += `</div>`
  content += `</li>`
}
content += `</ul>`

document.querySelector('#root').innerHTML = content