Svelte

부트스트랩을 이용하면 손쉽게 반응형 웹페이지를 만들 수 있다. 저번 포스팅에서는 간단한 그리드형태를 만들어 봤었는데, 추가로 html element 들의 위치를 지정하는 방법을 정리해본다. 클래스이름은 position-*** 으로 시작하며, 여러가지 기능이 있지만, position-relative, position-absolute 만 주로 다룰 예정이다.

Svelte를 공부하면서, 하나씩 공부한 것들을 구현해보는 간단한 프로젝트를 하나 만들었다. 로컬PC에서만 서버를 구동해서 결과만 확인하다가, 무료 웹호스팅을 이용하여 언제든 외부에서 접근할 수 있게 하고 싶었다. Vercel 을 한번 사용해서 무료로 클라우드 서비스를 이용해보자.

Svelte 를 공부하면서 코드를 웹페이지에 넣을 일이 많아지는데, <pre> 태그만 쓰자니 아쉬워서 highlight.js 라이브러리를 사용해보기로 했다. 공식문서만 보고 그냥 html 파일에 따라하는 것은 그렇게 어렵지 않았는데, 이걸 svelte 구조에 맞춰 처리하려니 생각보다 어려웠다. 2가지 방식만 정리해본다.

<a> 태그는 앱의 경로 사이를 탐색하는 데 사용된다. 그런데 <a> 로 페이지간 이동할때, Svelte에서는 페이지 전체가 리로드(reload) 되지 않고 하나의 앱처럼 매끄럽게 동작하는게 디폴트이다. 웹 어플리케이션을 구현하는 데는 적절하나, 간혹 전체 페이지를 로딩(새로고침)해야 하는 케이스도 필요한데 그 방법을 알아보고자 한다.

반응형 웹사이트 구축하는데 Bootstrap 로 주로 공부하며 사용하고 있다. 웹페이지에 가끔 인스타그램, 트위터 같은 아이콘이 필요할 때가 있다. 이미지로 할 수도 있지만, 아이콘으로도 추가할 수 있다. Bootstrap 에서는 아이콘도 무료로 배포하여 사용할 수 있게 되어 있다.

Bootstrap 을 이용해서 웹사이트를 만드는 편인데, 거기서 제공하는 validation 기능을 사용하고 있다. 그대로 Svelte 에서 사용할 수 있으면 좋겠지만, 그게 그렇게 되질 않았다. SvelteKit 을 사용하여 각페이지들을 Route 하기위해 페이지를 컴포넌트처럼 나누어 개발하고 합치기 때문인데, 알아보는 시간은 꽤나 오래걸렸지만 그래도 비슷하게 구현을 했다.

웹페이지를 만들다보면 자주 사용하는 레이아웃 부분은 별도로 모듈화 하여 재사용하고 싶어진다. svelte 에도 독립적인 기능을 하는 컴포넌트를 쉽게 만들 수 있으며, 그 컴포넌트를 사용하여 앱의 구조를 조직화하고 코드를 재사용할 수 있게 된다. svelte document 에서 Nested Components 라는 주제로 설명되어 있으니 참고하자.

Svelte 에서 데이터를 입력하는 Form 을 하나 만들어본다. 이름과 성별정도 입력할 수 있도록 하고, 그 결과를 실시간으로 Object 로 반영하도록 bind 처리까지 간단히 해보자. 대략 아래의 레이아웃으로 만들 예정이다. 여기서 설명하는 건 Svelte 공식홈페이지 Tutorial 에도 있으니 참고한다.

Svelte 에서 MongoDB 연결하는 예시가 어디 딱 나와있지 않다. 그래서 여러 삽질을 통해 연결이 되었고 그 부분을 대략 정리해본다. 사실 javascript 에서 module 을 import 하고 export 하는 방법이 가장 난항이었다. 그 부분을 중점적으로 정리해본다.

웹사이트 개발을 위해서 Svelte 라는 프론트엔드 웹프레임워크를 배워보려 한다. React 나 Vue.js 와 같이 널리 알려진 프레임워크들은 가상 DOM 을 사용하는 반면에, Svelte는 실제 DOM을 반영하는 방식이다. 빌드시점에 Vanilla JS 로 컴파일하여 속도가 빠르고 간편하다는 장점이 있다.