오늘은 SPA에 대해서 알아보려한다.

SPA는 Single Page Application의 약자로 결과부터말하면 현재 대세라고 할 수 있다.

왜 대세이고 어떤 특징이 있는지 알아보자.

SPA의 등장배경

웹은 등장 이래로 엄청난 속도로 발전했다. 모든 방식을 다 알지도 못하고 다 이야기 할 수도 없기떄문에 3가지 예를 들며 설명하려한다.

기존의 방식

일반적으로 우리가 아는 웹 서비스는 어떤 링크(<a href=”something”/>)를 클릭하면 해당 페이지로 이동하는 방식을 취하였다. 좀 더 자세히 이야기하면 서버에 someting이라고 요청을 하면 서버가 해당하는 html을 내려주는 방식이다. (이런 방식을 서버사이드 렌더링이라고 한다.)

브라우저는 그런 활동이 있을 때마다 html을 받아 표현해주는데, 이 방식에 문제가 있었다.

변하지 않는 정보도 계속 다시 받아야 한다.

예를 들어 사이트의 네비게이션같은경우는 변하는 일이 거의 없는데, 항상 새로 그려지게 된다.

이런식의 낭비를 해결하기 위해 특정부분만 새로 그리자. 라는 방식이 나왔다.

특정부분만 새로 그리는 방식

변하지 않는 부분(예를 들어 네비게이션)과 변하는 부분(예를들어 컨텐츠부분)을 구분하고 변하는 부분만 새로 그리는 방식이다.

이 방식으로 아주 비약적인 발전을 하였지만, 브라우저 히스토리를 관리하기가 어렵고 코드를 작성하기 어려워졌다.

프론트엔드 개발자의 짐이 이 때부터 많이 무거워지기 시작하지 않았나라고 생각한다.

이러한 형태의 방식으로도 사실 페이지가 하나지만, 현재의 SPA는 조금 더 발전했다.

SPA

SPA에 와서 #(hash)라는 fragment 식별자를 이용해 라우팅을 하게 된다. hash가 변경된다고해서 서버에 요청을 보내거나 하진 않는데, 그건 hash가 문서 내의 참조이기 때문이다.

하지만 hash가 변경되면 history에 쌓이게 된다. hashchange나 popstate 리스너를 사용하면 hash의 변화를 감지할 수 있게 된다. 변화가 감지되면 hash값을 확인하여 라우팅 기능을 실현할 수 있다.

    render(value){
        if(value === '#main')
            document.innerHTML = mainHtml;
        else
            document.innerHTML = pageNotFoundHtml;
    }

    function router(){
        render(location.hash)
    }

    window.addEventListener('hashchange',router);

마치며

현재 유명한 라이브러리들은 모두 SPA를 기본으로 하고 있다. 하지만 SPA가 단점이 없는 것은 아니다. 자바스크립트를 많이 쓰게 된다는 점과, 첫 로딩이 느리다, SEO(검색엔진 최적화)가 되지 않는다는 등의 단점등이 있다.

실제 서비스에서는 서버사이드 렌더링을 도입하는 융합형 방식이 사용되곤한다. 아니면 동적으로 자원들을 임포트하여 초반속도를 높인다던가 하는 방식들이 사용 될 수 있다.

항상 많은 문제들은 어떤 정답이 있는게 아니라 무엇을 해결하고 싶은지에 달렸다.

원하는게 무엇인지를 파악하고 그걸 해결하자.

2023년 새해에는 성장하고 함께하고 싶다면?

Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.