[Node.js_4기] Today_I_Learn : Algorithm & Js (24/01/03)

목차

 

1. 학습 내용

2. 내용 정리

3. 예제

4. 생각 정리

 

1. 학습 내용 

<Algorithm 기초>

문제에 대한 해결방법

프로그래머 : 최선의 방법을 찾아내는 능력이 필요하다.

학습 목표 : 기본 코딩 능력 탄탄하게 만들기 -> 문제에 대해 생각하는 능력 키우기

 

<콜백 함수와 동기/비동기 처리>

1. 콜백 함수의 개념과 예시

2. 콜백 함수의 제어권 

3. JS비동기제어 코딩 이해, 활용

 

2. 내용 정리 

(2) 제어권

1) 호출 시점에 대한 제어권

함수 호출시 -> 호출 주체, 제어권 : 사용 

setInterval(Func,300) -> 호출주체, 제어권 : setInterval

2) 인자에 대한 제어

콜백 함수를 넘겨받은 함수에게 인자의 순서에 대한 제어권이 주어진다.

3) this

제어권을 넘겨받을 코드에서 this를 지정한 경우, 콜백 함수도 그 대상을 참조한다.

 

(3) 콜백 함수도 함수다

콜백 함수로 어떤 객체의 메서드를 전달하더라도, 그 메서드는 함수로서 호출된다.

 

(5) 콜백 지옥과 비동기 제어

1) 콜백 함수를 익명 함수로 전달하는 과정이 반복되면 들여쓰기가 반복되어 가독성과 유지보수에 문제가 생긴다.

2) 동기 vs 비동기 : 

실행중인 코드 끝날때 까지 대기 vs 실행중인 코드 완료와 무관하게 즉시 코드 실행

-> 웹의 복잡도 상승에 따라 비동기적 코드 비중이 늘어난다...

// 비동기 실행은 코드 실행 순서를 보장하지 않음 -> 비동기도 코드 실행 순서를 보장해줄 필요가 생겨난다.

 

3. 예제 

(4) 콜백 함수 내부 this 바인딩

<bind메서드를 활용한 this 바인딩>
var obj1 = {
	name: 'obj1',
	func: function () {
		console.log(this.name);
	}
};
//함수 자체를 obj1에 바인딩
//obj1.func를 실행할 때 무조건 this는 obj1로 고정해줘!
setTimeout(obj1.func.bind(obj1), 1000);

var obj2 = { name: 'obj2' };
//함수 자체를 obj2에 바인딩
//obj1.func를 실행할 때 무조건 this는 obj2로 고정해줘!
setTimeout(obj1.func.bind(obj2), 1500);

(5) 콜백 지옥과 비동기 제어 

setTimeout(
  function (name) {
    var coffeeList = name;
    console.log(coffeeList);

    setTimeout(
      function (name) {
        coffeeList += ", " + name;
        console.log(coffeeList);

        setTimeout(
          function (name) {
            coffeeList += ", " + name;
            console.log(coffeeList);

            setTimeout(
              function (name) {
                coffeeList += ", " + name;
                console.log(coffeeList);
              },
              500,
              "카페라떼"
            );
          },
          500,
          "카페모카"
        );
      },
      500,
      "아메리카노"
    );
  },
  500,
  "에스프레소"
);
======================================================
<Promise>
// 반복부를 함수화
var addCoffee = function (name) {
	return function (prevName) {
		return new Promise(function (resolve) {
			setTimeout(function () {
				var newName = prevName ? (prevName + ', ' + name) : name;
				console.log(newName);
				resolve(newName);
			}, 500);
		});
	};
};
// resolve/reject전까지 잠시 대기. 완료 후 다음 코드 실행.
addCoffee('에스프레소')()
	.then(addCoffee('아메리카노'))
	.then(addCoffee('카페모카'))
	.then(addCoffee('카페라떼'));
========================================================    
<Generator>
var addCoffee = function (prevName, name) {
	setTimeout(function () {
		coffeeMaker.next(prevName ? prevName + ', ' + name : name);
	}, 500);
};
// next 호출. yield까지 실행 후 잠시 대기. 작업 완료 후 next 호출.
var coffeeGenerator = function* () {
	var espresso = yield addCoffee('', '에스프레소'); 
	console.log(espresso);
	var americano = yield addCoffee(espresso, '아메리카노'); 
	console.log(americano);
	var mocha = yield addCoffee(americano, '카페모카'); 
	console.log(mocha);
	var latte = yield addCoffee(mocha, '카페라떼');
	console.log(latte);
};
var coffeeMaker = coffeeGenerator();
coffeeMaker.next();
========================================================
<Promise + Async/await>
var addCoffee = function (name) {
	return new Promise(function (resolve) {
		setTimeout(function(){
			resolve(name);
		}, 500);
	});
};
var coffeeMaker = async function () { // 비동기 실행하고 싶은 함수 앞에 async
	var coffeeList = '';
	var _addCoffee = async function (name) {
		coffeeList += (coffeeList ? ', ' : '') + await addCoffee(name);
	};
    // 비동기 작업 필요한 부분에서 await
	await _addCoffee('에스프레소'); 
	console.log(coffeeList);
	await _addCoffee('아메리카노');
	console.log(coffeeList);
	await _addCoffee('카페모카');
	console.log(coffeeList);
	await _addCoffee('카페라떼');
	console.log(coffeeList);
};
coffeeMaker();
// promise ~ then 과 비슷한 효과

 

-> 연습

 

4. 생각 정리 

 

알고리즘 특강이 시작되었습니다.

입문 코테 정도로 생각했지만 그보다는 훨씬 어려웠습니다.

어떻게 해야 할지는 알것 같은데, 구현에 어려움을 겪었습니다.