SPA 공부시 초점
MV*
모델이 등장하면서 어려워짐. e.g. 투두리스트
객체 지향에 대해 공부하기. (Java의 객체 지향 등)
JavaScript
view에 대해 깔끔하게 template 짜기.
Asynchronous
Component
Routing
history API 다루기.
Template 개선
template literal 활용
`<span>${data.name}</span>`;
Spread operator
배열 합치고, 복제시.
let previousData = [1,2,3];
let newData = [...previousData, 4, 5]
immutable 객체 생성에 유용하다.
Destructuring - Array
데이터를 변수에 할당하기 용이.
let previousData = ["apple","orange", 100, 200];
let [,,applecount, orangecount] = previousData;
//콤마의 의미 명확히 알기. 갯수가 달라짐에 따라 무슨 변화가 생기는가 생각하기.
console.log(applecount)
console.log(orangecount)
Destructuring - Object
this.state.name..... 지저분하다.
let obj = {
name: 'Dahee',
age: 26
}
let {name, age} = obj;
console.log(name, age);
//변수명 변경 가능.
let {name:newName, age:newAge} = obj;
console.log(newName, newAge);
* 함수에서 파라미터로 obj 특정 값 받을때 destructuring 유용.
function printName({name}) {
console.log(name);
}
printName(obj);
==> obj를 printName에서 다 받는게 아니라, name만 가볍게 받는다.
Arrow function
setTimeout(()=>console.log("hello"),1000);
Promise
자바스크립트는 비동기처리 언어. (=이전 작업이 끝날 때까지 기다리지 않고, 그 다음껄로 넘어간다..)
비동기처리 예시
console.log('Hello');
setTimeout(function(){
console.log('bye');
},3000)
console.log('Hello again!')
결과물
Hello
Hello again
Bye
Promise 예제
예제 소스: 캡틴판교님(https://joshua1988.github.io/web-development/javascript/js-async-await/) 블로그 참고.
new Promise(function(resolve,reject){
setTimeout(function(){
resolve(1);
},2000);
})
.then(function(result){
console.log(result);
return result + 10;
})
.then(function(result){
console.log(result);
return result + 20;
})
.then(function(result){
console.log(result);
throw new Error("버그");
}).catch(function(err){
console.log("error: ",err);
})