VO7E
A
익명님이 2022-08-06에 작성

프론트엔드 자바스크립트 라이브러리 스벨트(svelte)와 스벨트키트(sveltekit)의 차이점

javascript,자바스크립트,스벨트,svelte,vue,react
스벨트(svelte)는 리액트나 뷰와 같은 프론트엔드 자바스크립트 라이브러리 입니다.

위의 두가지에 비해 코드 수가 적고 직관적이여서 많은 분들 께서 공부를 시작한 프레임워크 중의 하나이기도 합니다. 그런데 스벨트도 있고 스벨트키트 도 있는 것을 확인하실 수 있습니다. 이 둘은 어떤 차이이며 어떤 것을 사용해야 할까요? 정답은 페이지 렌더링이 어디에서 이루어져 있느냐 입니다. 리액트와 Next.js, 뷰와 Nuxt.js 같은 형식으로 생각하시면 되는데 일반 스벨트는 홈페이지의 접속자에게 렌더링을 맡기고 스벨트키트는 홈페이지를 제공하는 서버에서 렌더링 하여 접속자에게 보여집니다. 이는 어떤 목적의 홈페이지 인지, 백엔드와 통신하는 양이 많은지에 따라 갖추어 결정해 주시면 됩니다.

스벨트(svelte)와 스벨트키트(sveltekit)의 생성 되는 파일 비교 이미지스벨트(svelte)와 스벨트키트(sveltekit)의 생성 되는 파일 비교 이미지

이미지를 보시면 기본적으로 생성되는 파일들도 많이 다른 것을 보실 수 가 있습니다. 스벨트 키트에는 스벨트에는 포함되어있지 않은 URL 라우팅, SEO 최적화 키트 등이 포함되어 있습니다. 그렇기 때문에 좀 더 완성도 높은 홈페이지를 만들기 위해서는 키트를 사용하시는 것을 추천 드리고 특히나 만약 검색엔진에 내 웹 페이지가 잘 나오게 하고 싶으시다면 스벨트키트를 사용하는 것을 추천드립니다. 사내에서 쓰거나 서버의 가용량이 좋지 못한 경우에는 일반 스벨트가 효과적일 것으로 생각됩니다. 이 두가지 라이브러리 모두 백엔드에서 REST API로 데이터를 가져 와야 하는 것은 동일합니다. 그런데 가능하면 fetch를 사용하는 것을 추천드립니다. 주로 사용되는 axios 의 경우 특정 버전 이상에서 안 먹힌다는 문제점이 있었는데 혹시 고쳐졌을 경우 제보 부탁드립니다.

fetch 함수 자바스크립트 사용법 안내 이미지
Total 1

굿정보

댓글
Drag and drop files here or click

익명님, 안녕하세요!

로그인 하시면 작성된 글을 수정할 수 있습니다.

VO7E Recent Post

작성된 최신글을 확인하세요!

사이트 TIP

This site made with Mudblazor!

An error has occurred. This application may no longer respond until reloaded. Reload 🗙