
## Svelte

- 실행 시점(런타임)이 아니라 빌드 시에 앱을 바닐라 JS로 컴파일해주는 웹 컴파일러다. (리액트는 JS 라이브러리고, 스벨트는 컴파일러다. 웹 프레임워크라고도 하는데 흠 뭐지...! 글마다 말이 다르다 😂)

### 스벨트의 장점

- 효과1: 런타임이 아니라 빌드할 때 컴파일하기 때문에 앱 처음 불러올 때 지연이 적고 
- 효과2: 따로 라이브러리를 배포할 필요가 없다.
- 효과3: 가상 DOM, 진짜 DOM을 비교하는 리액트와 달리 진짜 DOM만 사용함.

## 스벨트 튜토리얼 따라해보기

[스벨트 공식문서](https://svelte.dev)에는 직접 코드를 쳐볼 수 있는 튜토리얼도 있다.

![스벨트에서 컴포넌트 추가하기](/images/blog/2201/sv1.png)

스벨트에서는 리액트처럼 컴포넌트를 import해서 보여줄 수 있다.

![html 문자열 html 안에 넣기](/images/blog/2201/sv2.png)

html 형태의 문자열을 스크립트에서 지정해 넣으면 그 html 태그가 반영된다. 

![reactive declarations](/images/blog/2201/sv3.png)

진짜 신기한 것!!! reactive declaration(반응형 선언?)이라는 건데, 이 **변수를 여러번 참조해아할 때나 이 변수가 다른 반응형 값에 의존적일 때 사용하면 좋다.**  
즉, 서로 연관된 변수에 쓰면 좋다.

## (추가적으로 찾아본) Astro : 정적 사이트 빌더

- 빌드 시에 사이트를 다 정적 HTML로 렌더링함. 최종적으로 JS는 다 지워진 정적 사이트가 됨.
- React, Vue 등에서 js를 걷어내니까 결과적으로 빨라짐.
- **신기하다.** 웹 프레임워크 만들어놓으니까 그걸 걷어내는 게 또 나왔다. ㅋㅋㅋ


SVELTE

'SVELTE'에 관한 글들을 모아봤어요.

리액트보다 훨 간결한 코드를 짤 수 있는 스벨트(Svelte)! 알아보자.