## [Count characters in your string](https://www.codewars.com/kata/52efefcbcdf57161d4000091/train/javascript)

1. 이해
    - 주어진 문자열의 갯수를 구하자 
2. 계획
    - 제한조건 "" => {} 먼저 false를 리턴해주자 
    - reduce를 활용하여 문자를 키값을 가진 객체를 만들어주어 반환하자
3. 실행
    ```js
    describe('Count characters in your string', () => {
        it('최종', () => {
          expect(countChars("aba")).toEqual({a : 2, b : 1})
          expect(countChars("")).toEqual({})
       });
    });

    const countChars = (str) => {
      if(!str.match(/[a-z]/i)) return {};
      return str.split('').reduce((acc, str) => {
        if(!acc[str]){
          acc[str] = 1
        }else{
          acc[str] += 1
        }
        return acc
      }, {})
    }
    ```

4. 반성
    - reduce를 작성할때 항상 return acc를 해주고 시작하자 안하면 오류발생
    - reduce와 정규표현식을 이용해서 최대한 풀어보자
   


Count characters in your string

## FLOW

1. 정의 : 컴퓨터가 프로그램을 적재하고 실행시키는 것
2. 특징 : 플로우는 실행 중 관여할수 없다.
 - 컴퓨터는 프로그램을 끝나기 전까지는 관여할 수 없다.
 - 할 수 있는것은 플로우 컨트롤 여기로 비켜라 저기로 비켜라
 - BLOCK : 실행이 완료되기전까지 제어권을 넘기지 않는다.
 - NON-BLOCK : 제어권이 바로 회복되는 것을 논 블록킹이라고 부른다.

## BLOKING

- 플로우는 기본적으로 블로킹이다.
- 모든 흐름제어가 끝나야지 제어권을 반환한다.
- cpu는 그 사이 다른 명령을 내릴 수 없다.
- 자바스크립트에서 큰 json을 파싱을 시키면 화면이 멈친다.

```jsx
for (const i of (function* () {
 let i = 0;
 while (true) yield i++;
})())
 console.log(i);

// Process terminated due to long running script
// script timeout
```

- 이 명령은 무한루프이기 때문에 에러가 발생한다.
- 브라우저가 계속해서 점유하고 있어 플로우를 제거해 버린다.
- 기본적으로 5초 이상으로 제어권을 가지고 있으면 해당 플랫폼이 죽여버린다.
- 현대 os는 이러한 기능을 공통적으로 가지고 있어서 지속적으로 점유를 하고 있으면 프로세스를 죽여버린다.
- 안드로이드 / 아이폰 OS는 통화나 메세지가 우선적으로 처리해야하기 때문에 제어권을 프로그램에게 주어지지 않는다.

## BLOCKING FUNCTION

- 일반적으로 블로킹을 애기하는 것은 함수를 기준으로 애기한다(점유하는 시간만큼 블로킹을 일으키는 함수)

```jsx
const f = v => {
	let i = 0;
	while(i++ < v);
	return i;
};
f(10); // 블로킹 함수
f(10000000000000); // 블로킹 함수
```

- 시간이 오래걸린다고 블로킹 함수가 아니고, 기본적으로는 모든것은 블로킹 함수이다.
- 블로킹 함수가 지속적으로 브라우저의 제어권을 가지고 있으면 종료가 되기 때문에 제한조건을 생각해야 한다.
- 블로킹 함수 - 제한조건
 - 배열 순회, 정렬 - 배열크기에 따라
 - DOM 순회 - DOM의 하위구조에 따라
 - 이미지 프로세싱 - 이미지 크기에 따라

## BLOCKING EVASION(블로킹 피하기)

### 정의

- 컴퓨터에서 어떠한 작업을 피할때는 Evasion을 사용한다.
- 독점적인 cpu점유로 인해 모든 동작이 정지됨
 - 블로킹상태(루프..) 시각적인 데이터가 없으므로 클라이언트는 좋지 못한 ux를 제공
 - 고객은 0.1초안에 원하는 상태로 변경되지 못하면 불안함을 느낌.
 - sumit 버튼을 수십번 눌러 에러 발생(꼭 막아줘야 한다)
- 타임아웃체크에 의해 프로그램이 강제 중단됨(현대 os / brower 동일)
- 블록킹의 조합을 예측할 수 없음
 - 블록 연쇄(함수(함수...)) 작업으로 인해 생긴 블록은 어디서 블록이 생긴지 모른다.

 > Bloking은 피할 수 없다.

 > Bloking은 관리해야 할 대상이고 분산 시켜야 할 대상이다.

### 순차적인 실행

- 3개의 프로그램이 있다면, 첫 프로그램이 실행이 완료되고 다음 프로그램을 실행 시킨다

### 시분할 운영체제의 동시 실행

- 첫번째 프로그램이 실행 중에 cpu가 제어권을 뺏어 다음 프로그램을 실행시켜 동시에 실행시킨 것처럼 한다.
- Context Switching : 프로그램 실행 중 해당 자원과 코드를 저장해 놓고 다른 프로그램을 실행하는 것

