Written by Wayne
on 

[GPT로 공부하기] JS의 스레드와 동기

GPT로 개발 공부하기 - 자바스크립트의 스레드와 동기 이해하기




GPT로 개발 공부하기

회사에서 Chat GPT를 결제해준 뒤로, 여러 방면에서 GPT에게 도움을 많이 받고 있다. 특히 비전공자로서 마구잡이로 지식을 습득해왔던 나는, 지식들이 파편화되어 여기저기 흩어져 있는 상황이었는데(?) 내가 이해하고 있는 바가 맞는지, 이게 이거와 관련이 있는 건지, 이 내용과 저 내용은 서로 상충하는 것 같은데 어떤 것이 맞는 건지와 같은 의문을 항상 품고 있다가 나의 퍼스널~ 과외 선생님, GPT에게 물어보기로 했다.

Chat GPT로 공부하면 좋은 점

일단, 보통 모르는 내용이 나와서 구글링을 할 때면, 필요 없는 부분까지 나와서 그런 부분들까지 함께 읽었어야 했다.
Chat GPT와 공부하면 채팅 형식이고, GPT가 말해준 내용에 대해 직접적으로 바로 물어볼 수 있기 때문에 구글링 하는 수고며, 필요한 부분만 찾아 읽어야 하는 수고가 훨씬 덜했다.
그리고 GPT가 문맥을 이해하고 있기 때문에, 내가 왜 이 부분에 대해 이해하지 못하는지도 파악하여 해당 부분에 부연 설명을 추가해주는 점도 엑설런트!

물론, 이러한 대화를 하기 전에 사전 작업(?)을 좀 해줘야 한다. 오피셜한 내용을 기반으로 얘기해달라고 하거나, 너무 개인적인 이야기는 배제해달라고 해야 하고,
이미 알고 있는 내용이어도 기초부터 차근차근 물어보는 게 좋을 때도 있다.

또 좋은 점은, GPT에게 마크다운 형식으로 이 주제에 대한 대화 내용을 정리해달라고 할 수도 있다.
이러면 좋은 점은, 오늘 공부한 대화 내용을 잊지 않기 위해 블로그에 마크다운 내용을 복붙하여 남겨 놓을 수 있다는 점이다.
앞으로 내가 공부하면서 공유하고 싶거나, 기록하고 싶은 내용을 GPT로 개발 공부하기 시리즈로 남겨보려고 한다.

자, 아래 내용은 일부 이미 알고 있는 내용이지만, 신입 시절의 나에게 빙의하여 질문해보았다.

Q: 자바스크립트가 싱글스레드야?
A: 네, 자바스크립트는 기본적으로 싱글스레드 언어입니다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 처리할 수 있다는 것을 의미합니다.
이벤트 루프와 콜백 큐를 활용하여 비동기 작업(예: setTimeout, 네트워크 요청, 파일 읽기 등)을 처리할 수 있습니다. 비동기 작업은 백그라운드에서 실행되고, 완료되면 콜백 큐에 작업이 추가되며, 메인 스레드가 여유가 있을 때 이벤트 루프가 해당 작업을 처리해줍니다.

싱글스레드이지만, 비동기 처리 메커니즘 덕분에 자바스크립트는 효율적으로 여러 작업을 동시에 처리하는 것처럼 보이게 됩니다.

Q: 싱글스레드이지만 여러 작업을 동시에 처리하는 것처럼 보이게 한다는 내용을 쉬운 예시로 알려줘.
A: 좋은 예로, 카페의 바리스타를 생각해 볼 수 있어요. 바리스타는 혼자 일하는데(싱글스레드), 여러 고객의 주문을 동시에 받습니다.

  1. 주문 받기: 바리스타가 첫 번째 고객의 커피를 준비하라는 요청을 받습니다. 커피가 준비되는 동안 바리스타가 직접 계속 커피를 끓이고 있을 필요는 없죠.
  2. 대기 시간 활용하기: 커피가 끓는 동안 두 번째 고객의 주문을 받습니다. 이렇게 대기 시간이 있는 작업을 처리하는 동안, 바리스타는 다른 고객의 주문을 받을 수 있습니다.
  3. 주문 준비 완료: 첫 번째 커피가 완성되면 바리스타는 다시 돌아와 그 커피를 손님에게 제공하고, 또 다른 주문을 받거나 대기 중인 작업을 처리할 수 있습니다.

