#10 SPA 와 Routing

 

1. SPA

2. Routing

3. react-router를 이용한 SPA

4. SPA단점 및 해결방안

 

 

 

 

 

traditional page vs SPA

1.SPA, single-page application

• 정의 : 한 개의 페이지로 이루어진 애플리케이션
• 기존의 웹 애플리케이션은 화면 전환이 일어날 때마다 html을 서버에 새로 요청하면 사용장의 인터페이스에서 사용하고 있던 상태를 유지하기 어려웠다. 또한 바뀌지 않는 부분까지 새로 불러와 보여주므로 불필요한 로딩이 존재하여 비효율적이었다.
• SPA는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드한다. 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

 

 

2. Routing

• 정의
  : 네트워크상에서 주소를 이용하여 목적지까지 경로를 체계적으로 결정하는 경로선택 과정. 즉, 다른 주소에 다른 화면을 보여 주는 것
• routing 발전과정
  
  1. "전통적 링크 방식"은 현재 페이지에서 수신된 html로 화면을 전환하는 과정에서 전체 페이지를 새로 렌더링하게 되므로 새로고침이 발생한다. 간단한 웹페이지라면 문제될 것이 없겠지만 복잡한 웹페이지의 경우, 요청마다 중복된 HTML과 CSS, JavaScript를 매번 다운로드해야하므로 속도 저하의 요인이 된다.
     
     ex)  <a href = "index.html"> go main </a> 
     
     
  2. "AJAX"는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식. 전통적 링크방식과는 반대로 href 를 사용하지 않는다. AJAX 를 통해 서버에 필요한 리소스를 요청하고 응답을 하면 html 내의 내용을 렌더링한다. 필요한 부분만 렌더링을 하므로 기존의 방식보다 속도가 빠르다. 하지만, URL 의 변경이 없으므로 앞으로가기, 뒤로가기 등의 history 관리가 되지 않는다.
     
     ex) <a id="main"> go main </a>
     
     
  3. "Hash 방식"은 URI 의 fragment identifier (예: #home )의 고유기능인 앵커(anchor) 를 사용한다. fragment identifier는 URI 에서 # 으로 시작하는 문자열인데 hash 또는 hash mark 라고 불린다. href 어트리뷰트에 hash 를 사용한다. HOME 을 누르게 되면 hash 가 추가된 URI가 표시된다. hash 가 추가되면 URL 이 동일한 상태에서 URI 만 바뀌므로 서버에 어떤 요청도 하지않는다.즉, hash 가 변경되어도 요청이 보내지지않으므로 페이지의 새로고침이 발생하지 않는다.
     
     <a href = #main"> go main </a>
     
     
  4. "PJAX"방식은 HTML5의 History API인 pushstate 와 popstate 를 사용하고 href 방식에 path 를 사용하고있다. HOME 을 클릭하면 path 가 추가된 URI 가 서버로 요청된다. 그리고 이벤트를 캐치 한 후 preventDefault 를 사용해 서버로의 요청을 방지한다. 이후에 href 속성에 path 를 사용해 AJAX 요청을 한다. AJAX 요청은 주소창의 URL을 변경시키지않아 히스토리 관리가 안되는데 이 때 pushstate를 사용하면 주소창의 URL은 변경되고 히스토리가 남지만 요청을 하지 않으므로 페이지가 갱신되진 않는다. hash 방식에서는 URL이 변경되지않아 SEO 가 문제가 되지만 PJAX 는 페이지마다 고유의 URL 이 존재하기 때문에 아무 문제가 없다.
     
     <a href="/main"> go main </a>
     
     
     

3. react-router를 이용한 SPA

• react-router 는, 써드파티 라이브러리로서, 비록 공식은 아니지만 (페이스북 공식 라우팅 라이브러리는 존재하지 않습니다) 가장 많이 사용되고 있는 라이브러리.
• 이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해주고 서버 사이드 렌더링도 도와주는 도구들도 포함되어있다. 추가적으로 (이 라우터는 react-native 에서도 사용가능)
• <BrowserRouter>
  : 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하고 사용할 수 있도록 함.
• <Route parh="주소규칙" component={보여 줄 컴포넌트}>
  : 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여 줄지 정의
• <Link to="주소">
  : <Link> 컴포넌트를 사용하여 페이지 전환시, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경 ( <a> 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장)
• url 파라미터 : 라우트로 사용되는 컴포넌트에게 props로 전달된 match 객체안의 params 값을 참조하여 사용
  일반적으로  url 파라미터는 특정 아이디 혹은 이름을 사용하여 조회할 때 사용됨.
• url 쿼리 : 라우트로 사용된 컴포넌트에게 props로 전달된 location객체의 search 값을 참조하여 사용
  일반적으로 url 쿼리는 키워드 검색이나 페이지에 필요한 옵션을 전달할 때 사용됨.
• history 객체 : 라우트로 사용된 컴포넌트에게 props로 전달되는 객체. history객체를 사용하여 라우터 API 호출 가능.
• withRouter 함수 : 라우트로 사용되는 컴포넌트가 아니어도 match 객체, location 객체, history객체에 접근 가능하게 함.
• <Switch> : 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만을 렌더링 
• <NavLink> : 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 CSS 클래스를 적용

 

 

4. SPA 단점 및 해결방안

• 단점
  • 앱의 규모가 너무 커지면 큰 자바스크립트 파일 때문에 페이지 로딩속도가 오래 걸린다
  • 페이지 로딩시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 불러오게된다.
  • 자바스크립트 파일이 로딩되어 실행되는 짧은 시간 동안 흰페이지가 나타날 수 있다.
• 해결방안
  • 서버사이드 렌더링 (UI를 서버에서 렌더링하는 것) 기법을 이용하여 지바스크립트 파일 다운로드가 완료되지 않은 시점에서도 html상의 콘텐츠를 제공하여 대기 시간 최소화 및 렌더링 성능을 개선