[Web/JS] 자바스크립트 기본 원리

✏️  자바스크립트 엔진 구조

• 변수들의 기본 데이터는 Memory Heap 영역에 저장된다
• Call Stack은 코드들을 실행하는 곳
• 자바스크립트는 동기적인 프로그래밍 => 코드들 쓴 순서대로 실행시킨다

✏️  자바스크립트의 실행 스레드

• 자바스크립트는 스레드가 하나인 싱글 스레드 구조를 가진다
• 오래 걸리는 작업이 생기게 되면 싱글 스레드 구조 때문에 그 작업을 처리하는 동안 다른 코드를 실행할 수 없기 때문에 다음 코드들은 앞의 작어을 처리하는 만큼 시간이 지연된다

✏️  싱글 스레드 해결법(웹 API)

• 웹 API가 스레드를 제공해준다
• setTimeout => 입력한 시간만큼 코드를 딜레이시키고 함수를 실행시킨다
• eventhandler => 클릭과 같은 이벤트를 핸들하는 함수들
• Ajax, Axios, fetch => 클라이언트와 서버간에 데이터를 주고받는 기술

✏️  Task Queue

• 웹 브라우저에서 할 일을 가지고 있다가 자바스크립트엔진으로 넘겨주는 역할
• Call Stack이 비게 되면 일을 넘겨준다

✏️  비동기 처리 방식

• async, await의 비동기 처리 방식이 있다
• await => async의 함수를 일시정지 시켜준다, 즉 함수를 멈추고 함수 다음 문장을 실행시킨 뒤 함수를 실행시킨다

✏️  정리

• 자바스크립트에서 API호출과 같이 시간이 오래 걸리는 작업을 만나게 되면 웹 API가 작업을 가져가서 다른 일들을 자바스크립트 엔진이 처리하는 동안 기다리면서 Task Queue로 넘긴 후, 자바스크립트엔진이 일을 끝내게 되면 Task Queue에서 자바스크립트엔진으로 일을 넘겨준다 => 싱글 스레드 구조인 자바스크립트의 대처 방식

✏️  기타

• <pending> => fetch를 실행시킬 때 네트워크 상황에 따라서 데이터를 불러오는 속도가 달라지므로 데이터를 가져올 때까지 기다려달라는 의미로 사용