본문으로 건너뛰기
피드

Svelte 5 드디어 출시 — 'Runes'로 리액티비티 완전히 갈아엎음

frontend 약 3분
vote
0
댓글
북마크

Svelte 5가 공식 출시되면서 기존 반응형 선언 방식을 싹 날리고 'Runes'라는 새로운 API를 도입했음. $state(), $derived(), $effect() 같은 함수 기반 문법으로 바뀌었고, 성능도 Svelte 4 대비 2배 빨라졌다고 함. Apple, Spotify 같은 대기업들도 이미 마이그레이션 시작했다니 ㄹㅇ 레전드급 업데이트.

  • 1

    Runes API로 반응형 시스템 전면 개편

  • 2

    Svelte 4 대비 렌더링 2배 성능 향상

  • 3

    Apple·Spotify 등 대기업 마이그레이션 시작

  • Svelte 5 공식 출시, 기존 $: 반응형 선언 문법 완전 제거
  • 새로운 Runes API: $state(), $derived(), $effect() 함수 기반으로 전환
  • 렌더링 성능 2배 향상 + 번들 사이즈도 대폭 감소
  • Apple, Spotify 등 대기업 이미 마이그레이션 진행 중
  • 창시자 Rich Harris "예측 가능성과 디버깅 용이성 대폭 개선" 강조

상세 내용

Runes란?

Runes(룬)는 Svelte 5에서 새롭게 도입된 반응형 프리미티브(reactive primitive)임. 기존 Svelte의 달러 사인($:) 문법을 완전히 대체하고, 더 명시적이고 조합 가능한(composable) API를 제공함.

주요 함수:

  • $state() — 반응형 상태 선언
  • $derived() — 파생 상태 (기존 $: derived = ... 대체)
  • $effect() — 사이드 이펙트 처리 (기존 $: { ... } 대체)

왜 바꿨냐?

Svelte 창시자 Rich Harris에 따르면, 기존 달러 사인 문법이 암묵적(implicit)으로 동작해서 예측하기 어렵고 디버깅도 힘들었다고 함. Runes는 함수 호출 형태라 "이게 반응형이다"라는 게 코드에서 명확하게 보임.

성능 개선

  • 렌더링 속도: Svelte 4 대비 2배 빠름
  • 번들 사이즈: 기존 대비 대폭 감소 (구체적 수치 미공개)

커뮤니티 반응

반응이 개 긍정적임. 특히 AppleSpotify 같은 대기업들이 이미 Svelte 5 마이그레이션을 시작했다는 게 확인됨. 커뮤니티에서도 "드디어 React의 hooks처럼 명시적이 됐다"는 평가가 많음.

솔직히 Svelte가 '마법 같은 컴파일러' 이미지로 진입장벽이 낮았는데, Runes 도입으로 React hooks랑 비슷한 패턴이 돼서 오히려 다른 프레임워크 개발자들한테 더 친숙해질 수도 있을 듯. 번들 사이즈 + 성능 다 잡으면 진짜 갓갓이긴 한데, 기존 Svelte 4 코드베이스 마이그레이션 비용이 관건임 ㄷㄷ

댓글

댓글

댓글을 불러오는 중...

frontend

개인 웹사이트에 JSON-LD 넣는 법, 검색엔진과 크롤러가 내 사이트를 제대로 읽게 만들기

개인 웹사이트에 JSON-LD 구조화 데이터를 추가해 검색엔진과 크롤러가 사이트, 사람, 글, 프로젝트를 더 정확히 이해하게 만드는 실전 가이드야. WebSite, Person, ProfilePage, BlogPosting 같은 노드를 어떻게 연결하고 어느 페이지에 넣어야 하는지 예시 중심으로 설명해.

frontend

Deno, 웹 프로젝트를 데스크톱 앱으로 묶는 `deno desktop` 공개

Deno가 TypeScript 파일 하나부터 Next.js 앱까지 데스크톱 앱으로 패키징하는 `deno desktop`을 공개했다. 아직 안정 릴리스는 아니고 Deno v2.9.0 canary에서만 쓸 수 있지만, 운영체제 WebView 기반의 작은 바이너리, 프레임워크 자동 감지, 내장 자동 업데이트까지 한 번에 노린다.

frontend

파비콘 안에 웹사이트를 숨겨 넣은 개발자, 진짜 됨

한 개발자가 웹사이트의 파비콘 이미지를 작은 저장소처럼 사용해 HTML을 픽셀 RGB 값 안에 넣고, 브라우저에서 다시 읽어 렌더링하는 실험을 했다. 208바이트짜리 HTML payload에 4바이트 길이 헤더를 붙여 총 212바이트를 만들었고, 이를 9x9 픽셀 PNG 안에 87% 사용률로 저장했다.

frontend

스크린이 절대 못 보여주는 색은 어디에 있을까

이 글은 우리가 화면에서 보는 색이 인간이 볼 수 있는 색 전체가 아니라, sRGB와 Display-P3 같은 색역 안에 갇힌 일부라는 점을 파고든다. 특히 숲, 바닷속, 새와 나비의 구조색, 생물발광, 교통신호 LED 같은 실제 세계에는 모니터와 카메라가 제대로 담지 못하는 청록색과 녹색 계열이 꽤 많다는 얘기다. 디스플레이, 카메라, 조명, 렌더링을 다루는 개발자라면 “색상값 하나”가 생각보다 물리와 표준의 타협이라는 걸 체감하게 된다.

frontend

크롬, 매니페스트 버전 2 우회로까지 닫는다

구글 크롬이 매니페스트 버전 2 확장 지원을 사실상 최종 종료 단계로 밀어넣고 있다. 기존에는 플래그나 레지스트리 설정으로 유블록 오리진 같은 확장을 살리는 우회가 있었지만, 크로미움 150과 151을 거치며 그 우회 코드까지 제거되는 흐름이다.