Async
동기 vs 비동기
- 동기 작업 : 이전 코드가 완료된 후에야 다음 코드가 실행됨
- 비동기 작업 : 백그라운드에서 처리되는 도중에도 이어서 다음 코드가 실행됨
콜백 함수
- 비동기 작업 끝난 뒤에 수행할 코드를 콜백 함수로 전달
- 콜백이 중첩되면 가독성이 급격히 떨어지는 콜백 지옥 발생
Promise
- 비동기 작업의 성공, 실패를 다루기 위해 설계됨
.then()체이닝으로 가독성 UP.catch()로 에러 한곳에서 처리
async / await
- async/await 는 Promise 기반 비동기 코드를 동기식처럼 작성할 수 있게 해준다.
- async 함수 내부에서만 await 사용가능. await는 Promise의 resolve 값 반환.
Vue
변수선언
const { createApp, ref } = Vue;
기본
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="step01"></div> <script> const { createApp, ref } = Vue; createApp({ setup() { return {} } }).mount("#step01"); </script> </body> </html>
hover: 마우스 올렸을때
reactive는 객체를 반응형(reactive) 객체로 만들어서
값이 바뀌면 화면이 자동으로 다시 그려지게 해주는 함수다.
json파일 vue에 받아오기
<script> // data.js 파일을 불러오면 scholar 변수를 사용할 수 있다. ref는 안써도됨 const {createApp} = Vue; createApp({ setup(){ return{} } }).mount('#app') </script> </body>
