리액트 심화 기능)) SPA, 라우팅

1. MPA(Multi Page Application)

1) MPA란?

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

 

2. SPA(Single Page Application)

1) SPA란?

• SPA는 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식
• 라우터로 처리하기 때문에 또 다른 페이지를 요청하지 않는다.
• 유저는 웹페이지를 모바일 앱 같은 경험을 느낀다.
• 진화된 웹의 형태

2) SPA의 기술적 장점

• 서버에서 페이지를 만들 필요가 없기때문에 CDN에 캐싱이 가능하다. => 서버 성능에 무리가 안간다.
• 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어든다.
• 또한 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어든다.
• 웹사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 고도의 소프트웨어 설계와 패턴을 적용할 수 있다. 

3) SPA의 기술적 난관들

• MPA방식보다는 Search Engine Optimization에 불리하다. => 많은 정보가 필요하지만 SPA에는 정보가 없어서 검색엔진의 최적하가 불리하다.
• 하나의 자바스크립트 앱이 지속하므로, 메모리 관리와 성능, 데이터 활용 등이 중요하다.
• 여러 페이지를 전송받는 것보다, 하나의 거대한 자바스크립트 앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려진다.

*아래의 처리를 통해 페이지 로드속도를 올릴 수 있다.
-code -splitting
-tree -shaking
-lazy -loading

4) SPA에서의 라우팅

• 주로  History API 혹은 URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현한다.
• history, location 등 HTML5 API를 활용
• visibilitychange, popstate, beforeunload 등 window event를 활용하여 페이지 전환 등의 이벤트 시 핸들러를 등록. => 라우팅을 클라이언트 사이드에서 구현할 수 있게 한다.
• react-router, reach-router 등의 많이 사용하는 리액트 라이브러리를 활용하면, 라우팅 관련 기능을 쉽게 사용할 수 있다.

 

☆용어알아보기☆

• CDN : 컨텐츠 전송 네트워크

데이터 사용량이 많은 애플리케이션의 웹페이지 로드 속도를 높이는 상호연결된 서버 네트워크이다.
컨텐츠 전송 네트워크 또는 배포 네트워크를 유지할 수 있다.
사용자가  해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹사이트 이미지와 같은 대용량 파일을 로드하는데 시간이 오래 걸린다.
대신 웹사이트 컨텐츠는 지리적으로 사용자와 가까운 CDN서버에 저장되며 컴퓨터에 훨씬 빨리 도달한다.

• 캐싱 : 캐시는 일반적으로 일시적인 특징이 있는 데이터 하위 집합을 저장하는 고속 데이터 스토리지 계층.

따라서 이후에 해당 데이터에 대한 요청이 있을 경우 데이터의 기본 스토리지 위치에 액세스할 때보다 더 빠르게 요청을 처리할 수 있다. 캐싱을 사용하면 이전에 검색하거나 계산한 데이터를 효율적으로 재사용할 수 있다. 완전하고 영구적인 데이터가 DB와는 대조적이다.

• SEO(Search Engine Optimization)

큰 포털사이트의 검색엔진(기계)이 웹상에 존재하는 여러 페이지들을 링크를 따라 페이지를 캐싱하면서 정보를 긁어모은다.
그 정보를 바탕으로 유저가 특정 서치쿼리를 날렸을 때 페이지에 어떤 정보가 있느냐에 따라서 그 페이지를 랭킹하고 가장 높은 랭크를 가진 페이지를 리턴하는 식으로 작동한다.

• 라우팅 라이브러리 : 리로딩을 없애는 SPA를 구현하는 가장 근원적인 기술

hash를 넣으면 hash의 기본적인 동작과 리로드가 없는 것
hash가 바뀌면 브라우저는 디폴트로 리로드처리를 하지 않고 url을 변경하게 된다.
hash 방식은 예전에 라우팅을 구현할 때 많이 사용했다.
지금은 history API가 등장했기 때문에 hash를 이용해 라우팅하는 것보다 리얼하고 편리한 라우팅을 구현할 수 있다.

• History API

브라우저에서 제공하는 주소 API를 사용해 주소를 바꾸는 것
요즘 웬만한 SPA의 라우터들은 이 API를 사용하고 있다.
이 API는 기존 history 객체인 window.history를 그대로 활용한다.
자바스크립트로 뒤로가기 history.back(), 앞으로 가기 history.forward(), 지정한 위치로 가기 history.go(인덱스)
=> SPA일 경우 위 메소드는 사용하지 않는다.
주소 내역은 하나의 목록이기 때문에 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것이다.(목록에 새로운 주소를 추가하면 페이지를 이동한 셈)
목록에 주소를 추가하기 위한 메소드:  history.pushState(), history.replaceState()
 history.pushState({data: 'abc'}, 'pushState로 주소변경', '/abc')
- 첫 번째 인자 : 바뀐 주소와 함께 저장할 데이터 객체
- 두 번째 인자 :  바꿀 제목
- 세 번째 인자 : 바꿀 주소