동기
<body>
<button type="button" id="btn">버튼</button>
</body>
<script>
window.addEventListener("load", (e) => {
document.getElementById("btn").addEventListener("click",
(e) => {
const start = Date.now();
for (var i =0; i<1000; i++){
}
const end = Date.now();
console.log((end-start)+"밀리초");
console.log("다음 작업");
})
})
</script>결과 : 다음 작업, 0밀리초
비동기
setTimeout(()=>{
const start = Date.now();
for (var i =0; i<1000; i++){
}
const end = Date.now();
console.log((end-start)+"밀리초");
}, 0);
console.log("다음 작업");결과 : 0밀리초, 다음 작업
비동기 처리를 수행해야하는 경우
1. 입출력 작업(파일에 읽고 쓰기).
서버에 요청하고 응답받는 시간이 너무 느리기 때문.
2. 암호화& 복호화
- 콜백함수
비동기 처리를 수행한 후, 다음 작업을 시키고자할 때, 콜백함수를 이용할 수 있다.
하지만 콜백 안에서 예외 발생 시 외부에서 도울 수는 없다. 이를 보완하고자 등장한 개념이 promise
- Promise
연속적으로 동작함. then 함수에 성공했을 떼 수행할 작업을 연속 지정 가능
them의 수는 무제한 이지만 catch는 1번만.
- Async/Await
/
- Ajax
Asynchronous Javascript XML. 비동기 통신. 클라이언트, 서버 간에 XML 또는 JSON 데이터를 주고 받는 기술이다.
그런데 ajax가 가독성이 떨어져서 fetch api가 추가되었다.
HTML5에서는 Server Sent Event(Web push)와 Web Socket API가 추가되었다.
기본적으로 클라이언트와 서버의 통신 방식은 클라이언트가 서버에게 요청을 하면 서버가 응답을 보내는 방식이다.
Push는 클라이언트의 요청이 없어도 서버가 클라이언트에게 데이터를 전송하는 것이다.
HTTP나 HTTPS는 데이터 외에 헤더 정보를 같이 전송하고 한번 응답이 오면 연결이 끊어진다. 그래서 짧은 메시지를 보낼 때 이를 사용하면 오버헤드가 크다.
그리고 상태유지가 되지 않기 때문에 쿠키, 세션을 이용해 상태유지를 했는데 이 문제를 해결하기 위해 연결형 서비스이고 오버헤드가 젇은 web socket이 html5에서 추가 되었다.
[ 작업순서 ]
1. XMLHttpRequest 객체 생성,
readyState: 상태를 나타내는 속성으로 0이면 객체를 생성한 직후, 1이면 open()을 호출한 상태, 2면 send()호출, 3이면 서버에서 응답이 오기 시작한 상태, 4면 응답 완료.
status: 100,200,300,400,500 번대
2. 서버에게 보낼 데이터 준비,
3. 서버에게 응답이 왔을 때 처리할 콜백함수를 등록하고 그 안에서 처리하는 코드를 작성,
4. open 메서드를 호출해서 연결 요청 준비,
5. send 메서드를 호출해서 요청 전송
'🤹🏻♀️ 자바스크립트 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁' 카테고리의 다른 글
| [javascript] 자바스크립트 for in 과 for of 차이 (0) | 2022.11.13 |
|---|---|
| [JS] JSON .parse VS .stringify 차이점 (0) | 2022.11.12 |
| [javascript] 자바스크립트 문자열 정렬 (오름차순, 내림차순) (0) | 2022.11.10 |
| [javascript] 자바스크립트 숫자 배열 정렬 (0) | 2022.11.10 |
| [javascript] 자바스크립트 랜덤 점심메뉴 고르기 (0) | 2022.11.09 |
댓글