JavaScript가 뭐야? (feat. 프로토타입, 싱글 스레드, 비동기적 코딩)

웹 페이지는 3가지 언어를 이용해 작성된다.

• HTML : 웹 페이지의 구조와 내용
• CSS : 웹 페이지의 모양, 디자인
• JavaScript : 웹 페이지의 동적 변경과 응용프로그램 작성

JavaScript 사용을 함에 있어 그 본질을 조금 더 이해하고자 이 글을 작성한다.

---

자바스크립트는 프로토타입 기반 언어이며, 싱글 스레드이다. 프로토타입 기반 언어란 무엇일까? 싱글 스레드란 뭘 의미하는 걸까?

자바스크립트란

프로토타입 기반 언어와 싱글 스레드 라는 단어를 알기 전에 자바스크립트의 기본적인 개념부터 알고 넘어가려한다.

자바스크립트 코드 위치

1. HTML 태그의 이벤트 리스너 속성
2. <script></script>
3. 자바스크립트 파일
4. URL 부분

자바스크립트의 용도

자바스크립트의 일반적인 용도는 웹페이지에 기능을 더해 HTML 웹 페이지를 동적으로 움직이게 만들어준다.

• HTML 페이지 변경 및 HTML 엘리먼트와 콘텐츠의 추가/제거
• CSS 및 HTML 엘리먼트의 스타일 변경
• 사용자와의 상호작용, 폼의 유효성 검증
• 마우스와 키보드 이벤트에 대한 스크립트 실행
• 웹 브라우저 제어, 쿠키 등의 설정과 조회
• AJAX(Asynchronous JavaScript And XML) 기술을 이용한 웹 서버와의 통신
  AJAX : 클라이언트와 서버와 통신하기 위해 XMLHttpRequest 객체를 이용하여 필요한 데이터를 주고 받는 비동기 HTTP 통신
• 동적인 효과, 이미지, 롤오버, 상태표시줄에 문자열 표시 등의 작업
• 웹 사이트의 기능적인 면 : 쿠키 처리, 새로운 Window 열기 등

자바스크립트의 특징

• 소스 코드 형태로 HTML 페이지에 내장된다.
• 자바스크립트 소스 코드는 컴파일 과정을 거치지 않고 브라우저 내부의 인터프리터에 의해 바로 실행된다.
• C언어 구조를 차용해 단순화되어 있어 배우기 쉽다.
• 웹에 특화된 기술로 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성도 높다.
• HTML 소스 코드와 함께 작성되기 때문에 소스코드가 외부로 공개되어, 보안적인 부분에서 취약점이 발생할 수 있다.

 

프로토타입 기반 언어

프로토타입은 일종의 디자인 패턴 중 하나이다. 자바스크립트 뿐만 아니라 프토토타입 기반 프로그래밍을 지원하는 다른 언어들도 많다. 프로토타입 패턴은 객체를 효율적으로 생성하는 방법을 다루는 패턴 중 하나인데, 주로 객체를 생성하는 비용이 클 때 이를 회피하기 위해 사용된다.

 

예시를 들어보자.

Player firstPlayer = new Player();
Player secondPlayer = new Player();
Player thirdPlayer = new Player();

// 객체 생성 비용을 낮추고자
Player player = new Player();
Player firstPlayer = player.clone();
Player secondPlayer = player.clone();
Player thirdPlayer = player.clone();

처음 플레이어가 등장할때 주어지는 값들이 일치하다면, Player 객체는 자신이 생성될 때마다 매번 같은 객체를 함께 생성해야한다. 하지만 처음 등장할 때 전제 조건이 같다면 생성 비용이 높은 Player 객체를 딱 한번만 생성하고 그 다음부터는 생성된 객체를 복사해서 사용할 수 있다. 이런 관점으로 접근하는 것이 프로토타입 패턴이다. 즉, 원본 객체가 존재하고 그 객체를 복제해서 새로운 객체를 생성하는 방법인 것이다. 

 

자바스크립트는 ES6부터 class 키워드를 사용하여 클래스를 지원하고 있지만, 사실 이는 프로토타입으로 클래스를 흉내내서 구현한 것이라고 말하는 것이 맞다. 즉, class 키워드를 통해 클래스를 지원하고 있기는 하지만, 이는 자바스크립트가 클래스 기반 언어가 되었다는 의미는 아니라는 것이다.

 

프로토타입 기반 언어에 관해 위키피디아에는 다음과 같이 정의되어 있다.

프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재 사용 할 수 있게 한다.

즉, 프로토타입 기반 언어는 원형 객체를 복제하여 새로운 객체를 생성하는 언어임을 의미한다.

 

싱글 스레드 & 멀티 스레드

자바스크립트는 비동기적(asynchronous)하다고 이야기하지만, 자바스크립트 자체는 하나의 흐름을 그대로 타고 흘러가는 동기적(synchronous)한 언어이다.

- 프로세스 : 운영체제로부터 자원을 할당받는 작업의 단위

- 스레드 : 프로세스가 할당받은 자원을 이용하는 실행의 단위

	싱글 스레드	멀티 스레드
