개요
이번 글에서는 프론트엔드 프레임워크인 Svelte와 함께 사용되는 메타 프레임워크인 Kit을 사용해 웹사이트를 구현한 과정을 간략히 정리한다.
기존의 개발 방식으로는 백엔드와 프론트엔드를 따로 구현하지만, 새로운 기술을 사용해본다는 계획에 알맞게 풀스택 메타 프레임워크를 사용해 동시에 구현하기로 했다.
하지만 풀스택 프레임워크를 사용한다고 해서 백엔드를 구현한 다음 프론트엔드를 구현한다는 순서 자체는 달라지지 않기 때문에 글의 순서도 이를 따른다.
Svelte 알아보기
Svelte는 React, Vue와 같은 여타 다른 프레임워크랑은 다르게 JavaScript 문법을 조금 변형한 문법을 사용하고 이를 컴파일해 JavaScript로 변환하며, 이때 프레임워크에 의존성이 있는 코드를 삽입하지 않기 때문에 런타임 오버헤드가 적다.
자체 문법을 사용하기 떄문에 State와 Props 선언이 쉬운 편인데, 일반적으로 변수를 선언하는 방식으로 만들어 사용시에는 달러 기호를 변수 이름 앞에 붙여 사용하고, 달러와 콜론 기호를 함께 사용해 변수가 변할 때의 동작을 정의할 수 있다.
또한 Svelte의 편리한 점 중 하나는 Component 단위로 Style 적용이 가능하며, 사용하지 않는 Style을 자동으로 컴파일 단계에서 제거해준다는 건데, 이를 통해 번들 크기를 줄일 수 있다.
Kit 알아보기
Kit은 서버 사이드 렌더링, 라우팅, 서버단 데이터 로딩 등을 지원하는 Svelte의 메타 프레임워크이며, React의 Next와 Vue의 Nuxt가 이에 해당한다고 볼 수 있다.
사실 다른 메타 프레임워크를 직접 써보지는 않았지만 돋보이는 장점은 없었던 것 같고, 오히려 백엔드 개발자의 입장로서는 JSON 형식을 종종 마음대로 설정하기 어렵거나 응답 코드를 설정하는데 번거로움이 있어 별도의 함수를 만들어야 하는 등의 단점이 많이 보였던 것 같다.
백엔드 구현
우선 데이터베이스 구조부터 보자면, 모의고사에 대한 정보를 저장하는 exam 테이블이 있고, 1:N 관계로 구성되어 exam_id를 외래키로 갖는 exam_asset, exam_rank 테이블이 있고, 각각의 테이블은 파일과 등급컷에 대한 정보를 저장한다.
마지막으로는 신고 정보를 저장하는 report 테이블이 있는데, 확실히 프로젝트의 규모가 작다보니 데이터베이스의 구조 또한 단순한 모습을 볼 수 있다.
API는 이들을 각각 Kit의 파일 기반 라우팅 시스템에 맞춰 사진과 같은 구조로 만들었으며, 모든 코드는 Github에 오픈 소스로 공개되어 있으므로 해당 페이지를 참고하도록 하자.
프론트엔드 구현
프론트엔드는 구현한 부분이 상당히 많은데, 그 중 가장 공들여서 구현했던 부분은 내가 ebs를 대체할 무언가를 만들기 시작한 원흉이였던 연도 선택 컴포넌트이다.
디자인을 할 떄는 생각없이 추가했던 요소였지만 실제로 구현하려고 했을 떄 문제가 이만저만이 아니였는데, 내가 간과한 사실은 HTML 5 표준에는 애초에 이중 슬라이더가 없었다는 점이였다.
그래서 결국 선택한 방식은 2개의 단일 슬라이더를 만들어 CSS를 사용해 겹친 후 JavaScript를 이용해 하나의 슬라이더가 옴직이면 다른 슬라이더의 상태에 따라 변화를 주는 것이였는데, 부모 컴포넌트에서도 조작할 수 있도록 하는 과정이 꽤나 고행이였다.
그 이후로는 나름 순탄하게 개발이 진행되었는데, 비트 연산을 통해 선택된 옵션을 판정한다던가 (효율적으로 구현하고 싶다는 마음도 있었지만 그냥 옵션 때문에 변수를 여러개 만들어야 하는 상황이 싫었다)
서버 사이드 렌더링을 동시에 적용하면서 문제가 생기기도 했지만 결국 IntersectionObserver를 사용해 무한 스크롤을 구현하기도 했다.
처음 적용해본 프레임워크 치고 각종 문서나 블로그, 유튜브 등지를 찾아보며 열심히 개발한 끝에 나름 만족할만한 성과를 냈다고 개인적으로 평가하고 싶다.
