혼자 JS, Serverless 갖고 놀기 - 간단 소개편소개
서버리스 방식의 SSR 사이트를 Vanilla JS 기반으로 간단히 구현해보며 흐름을 이해해보려 한다.
Next.js로 프로젝트를 진행하면서 많은 걸 알아서 해준다는 체감이 들었다. 컴포넌트나 쿠키 등의 기능은 개발하면서 직접적으로 사용하다보니 컨셉을 이해했지만 배포 같은 건 깊게 이해하지 못했다.
Next.js의 원리를 모방해서 구현하기엔 코드량이 너무 방대하고 난이도 있기에 Vanilla JS로 만든 컴포넌트 토대에서 시작해서 SSR을 구현하는 것이 목적이다.
마침 포트폴리오 사이트를 만들 필요가 있었는데 이는 정적인 페이지로 이루어지므로 SSR과 서버리스 방식에 적합하다.
기술 스택 및 구현 요약
Server Side Rendering(SSR)에선 당연히 서버가 필수적으로 필요하다. 다만 서버 쪽까지 Vanilla JS로 구현하진 않는다.
서버는 Express를 사용해서 API를 구현한다. API는 기본적으로 요청받은 페이지의 HTML을 응답으로 보내 JS가 실행 전이라도 페이지 레이아웃이 노출될 수 있도록 한다.
서버리스 함수로의 배포는 Serverless Framework를 사용하였다. Serverless Framework는 Aws Lambda에 배포를 보조해주는 툴로 Vercel과는 다르게 커맨드라인에서 패키징 및 배포만 실행한다.
공식 이름은
Serverless인데 검색할 때는 혼동 방지를 위해Serverless Framework로 보통 명칭한다. 이 글에서도 Framework를 붙여서 명칭한다.
Serverless Framework의 플러그인들을 통해 Express와 Webpack을 배포 과정에 연결한다.
완전 근본부터 이해하려면 Aws Lambda 배포를 툴의 도움없이 직접 해야한다고 생각할 수 있다. 다만 이는 과하게 품이 들 수 있다고 판단했다. 목표는 흐름을 이해하는 것이다.
물론 Serverless Framework도 원 클릭으로 되는 건 아니고 Aws 계정 연결 작업은 필요하다.
프론트엔드는 Vanilla JS를 사용하고 Sass로 스타일을 입힌다.
웹팩을 이용해서 브라우저에서 실행되는 파일들의 용량 최적화 및 번들링을 수행한다.
JS 파일은 서버에서 실행되는 파일과 프론트에서 사용하는 파일로 나뉜다. 서버에서 실행되는 파일은 Express 및 Serverless Framework와 관련된 파일이다.
프론트엔드에서 실행되는 파일은 실제로 컴포넌트를 렌더링하고 상태를 관리하는 코드와 CSS 파일이다. 화면에 표시된 HTML에 이벤트를 연결하는 hydrate 기능도 포함한다.
SSR이라고 해서 페이지가 이동할 때마다 무조건 새로운 HTML으로 refresh할 필요는 없다. 처음에 프론트 코드가 로딩된 이후 페이지 이동이 발생하면 서버에서 받은 HTML을 토대로 내부 HTML만 스위칭하도록 구현한다.
참조
이 프로젝트는 개발자 황준일님의 두 글을 기반으로 해서 살을 붙였다.
Vanilla Javascript로 웹 컴포넌트 만들기
미리보기
내용 없이 틀만 잡아둔 중간 결과물은 다음 링크를 통해 볼 수 있다.
위 사이트에 대한 코드는 다음 링크의 깃헙에서 볼 수 있다.
