[JavaScript] JavaScript의 동작 원리

다음 포스팅이 동기/비동기(Sync, Async)에 대한 것인데... 이를 이해하기 위해서는 자바스크립트의 작동 방식이 어떠한지를 먼저 알아야 한다고 생각했다. 그걸 안다고 해도 지금 내 머리 속에 둥둥 떠다니는 비동기 처리와 콜백, promise, resolve, reject 등이 한 번에 이해되고 그러진 않겠지만... 열심히 하는 거 같은데 남는 게 없는 느낌이라 뭔가 좀 허하다. 그래도 정진 해야겠지.

 

자바스크립트의 동작 원리

 

우선 JavaScript는 동기식 언어이다. 즉, 한 번에 하나의 작업을 실행하는데 그 작업이 실행되는 동안 다른 작업은 수행되지 않는다. JavaScript는 single threaded 언어로 한 번에 코드 하나밖에 실행하지 못한다. setTimeout 같은 코드는 바로 실행되는 것이 아니라 사용자가 지정한 임의의 시간 이후에 실행된다. 그렇기 때문에 해당 코드는 이벤트 루프, 비유하자면 대기실 같은 곳에 보내져서 대기하고 다른 코드들을 먼저 처리하다가 지정한 시간이 끝난 이후 실행된다.

 

대기실에 보내지는 코드들은 다음과 같다.

Ajax 요청 코드, 이벤트 리스너, setTimeout 등 (setTimeout은 0초라도 늦게 실행된다.)

 

대기실에 있는 코드들은 일을 처리하는 공간이 비어있어야 올라갈 수 있다. 따라서 매우 간단한 이벤트리스너나 setTimeout이더라도, 실행되는데 시간이 오래 걸리는 코드를 처리하고 있을 시에는 아무 반응이 없을 것이다. 이때 응답 없는 페이지 메세지가 뜰 수 있다.

 

요점: 자바스크립트는 한 번에 한 줄 동기적으로 처리된다. 하지만 비동기적으로 처리할 수도 있다. (Ajax, eventListener, setTimeout)

 

비동기 처리

 

JavaScript의 비동기 처리는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 처리하는 방식을 말한다. 앞서 언급한 Ajax, eventListener, setTimeout 같은 경우가 그 예시인데, 콜백함수, Promise, Async 등이 이를 해결할 수 있다. 왜 이런 해결 방법이 나왔는가... 그건 완료 순서가 보장되는 걸 원하기 때문이다. 그래서 콜백함수로 해결하려다가 콜백 지옥이 발생해 다른 방법들이 등장한 것이다.(아마도) 

 

여담

말만 들어도 머리 아프다. 원리를 이해하고 코드를 짜야 예쁜 코드를 만들 수 있을텐데... 나도 멋진 개발자가 되고 싶다... 컴퓨터 구조랑 운영체제 같은 건 언제 또 공부하지... 열심히 하자... 응애...