자바스크립트도 비슷한 방식으로 작동합니다. 한 가지 작업을 요청하고(주문을 받듯), 결과가 나올 때까지 기다리지 않고 다른 작업(다른 주문을 받는 것)을 처리합니다. 첫 번째 작업이 끝나면 돌아와서 결과를 처리하는 방식이죠. 이렇게 자바스크립트는 싱글스레드이지만 비동기 처리를 통해 여러 작업을 동시에 처리하는 것처럼 보이게 합니다.

Q: 자바스크립트는 동기적 언어 아니야?
A: 맞습니다, 자바스크립트는 본질적으로 동기적(synchronous) 언어입니다. 자바스크립트 엔진은 코드를 위에서 아래로 순서대로 한 줄씩 실행하기 때문에 기본 동작이 동기적입니다.
그러나 비동기(asynchronous) 작업을 처리할 수 있도록 설계된 메커니즘이 포함되어 있습니다. 이 메커니즘 덕분에 자바스크립트는 비동기적인 작업을 실행하는 것처럼 보이게 됩니다.
예를 들어, setTimeout, fetch, Promise와 같은 기능들은 비동기적으로 동작하게 해 주며, 자바스크립트가 긴 대기 시간을 필요로 하는 작업을 처리할 때에도 메인 스레드가 멈추지 않고 다른 작업을 이어서 처리할 수 있도록 합니다.

이러한 비동기 작업들은 이벤트 루프와 콜백 큐라는 개념을 통해 메인 스레드와 독립적으로 처리되었다가, 준비가 되면 다시 메인 스레드에서 처리됩니다. 그래서 자바스크립트는 본질적으로 동기적이지만, 비동기 작업을 처리하는 방식 덕분에 여러 작업을 동시에 처리하는 것처럼 보이게 되는 것입니다.

Q: 동기적 언어인데 왜 Promise와 같은 처리를 안 하면 기다리지 않고 다음 코드로 넘어가는 거야? 동기적 언어면 기다려야 하는 거 아니야?
A: 좋은 질문입니다! 자바스크립트가 동기적 언어이긴 하지만, 브라우저나 Node.js 같은 런타임 환경에서는 비동기 작업을 처리할 수 있는 기능을 추가적으로 제공합니다.
이 덕분에 동기적 언어의 특성을 가지면서도 비동기 작업을 실행할 수 있습니다. 자바스크립트 엔진 자체는 기다리는 기능을 제공하지 않지만, 자바스크립트 런타임 환경이 이를 보완해주는 것입니다.

자바스크립트의 비동기 처리 방식

  1. 비동기 작업 호출: setTimeout, fetch 등 비동기 작업을 만나면, 자바스크립트는 그 작업을 실행하라는 요청을 런타임 환경(브라우저 또는 Node.js)으로 넘깁니다.
  2. 대기하지 않음: 백그라운드에서 해당 작업이 진행되는 동안, 자바스크립트는 다음 줄로 넘어가 다른 코드들을 계속 실행합니다.
  3. 콜백 큐와 이벤트 루프: 백그라운드 작업이 완료되면, 결과가 콜백 큐에 추가됩니다. 이후 이벤트 루프가 메인 스레드가 비어 있는지 확인한 후, 해당 결과를 처리하도록 합니다.

