SPA 팁

회사내에서 배웠던 내용을 정리했던 글 같다. 오랜만에 발견한 글이라서 다시 정리해둔다.

SPA

spa에서 history 사용

location.href 로 처리하면 해당 페이지로 이동하면서 페이지를 새로 불러오게 된다

SPA를 위해서면 history.pushState 를 이용하여 URL만 업데이트 하여 기본 페이지 이동처리를 방지한다.

뒤로가기 앞으로 가기 처리

window.addEventListener('popstate',this.route)

e.target.tagName

태그 이름으로 구분

e.target.className

클래스명으로 구분

@change === addEventListener('change',e=>{})

스토리지 값 가져오기

export const storage = localStorage 

export const getItme = (key,defaultValue)=>{

  try{

    const value = storage.getItem(key)

    return value ? JSON.parse(value): defaultValue 

    

  } catch {

    return defaultValue

  }

}

 

스토리지 세팅

export const setItme = (key,value) => {

  tru{

    storage.setItem(key,JSON.stringify(value))

  } catch{

    

  }

}

 

pormise All

await Promise.all ([ 함수 들 ])

await 가 많을때 더 빠르게 처리할수 있다.

병렬적으로 처리한다.

await는 하나 await 기다리고 다음 await 처리 이런 방식