라우터에서 머리좀 터지고,,🤓🤓🤓🤓🤓🤓
주제를 바꿔서 ajax 통신에 대해서 공부하려고 한다.. 아니뭔가 이번주 왜케 집중안되는거같지 뚁땽해,,
비동기 프로그래밍이란?
🟦 동기와 비동기
✔ 동기적인 프로그래밍
우선 자바스크립트는 동기적이다. 한가지 일만 할 수 있으며, 함수와 변수들이 선언된 순간, hoisting 되서 젤 위에 오브젝트 형식으로 변수에 담긴다. 단순하다고 생각할 수 있지만, 효율적으로 부드러운 프로그래밍을 하기에는 한계가 있다.
✔ 비동기적인 프로그래밍
비동기 프로그래밍이란 단순하게 얘기하면 꼭 순차적으로 한줄 한줄 순서대로 실행되지 않는 코드를 읽는 프로그래밍이라고 할 수 있다. 해야 할 일을 위임하고 기다리는 방식이라고 할 수 있다.
✔ 자바스크립트와 비동기
자바스크립트가 도는 환경에는 자바스크립트 엔진 뿐 아니라 Web Api도 함께 동작한다. 여기에서는 타이머를 사용하는 작업을 하거나 AJAX로 http요청을 보내거나, 파일에서 데이터를 읽어오는 등 시간을 소요하는 작업들을 한다.
이런 작업들을 순차적으로 동기적으로 실행하다 보면 속도에 문제가 생길 수도 있고, 브라우저 엔진이 돌아갈때도 비효율적일 수 있다. 그래서 자바스크립트에서 데이터를 불러오거나 의도적으로 시간을 지연시키는 작업을 할 때 비동기적 테크닉을 사용한다.
🟦 자바스크립트의 비동기적 프로그래밍
🔸 자바스크립트에서 비동기적 테크닉을 사용하는 경우
- AJAX 호출을 비롯한 네트워크 통신
- 파일을 읽고 쓰는 등의 파일 시스템 작업
- 의도적으로 시간 지연을 사용하는 기능.
🟦 스코프와 비동기적 실행의 관계
비동기적 프로그래밍에서 주의해야 할 부분이 스코프이다. 스코프에 따라 변수의 유효범위가 달라지기 때문이다.
function count(){ let i; for(i= 0 ;i<5 ; i++){ setTimeout(() => { console.log(i === 0 ? 'finish':i+1) },(i+1) * 1000) } } count() // 5가 6번 찍힘.
여기서 5가 5번찍히는 이유는 변수 i의 위치에 있다.
for문이 끝나고 난 뒤 setTimeOut이 실행되는데, 이때 for문의 결과값에 따라 i는 5가 되고, 그 값이 i에 담긴다.
그 다음에 setTimeOut콜백함수가 실행되므로, 5가 5번 찍히게 된다.
여기서 블록 스코프로 i의 변수범위를 바꿔주게 되면 정상적으로
1,2,3,4,5 finish가 찍힌다.
function count(){ for(let i= 0 ;i<5 ; i++){ setTimeout(() => { console.log(i === 4 ? 'finish':i+1) },(i+1) * 1000) } } count()
출처 / 참고
