자바스크립트 기본 동작원리
ajax = 비동기통신을 json으로 하는것이다.
1. nodejs는 인터프리터 언어기 때문에 컴파일 없이 바로 코드를 순차적 실행한다.
2.js는 클래스가 없다 함 수로 이루어짐
3. 비동기식 운영이(일의 순서가 없음) 강점이다. 싱글스 래드 언어라고 생각하는 것이랑 개념이 다르다. 스래드는 운영체제가 들고 있는 걸 가져와서 언어에서 쓰는 것이다.(모든 프로그램은 순차적 실행)
왜 비동기 처리를 할까?
자바와 다르게 스래드의 문맥 교환이 없기 때문에 빠르게 처리할 수 있다.
비동기 처리의 이유
자바와 다르게 이렇게 함수를 인수로 바로 넣을 수 있다. 엄청 큰 장점이다.
이렇게 화살표 함수 문법을 사용하면 자바로 치면 this를 바인딩하기 쉽다는 장점이 있다.
위와 같이 실행시키면 비동기 처리를 하는 자바스크립트는 3번 코드같이 오래 걸리고 무거운 작업들은 실행시켜놓고 이벤트 루프에 던진 다음 완료되지 않은 상태에서 다음 코드로 넘어가버린다.
즉 메인 스택이 종료된 시점에서 작업이 완료된 스택에 있는 작업을 메인 스택에 들고 와서 실행시키는 것이다.
위 코드를 예를 들어서
2번 실행
3번 을 보니 오래 걸려서 이벤트 루프에 등록
4번 실행 메인 스택 종료가 되면 3번이 완료됐는지 확인 완료 안되면 5번 실행
3번이 완료되고 5번의 메인 스택이 종료되면 그때 실행
어떤 작업을 하든 이벤트 루프에 등록하고 싶으면 setTimout함수를 사용하면 된다.
그리고 위 함수 빼고 통신이 이루어지는 코드는 이벤트 루프에 등록된다.
비동기 프로그램을 봤을때 비동기프로그램을 이해하고 어떻게쓰는지 잘알아야 비동기프로그램을 잘 짤 수 있게 된다.
비동기 프로그래밍의 예시
위와 같은 상황을 보자
코드 1 실행되고
fetch로 요청을 했을 때 비동기 프로그램 특성상 이벤트 루프에 등록되고 num은 null이 들어간다. 그리고 밑에 for문까지 실행되고 fetch요청이 끝나더라도 num에는 여전히 null이 들어있기 때문에 fetch요청으로 받은 정보를 넣을 수 있는 방법이 없다.
async
3번에서 미리 함수를 실행시켜놓고 for문이 100000000000000번 도는 동안 그 사이 12번 함수를 다 완성시켜진다. 그리고 for문이 끝나면 완료된 hello함수가 실행될 수 있는 상태가 되고 num에 fetch요청 값을 넣을 수 있게 되는 것이다.
이때! async가 뭐하냐면 3번에서 hello가 때려질 때 async가 붙어있는 함수 블록 전체를 이벤트 루프에 등록시켜준다 async가 없었다면 num에 null값이 들어갔을 것이다.
fetch/await만 붙인다고 다 비동기 프로그래밍이 아니라는 뜻이다. 위 개념을 이해하는 것이 중요하다.
fetch의 패턴에 promies라는 패턴이 있다
promies가 무슨 뜻이냐면 지금 당장에 값을 줄 수 없으니 값을 받아주겠다고 약속한 다라는 뜻
비동기 프로그래밍의 예시
ajax
부분적으로 그림을 그리고 싶다면 돔을 찾아서 수정된 값을 넣는 로직을 비동기 처리하면 된다.