일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- jpa lazy
- 정적팩토리메서드
- 동적파라미터
- 스프링시큐리티
- kotlin ::
- java predicate
- 스프링 포매터
- spring formatter
- 생성자주입
- ioc컨테이너
- 스프링
- method refetence
- 수정자주입
- 스프링부트 도커
- 자바 필터
- Atomicity
- 소프트웨어의 품격
- IOC
- 기능적 요구사항
- 그래프큐엘
- 스프링 시큐리티 설정
- kotlin 리팩터링
- open-session-in-view
- jpa no session
- 스프링di
- Spring
- fetch join
- 비기능적 요구사항
- 도커 이미지 빌드
- 토비의 스프링
Archives
- Today
- Total
공부기록
단일 페이지 애플리케이션(SPA) 구현을 위한 조건 두 가지. 본문
반응형
1. 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단, 브라우저는 서버로 요청을 보내지 않아야한다.
2. 브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다. 이때 또한 브라우저는 서버로 요청을 보내지 않아야한다.
브라우저에는 히스토리에 state를 저장하는 스택이 존재한다. (브라우저 api의 pushState, replaceState, popState)
componentDidMount(){
window.onpopstate = () => { ... };
}
onClick1 = () => window.history.pushState('v1', '', '/page1');
onClick2 = () => window.history.pushState('v2', '', '/page2')l
replaceState
? pushState와 거의 같지만, 스택에 state를 쌓지않고 가장 최신의 state를 대체한다.
이렇게 popState(이벤트), pushState(함수) replaceState(함수) 가 있으면 클라이언트에서 라우팅 처리가 되는 단일 페이지 앱을 만들 수 있다.
브라우저 api로 페이지라우팅 처리하려면 신경써야할 부분이 많다. 이럴 때는 react-router-dom을 이용해보자.
반응형
'JAVASCRIPT > REACT' 카테고리의 다른 글
[REACT]거대한 컴포넌트를 작은 컴포넌트로 쪼개보자2 (0) | 2019.08.03 |
---|---|
[REACT] 거대한 컴포넌트를 작은 컴포넌트로 쪼개보자 (0) | 2019.08.03 |
[REACT] JSX 사용하기 전 후. (0) | 2019.08.03 |