스프린터스 #23 Single thread language

HR.lee·2022년 4월 22일
0

스프린터스

목록 보기
23/25
  • 4월 22일(금)
    1. javascript ES6에 추가된 것은 무엇인가요?
    2. ES6에서 화살표 함수를 언제 쓰고 왜 쓰는지 설명해보세요
    3. TCP와 UDP의 차이점은 무엇인가요?
    4. 함수 호출 시에 this의 용법에 대해 아는대로 설명해보세요
    5. javascript는 싱글 스레드 언어인데, 싱글 스레드 언어의 특징에 대해 설명해보세요

https://chanyeong.com/blog/post/44 https://velog.io/@eamon3481/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9C%EC%9D%B8%EB%8D%B0-%EC%99%9C-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81-%EC%9D%BC%EA%B9%8C
https://poiemaweb.com/js-execution-context

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

맞습니다. 한개의 함수가 끝날때까지 다른 걸 실행하지 않는 싱글스레드 언어입니다.

2. 왜 자바스크립트를 싱글 스레드 언어라고 하는가?

자바스크립트가 싱글 스레드 언어다, 라고 하는 말의 뜻은 '자바 스크립트 엔진'이 싱글 스레드를 가지고 있다는 뜻입니다. 자바스크립트는 의존성이 높은 스크립트 언어라서 특히나 프론트엔드 개발자라면 브라우저하고 같이 돌려야만 모든 기능을 사용할 수 있습니다.

각 요소는 다음과 같습니다.

자바스크립트 엔진

하나의 메모리힙(메인스레드)와 하나의 Call Stack을 가지고 있어서 이 엔진 구조상으로는 한번에 하나의 함수만 '동기'적으로 실행이 가능합니다.
메인스레드에서 호출 => 콜스택에 쌓임 => LIFO(Last In First Out)방식으로 순차적으로 처리

브라우저

Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 '비동기' 작업을 실행
Task Queue: 'Callback Queue'라고도 하며 Web API에서 넘겨받은 Callback함수를 저장
Event Loop: Call Stack이 비어있다면 Callback Queue의 작업을 Call Stack으로 옮김

여기에서 볼수 있듯이 엔진은 동기적이고, 비동기적인 요소들은 브라우저가 가지고 있습니다.

3. 자바스크립트에서 어떻게 비동기 작업을 할수 있는가?

앞서 싱글스레드 = 동기라고 설명했지만 정확한 개념을 이해하기 위해서는,
먼저 왜 싱글스레드에서 비동기 작업을 하는게 이상한지에 대한 이해가 선행되어야 합니다.

비동기적(Asynchronous) 작업이란, 123 순서대로 작업을 돌려도 1번 작업이 끝나기 전에 2번 작업이 끝날 수 있다는 가능성을 뜻합니다.

쉽게 말해 도착 순서가 보장되지 않는 '동시성'을 가진 작업들을 말하죠.

그러나 싱글스레드라는 개념은 전체가 하나의 흐름으로 되어 있어서 앞 작업이 완성되지 않으면 프로그램이 더이상 돌지 못하고 멈춰버리는 것을 뜻합니다. 비슷한 말로 동기(synchronous)라고 하는 이 개념을 가진 자바스크립트가 비동기 작업을 처리할 수 있다는 건 이상합니다.

그러나 프론트엔드 개발자로서 우리는 어씽크 어웨잇, 프로미스 같은 비동기 코드를 많이 보고 다루게 됩니다. 이것들을 가능하게 만들어주는 것은 브라우저의 요소, 그 중에서도 Web API와 event loop의 힘입니다.

4. 작업 순서

만약 setTimeout 같은 비동기 작업이 생성될 경우, 자바스크립트 엔진은 Web API에게 setTimeout을 요청하고 동시에 setTimeout에 넣어준 Callback함수를 같이 전달합니다.

엔진(메인스트림) => 콜스택 => Web API

그리고 Web API는 이 함수를 잘 갖고 있다가 이벤트 요청시간이(예를 들어 3초가) 다 되면 Callback Queue에 갖다줍니다.

그러면 Event Loop가 동작하는데, Event Loop의 역할은 단순합니다.

  1. Call Stack과 Callback Queue를 감시하고 있다가,
  2. Call Stack이 비게 되면, Callback queue에서 Callback함수를 꺼내 Call Stack에 추가 합니다.

테스크큐 = 콜백큐 => 콜스택

이렇게 콜스택은 하나밖에 없지만 브라우저의 힘으로 이벤트루프가 계속계속 돌아가면서 마치 동시성을 띄는 것처럼 동작하게 되는 것입니다. 이렇게 브라우저를 합쳐야 실행환경이 완성되는 이 환경/개념을 자바스크립트 런타임이라고 합니다.

런타임 : 특정 언어로 만든 프로그램들을 실행할 수 있는 환경

5. Node.js는 자바스크립트 기반 언어인데 어떻게 브라우저 없이 실행이 가능하며, 서버를 구측할 수 있는 것일까?

Node.js 는 javascript 기반으로 개조하여 만들어진 언어가 맞습니다.

Javascript는 앞서 설명했듯 의존성이 높은 스크립트 언어입니다. 스크립트 언어는 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 웹브라우저 프로그램 안에서만 작동을 할 수 있습니다. 웹브라우저(크롬, 파이어폭스, 사파리, 익스플로러 등등) 가 없으면 사용할 수가 없...

그러나 Node.js는 내장된 웹서버가 존재하여 브라우저와의 의존성을 떼어버리는데 성공하였습니다. 이걸 말로 표현한다면

=> 예전에는 자바스크립트 런타임이 브라우저 밖에 존재하지 않았습니다.
하지만 그러한 한계를 극복하고 Node.js가 나왔습니다.

JavaScript를 Web Browser 환경에서 구동할 수 있었는데
Node.js라는 환경에서 구동할 수 있는 두번째 옵션이 생긴겁니다.

따라서 Web Browser와 Node.js를 둘다 런타임이라고 볼 수 있겠습니다.

예전에는 웹에서 표시되는 부분은 javascript를 사용하여 만들수 있어도 서버는 ruby, java 등 다른 언어를 써서 만들어야 했는데, 마침내 한가지 언어로 전체 웹페이지를 만들 수 있게 된 것입니다.

서버 규모가 커지면 결국 nginx 등의 웹 서버를 노드 서버와 연결해야 한다고 하지만 혁신입니다.

profile
It's an adventure time!

0개의 댓글