서론

오늘도 열심히 자바스크립트를 욕하면서 자바스크립트가 구리다고 하는 A씨 A씨는 오늘도 고민에 빠진다... 아니 웹 페이지를 이동하면서 도대체 왜 다시 로딩을 해야하는거야!!! 그러면 자바스크립트를 다시 다운 받고 실행시켜야 하며 새로운 페이지를 계속해서 렌더링 해야하는데!! 이러면 아무리 봐도 개손해 잖아!!! 라며 쓰레기 같은 브라우저를 욕하면서 코딩을 하고 있는데...

그걸 가엽게 여긴 코딩의 신(실존하지 않음)이 그에게 귀뜸을 해주었다. 어 그거 SPA쓰면 되잖아요? 라고 하지만 최신 기술에 둔감한 그는 SPA가 무엇인지 궁금해져서 React를 공부하기 시작헀으며 React-router-dom을 사용하면서 암이 나았다고 한다. 메데타시 메데타시

이 웹사이트를 이용하는 것을 하나의 서비스 즉 어플리케이션을 이용하는 것 처럼 느껴주게 도와주는 이 SPA에 대해서 간단하게 알아보도록 하자.

SPA???

SPA는 single page application라는 뜻으로 하나의 페이지의 응용프로그램이라는 뜻이다. 직역을 하게 되면 이해를 하기 힘들지만 하나하나 단어의 뜻을 파헤치게 된다면 그 뜻을 알게 되리라.

먼저 앞서 언급했다 싶이 A씨는 하루에 1204번 브라우저를 욕하고 자바스크립트에게 고통 받았지만 최신 기술 트렌드를 익히게 되면서 훨씬 효율적이며 훨씬 최적화가 잘 된 것이 무엇인지 서서히 깨닫게 되었다.

그렇다면 자바스크립트가 업데이트 되면서 브라우저에게 마법을 부려서 페이지가 이동 될때마다 페이지를 다시 다운 받지 못하도록 만든 것일까?

대답은 당연히 비슷하지만 엄연히 아니다 다. 사실 이 SPA의 원리를 알게 된다면 일종의 눈속임에 불구하다라고 이해 할 수 있겠다. history 객체를 이용하여 해당하는 페이지로 간 것 처럼 주소창을 간 것 처럼 해주는 것이지, 실제로는 해당하는 페이지는 사실 없는 것이다.

그렇게 때문에 어떠한 처리를 하지 않고 주소창을 이용하여 움직이거나, 새로고침을 하게 되면 404페이지가 나오는 이유도 그와 같다. 왜냐면 실제로 존재하지 않기 때문에.

그렇다면 어떻게 해결을 해줘야 하는 것일까?

방법은 vercel기준으로 설명하겠다.

vercel.json

{ "rewrites": [{ "source": "/(.*)", "destination": "/" }]}

vercel.json을 만들어서 해당하는 내용을 작성하면 된다. rewrites란 해당하는 source에 해당하는 페이지로 이동을 했을 때 사실은 destination 바꿔주는 설정이다. 위와 같이 설정하게 된다면 아무리 새로고침을 해도, 아무리 내가 목적지를 직접 수정해도 404페이지가 나오지 않게 된다!

마무리

오늘은 이렇게 간단하게 SPA에 대해서 알아보았다. 요즘 자바스크립트는 날로가면 갈수록 더욱더 발전하게 되는 것 같다.