vanila javascript SPA 구현

vue, react, angular 같은 프레임워크는 vue-route, react-router 같은 라이브러리를 사용해 라우팅 한다. 따라서 직접 라우팅을 구현할 일이 거의 없다.

하지만 나는 프레임워크를 사용하지 않고 vaiila js에서 SPA를 만들기 때문에 라우팅을 직접 구현해야 한다.

✚ SPA(Single Page Application)란?
하나의 HTML(페이지)에 필요한 정보만 동적으로 로드하는 것. 즉, 하나의 HTML 파일과 여러개의 js파일로 페이지를 전환시키는 것!

하지만 여기서 의문이 들었다. SPA를 구현할 때 라우팅을 해야한다는데 라우팅 없이 가면 안될까? 그 이유는 무엇일까? 그래서 그 이유에 대해 탐색하기 시작했다.

라우팅 없이 SPA 구현이 가능한가?

가능하다! 하지만 매우 비효율적이다.

SPA의 장점은 그때 그때 필요한 정보만 가져와 렌더링하는 것이다. 라우팅을 하면 각각의 URL이 다르기 때문에 URL마다 필요로 하는 정보를 알 수 있다. 따라서 필요한 js파일만 자동으로 로드 되도록 할 수 있다.

하지만 라우팅을 사용하지 않으면, 우리는 어떤 정보가 필요한지 모른다.
그러니까, 서버나 클라이언트가 요청하기 전까지 내가 무슨 정보를 넘겨줘야할지 모른다는 말이다. 그렇기 때문에 나는 모든 정보를 가지고 있어야한다.

즉, 초기에 모든 정보를 로드해야한다. js파일 여러개를 모두 연결해 로드하거나, js파일 한개를 만들고 모든 정보를 담아 로드해야한다.
애초에 SPA의 장점은 필요한 코드만 가져와 렌더링 함으로써, 효율성을 높이는 것이다. 그런데 처음에 모든 js코드를 로드하게 되면 그 장점이 없어지는 것과 마찬가지이다.

라우팅 없이 SPA를 구현한다면 어떤 단점이 있나?

앞서 말했다시피 모든 js 코드를 초기에 로드해야 하기 때문에 초기 로딩 시간이 길어진다. js파일의 크기가 크다면 더더욱 문제이다. 또, 라우팅을 해주지 않았기 때문에 URL이 하나밖에 없다. 따라서, 브라우저에서 뒤로가기가 불가능하다.

라우팅없이 SPA 구현 VS 전통적인 다중 페이지 웹 애플리케이션(HTML 여러개)

그렇다면 라우팅없이 SPA를 구현하는게 나을까? 아니면 SPA를 사용하지 않고 HTML을 여러개 만드는 것이 나을까?라는 의문이 들었다. 베스트는 SPA와 라우팅을 같이 사용하는 것이지만 말이다. 결론부터 말하자면 상황에 따라 다르다.

먼저 라우팅없이 SPA 구현을 하게 되면 초기 로딩 시간이 길어진다. 이는 페이지 수가 많을수록 필요한 js코드도 많아지기 때문이다. 또, URL이 하나이기 때문에 브라우저상 뒤로가기가 불가능하다. 대신 js코드로 페이지를 전환시키기 때문에 페이지간 전환이 빠르다.

전통적 다중 웹 페이지 어플리케이션은 HTML하나만 로드하면 되기 때문에 초기 로딩 시간이 짧고 브라우저에서 뒤로가기가 가능하다. 하지만, 페이지를 전환할 때마다 새로운 HTML이 로드 되기 때문에 페이지 전환 속도는 느리다. 또, 필요한 페이지 수만큼 HTML파일을 작성해야 하기 때문에 페이지수가 많을 경우 귀찮다.