특징	- 하나의 프로세스에서 하나의 스레드 실행 - 하나의 레지스터와 스택으로 표현	- 프로그램을 다수의 실행 단위로 나누어 실행 - 프로세스 내에서 자원을 공유하여 자원 생성과 관리의 중복을 최소화 - 서버가 많은 요청을 효율적으로 수행할 수 있는 환경을 제공 - 각각의 스레드가 고유의 레지스터와 스택으로 표현
장점	- 자원 접근에 대한 동기화를 신경쓰지 않아도 된다. - 작업 전환 작업을 요구하지 않는다.	-새로운 프로세스를 생성하는 것보다 기존 프로세스에서 스레드를 생성하는 것이 빠르다. - 프로세스의 자원과 상태를 공유하여 효율적으로 운영이 가능하다. - 프로세스의 작업 전환보다 스레드의 작업 전환이 빠르다.
단점	- 여러개의 CPU를 활용하지 못한다. - 두 개의 작업을 하나의 스레드로 처리하는 경우와, 두 개의 스레드로 처리하는 경우가 있을 때, 후자의 경우 짧은 시간 동안 2개의 스레드가 번갈아가면서 작업을 수행하여 동시에 처리되는 것과 같이 느끼게 된다. 하지만 스레드간 작업전환에 걸리는 시간에 따라 더 오래 걸릴 수도 있다.	- 하나의 스레드만 실행중일 때는 실행시간이 더 지연될 수도 있다. - 멀티 스레딩을 위해 운영체제의 지원이 필요하다. - 스레드 스케쥴링을 신경써야 한다.

즉, 자바스크립트 언어는 한 번에 하나의 작업만 수행할 수 있는 싱글 스레드 언어라는 것인데, 그러면 어떻게 한번에 여러 요청을 처리할까?

 

자바스크립트의 런타임

여기서 중요한 건 자바스크립트 자체로는 싱글 스레드가 맞다는 것이다. 하지만 웹 개발을 하거나, 노드로 개발을 하는 과정에서 순수하게 자바스크립트만을 실행시키는 경우가 많을까? 특히 프론트엔드 입장이라면 자바스크립트 코드는 반드시 브라우를 통해 실행되도록 되어있다. 그렇기에 싱글 스레드 언어인 자바스크립트가 우리 눈으로 보기엔 동시성을 갖는 작업을 해내는 것으로 보이게 된다.

 

자바스크립트가 실행 될 때 다음과 같은 요소들이 실행을 도와준다.

• Call Stack : 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아서 처리
• Web API : 웹 브라우저에서 제공하는 API로 AJAX나 Timeout 등의 비동기 작업을 실행
• Task Queue : Callback Queue라고도 하며 Web API에서 넘겨 받은 Callback 함수를 저장
• Event Loop : Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 옮김

예시를 통해서 자세히 알아보자

setTimeout(() => console.log("setTime clg"));
console.log("hello clg");

// hello clg
// setTime clg

1. setTimeout 함수가 실행되며 Call Stack에 setTimeout 함수가 추가된다.
2. setTimeout 함수는 자바스크립트 엔진이 처리하지 않고 Web API가 처리한다. setTimeout 함수는 Web API의 Timeout 작업을 요청한 시간이 지나면 Task Queue로 인자 받은 callback 함수를 전달한다.
3. 그 후 console.log("hello clg") 가 Call Stack에 추가된다. 그리고 Call Stack의 console.log 가 실행되며 콘솔에는 "hello clg" 라는 문자열이 출력된다.
4. 이 때, 자바스크립트의 Event Loop는 Call Stack이 비어있는지 항상 확인하는데, Call Stack이 비워진 것을 확인한 Event Loop는 Task Queue에 있던 callback 함수를 Call Stack으로 옮겨 작업을 수행한다. 이후 콘솔에 "setTime clg"가 출력되는 것을 볼 수 있다.
5. 모든 작업이 끝나면 Call Stack과 Task Queue가 비워진다.

비동기 함수가 동기적인 함수들과 동시에 동작하는 것 처럼 보이지만, 이는 아주 빠르게 Call Stack에 넘어와 실행되기 때문이다. 즉, 모든 건 순차적으로 하나의 스레드(Call Stack) 안에서 돌아가고 우리는 그저 이 시간 차가 너무 작아서 동시에 돌아간다고 느끼는 것이다.

 

자바스크립트가 멀티 스레드로 실행되는 언어였다면 웹 페이지에서 발생하는 동시성 문제에 대해 해결해야했다. 하지만 자바스크립트는 단일 스레드로 실행되므로 교착 상태와 같은 다중 스레드 환경에서 발생할 수 있는 복잡한 시나리오를 신경 쓸 필요가 없으며 비동기 처리를 통해 쉽게 여러 요청을 처리할 수 있다. 실제로 Chrome 브라우저도 기존 웹 페이지에서 엄청난 동시성 문제를 일으킬 수 있다는 이유로 단일 웹 사이트 페이지의 자바스크립트 코드가 동시에 실행되는 것을 허용하지 않는다고 한다.

 

 

 

출처 :

https://evan-moon.github.io/2019/10/23/js-prototype/

[JS 프로토타입] 자바스크립트의 프로토타입 훑어보기

https://ui.toast.com/weekly-pick/ko_20160603

프로토타입 기반 언어, 자바스크립트

https://velog.io/@design0728/JavaScript%EB%8A%94-%EC%96%B4%EB%96%A4-%EC%96%B8%EC%96%B4%EC%9D%B8%EA%B0%80

JavaScript는 어떤 언어인가 + Web Worker

https://velog.io/@eunjin/OS-%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9C-%EB%A9%80%ED%8B%B0%EC%8A%A4%EB%A0%88%EB%93%9C%EC%9D%98-%EC%9D%98%EB%AF%B8

[OS] 싱글스레드, 멀티스레드의 의미

https://chanyeong.com/blog/post/44

자바스크립트는 왜 싱글 쓰레드일까? :: chanyeong

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://stitchcoding.tistory.com/44

자바스크립트는 싱글 스레드인데 왜 비동기가 가능할까?