### 순차적이 시분활 실행보다 빠른데 왜 사용할까?

- 동시작업 선호(네이버 검색하면서, 멜론 음악도 듣고, 카카오톡 채팅도 하고)
- 머신파워의 발전에 따라 컨텍스트 스위치 비용을 신경안써도 된다
- 다중 코어로 하나의 코어에 하나의 프로그램을 실행시켜도 속도의 문제 없음

### 프로세스와 쓰레드

- 프로세스 : 하나의 프로세스 == 실행 환경
- 쓰레드 : 프로세스 안에서 또 하나의 프로세스를 만든다(또 하나의 시분활 대상)

### 자바스크립트 thread

1. MAIN UI THREAD 
 - 화면을 그려준다
 - 자바스크립트 코드 실행
2. BACKGROUD THREAD
 - ajax 같은 네트워크 통신(브라우저 별로 백그라운드 쓰레드 숫자는 제한)
3. WEB WORKER THEAD
 - 자바스크립트로 통제할 수 있는 백그라운드 쓰레드를 만들 수 있다
4. **블록킹을 피하는 방법!! 이런 쓰레드로 작업을 나누어준다!!!**

### Time SLICING

1. 정의
 - 블록킹의 시간 단위를 줄여 바로 제어권이 반환되게 한다
 - requestAnimationFrame을 활용하여 해결한다
 - requestAnimationFrame의 매개변수를 화면 갱신 하기 전에 호출
 - 프레임 : 브라우저에서 자바스크립트가 실행되는 프로세스의 단위
2. 메뉴얼 버전 : 실행 시킬 함수를 판단하여 프레임을 넘겨줄 기준을 조작

 ```jsx
 const looper =(n, f, slice = 3)=>{
 	let limit = 0, i = 0;
 	construnner = _ =>{
 		while(i < n){
 			if(limit++ < slice) f(i++);
 			else{
 				limit = 0; //계속해서 조건을 초기화 시켜 블로킹의 시간을 제어한다.
 				requestAnimationFrame(runner);
 				break;
 			}
 		}
 };
 requestAnimationFrame(runner);
 };
 ```

