아마 내일까지 복습을 지속하지 않을까 싶다.
오늘 배운 내용을 내가 직접 적은 코멘트와 같이 정리해서 올려보았다.
//동기와 비동기
//promise 와 resolve 그리고 then
var addCoffee = (name) => { // 2. name으로 받고 {}안에있는 함수 실행
return (preName) => { // 3. preName이 없을 경우에는 1번처럼 perName값이 필요없으니 ()으로 넣고 {}안에있는 함수를 실행시킨다.
return new Promise((resolve) => { // 4. resolve를 호출하는 구문이 있을경우, {여기있는 값 이 끝날때까지} promise 는 then으로 넘어가지않음.
setTimeout(() => { // 5. settimeout({이거 나오고},time이만큼 지연됨 ms단위)
var newName = preName ? `${preName},${name}` : name;
console.log(newName);
resolve(newName); // 6. resolve의 값이 나와서 이제 then 으로 넘어 갈 수 있음.
}, 500);
});
};
};
addCoffee("아메리카노")() // 1. addCoffee 함수에 "아메리카노"값을 name에 넣는다.
.then(addCoffee("카페라떼")) // .앞에있는 함수가 끝나면(then) 이걸 실행시킨다 (여기에있는 값);
.then(addCoffee("에스프레소")) // .앞에있는 함수가 끝나면(then) 이걸 실행시킨다 (여기에있는 값);
.then(addCoffee("카페모카")); // .앞에있는 함수가 끝나면(then) 이걸 실행시킨다 (여기에있는 값);
//async(비동기) / await(기다리다)
//function 앞에 async를 붙여주고, await 는 그 안에 있는 함수가 끝날 때 까지 기다림.
//promise와 resolve를 함께 써야함!
//yeild 와 next
var addCoffee2 = (preName, name) => {
setTimeout(() => {
coffeeMaker.next(preName ? `${preName},${name}` : name); //next 는 yield로 멈췄던 것을 진행시킴
}, 500);
}
var coffeeGenerator = function* (){ // function 에 * 이 붙어서 iterator 개체가 됨. iterator개체 는 next 메서드로 순환할 수 있게 됨.
var espresso = yield addCoffee2("","에스프레소"); // iterator 개체는 yield 개체가 만날때마다 멈춤
console.log(espresso);
var americano = yield addCoffee2(espresso,"아메리카노");
console.log(americano);
var mocha = yield addCoffee2(americano,"카페모카");
console.log(mocha);
var latte = yield addCoffee2(mocha,"카페라떼");
console.log(latte);
}
var coffeeMaker = coffeeGenerator();
coffeeMaker.next();
//class와 constructor
class car { // 4. class 미리 저장쓰 해놓는 함수 약간 정보를 대량 처리할 때 this 의 단짝이지 않을까.
constructor(modelName, modelYear, type, price) { // 5.constructor 안에있는 정보들을 모두 this에 넣어서 class 안에, constructor밖에 값에 적용 가능하게한다.
this.modelName = modelName;
this.modelYear = modelYear;
this.type = type;
this.price = price;
}
makeNoise() { // 3. car1에 들어왔는데 어떻게 this.model을 알수 있었을까? 정답은 class와 constructor 덕분이다.
console.log(this.modelName + `: 빵!`);
}
}
const car1 = new car("차모델", "모델년도", "타입", "가격"); // 1. car1을 new car 로 인해서 class car 안에 들어갈 수 있게 만들었다.
car1.makeNoise();// 2. car1을 makeNoise 함수로 넣음.
다시 봐도 상당히 어려웠다.
역시 복습은 중요하다!