TIL 16일차

``( 백틱 )와 innerHTML

$editor.innerHTML = `
      <input type="text" name="title" value=${this.state.title}>
      <textarea name="content" style="width:600px;height:400px">${this.state.content}</textarea>
    `

해당 부분의 this.state.title이 만약 '오늘의 학습일지'라면 이는 value에는 실제로 value="오늘의" 학습일지이렇게 오늘의밖에 적용이 안된다. 이를 대처하려면
value=${this.state.title}부분을
value="${this.state.title}"부분으로 바꿔야한다.

... spread 연산 활용

let msk = {
    age : 14,
    sex : "women"}

let ageCheck = "age"

msk = { ...msk , [ageCheck] : 24}
//{age: 24, sex: "women"}
msk = { ...msk , ageCheck : 24}
//{age: 24, sex: "women", ageCheck: 24}

객체에서 바로 변수로 key를 잡으려하면 해당 변수로 처리가 되지않고 해당 문자열로 처리가된다.
따라서 변수로 처리하고 싶으몬 []을 붙여야한다.

디바운스

일정시간동안 이벤트를 다루지않고 어떤 시간이 지난 후 이벤트 처리를 진행하는 것

디바운스 예시

setItem('temp-post',{
        ...post,
        tempSaveDate : new Date()
      })

에서

let timer = null;

if(timer !== null){
        clearTimeout(timer)
}
timer = setTimeout(()=>{
      setItem('temp-post',{
        ...post,
        tempSaveDate : new Date()
      })
    },1000)

timer를 추가하고 원하는 이벤트 부분을 setTimeout으로 묶으면 된다.