SvelteJS 사용 이유?
빠르다니깐, 궁금해서~! 그런데 모르겠다. react, vue, svelte 모두 빌드한 js 소스를 서버에 올리고 다운로드 받아서 사용하는 진짜 프론트엔드 사이드 스크립트다. 중간의 내용이야 어찌저찌 해서 팩키징 결과물이 조금씩 틀려지기는 하겠지만, 그렇다고 속도 측면은 잘 모르겠다. react는 안써보고, vue랑 별반 차이가... 그냥 빠르다니깐.. 그런가? 하는데.. 알아서들 참조하시고~
아직 vite, rollup 차이를 구분 못하고, 실무에 sveltejs를 적용해 보면서, 맨땅에 헤딩하는 심정으로 진행하면서 실무에 필요한 내용 중에 빠져 있거나, 샘플에서 커스터마이징이 필요한 내용들을 정리해서 올려 보겠다.
typescript를 사용하는 이유?
정형화된 틀에 맞춰보려고 하는데, 생각보다 쉽지 않다. typescript에서 제일 중요한 것은 받거나 보낼 데이터 뭉치에 대한 선언(type)이다. 이런 데이터를 받겠으니, 이런 포맷으로 주세요~~. 그런데.. 이건 디비에 넣을때나 중요한 거지, 막상 실무에서는 any만 열심히 쓴다. 특히 프론트에서는 더더욱 그렇더라. basic, php를 먼저 다룬 개발자로서 부정형 데이터에 대한 자유도를 놓칠 수 없더라. 물론 이것도 개인차라.. 알아서들 잘~ ^^
HTML 에디터 - QUILL 샘플
참조사이트: https://svelte.dev/repl/e2bbe94abb19419892442729752ee308?version=3.19.1
Quill Demo • REPL • Svelte
svelte.dev
몇 안되는 주요 샘플코드이다. svelte 소스들이 대부분 보여주기식인 경우가 많아서, 이 소스도 안타깝게 보여주기만 한다. "에디터 이렇게 연결할 수 있다~!!" 더욱이 quill 을 잘 모른다. vue에서는 ckeditor를 주로 사용해서... 일단 있으니 감사하면서 사용했고, 에디터에 등록한 데이터를 가져오는 방법을 아래에 추가함
// quill 설치 (^1.3.7)
yarn add quill
// 에디터에서 소스 가져오기
<script lang="ts">
....
let text
let html
onMount(async () => {
const { default: Quill } = await import("quill");
let quill = new Quill(editor, {
modules: {
toolbar: toolbarOptions
},
theme: "snow",
placeholder: "Write your story..."
});
// 에디터 데이터 수집 소스
quill.on('text-change', function() {
text = quill.getContents() // 에디터에 사용된 구조 데이터
html = quill.root.innerHTML // html 결과물
})
})
....
</script>SEO를 적용할 수 있다고?
물론 아니다. 처음에는 나도 깜빡 속았다. 요새 구글 로봇이 js도 읽는다고 하지만, SSR에서 강제로 꽂아 주는 것이 속이 편하다. 단지, 백엔드 개발자인 나는 자주 SEO 태그를 멀 넣어야 하는지 고민이다. 나같은 분들에게는 좋은 샘플이 될 거 같아서 가져와 봤다.
참조 페이지 : https://svelte.dev/repl/ffd783c9b8e54d97b6b7cac6eadace42?version=3.49.0
Including SEO metadata in Svelte • REPL • Svelte
svelte.dev
위 샘플 소스에 대한 결과물이다. 잘만 정리하면 내가 원하는 데이터만 잡아서 SSR 단에서 꽂아 주면 될 거 같다.
오늘은 이 정도로 정리해 봤다.
다음은 서버 스크립트와 연동을 얘기해 볼까? 참고로 현재 sveltejs 와 연동 중인 언어는 python + flask 를 사용 중이다.
오늘도 좋은 하루 보내시길~
