240205 - 비동기처리 학습

24.02.02.

비동기처리

cf) js 비동기처리 복습

자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6)

• callback 체인 문제점
  • 가독성이 떨어짐
  • error 처리 위치, 디버깅이 어려움
  • 유지 보수 어려움

자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)

자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)

비동기처리 하는 이유

• 비동기적으로 작동하는 함수들을 동기적으로 작동하도록 만들기 위해 작업함
  
  

방법

• sencha에서는 deferred 사용

Ext.Deferred | Ext JS 7.5.1

• 비동기함수를 동기적으로 표현하기 위해 async, await 사용

  • await 사용할 때는 try, catch, finally 구문 사용

• store.load 에는 callback함수 사용

Ext.data.ProxyStore | Ext JS 7.5.1

• store 없는 경우 Ext.Ajax.request 사용

Ext.Ajax | Ext JS 7.5.1

• store request 할 때 인자를 변경하고 싶을 때 getProxy().setExtraParams 사용

---

과제

내 문제지 페이지
문제지 만들기 버튼 클릭하면 dialog 생성

• 문제지 이름 없으면 생성 버튼 클릭 disabled 되도록 만들기
• api 사용해서 문제지 생성
• deferred, async, await 사용하여 만들기
• 생성 버튼 누르면 response data를 dialog로 출력하기

---

24.02.05.
먼저 dialog 생성

생성을 누르면 작성한 문제지 이름을 이용해서 api 요청하여 dialog 다시 생성

• 일단 생성을 누르면 dialog 생성됨(AfterCreatePaperDialog.js)
• 새로 생성되는 dialog에는 요청 후 받은 데이터를 넣어야 함

⇒ 그럼 요청은 그 전에 title을 받아서 하는 거지