오늘 정리
자바스크립트에서 비동기를 처리한다(여러작업을 동시에 처리한다)? 지연이나 이슈가 발생하지 않도록하는 것을 말하며, 그 방식으로는 콜백, 프로토타입(promise), aync&await, fetch 등이 있다.
복습
- 자바스크립트는 동기언어 → 비동기 처리가 필요한 경우 있음
강의 내용
영화검색 실습
[비동기처리 방식(콜백, 프로토타입, 반환값)]
- 콜백 함수
- 예 : setTimeout함수(콜백함수, 지연시간) - 지연 - await → 저급 방법!
- but, 콜백의 늪에 빠짐
- Promise(prototype*)
💡프로토타입*?
어떤 객체에 대해서도 재사용이 가능한 객체인 것- 반복코드 줄이고, 가독성 좋음, 비동기 처리의 성공/실패를 나눠서 나타내는 객체
- 성공시 : resolve(반환타입은 JSON? object?Promise다!!)
- 실패시 ; reject 내용을 다르게 입력
- promise핸들러
- .then() : 프로미스의 메소드로, 프로미스를 이행했을 때 할 일은 then() 호출로 정의
- .catch() : 에러해결, 반환타입 또한 promise 인스턴스
- .finally() ; 이행, 거부 상관없이 실행하는 콜백함수&프로미스를 반환함.
- 상태
- 이행(fulfilled) : 연산 성공 완료 200, 후처리를 진행
- 거부(reject) : 연산 실패 → 에러 핸들링(how? try-catch문!!) 후 화면구현
- 대기(pending) : 이행하지도 거부하지도 않은 초기상태
- but, then 핸들러 남용으로 인한 Promise Hell 존재?
```jsx
const a = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(1)
resolve()
}, 1000)
})
}
const b = () => {
console.log(2)
}
//a는 리턴타입이 promise 인스턴스라서 then 메소드 쓸 수 있지만, b는 안 됨.
a().then(()=>b)
b().then(()=>a) //cannot read properties of undefined(reading 'then')
```
- fetch
- BOM 브라우저오브젝트모델→ repl 실행 불가 → 설치하면 node.js에서 사용 가능 ⇒ html과 함께 사용 필요 (https://www.npmjs.com/package/fetch)
- fetch API의 반환타입은 promise이다.
- fetch를 통해 스프링 서버에 요청할 수 있음.
- async & await(커플, 함께 쓰임)
- async의 자리는 콜백함수의 자리
- 에러처리 → try-catch문
- promise구문 → async, await으로 변경하기 위해 await을 감싸는 함수를 선언해야 함.(예 : 아래의 wrapping)
- fetch 함수는 BOM API라서 REPL로 확인x → html문서로 실행하여 확인
- 리턴값은 프로미스 객체 → then() 사용 가능
movieList('harry potter')
.then(() => {
console.log('해리포터')
return movieList('avengers')
})
.then(() => {
console.log('어벤저스')
return movieList('home alone')
})
.then(() => {
console.log('나홀로집에')
})const wrapping = async () => {
await movieList('harry potter')
// await console.log('아바타'); console은 promise 타입이 아니기에 await 쓸 수 없음
console.log('해리포터')
await movieList('avengers')
console.log('어벤저스')
await movieList('home alone')
console.log('나홀로집에')
}
//fetch 함수는 repl로 확인x -> html 문서 통해 실행 필요
//주의 : 함수 꼭 호출하기!!
wrapping()- 언제 지연이 발생?
- API 정보 불러올 때(날씨, 영화정보 등)
유튜브 실습-영상 검색
캘린더 실습 시작-FullCalendar 활용
- API 사용 순서(https://fullcalendar.io/docs/initialize-globals)
-
npm 다운로드(npm install fullcalendar)
-
cnd 코드 입력
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth' }); calendar.render(); }); </script> -
event 추가(일정) → 배열의 형식으로 더해짐
- JSON 형식으로도 파일 작성 가능
-
[
{
"title": "월간회의",
"start": "2023-11-01"
},
{
"title": "sqld 시험",
"start": "2023-11-18"
},
{
"title": "휴가",
"start": "2023-11-18",
"end":" 2023-11-20"
},
{
"groupId":"99",
"title": "업체회의",
"start": "2023-11-23T15:00:00"
},
{
"groupId":"888",
"title": "팀회의",
"start": "2023-11-28T10:00:00"
}
]//일정에 대한 데이터셋 가져오기(배열, 계속 쌓여나감)
events:[
{
title: '월간회의',
start: '2023-11-01'
},
{
title: 'sqld 시험',
start: '2023-11-18'
},
{
title: '휴가',
start: '2023-11-18',
end: '2023-11-20'
},
{
groupId: 999,
title: '업체회의',
start: '2023-11-23T15:00:00',
},
{
groupId: 888,
title: '팀회의',
start: '2023-11-28T10:00:00',
}
]
});
강의 마무리
- 자바스크립트 새로운 API 활용 예정