3. 자동 버전
 - performace.now를 활용하여 계속해서 제한조건을 확인한다(한 프레임당 5초 미만이 제한조건
 - performace.now()은 브라우저에서 어플레이케이션이 실행되고 나서 시간을 측정한다.

```jsx
const looper =(n, f, ms = 5000, i = 0)=>{//한 프레임은 5초 이내로 작동 이상이면 화면 멈춤
	let old = performance.now(), curr;
	construnner = _ =>{
		while(i < n){
			curr = performance.now();
			if(curr - old < ms) f(i++);
			else{
				old = curr; //계속해서 조건을 초기화 시켜 블로킹의 시간을 제어한다.
				requestAnimationFrame(runner);
				break;
			}
		}
};
requestAnimationFrame(runner);
};
```

### WEB WORKER

- 자바스크립트를 실행하는 메인 쓰레드 UI쓰레드인데, 별도의 쓰레드를 만들수 있다(멀티 쓰레드!!!)
- 작동방식은 멀티쓰레드 패턴의 워커 쓰레드를 따르고 있다.
- Web Worker에는 캔버스 객체, ajax 객체가 있다
- Web Worker가 블록이 걸려도 메인 UI는 영향을 주지 않는다.
- 원시값만 갈 수 있다. 객체가 간다면 메인 쓰레드에서도 접근 할 수 있기 때문이다.
- 별도의 js 파일로 존재해야 한다.
- Atomics 객체를 이용하여 객체를 전달 할 수 있다.(진행 중인 쓰레드가 완료되기 전까지 다른 접근 불가)

 ```jsx
 const backRun = (f, end, ...arg)=>{
 	// 별도의 js파일이 존재해야 하지만 바이너리 파일로 변환하여 전송시켜준다.
 	const blob = new Blob(
 		[`onmessage =e=>postMessage((${f})(e.data));`],
 		{type:'text/javascript'});
 	const url = URL.createObjectURL(blob);
 	const worker = new Worker(url);
 	worker.onmessage = e => end(e.data);
 	worker.onerror = e =>end(null);
 	worker.postMessage(arg);
 };

 backRun(v=>v[0] + v[1], console.log, 3, 5);
 ```

### 정리

- 블로킹을 피하는 방법은 논 블로킹이다(서브루틴이 즉시 플로우 제어권을 내놓는것)
- 순차에 무관한 더욱 더 안정적인 알고리즘을 짠다(병행성 프로그램...)

---

## SYNC ASYNC

### 정의

- Block/NoNBlock의 주요 관점은 제어권을 바로 받을 수 있냐?
- SYNC : 서브루틴이 즉시 값을 반환

 ```jsx
 const double = v=>v*2;
 console.log(double(2)); //4
 ```

- ASYNC : 서브루틴이 콜백을 통해 값을 반환

 ```jsx
 const double = (v, f)=>f(v*2);
 double(2, console.log); //4
 ```

### SYNC

- BLOCK (nomalAPI, legacyAPI)

 ```jsx
 const sum = n =>{
 	let sum = 0;
 	for(let i = 1; i <= n; i++) sum += i;
 	return sum;
 };
 sum(100);
 ```

- NON BLOCK(old API ⇒ IOCP, Future, img.complete..)
 - 블록킹이 될 가능성이 높다!!!(사용하지 말자.. 초급개발자는 오류를 발생률이 높다? )
 - 서스펜션 패턴 : 두개의 쓰레드가 한쪽은 생산하고 한쪽은 감시하는 것

 ```jsx
 const sum = n= >{
 	const result = {isComplete:false};
 	requestAnimationFrame(_=>{
 		let sum = 0;
 		for(let i = 1; i <= n; i++) sum += i;
 		result.isComplete = true;
 		result.value = sum;
 	});
 	return result;
 };
 const result = sum(100);
 while(!result.isComplete); //여기서 계속 멈춤 error 
 console.log(result.value);
 ```

### ASYNC

- BLOCK(함정 ⇒ 무조건 피해야한다)

 ```jsx
 const sum = (n, f) => {
 	let sum = 0;
 	for(let i = 1; i <= n; i++) sum += i;
 	return f(sum);
 };
 sum(10, console.log);
 console.log(123);//55 → 123
 ```

- NON BLOCK(modern API)
 - 콜백으로 짜는 이유???
 - 값으로 받으면 그 값에 대한 처리를 해주는 코드를 써야되고, 그 값을 다시 이용하려면 중복 발생
 - 콜백은 하나의 함수안에 값을 처리할 함수를 캡슐화해서 몇번이나 재사용 가능
 - 소비하는 측의 로직을 관리하기 위해 캡슐화를 시켜놓은게 콜백이다!!!

 ```jsx
 const sum = (n, f) => {
 	requestAnimationFrame(_=>{
 		let sum = 0;
 		for(let i = 1; i <= n; i++) sum += i;
 		f(sum);
 	});
 };
 sum(10, console.log);
 console.log(123);//123 → 5
 ```

### SIMILAR ASYNC-BLOCK

- 미루기 패턴 (다음 프레임으로 미룬다) - 안티 패턴

 ```jsx
 const sum = (n, f) => {
 	let sum = 0;
 	for(let i = 1; i <= n; i++) sum += i;
 	return f(sum);
 };
 sum(1000000, console.log);
 console.log(123);//55 → 123
 ```

- 백그라운드로 어마어마한 쓰레드를 보내면 쓰레드 고갈로 죽는다 - 안티패턴

 ```jsx
 const backRun = (f, end, ...arg)=>{
 	const blob = new Blob(
 		[`onmessage =e=>postMessage((${f})(e.data));`],
 		{type:'text/javascript'});
 	const url = URL.createObjectURL(blob);
 	const worker = new Worker(url);
 	worker.onmessage = e => end(e.data);
 	worker.onerror = e =>end(null);
 	worker.postMessage(arg);
 };

 const f = v=> {
 	for(let i = 1, sum = 0; i <= v[0]; i++){
 		sum += i;
 	}
 	return sum;
 };
 leti=1000;
 while(i--) backRun(f, console.log, 100000);
 ```

코드스피치 강의 ES6+ 5회차 정리

<h2><a href="https://www.codewars.com/kata/52449b062fb80683ec000024/train/javascript">The Hashtag Generator</a></h2>
<ol>
<li>
이해
<ul>
<li>첫 글자만 대문자로 바꿔 한 단어로 만들자</li>
</ul>
</li>
<li>
계획
<ul>
<li>제한조건으로 먼저 false를 리턴해주자</li>
<li>reduce를 활용하여 문자열의 첫번째 글자를 대문자로 만들어주고 합쳐주자</li>
</ul>
</li>
<li>
실행
<div class="remark-highlight"><pre class="language-js"><code class="language-js">describe('make hashtag', () => {
 it('최종', () => {
 expect(makeHashtag('Do We have A Hashtag')).toBe('#DoWehaveAHashtag');

 });
});

 const makeHashtag = (arg) => {
 if(!arg.length){
 return false;
 }else{
 const result = arg.replace(/\b[a-z]/g, str => str.toUpperCase())
 .split(' ')
 .reduce((acc, cur) => acc += cur, '');
 const len = result.length
 return len > 0 &#x26;&#x26; len &#x3C; 140 &#x26;&#x26;'#' + result
 }
 }
</code></pre></div>
</li>
<li>
반성
<ul>
<li>제한조건에 대해서 이해가 부족하였다. 제한조건 최종단어의 글자수는 140 이하여야 한다!!</li>
<li>문제에 대해서 2번씩 읽고 시작해야 할것같다.</li>
</ul>
</li>
</ol>

Jun 개발노트

Make HashTag

The Hashtag Generator