01 SPA와 라우팅

Single Page Application

• SPA는 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식
  유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌

Multi Page Application

• MPA는 서버에 미리 여러 페이지를 두고 유저가 네비게이션 시 요청에 적합한 페이지를 전달.
  미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨
• 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리함.
• 페이지 요청마다 모든 리소스를 다시 받아오므로 페이지 간 데이터를 재활용하기 힘들다.

SPA의 특징

• CDR(Client-Side Routing) 기술을 활용, 페이지 진입 시 리로드없이 라우팅함
• AJAX 기술을 활용하여 페이지 이동 시 서버에 데이터만 요청하여 js로 페이지를 만든다.
• MPA와 다르게 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현한다.
• JS만을 활용해 전체 페이지를 만들기에 첫 요청 시 빈 html페이지를 받게 된다.

SPA의 기술적 장점

• 서버에서 페이지를 만들 필요가 없으므로 (서버의 성능에 도움) CDN에 캐싱이 가능

• 캐싱 : 파일의 복사본을 캐시 또는 임시 저장 위치에 저장하여 보다 빠르게 access할 수 있도록 하는 프로세스이다.
  따라서 CDN캐싱이라는 것은 원본 서버보다 최종 사용자에게 더 가까운 프록시 서버에 콘텐츠들(파일, 코드, 이미지, 비디오파일 등)을 캐시하여 요청자에게 보다 빠르게 콘텐츠를 전달하는 기술을 말한다.

• 프록시 서버 ??
  ** 클라이언트로부터 요청을 받아 다른 서버로 전달해주는 서버

• 매번 페이지 요청을 할 필요가 없어서 네트워크 요청이 줄어듬 (서버의 성능에 도움 )
• 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어듦
• 웹사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 ** 고도의 소프트웨어 설계와 패턴을 적용할 수 있음.

---

** 고도의 소프트웨어 설계

• 상태관리
• 라우팅
• 컴포넌트 재사용
• 훅을 통한 로직 재사용

---

SPA의 기술적 난관들

• MPA방식 보다는 Search Engine Optimization( 구글, 네이버등 검색엔진이 검색하여 최적의 정보를 사용자에 보여줌)에 불리함
• 하나의 js앱이 지속하므로 메모리 관리와 성능관리, 데이터 활용 등을 중요하게 관리해야 한다.
• 여러 페이지를 전송받는 것보다 하나의 거대한 js앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려진다.

SPA에서의 라우팅

주로 History API 혹은 URL hash를 이용해 페이지 리로드 없는 페이지 전환을 구현

window event(visibilitychange, popstate, beforeunload 등)을 활용해 페이지 전환 등의 이벤트시 핸들러를 등록

02 react-router

declarative routing for React

react-router의 기능

1. react 컴포넌트를 특정 path와 연결하면, 해당하는 path로 진입 시 컴포넌트를 렌더링하게 함.

2. query, path variable등 url parameter를 얻어 활용함.
   /login?email=abc@abcd.com

3. 조건에 맞지 않을 경우 redirect
   <Redirect to='/register' />

4. 페이지 이동 시 이벤트 핸들러를 등록
   history.listen(cb())

5. nested route를 구현

사용

...
return (
  <BrowserRouter>
  	<Switch>
  		<Route path='/about'><AboutPage /></Route>
  		<Route path='/contact'><ContactPage /></Route>
  		<Route path='/'><HomePage /></Route>
  	</Switch>
  </BrowserRouter>
  )
....

<코드해설>
BrowserRouter로 감싸 router context 제공
route 로 path 정의하고 그 안에 렌더링 할 컴포넌트 넣음
link로 특정 페이지 이동시 리로드 없이 페이지가 이동
switch로 매칭되는 라우트 맨 위의 하나의 컴포넌트를 렌더링 함. 정확히 일치하는 것 원하면 exact 사용!