JS (Java Script)

자바스크립트 동기 ? 비동기? __ 코드가 웹 브라우저 에서 동작하는 과정.(씽글쓰레드, 멀티쓰레드 찍먹하기)

GABOJOK 2023. 9. 12. 17:27

웹브라우저. 왜 중요한가?

대부분 프로그래밍 언어들은 운영체제(operating system, os ) 에서 실행되지만, 

자바스크립트는 브라우저에서 HTML, CSS 와 함께 실행된다. 

내가 짠 코드를 웹브라우저가 실행시켜 준다는 말이다. 

그래서 웹브라우저 환경을 고려할 때 효율적 프로그래밍이 가능한 것이다. 

 

참고.

https://frontj.com/entry/1-Javascript%EC%99%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80

 

1. Javascript와 브라우저

Javascript 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 언어이며, 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Lang

frontj.com

 

stack 은 무엇인가? 

stack에 대해 알기 전에 아주 간단하게  배경을 알아보자. 

 

프로세스 

메모리 상에서 실행중인 프로그램 

프로세스는 최소 하나의 thread를 보유하고 있으며, 별도의 주소공간을 독립적으로 할당받는다. (stack, code, heap )

 

thread 

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

프로세스가 가지고 있는 (stack, code, heap ) 중에 stack만 할당받고, 나머지는 다른 thread 끼리 서로 공유

 

single thread

thread가 하나라는 말이다.

문맥교환(context-switch  : 다른 thread로 이동, 왓다갓다 하면서 조금씩 작업을 끝내는것) 없고, 동기화가 필요가 없다는 장점 있다..

난이도가 쉽고, cpu를 적게 사용한다.

연산량이 많은 경우 그걸 해결할 때 까지 다른 처리를 하지 못한다. 

 

multi thread

thread가 여러개 라는 말이다.

중단되거나, 긴 작업 수행시 프로그램의 수행이 계속된다. 

thread 수만큼 자원을 많이 사용한다. 프로그램 난이도가 높다. 

문맥교환(context-switch), 동기화가 필요해서(엉뚱한 값을 읽어올 수 있음), 오히려 single thread 보다 더 오래 걸릴 수 있다. 

 

더 많은 것들이 있지만 일단은 이정도로만 알아두자. 

 

 

수많은 코드들을 처리함에 있어서,

stack 이라는 공간에 넣어두고 순서대로 실행시키는 공간! 

한번에 하나의 코드만 실행이 가능하며, 코드의 병렬처리는 불가하다. ("single thread " 니까)

 

참고

https://zeroco.tistory.com/75

 

[개발자 면접] 프로세스와 스레드의 차이점

Q. 프로세스와 스레드의 차이점은? 프로세스는 메모리 상에서 실행중인 프로그램을 말하며, 스레드는 이 프로세스 안에서 실행되는 흐름 단위를 말한다. 프로세스는 최소 하나의 스레드를 보유

zeroco.tistory.com

https://velog.io/@gil0127/%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9CSingle-thread-vs-%EB%A9%80%ED%8B%B0%EC%8A%A4%EB%A0%88%EB%93%9C-Multi-thread-t5gv4udj

 

싱글스레드(Single thread) vs 멀티스레드 (Multi thread)

오늘은 싱글 스레드와 멀티 스레드가 무엇인가와 이 둘의 장단점에 대해서 알아보자!!일단, 시작에 앞서 이해를 돕기 위해 이 그림을 봐주길 바란다.=> 싱글 스레드와 멀티 스레드의 차이는 이

velog.io

 

 

 

비동기식 처리

자바스크립트는 원래 동기식 처리를 하는 언어이다. 

왜냐? stack 에서 한번에 한줄을 실행하기 때문!!!

 

근데 자바스크립트가 비동기 언어라고 하는 말을 들은거 같다. 

그 이유를 살펴보자. 

 

자바스크립트는 가끔 비동기식 처리를 한다. 

setTimeout() 함수 라던지, ajax 요청이라던지, 이벤트리스너 라던지 

이런 것들은 바로 처리되는게 아니라 처리하는데 시간이 좀 걸린다.

(눌러야 작동한다던지, 몇초뒤에 작동한다던지, 데이터를 불러오기 까지 시간이 걸린다던지..)

 

이런 경우에는 stack에 쌓여서 길을 막는게 아니라

현명하게 다른곳에 빼둔다. 

그동안  stack 은 계속 순서대로 코드를 처리한다. 

 

그러다가 현명하게 다른곳에 빼둔 코드가 실행되면 바로 stack으로 들어가지 않는다. 

Queue 라는 공간으로 들어가고, 

stack이 빈 공간일 때에 비로소 Queue에서 stack 으로 코드가 이동한다. 

그렇게 실행되게 되는것.....

 

하지만 알아두어야 할 것이 있다. 

자바스크립트 언어 고유의 기능으로 비동기식 처리를 하는것이 아닌, 

웹브라우저에서 자바스크립트 실행을 돕기 때문에 가능한 것이다.