Intro

public/index.html

앱 시작시 실행되어지는 html페이지

id는 root를 가진다

src/index.js

JS 시작점

root id 가진 div요소 잡아서 그 안에 화면 꾸미는 원리

SPA (Single Page Application)

Multi Page Application

전통적인 웹 사이트 만드는 방식

Single Page Application

웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면 변경 표현

화면 전환 원리

HTML 5의 History API

: JS영역에서 History API이용해 현 페이지 내에 화면 이동이 일어난 것처럼 작동

History API

History.back()

- 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메소드

- 브라우저의 뒤로 가기를 누르는 것과 같은 효과

History.forward()

- 세션 기록의 바로 앞 페이지로 이동하는 비동기 메소드

- 브라우저의 앞으로 가기를 누르는 것과 같은 효과

History.go()

- 특정 세션 기록으로 이동하게 해주는 비동기 메소드

- 1을 넣어 호출하면 바로 앞 페이지, -1을 넣어 호출 시 바로 뒤 페이지로 이동

History.pushState()

- 주어진 데이터를 세션 기록 스택에 넣는 것

- 직렬화 가능한 모든 JS객체를 저장하는 것이 가능

History.replaceState()

- 최근 세션 기록 스택의 내용을 주어진 데이터로 교체