Vanilla JS SPA 설계 계획

SPA 설계

History 가지고 놀기?

• 요점

  JS 에 의해 동적으로 움직이는 단일 페이지 App

• 사용자 flow

  1. 앱 초기 로딩(URL 을 통해 접속)

  2. a 태그로 클릭

  3. a 링크 루트는 기존 페이지와 다른 페이지로 나뉨

  4. 앱 로딩

• 나의 논리

  1. URL 별 페이지 설계

  2. 앱 로드/갱신 시 URL 정보 받아옴

  3. 받아온 URL 을 읽고 URL 에 맞는/맞지 않는 페이지 display : block / none

  4. 특정 페이지로 보내는 태그 클릭 시 URL 변경

• 의문점

  1. URL 별 페이지 설계

     페이지 설계는 어떻게 불러올건가?

     div 태그의 className 으로 나눔

     어떻게 불러올 것인가?

     단일 파일에 구겨넣기/object 태그

  2. 앱 로드/갱신 시 URL 정보 받아옴

     어떻게 받아올 거임?

     앱 초기 로드 시 URL 용 변수 생성, URL 받아서 해당 URL 문자열 return 하는 변수 생성 후 URL 변수에 저장

     a 링크 의 href 가 기존 URL 과 같을 시/다를 시 아무 반응 없음/URL 변경 및 URL 변수 변경

  3. 받아온 URL 을 읽고 URL 에 맞는/맞지 않는 페이지 display : block / none

     URL 읽어서 맞는 div display

     a 링크 href 경로가 기존 URL 과 같을 시/다를 시 아무 반응 없음/기존 display : block -> none, 맞는 페이지 display : none -> display