이 방식 덕분에 자바스크립트는 비동기적으로 작업을 처리할 수 있고, 기다리지 않고 다음 코드로 넘어가는 것처럼 보이게 됩니다.
이는 자바스크립트 엔진 자체의 기능이 아니라, 브라우저나 Node.js 같은 런타임 환경이 제공하는 비동기 처리 기능 덕분에 가능한 것입니다.

Q: 그런데 실제로 네트워크 요청들이 완료된 뒤에 순서대로 하길 원해서 Promise나 async/await가 생긴 거 아니야?
A: 맞아요! 바로 그 이유 때문에 Promise와 async/await 같은 비동기 작업을 더욱 순차적이고 직관적으로 처리할 수 있는 기능이 도입되었습니다.
자바스크립트는 비동기 작업이 많아지는 현대적인 웹 개발에서, 순서를 보장하면서도 비동기 작업을 간단하게 다루기 위해 이러한 기능을 추가했습니다.

비동기 작업을 순차적으로 처리하기 위한 Promise와 async/await

  1. Promise
    Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체로, 비동기 작업이 끝나면 .then()이나 .catch()를 통해 결과를 다룰 수 있게 해줍니다. 이를 통해 특정 작업이 완료된 후에만 다음 작업을 실행하도록 순서를 보장할 수 있습니다.

  2. async/await
    async/await는 Promise의 문법을 더 간결하고 동기적 코드처럼 읽히도록 한 것입니다. async 함수 내에서 await를 사용하면, 해당 비동기 작업이 완료될 때까지 기다렸다가 다음 줄로 넘어갑니다. 이를 통해 Promise 체이닝보다 더 직관적이고 동기적인 느낌으로 코드를 작성할 수 있게 해줍니다.

Q: 그러면 애초에 비동기처럼 보이게 하기 위해 런타임 환경으로 넘기는 등의 것을 안 했으면 해결되는 문제 아니야?
A: 맞습니다. 처음부터 자바스크립트가 모든 작업을 동기적으로만 처리했다면, 비동기 작업을 처리하는 데 대한 고민은 필요하지 않았을 것입니다.
하지만 자바스크립트가 브라우저 환경에서 사용되면서, 비동기 처리가 필수적이 되었습니다.

  1. 사용자 경험의 중요성: 웹 브라우저는 주로 사용자 인터페이스(UI)를 다루는 환경이기 때문에, 사용자가 웹 페이지를 사용할 때 인터페이스가 멈추지 않고 응답성 있게 동작하는 것이 중요합니다.
  2. I/O 작업이 느린 특성: 파일 읽기, 네트워크 요청 등 입출력(I/O) 작업은 일반적으로 시간이 오래 걸리기 때문에, 이런 작업들을 동기적으로 처리하게 되면 앱이 매우 느려집니다.
  3. 이벤트 기반 언어의 특성: 자바스크립트는 이벤트 기반 언어로 설계되었고, 이 특성은 비동기 작업과 잘 맞아떨어집니다.
  4. 병렬 처리의 필요성: 비동기 처리를 통해 여러 작업을 동시에 진행할 수 있게 함으로써 프로그램의 효율성을 크게 높일 수 있습니다.

Q: 이벤트 루프와 콜백 큐, 비동기 처리 메커니즘이 Node.js와 같은 런타임에서 제공하는 기능이야? 아니면 자바스크립트 자체의 기능이야?
A: 이벤트 루프와 콜백 큐, 그리고 비동기 처리 메커니즘은 자바스크립트 자체의 기능이 아니라, 런타임 환경(예: Node.js, 브라우저)에서 제공하는 기능입니다.

자바스크립트 엔진 자체(예: V8)는 싱글스레드로 동작하며, 순차적으로 코드를 실행하는 기본적인 기능만 제공합니다. 하지만 비동기 작업(예: setTimeout, fetch, 파일 읽기 등)은 자바스크립트 엔진만으로는 처리할 수 없고, 런타임 환경이 이를 지원합니다.

상세한 설명:

