- 경험(고통...레거시...)에서 비롯된 ES6 이전 문법과 이후 문법에 대해 깊게 살펴주고, 개선된 ES6 문법이 어떤 부분에서 생산성을 올려주는 지 자세히 공유해줬다.
- 질문 피드백 열심히 해준듯.
- 100번 하면 된다는 마인드셋 가지고 잘 참아줘서 고마움.
- 함수 스코프 언어라 block(if, for, switch statements) 내부에서 변수 선언해도 함수에 선언된 값을 덮어씌우는 문제 존재
- let, const 사용시 block 도 스코프로 취급.
- const 사용시 identifier 에 재할당은 막을 수 있지만, Reference Type 내부 값의 변경은 막을 수 없음.
- 그냥 짧아서 좋음 (NO!!!!)
- this 스코프가 생기지 않음
- 람다 표현식, 익명 함수
Spread
- sexy shallow copy
const arr = [1,2,3,4,5]; const freshArrNotRelatedToPreviousOne = [...arr];배열 얕은 복사하기 (그냥 할당하면 참조 걸림! 둘 다 바뀜!)
Destructuring
- Redux - State 분해해 여러 변수로 할당
const { language, useDarkMode } = useSelector(s => s.Config.config);(다른 config prop 바뀌어도 리렌더링됨..ㅠㅠ)
- 많은 사람들에게 익숙한 객체지향 스타일 문법 필요했음
- Prototype 미사용 시 메서드를 각 인스턴스마다 따로따로 만드는 문제 존재했음 => Class 사용 시 해결됨
- 함수의 지역변수는 private, return 에서 물려나가면 public - 클로저.
- ES Module(export/import) 동작 방식과 JS 모듈 패턴의 연관성
- Module Bundler - 익명 함수 스코프에 non-export 변수 가두기
- 그냥 파일이 각각 함수 스코프라고 생각하세요 (Singleton Instance?)
Legacy UI Rendering Strategy => ES6 Template String + Functional API (map, filter, every, reduce...)
- HTML 템플릿을 Old Loop + String Literal 활용해 만드는 "그 방법" 설명......
var productList = '';
res.data.products.forEach(function(product) {
template += '<li class="product-list-item">' + product.name + '</li>';
})- Template String 활용
const productList = res.data.products.map((product) => `<li class="product-list-item>${product.name}</li>`;- 실행은 너가 해 (Browser API, Javascript API ...)
- forEach - cb(array[i]);
- map - freshArray.push(cb(array[i]);
- filter - if (cb(array[i])) freshArray.push(array[i]);
- XHR - Browser 에서 알아서 실행하고 (TCP socket stream get get get get..?) ... 끝나면 알아서 cb(httpResponse);
XMLHttpRequest.onreadystatechange((readyState) => { if (readyState === 4) handleResponse() });- Timer - Browser 가 알아서 시간 재고 (sleep?) ... 시간 지나면 cb();
setTimeout(() => { console.log('cb run after 100ms!'), 100);
- Promise에 성공/실패 콜백 추가하기
- 동작 방식 - Callback then/catch 로 Promise 내부에 성공/실패시 실행될 함수 등록하고 resolve/reject 로 실행.
- Dirty callback handler Promise 안에 숨기기
- 예전 jQuery ajax 의 onSuccess/onError 콜백을 Promise로 감싸기.
const getUser = function () {
return new Promise((resolve, reject) => {
$.ajax('api/user/', {
onSuccess(result) {
resolve(result);
},
onFail(error) {
reject(error);
}
})
});
};
const getProduct = function (userid, page) {
return new Promise((resolve, reject) => {
$.ajax(`api/product?userid=${userid}&page=${page}`, {
onSuccess(result) {
resolve(result);
},
onFail(error) {
reject(error);
}
})
});
};
getUser()
// getUser Promise에 callback 등록. then은 resolve 할때 실행댐
.then((user) => {
globalState.user = user;
return getProduct(globalState.user.id, 1);
})
// getUser에 등록. catch는 reject 시 실행됨
.catch((error) => {
console.error(error);
return getProduct(globalState.user.id, 1);
})
// getProduct Promise에 callback 등록.
.then((product) => {
globalState.product = product;
})
// getProduct에 등록.
.catch((error) => {
console.error(error);
});- Promise chaining - Promise returns Promise then then then catch...
- Syntax, Concept
- async function ? await 값은 promise resolve 될 때까지 기다려야 할당되겠네 ?
- await 는 Promise 밖에 못받네 ? Promise Runner ? resolve 될 때 까지 기다리네 ? suspend function ? coroutine ? generator ? Iterator ? (여기까지 안들어감)
// async / await
async function getUserAndProduct () {
const user = await getUser();
const product = await getProduct();
globalState.user = user;
globalState.product = product;
}- 컨디션 관리 (이거 왜 항상 아쉬움..?)