자바스크립트만으로 SPA 구현

 

Today, What I learned?

특강에서 프레임워크를 이용하지 않고 바닐라 JS로 SPA를 구현하는 법과, hashed url path에 대해 배웠다!

이후 좀 찾아보니 생각보다 SPA를 구현하는 방법에 대한 글과 영상이 많았다. 🤔

개인 프로젝트에 적용해보았으면 좋았을 텐데 싶은 아쉬움... 기회가 되면 리팩토링 할 수 있으면 좋겠다..

일단 오늘 배운 것에 대한 정리 시작!

 

 

MPA와 SPA

우선 이 두 주제에 대해서는 이전에 따로 정리해보았던 글이 있다. (부족함이 있을 수 있음)

https://i-ten.tistory.com/174

MPA,SPA 부터 CSR, SSR 까지

 

 

요약하자면 MPA는 여러 페이지(multi page)로 구성된 애플리케이션.

항상 서버로부터 완성된 HTML을 받아와 새로 렌더링 하기 때문에 새로고침이 일어난다.

 

SPA는 하나의 페이지로 구성된 애플리케이션이며 렌더링을 위한 모든 리소스를 최초 접근 시 한 번만 다운로드하고,

이후 필요에 따라서 비동기 형태로 데이터를 바인딩해오는 방식이다.

최초 렌더링 이후 부분부분 렌더링이 일어나기 때문에 새로고침 없이 네이티브 앱과 같은 유연한 UX를 제공할 수 있다.

하지만 최초 렌더링시 MPA처럼 완성된 HTML이 아니기 때문에, 보안과 SEO에 취약하다는 단점이 있다.

 

 

Hashed url path , Non-hashed url path

Non-hashed url path

일반적으로 우리가 자주 보는 URL이나, a태그의 href에 / 를 이용해서 경로를 구분하곤 한다.

https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=대한민국

위의 네이버 검색결과 URL 같은 경우만 봐도 그렇다.
브라우저는 이렇게 /를 이용해 구분된 URL을 서버에서 데이터나 문서를 GET 해와야 한다고 인식한다.

고로 위와 같이 Cannot GET /abc 같은 에러를 만날 수 있다.

보통의 url은 서버에서 가져오는 것이기 때문에 새로고침이 일어날 수밖에 없다.

 

 

Hashed url path

Url에 해시 # 를 붙이면 브라우저는 해시 앞부분까지만 url로 인식한다.

https://example.com/sample/#someting

이렇게 있다면 https://example.com/sample/ 까지만 인식한다는 말!

따라서 브라우저는 항상 https://example.com/ 에 해당하는 페이지를 렌더링 할 것이다.

 

 

JS로 SPA 구현하기

JS만으로 SPA를 구현하기 위해서는 새로고침 없이 라우터를 통해 페이지 URL이 바뀌도록 하는 것이 필요하다.
이를 위한 방법으로 history와 hash가 있는데, history는 history 객체를 이용해서 변경을 감지하는 방법이다.

 

history를 사용하는 방법은 다른 블로그 글들도 많이 있기도 하고, 오늘 강의에서 들은 Hash를 이용한 방법을 정리한다.

우선 라우터가 구현이 되어야 경로에 따라서 페이지를 렌더링 할 수 있다!

const routes = {
  "/": "/pages/index.html",
  about: "/pages/about.html",
  lorem: "/pages/lorem.html",
};

 

 

구현을 위한 로직

• window.location.hash를 이용해서 현재 hash를 알아온다.

window.location 객체로 현재 페이지에 대한 여러 정보를 알 수 있는데, 이 중에 hash가 우리가 지정한 url 부분이다!

 

 

• hash에 변경이 있을 경우, 해당 hash에 해당하는 라우터 페이지를 찾는다.
• 페이지 html을 fetch 해와서 index.html의 렌더링 할 부분에 뿌려준다. 통으로 가져와서 뿌려준다고 할 수 있다!
  window 객체 이벤트 중 hashchange 라는 속성 값으로 해시의 변화를 알 수 있다.

  window.addEventListener("hashchange", handleLocation);

• 처음 렌더링 되었을 때를 위한 이벤트 추가
  DOMContentLoaded를 이용해서 DOM이 모두 로드되었을 때 이벤트가 발생하도록 할 수 있다.

  document.addEventListener("DOMContentLoaded", handleLocation);

 

HTTP Status 304

처음 알게 된 코드 304 Not Modifeid 라는 이름을 갖고 있는데, 서버에서 리소스를 가져오는 것이 아니라 브라우저가 갖고 있는 캐싱된 값으로 리디렉션 한다는 뜻을 가지고 있다.

 

https://developer.mozilla.org/ko/docs/Web/HTTP/Status/304

304 Not Modified - HTTP | MDN

 

 

 

 

뭔가 더 깔끔하게 정리할 수 있을 것 같지만?..

직접 구현하면서 시간적 여유가 있다면 추가 보완해보는 것으로.. 🤔🤔