JavaScript는 왜 싱글 스레드일까?

1)시작하기 전 용어정리

• 스레드와 프로세스란?

스레드는 컴퓨터 프로그램이 실행될 때의 작업단위에요.

프로세스가 프로그램을 실행하는 단위라면,스레드는 그 프로세스 내에서 실행되는 작은 작업 단위라고 할 수 있습니다.

• 싱글 스레드란?

싱글 스레드는 한 번에 하나의 작업만 수행하는 방식이에요.

한 작업이 완료될 때까지 다른 작업을 수행하지않아요.

• 비동기란?

비동기란 한 작업이 끝나기를 기다리지 않고,다른 작업을 시작할 수 있어요.비동기 작업은 나중에 완료됩니다.

• 이벤트 루프란?

이벤트 루프는 콜 스택과 태스크 큐를 관리하며 콜 스택이 비어 있을 때 태스크 큐에서 작업을 가져와 실행합니다. 이 과정이 반복되면서 비동기 작업을 처리합니다.그렇다면 콜 스택과 태스크 큐는 무엇일까요?

• 콜 스택과 태스크 큐란?

콜 스택은 현재 실행 중인 함수들이 쌓이는 스택이고 태스크 큐는 비동기 작업이 완료된 후 실행될 콜백 함수들이 대기하는 큐에요.

태스크 큐의 동작 원리

1. 비동기 작업이 실행됩니다(예: setTimeout, setInterval, 이벤트 리스너).
2. 비동기 작업이 완료되면 해당 콜백 함수가 태스크 큐에 추가됩니다.
3. 이벤트 루프는 콜 스택이 비어 있을 때 태스크 큐에서 콜백 함수를 가져와 콜 스택에 추가하여 실행합니다.
4. 콜 스택에 있는 모든 작업이 완료되면 다시 태스크 큐에서 다음 작업을 가져옵니다.

예제

다음은 태스크 큐의 동작을 보여주는 간단한 예제입니다.

console.log('Start');

setTimeout(() => {
    console.log('Timeout callback');
}, 0);

console.log('End');

// 출력: Start
//      End
//      Timeout callback

이 예제에서 프로미스의 콜백 함수는 마이크로태스크 큐에 추가되며, setTimeout의 콜백 함수는 태스크 큐에 추가돼요. 따라서 'Start'와 'End'가 먼저 출력되고, 그 다음에 'Promise callback'이 출력되며, 마지막으로 'Timeout callback'이 출력돼요.

프로미스는 비동기 작업을 처리할 때 사용되는 자바 스크립트 객체에요.

이제 위그림을 보면서 JavaScript의 싱글 스레드와 이벤트 루프를 설명해드릴게요.

위에 보시면 스레드가 싱글인 것을 확인할 수 있는데 일단 자바 스크립트는 자체적으로 멀티스레드를 지원하지 않습니다 따라서 하나의 스레드에서 모든 코드를 실행하며,비동기적 처리를 통해 블로킹을 촤소화합니다.

비동기적 처리를 통해 블로킹을 최소화한다는 말은, 한 작업이 완료될 때까지 기다리지 않고 다른 작업을 계속해서 수행할 수 있게 함으로써, 시스템 자원을 효율적으로 활용하고 사용자 경험을 개선한다는 의미에요. 여기서 "블로킹"은 프로그램이 어떤 작업을 완료할 때까지 멈춰 있는 상태를 말해요.이를 통해 응답성을 높이고 자원을 효율적으로 사용할 수 있어요.

2)JavaScript의 싱글 스레드 구조

1. Main Thread:
   • 그림의 상단에 파란색 화살표로 표시된 부분이 JavaScript의 메인 스레드예요. 메인 스레드는 한 번에 하나의 작업만 처리할 수 있어요. 그렇기 때문에 한 작업이 끝나기 전까지는 다른 작업을 처리하지 않죠(비동기적으로 처리!).
2. Tasks:
   • 메인 스레드 아래 초록색 사각형들이 바로 JavaScript의 작업들입니다. 이 작업들은 모두 메인 스레드에서 실행되길 기다리고 있어요.
3. Event Loop:
   • 중앙에 빨간색 원으로 표시된 부분이 이벤트 루프입니다. 이벤트 루프는 대기 중인 작업들을 하나씩 메인 스레드로 보내는 역할을 해요. 작업이 끝나면 콜백 함수를 이용해 응답을 반환하는데 이렇게 하면 JavaScript가 마치 여러 작업을 동시에 처리하는 것처럼 보일 수 있어요.
4. 작업 처리 과정:
   • 작업들이 대기열에 있다가 이벤트 루프를 통해 메인 스레드로 전달되는 과정을 화살표로 나타냈어요. 각 작업이 메인 스레드로 이동하면서 실행되고, 완료된 작업은 대기열에서 사라지게 됩니다.

마무리

이 그림을 통해 JavaScript가 싱글 스레드로 작동하면서도 비동기 처리를 통해 여러 작업을 효율적으로 관리하는 방법을 쉽게 이해할 수 있을 거예요. 이렇게 JavaScript는 복잡한 웹 애플리케이션을 안정적으로 동작하게 만듭니다.

3)두가지 관점으로부터 JS가 왜 싱글스레드인지 알아보자!(Node.js와 언어적 관점)

• Node.js란?

서버 사이드 애플리케이션 개발을 위해 설계된 자바스크립트 런타임 런타임 환경이에요 크롬 V8 자바스크립트 엔진을 기반으로 하며,비동기 이벤트 기반 아키텍처를 사용하여 높은 성능과 확장성을 제공해요.간단하게 말하자면 노드 js는 서버를 도와주기 위해 개발된 도구이고 싱글스레드로 이루어져 있고 비동기 작업을 통해 높은 성능과 확장성을 가집니다

아키텍쳐란 시스템의 구성 요소와 이들 간의 관계,그리고 상호작용을 정의합니다.소프트웨어 아키텍처는 애플리케이션의 구조를 정의해요.

1.Node.js에서의 관점노드

js의 싱글 스레드 모델은 이벤트 기반 아키텍처와 비동기 I/O 처리 덕분에 높은 성능과 효율성을 제공해요. 코드의 단순성과 유지보수의 용이성, 그리고 클러스터링을 통한 확장성 덕분에, 노드.js는 고성능 서버 애플리케이션을 개발하는 데 적합한 환경을 제공해요.

2.언어적 관점

동시성:만약에 버튼이 하나가 있다고 가정을 해보아요.1명의 사람이 그 버튼을 10번 누르면 10번을 눌렀다고 뜰거에요.하지만 2명의 사람이 그 버튼을 동시에 누르게 된다면 몇번이나 눌렀는지 정확하게 나오지 않겠죠?
이렇게 자바 스크립트는 싱글 스레드를 통해 동시성을 관리할 수 있어요.