이전에 처음 figma
를 접했을 때와 같은 상황을 겪고 있다 🤧
흥미로워 보이는 것을 마주했을 때, 언젠간 공부하고 사용해보겠단 생각에
자꾸만 머리에 단어가 맴도는 현상...
이번엔 react
를 좀 더 공부해보겠다고 이것저것 리서치하다가 마주하게 된
svelte
를 파헤쳐보기로 했다. 물론 조금 가볍게, 흥미로운 선에서.
📌 svelte가 뭐야?
react
나vue
등의 언어를 보완하고자 2016년도에 출시된 자바스크립트 컴파일러
svelte
의 공식 페이지에 나와있는 특징들을 위주로 react
와 비교해서 정리해보자면,
코드를 실행하기 위해 작성해야 하는 boilerplate
가 필요없는 svelte
➔ HTML과 동일한 문법을 사용해서 작성하면 자동으로 해석한다.
boilerplate
란?
react
의 코드를 예로 들어보자면,
Hello world!
를 표시하기 위해서는 아래와 같은 양의 코드가 필요하다.export const Home = () => { return ( <div>Hello world!</div> ): }
저
<div>
가 감싼 코드를 실행하기 위해 작성되는 코드라고 생각하면 될 것 같다.
virtual DOM 없이 바로 실행 가능한 vanilla-js가 생성된다.
➔ run time
에서 코드를 해석하는 react
나 vue
와는 달리,
svelte
는 build time
에서 코드를 해석하기 때문에 같은 기능을 위한 코드를 작성하더라도 더 적은 양의 코드로 프로그램을 실행할 수 있게 된다.
➔ svelte
는 컴파일러이기 때문에!
react
의 useState
와 같은 상태관리를 위한 hook
(라이브러리)이 필요하지 않다.
➔ 그저 state
를 선언하고, js와 같은 문법으로 작성하기만 하면 svelte
가 알아서 hook
과 같은 코드로 컴파일해준다.
대략적인 큰 틀의 특징을 알아보았으니, 이제 일단 시작해보자.!
react
의 CRA
처럼 svelte
를 시작할 때에도 템플렛을 통해 시작할 수 있다.
✅
node
가 이미 설치되어있다는 가정 하에 진행합니다
terminal
을 열어서, 프로젝트를 위치시킬 파일로 이동한다.npx degit sveltejs/template {프로젝트 이름}
degit
은 git clone
과 같이 특정 저장소의 프로젝트를 로컬 경로에 다운로드 하는 것을 말한다. 다만, 버전은 제외됨!cd {프로젝트 이름}
npm install
npm run dev
5번까지의 작업이 마치면 기본적인 세팅이 완료된다!
Local 포트 주소 (http://localhost:8080
)를 쳐서 들어가면 아래와 같은 화면이 뜬다.
다음 포스팅에서는 토이프로젝트를 진행해보려 한다 :)
react
만 다뤄본 나로선, 가상dom을 사용하지 않고 실제 dom을 바로 업데이트 한다는 svelte
의 작동방법이 흥미로웠다.react
와는 달리 자동으로 내보내준다는 것. 개발하기에 큰 도움을 주는 vscode
덕분에 쉽게 import
작업을 하곤 하지만, 자동으로 처리할 수 있다는 것이 흥미로웠다.react
보다 훨씬 가벼운 용량임에도, 뷰만 담당하는 react
와 달리 시각적인 효과를 사용할 수 있도록 내장되어있다는 것react
도 속도가 빠른데, 그보다 더 빠르다고?react
보다 더 낮다는 것간단히 훑어보고 프로젝트를 만들어보려고 시작한 포스팅이었는데,
생각보다 흥미로운 부분이 꽤 많아서 하나하나 더 살펴보느라 작성이 오래걸렸다.
작성하면서도 시간상 건너 뛰어버린 내용이 많아서,
시간이 될 때 좀 더 업데이트를 해야할 것 같다 ☻
📍 흥미 유발해 주신
기억보다 기록을 - svelte
📍 그 흥미에 이해를 더해주신
스벨트 vs 리액트, 누가 더 뛰어날까?
➔ 원문 : Svelte vs React: Ending the Debate
📍 그 이해에 이해를 더해주신
왜 Svelte(스벨트)를 좋아하나요?
📍 공식페이지
svelte