1. 자바스크립트 엔진의 역할

자바스크립트 엔진은 다음과 같은 기능을 수행합니다:

하지만 비동기 작업을 관리하는 기능(예: 이벤트 루프, 콜백 큐 등)은 없습니다.

2. 런타임 환경의 역할

런타임 환경(브라우저나 Node.js)은 자바스크립트 엔진이 수행할 수 없는 비동기 작업을 처리하는 데 필요한 도구들을 제공합니다:

3. 이벤트 루프와 콜백 큐

이벤트 루프와 콜백 큐는 자바스크립트 엔진이 아닌 런타임 환경의 일부입니다. 런타임 환경은 다음과 같은 방식으로 동작합니다:

  1. 비동기 작업(예: setTimeout, 네트워크 요청)이 호출되면, 런타임 환경이 이를 처리합니다.
  2. 작업이 완료되면, 콜백 함수가 콜백 큐에 추가됩니다.
  3. 이벤트 루프가 스택(Execution Stack)이 비어 있는지를 확인하고, 비어 있으면 콜백 큐에서 작업을 가져와 실행합니다.

요약

따라서 비동기 작업을 수행하고 이벤트 루프를 통해 효율적으로 관리하는 기능은 런타임 환경의 지원 덕분에 가능한 것입니다.

결론

  1. 자바스크립트는 싱글스레드 언어인가?

    • 네, 자바스크립트는 본질적으로 싱글스레드 언어로 설계되었습니다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 처리할 수 있다는 뜻입니다.

  2. 자바스크립트는 동기적 언어 아닌가?

    • 맞습니다. 자바스크립트는 기본적으로 동기적(synchronous)으로 동작하며, 코드를 위에서 아래로 순서대로 실행합니다.
    • 하지만 현실적인 웹 환경에서는 동기적 처리만으로는 사용자의 요구를 만족시키기 어렵습니다. 예를 들어, 네트워크 요청이나 파일 읽기처럼 시간이 오래 걸리는 작업이 동기적으로 처리된다면, 사용자 인터페이스(UI)가 멈추거나 비정상적으로 느리게 동작하게 됩니다.

  3. 비동기를 지원하게 된 이유는 무엇인가?

    • 사용자 경험의 향상: 브라우저 환경에서 UI가 멈추지 않고 부드럽게 동작하도록 하기 위해 비동기 처리가 필수적입니다.
    • 효율적인 자원 활용: 비동기 처리는 CPU와 메모리 자원을 더 효율적으로 사용할 수 있도록 도와줍니다.
    • 이벤트 기반 설계: 자바스크립트는 사용자 이벤트와 상호작용을 처리하기 위해 이벤트 기반 언어로 설계되었으며, 이와 자연스럽게 맞아떨어지는 비동기 처리 메커니즘이 필요합니다.

  4. 이벤트 루프와 비동기 처리는 자바스크립트의 기능인가, 런타임 환경의 기능인가?

    • 이벤트 루프와 콜백 큐는 자바스크립트 자체의 기능이 아니라, 런타임 환경(브라우저, Node.js 등)에서 제공하는 기능입니다.
    • 자바스크립트 엔진은 동기적 작업만 처리하며, 비동기 작업은 런타임 환경의 지원을 받아 처리됩니다.

  5. Promise와 async/await는 왜 필요한가?

    • 비동기 작업의 순서를 보장하고, 더 직관적이고 가독성 높은 코드를 작성하기 위해 Promise와 async/await가 도입되었습니다.

자바스크립트는 싱글스레드라는 한계를 가지고 있지만, 런타임 환경이 제공하는 이벤트 루프, 콜백 큐, Web API 덕분에 비동기 작업을 처리할 수 있습니다. 이러한 메커니즘은 자바스크립트가 브라우저 환경과 같은 사용자 중심 애플리케이션에서 효과적으로 동작할 수 있도록 돕습니다.