# 강남_O_Day14

## 참가자

김유준, 김태홍 김재원, 권혁

## 1. 코드 동작 이해

### index.html
- input tag 및 button으로 barista 인원수와 아메리카노, 라떼, 프라프치노 주문을 입력하고
- document.querySelector를 이용하여 input tag의 value를 얻어온다.

### index.js
- web worker(manager)를 생성하고 barista 인원수를 알려준다.
- 전체 주문내용을 order queue에 저장한다

### manager.js
- manager용 web worker 소스
- barista 인원수 만큼 web worker(barista)를 생성한다.
- order queue에 주문이 남아 있는 동안 idle 상태인 barista에게 주문을 전달한다.
- barista로부터 주문 완료된 메세지를 출력하는 곳 innerHTML에 추가한다.

### barista.js
- barista용 web worker 소스
- 주문 커피의 종류에 따라 setTimeout을 이용해서 timer를 설정한 후에 완료되면 barista id, 커피종류, 완료시간을 manager에게 메세지를 전달한다.

## 2. 코드 동작 개선

### 김태홍
- 의미단위로 적절히 구분되어 있지 않아 코드의 직관적인 해석이 잘 이루어지지 않았습니다.
- 좀더 추상화를 하기위하여 의미단위로 함수들을 묶고 같은 자료구조를 공유하는 함수들끼리는 객체로 묶어 추상화를 하여야 좀더 읽기 좋을 것 같다.

### 김재원
- Thread pool 을 사용하는 방식 자체를 추상화해서 여러 manager 생성에 응용할 수 있으면 좋겠다고 생각한다. 현재 방식은 바리스타를 핸들링하는 데 최적화된 디자인
- Thread pool 의 maximum pool count 를 설정해서, 프로그램에 걸리는 부하를 조절할 필요가 있다.

### 김유준
- web worker를 wrapping 하여 onStart, onTerminate 같은 이벤트들에 대하여 리스너들 더욱 세분히 하면 좋을 것 같습니다.
- manager나 barista 코드에서 importscripts를 이용하여 모듈화를 하면 더 좋을 것 같습니다.

### 권혁
- html에서 span과 input element를 align 하기 위해 table을 사용한다.
- barista 관리를 위해 idle queue, busy queue를 사용했는데, pool queue 하나만으로 구현하면 훨씬 효율적이고 동일한 효과를 얻을 수 있다.
- manager가 order가 남아 있는동안 계속 barista에게 일을 시켜야 하는 동작을 setTimeout을 통해 구현했는데, 좀 더 개선할 사항이 있어 보인다.

## 3. Consideration

### setTimeout 이 외에 timer를 구현하기 위한 여러 방식에 대해 학습한다.
setInterval, clearInterval을 이용하여 timer를 구현할 수 있다.

### 멀티 스레드가 공용 리소스에 접근할 때 임계구역을 다루는 방식에 대해 학습한다. (Semaphore, Mutex 등)

#### spinlock
하나의 스레드만 임계구역에 접근할 수 있도록 만드는 락이다. polling 방식이기 때문에 cpu 리소스를 많이 사용한다.

#### mutex
mutex는 하나의 스레드만 임계구역에 접근할 수 있도록 만드는 락이다.
하나의 스레드가 먼저 임계구역에 들어갔다면 다른스레드는 먼저들어간 스레드가 임계구역에서 나올때까지 대기한다.

#### semaphore
semaphore는 여러개의 스레드가 임계구역에 접근 할수 있도록 만드는 락이다.
최대 n 개의 스레드가 접근할 수 있으며 n개 의 스레드가 임계구역에 접근 했을경우 다른 스레드는 자리가 빌떄까지 대기한다.

#### moniter
semaphore과 동일한 방식이지만 임계구역에 들어가거나 나가는경우 락을 걸거나 푸는 코드 없이 자동으로 해준다

### 멀티 스레드 작업을 그룹으로 묶어서 동기화하는 방식에 대해 학습한다.
스레드 그룹은
- 애플리케이션에서 많은 스레드 생성시 관리가 힘든 경우,
- 스레드가 동일한 작업을 할떄 그룹으로 묶어서 사용하는 것이 편리한경우
- 그룹안의 스레드를 제어하기 위한 지원메소드 부족한경우
과 같은 경우에 사용한다.

## 4. 개인 학습 내용

### 김태홍
- html 사용법 해드와 바디로 나누어져 있고 여러 테그들을 사용할 수있다 태그는 머리와 꼬리로 나누어져있다.
- DOM을 이용하여 html 문서를 이용하여 조작하는 방법을 배웠다.
- getElementById 로 특정 id의 테그들을 가져올 수 있다.
- addEventListener 로 특정 동작에 대한 이벤트를 설정할 수 있다.
- createElement 로 특정 테그들을 생성할 수 있고 appendChild로 원하는 테그의 자식으로 추가시킬 수 있다.
- web work에 대해 학습하였다.
- html 백그라운드에서 실행되는 스레드를 만들어넣을 수 있다.
- 만들어진 워커들은 워커들끼리도 통신이 가능하다.
- 스레드를 만드는 작업들은 컴퓨터 입장에서 매우 무거운 일이기 때문에 미리 필요한 만큼을 한번에 할당하여 재사용하는 방식을 이용하며 이를 Thead Pool 이라고 한다.

### 김재원

#### 프로세스(Process)

1. **프로세스란 무엇인가?**
운영체제로부터 시스템 자원을 할당을 받는 작업단위를 의미하기에 독립적인 프로그램 인스턴스라고 말할 수 있다. 또한 기본적으로 1개 이상의 스레드를 가진다.

