svelte ? 일단 킵.

이전에 처음 figma를 접했을 때와 같은 상황을 겪고 있다 🤧
흥미로워 보이는 것을 마주했을 때, 언젠간 공부하고 사용해보겠단 생각에
자꾸만 머리에 단어가 맴도는 현상...

이번엔 react를 좀 더 공부해보겠다고 이것저것 리서치하다가 마주하게 된
svelte를 파헤쳐보기로 했다. 물론 조금 가볍게, 흥미로운 선에서.

svelte 🤜🤛 react

📌 svelte가 뭐야?
react나 vue 등의 언어를 보완하고자 2016년도에 출시된 자바스크립트 컴파일러

svelte의 공식 페이지에 나와있는 특징들을 위주로 react와 비교해서 정리해보자면,

Write less code

코드를 실행하기 위해 작성해야 하는 boilerplate가 필요없는 svelte
➔ HTML과 동일한 문법을 사용해서 작성하면 자동으로 해석한다.

boilerplate란?
react의 코드를 예로 들어보자면,
Hello world!를 표시하기 위해서는 아래와 같은 양의 코드가 필요하다.

export const Home = () => {
  return (
    <div>Hello world!</div>
    ):
}

저 <div>가 감싼 코드를 실행하기 위해 작성되는 코드라고 생각하면 될 것 같다.

No virtual DOM

virtual DOM 없이 바로 실행 가능한 vanilla-js가 생성된다.
➔ run time에서 코드를 해석하는 react나 vue와는 달리,
svelte는 build time에서 코드를 해석하기 때문에 같은 기능을 위한 코드를 작성하더라도 더 적은 양의 코드로 프로그램을 실행할 수 있게 된다.
➔ svelte는 컴파일러이기 때문에!

Truly reactive

react의 useState와 같은 상태관리를 위한 hook(라이브러리)이 필요하지 않다.
➔ 그저 state를 선언하고, js와 같은 문법으로 작성하기만 하면 svelte가 알아서 hook과 같은 코드로 컴파일해준다.

🧩 토이프로젝트 시작해보기

대략적인 큰 틀의 특징을 알아보았으니, 이제 일단 시작해보자.!

react의 CRA처럼 svelte를 시작할 때에도 템플렛을 통해 시작할 수 있다.

✅ node가 이미 설치되어있다는 가정 하에 진행합니다

1. terminal을 열어서, 프로젝트를 위치시킬 파일로 이동한다.
2. npx degit sveltejs/template {프로젝트 이름}
   ➔ degit은 git clone과 같이 특정 저장소의 프로젝트를 로컬 경로에 다운로드 하는 것을 말한다. 다만, 버전은 제외됨!
3. 설치가 완료되면 cd {프로젝트 이름}
4. npm install
5. npm run dev

5번까지의 작업이 마치면 기본적인 세팅이 완료된다!

Local 포트 주소 (http://localhost:8080)를 쳐서 들어가면 아래와 같은 화면이 뜬다.

다음 포스팅에서는 토이프로젝트를 진행해보려 한다 :)

svelte를 사용해보려는 이유

• react만 다뤄본 나로선, 가상dom을 사용하지 않고 실제 dom을 바로 업데이트 한다는 svelte의 작동방법이 흥미로웠다.
• 일일이 컴포넌트를 연결해주던 react와는 달리 자동으로 내보내준다는 것. 개발하기에 큰 도움을 주는 vscode 덕분에 쉽게 import 작업을 하곤 하지만, 자동으로 처리할 수 있다는 것이 흥미로웠다.
• react보다 훨씬 가벼운 용량임에도, 뷰만 담당하는 react와 달리 시각적인 효과를 사용할 수 있도록 내장되어있다는 것
• react도 속도가 빠른데, 그보다 더 빠르다고?
• 러닝커브가 react 보다 더 낮다는 것
  => 자체 템플릿으로 빠르게 습득이 가능하다는 것에, 호다닥 습득해본다.

간단히 훑어보고 프로젝트를 만들어보려고 시작한 포스팅이었는데,
생각보다 흥미로운 부분이 꽤 많아서 하나하나 더 살펴보느라 작성이 오래걸렸다.
작성하면서도 시간상 건너 뛰어버린 내용이 많아서,
시간이 될 때 좀 더 업데이트를 해야할 것 같다 ☻

📍 흥미 유발해 주신
기억보다 기록을 - svelte
📍 그 흥미에 이해를 더해주신
스벨트 vs 리액트, 누가 더 뛰어날까?
➔ 원문 : Svelte vs React: Ending the Debate

📍 그 이해에 이해를 더해주신
왜 Svelte(스벨트)를 좋아하나요?
📍 공식페이지
svelte