2. **프로세스의 메모리 영역**
운영체제에서 할당해주는 메모리 영역으로 *Stack*, *Heap*, *Data*, *Bss*, *Code* 5개 영역이 있다.
- **Stack**
프로그램이 자동으로 사용하는 임시 메모리영역이다. 지역변수와 매개변수, 리턴값 등이 일시적으로 저장되며, 함수 호출시 생성되고 종료시 반환됩니다.
- **Heap**
컴파일러가 동적으로 메모리할당을 할 때 사용하는 영역이다. c 언어에서는 `malloc`을 통해 동적할당 하지만 javascript 에서는 컴파일러가 필요한 부분에서 동적으로 할당하고 해제한다.
- **Data**
프로그램 종료시 반환되는 메모리 영역으로 전역변수, static 변수, 배열, 구조체등이 저장된다. 단 초기화된 데이터만 저장된다.
- **Bss**
Data 영역과 동일한 역할을 하나 초기화가 되지 않은 데이터가 저장된다.
- **Code**
코드 자체를 구성하는 메모리 영역으로 프로그램 명령이 위치하게 된다.

3. **프로세스의 통신**
프로세스는 운영체제로부터 독립된 공간을 할당받기 때문에, 서로 다른 프로세스의 변수나 자료구조 등에 접근이 불가하다. 따라서 IPC(InterProcess Communication)를 이용해서 통신하는데 크게 **공유메모리 모델**, **메세지 전달 모델** 등이 있다.
- **공유메모리(Shared Memory) 모델**
둘 이상의 프로세스가 메모리영역을 공유하는 방법으로, 커널의 관여없이 통신하므로 속도가 빠른 장점이 있지만 구현하기 까다롭다.
- **메세지 전달(Message Parsing) 모델**
둘 이상의 프로세스가 커널을 경유해서 메세지를 주고 받는 방식으로 구현하기 간단하지만 속도가 느리다.

#### 스레드(Thread)

1. **스레드란 무엇인가?**
프로세스 내에서 실행되는 여러 실행의 단위라고 할 수 있다. 시간이 오래걸리는 작업들을 병렬처리 해야하는 경우, 스레드를 여러개로 나눠 관리하는 멀티 스레딩을 활용할 수 있을 것이다.

2. **스레드의 메모리 영역과 통신**
**Stack**을 제외한 메모리영역을 모든 스레드가 공유한다. 따라서 스레드 간의 통신의 쉽고 빠르지만, Interruption 에 다양한 고민을 하며 설계해야한다.

3. **스레드의 스케줄링**
멀티 스레드 환경에서 스레드의 개수가 코어 개수보다 많을 때 어떻게 **동시성**을 만족시킬 것이냐 하는 과제이다. 크게 두가지 방식이 있으며 **선점형 스레드 스케줄링**과 **협력형 스레드 스케줄링**이라고 부른다.
- **선점형 스레드 스케줄링**
우선순위가 높은 스레드를 먼저 수행시키는 방식이다. 시분할을 통한 Round-Robin 방식을 일반적으로 많이 사용한다.
- **협력형 스레드 스케줄링**
스레드가 CPU 사용권을 다른 스레드에게 넘길 때까지 대기하는 스케줄링 방식이다.

#### 세마포어와 뮤텍스

1. **세마포어**
공유된 데이터에 여러 프로세스가 접근하는 것을 막고, 다중 프로세스를 조정하거나 동기화하는 기술이다. 일종의 리소스의 상태를 나타내는 카운터라고 말할 수도 있을 것이다. 세마포어는 시스템 범위에서 동작하기에 특정 스레드가 소유할 수 없다.

2. **뮤텍스**
0과 1만 가지는 Binary 세마포어라고 볼수 있으며, 쓰레드에 한정되어 사용된다. 세마포어는 특정 스레드가 소유할수 없는 반면, 뮤텍스는 스레드가 소유하고 lock 을 사용할 수 있다.

#### 웹 워커

웹앱의 백그라운드 스레드를 활용하는 방식이다. 기본적으로 메인스레드만 사용하며 싱글콜스택으로 비동기처리만 수행하는 자바스크립트는 대규모 연산에 취약할 수 밖에없다. 이를 보완하기 위해서 `Worker API`가 존재하며, 스크립트를 백그라운드 스레드로 동작시킬 수 있다.

- 웹 워커는 `messaging api`를 활용해서 컨텍스트 간 공유를 한다.
- 컨텍스트 간 공유에 사용되는 객체는 참조값까지 완전히 복사된다. 따라서 Interruption 위험이 존재한다.

### 김유준
- webworker를 이용하여 클라이이언트 단에서 멀티 스레딩을 할 수 있음을 알게 되었다.
- 크롬의 보안 정책은 개발자에게는 성가시다
- document를 이용하여 DOM의 element를 접근 하는 방법을 알게 되었다.
- 클라이언트 단에서 js가 실행되는 시점은 DOM이 완전히 로드 된시점이 아닐 수 있으므로 windows.onLoad 이벤트 리스너를 등록 하는 방법을 알게 되어었다.

### 권혁
- web worker란 개념을 처음으로 배웠다.
- web worker가 다시 web worker를 생성해도 된다는 것을 알았다.
- 단순히 html page를 브라우저에서 볼때는 web worker가 동작하지 않았고 server를 통해 띄워야만 web worker가 동작한다는 것을 알았다.
- idle, busy queue 대신 pool을 이용해서 thread pool 을 구현하면 효율적이다.
- html table을 이용해서 span과 input을 align하면 된다.