00:00:00여러분 안녕하세요! 또 다른 Basel 커뮤니티 세션에 오신 것을 환영합니다.
00:00:29저는 Maya Avendano이고, 이곳 Basel에서 DX 엔지니어로 일하고 있습니다.
00:00:32우리 세션에 처음 참여하셔서 채팅창이 보이지 않는 분들은
00:00:35[community.basel.com/live에](https://www.google.com/search?q=https://community.basel.com/live%EC%97%90) 있는 커뮤니티 플랫폼으로 접속해 주세요.
00:00:41그곳에서 채팅을 이용하고 질문도 하실 수 있는데, 질문은 언제나 환영입니다.
00:00:45X나 다른 플랫폼에서 시청 중이시라면 그쪽 플랫폼을 이용하셔도 좋습니다.
00:00:49오늘 세션이 정말 기대되는데요, 재미있는 사실 하나 알려드리자면
00:00:53제가 몇 년 동안 Svelte 개발자였고 Svelte로 사이드 프로젝트도 많이 만들었거든요.
00:00:58그래서 저는 광팬이고 심지어 굿즈 티셔츠도 가지고 있습니다.
00:01:01자, 동료 Svelte 팬분들과 Svelte에 관심 있는 분들을 위해
00:01:06오늘 Svelte 팀원 몇 분을 모셨습니다. 환영합니다.
00:01:12안녕하세요. 다들 자기소개 부탁드려도 될까요?
00:01:21물론이죠. 제 이름은 Rich입니다.
00:01:24Svelte를 시작한 지 10년이 되었네요. 2016년에 프로젝트를 시작했으니까요.
00:01:32처음에는 저널리스트라는 본업에서 비주얼 저널리즘을 하기 위해 시작했어요.
00:01:38뉴스를 전달하는 데 자바스크립트를 활용했죠. 그러다 4년 좀 넘기 전쯤에
00:01:44Basel로 옮기면서 본업이 되었고, 지금까지 계속해 오고 있습니다.
00:01:53네, Rich만큼 오래됐다고 말할 수 있는 사람은 아마 없을 것 같네요.
00:01:57저는 Svelte 메인테이너로 활동한 지 5년 정도 된 것 같습니다.
00:02:02제 이름은 Simon입니다. 저도 Basel에서 Svelte 팀으로 일하고 있고요.
00:02:08이전 직장에서 열린 해커톤을 통해 Svelte를 처음 접하게 됐습니다.
00:02:13당시에는 주로 Angular를 썼는데 새로운 걸 시도해보고 싶었거든요.
00:02:18해커톤에서 Svelte를 써보자마자 바로 사랑에 빠졌지만, 동시에 깨달았죠.
00:02:22“아, 이건 업무에서 당장 쓸 순 없겠구나. 그럼 어떻게 Svelte와 인연을 이어갈까?”
00:02:29좀 범생이 같지만, 그렇게 파트타임 메인테이너가 되었습니다.
00:02:34그리고 몇 년 후, Basel에 합류해 풀타임으로 일할 기회를 얻었죠.
00:02:39네, 그 이후로 아주 행복하게 일하고 있습니다.
00:02:43저는 Elliot입니다. 가끔 Rich에게 상기시켜 주곤 하는데요.
00:02:46Rich가 Svelte를 시작한 해에 저는 고등학교를 졸업했습니다.
00:02:49그래서 메인테이너로 활동한 지는 그렇게 오래되지 않았어요.
00:02:54정확히 기억은 안 나지만 2021년 말이나 2022년 초쯤이었던 것 같아요.
00:02:59SvelteKit 베타 기간에 Svelte 커뮤니티를 발견하고 합류하게 됐죠.
00:03:04그러고 나서 Rich가 입사한 지 얼마 안 되어 저도 Vercel에서 일을 시작했습니다.
00:03:09제 기억이 맞다면 같은 해 가을쯤이었을 거예요.
00:03:12당시에는 Vercel 웹사이트와 관련된 여러 가지 작업을 했었고요.
00:03:16놀랍게도 1년 몇 개월 전쯤인데, 체감상으로는 훨씬 짧게 느껴지네요.
00:03:23Svelte 팀으로 옮기게 되어 그때부터 풀타임으로 일하고 있습니다.
00:03:27최근에 했던 멋진 작업은 Svelte의 비동기 SSR 구현을 맡은 것입니다.
00:03:36이런 아주 기술적이고 멋진 소프트웨어 개발 작업들이 제가 정말 좋아하고
00:03:43늘 Svelte에 매력을 느끼게 하는 점들입니다.
00:03:48대단하네요. 세 분 모두 모시게 되어 정말 영광입니다.
00:03:51익숙하지 않은 시청자분들을 위해 Svelte와 SvelteKit에 대해 간단히 설명해 주시겠어요?
00:04:00물론이죠. Svelte는 여러 가지 정의가 가능합니다.
00:04:04커뮤니티이기도 하고 삶의 방식이기도 하지만, 선언적 컴포넌트 프레임워크이기도 하죠.
00:04:11React나 Vue 같은 것을 써보셨다면 기본적인 개념은 익숙하실 겁니다.
00:04:15document.createElement나 setAttribute 같은 것을 일일이 쓰는 대신
00:04:21선언적 컴포넌트의 관점에서 앱을 묘사하는 방식이죠.
00:04:25그러면 프레임워크가 그 선언적 의도를 파악해 화면에 실제로 구현해 줍니다.
00:04:33Svelte가 다른 프레임워크와 조금 다른 점은 '컴파일러 우선' 설계라는 점입니다.
00:04:40본질적으로 Svelte는 고성능 바닐라 자바스크립트로 변환되는 언어입니다.
00:04:48사용법은 다른 프레임워크들과 비슷하지만, 이런 설계 덕분에
00:04:53다른 프레임워크보다 조금 더 깔끔하고 간결하게 작업할 수 있습니다.
00:04:58그리고 기초 레이어인 Svelte에 더해서
00:05:02그 위에 SvelteKit이라는 프레임워크가 얹혀 있습니다.
00:05:08React 진영에 비유하자면 Next.js 같은 존재라고 할 수 있죠.
00:05:13라우팅, 서버 사이드 렌더링, 데이터 로딩, 빌드 도구 등 앱 구축에 필요한
00:05:18모든 기능을 제공하므로 개발자가 직접
00:05:24하나하나 구축하느라 고생할 필요가 없습니다.
00:05:28훌륭하네요, 감사합니다.
00:05:29보이지 않는 곳에서도 아주 바쁘게 준비하고 계신 걸로 아는데요.
00:05:32지난 몇 달 동안 어떤 작업을 하셨는지 궁금합니다.
00:05:37데모도 준비하셨다고 들었는데 맞나요?
00:05:41네, 데모를 몇 가지 준비했습니다.
00:05:43제가 먼저 시작해 볼까요?
00:05:44순서상 비동기 Svelte(Async Svelte) 개발에 대해 먼저 이야기하고
00:05:51그 위에 구축하고 있는 것들로 넘어가는 게 좋을 것 같아서요.
00:05:55좋습니다.
00:05:55정확히는 모르겠지만 지난 1년 넘게 작업을 해왔는데요.
00:06:02저희가 편의상 비동기 Svelte라고 부르는 것인데, 화면 공유를 통해
00:06:12어떤 것인지 데모를 보여드리고 활용 사례로 넘어가겠습니다.
00:06:20화면 공유 버튼이 어디 있었는지 기억을 좀 되살려야겠네요.
00:06:26권한 설정 창들을 좀 거쳐야 합니다.
00:06:28잠시만 기다려 주세요.
00:06:30전체 화면 공유 선택.
00:06:33됐습니다.
00:06:34좋아요, 화면 공유가 되고 있는 것 같네요.
00:06:35제 화면이 보이나요, 아니면 아직 대기실 상태인가요?
00:06:38네, 보입니다.
00:06:40모르는 분들을 위해 설명하자면 이곳은 Svelte.dev입니다.
00:06:43저희 공식 웹사이트죠.
00:06:44아무것도 설치하거나 터미널을 만질 필요 없이 Svelte를
00:06:49직접 체험해 볼 수 있는 플레이그라운드입니다.
00:06:51여기에 바로 코드를 작성할 수 있죠.
00:06:53이게 기본으로 제공되는 플레이그라운드 화면입니다.
00:06:55다들 잘 보이시게 글자 크기를 좀 키워볼게요.
00:06:58여기 몇 가지 상태(state)가 있습니다.
00:07:03이 특이하게 생긴 것들을 '룬(Runes)'이라고 부릅니다.
00:07:05Svelte 컴포넌트 내에서 값이 변할 것이고,
00:07:10값이 변할 때 재렌더링이 필요하다는 것을 선언하는 방식입니다.
00:07:12여기 name과 count가 있죠.
00:07:15그리고 위쪽에서 name을 표시하고 있습니다.
00:07:17그리고 그 값을 이 입력창의 내용과 바인딩하고 있죠.
00:07:21이렇게 할 수 있습니다.
00:07:24버튼을 클릭하면 숫자가 올라가죠.
00:07:27어떤 프레임워크든 어떤 식으로든 할 수 있는
00:07:29매우 기본적인 기능입니다.
00:07:35비동기 Svelte가 추가하는 것은 await 키워드를
00:07:41컴포넌트 내부에서 직접 사용할 수 있는 능력입니다.
00:07:45자, name과 관련된 것들을 지워봅시다.
00:07:49이걸 ID로 바꾸고 1부터 시작하게 만들게요.
00:07:56그리고 외부 소스에서 JSON 데이터를
00:08:01가져와 보겠습니다.
00:08:04먼저 ID로부터 파생된(derived) 무언가를 만들겠습니다.
00:08:10이 URL은 ID가 바뀔 때마다 계산될 것입니다.
00:08:16여기에 URL을 표시하면 보시는 것처럼 값이 바뀔 때
00:08:22URL도 함께 변하는 것을 알 수 있습니다.
00:08:24그다음 이 URL을 사용해 데이터를 가져오겠습니다.
00:08:28data = derived로 선언하고요.
00:08:30여기 내부에서 await fetch(URL)을 바로 쓸 수 있습니다.
00:08:36그리고 응답을 받아 JSON으로 변환해 주죠.
00:08:41개발 일을 하시는 분들이라면 이런 코드는
00:08:43수만 번은 보셨을 겁니다.
00:08:47그다음 아래쪽에 인용구(block quote) 블록을 만들어서
00:09:00가져온 데이터를 보여주도록 하죠.
00:09:03실제로 내용을 확인해 보면...
00:09:06망가졌네요.
00:09:13이런 데이터를 받게 될 텐데, 이걸 화면에 표시하고 싶습니다.
00:09:16내부에 data.quote라고 입력합니다.
00:09:21오, 뭔가 잘못됐네요.
00:09:23Simon, Elliott, 제가 뭘 잘못했는지 알겠으면 말해 주세요.
00:09:28아니네요, 그냥 지연 시간 때문이었습니다.
00:09:30알겠습니다.
00:09:31그리고 그 아래에 인용구의 저자를 추가하겠습니다.
00:09:40작업하는 동안에는 저 지연 시간을 없애는 게 좋겠네요.
00:09:44잘 모르겠네요.
00:09:46중괄호로 감싸야겠군요.
00:09:50이제 버튼을 클릭하면 기존 내용은 사라지고
00:09:55새 데이터를 가져와서 렌더링하게 됩니다.
00:09:58매우 기본적이고 사소해 보일 수도 있지만
00:10:01사실 거의 모든 다른 프레임워크에서 이 작업을 하려면
00:10:08순식간에 겁나게 복잡해집니다.
00:10:10로컬 상태(local state)를 관리해야 하고
00:10:13그다음 이펙트(effect)가 필요한데,
00:10:16타 프레임워크의 useEffect 같은 곳에서 fetch를 수행해야 하죠.
00:10:20fetch가 완료되면 그 결과를 로컬 상태에 할당해야 하고,
00:10:25에러 처리 같은 것도 다 직접 신경 써야 합니다.
00:10:27정말 꽤 복잡해지는 일이죠.
00:10:32하지만 이 방식은 그냥 알아서 잘 작동합니다.
00:10:36지연이 발생하더라도...
00:10:43계속 잘 작동하죠.
00:10:45그런데 이걸 보고 이런 생각이 들 수도 있습니다.
00:10:46버튼을 여러 번 클릭하는 경우라면
00:10:49중간 과정 생략하고 최종 결과로 바로 건너뛰고 싶겠죠.
00:10:51중간의 모든 요청을 다 처리하고 싶지는 않을 겁니다.
00:10:53그것도 가능합니다.
00:10:54여기 내부에서 도우미 함수 하나를 불러오겠습니다.
00:10:58getAbortSignal FromSelf라는 함수를 가져와서 fetch에 전달하면
00:11:11이번에는 버튼을 클릭할 때
00:11:15중간에 발생한 모든 요청을 무시하고
00:11:19곧바로 마지막 요청으로 넘어갑니다.
00:11:21이전 요청들은 너무 늦게 응답이 오기 때문이죠.
00:11:26그 시점에는 이미 ID가 다시 바뀌었으니까요.
00:11:28즉, 기존 시그널들을 취소하는 겁니다.
00:11:33자, 또 뭘 할 수 있을까요?
00:11:34이 버튼이 즉각적으로 업데이트되는 걸 보고 싶을 수도 있습니다.
00:11:38그러면 state.eager를 사용해서
00:11:43비동기 대기 상태에서 빠져나올 수 있습니다.
00:11:47이것도 꽤 유용하죠.
00:11:49스타일을 좀 추가해 볼까요?
00:11:51dataLoading = effect.pending이
00:11:580보다 큰 경우라고 정의하겠습니다.
00:11:59그래서 로딩 중인 상태라면
00:12:04데이터를 불러오는 동안 페이드 아웃 효과를 줄 수 있습니다.
00:12:11다시 말씀드리지만, 이 모든 것들을
00:12:13직접 조정하려고 시도했다면
00:12:15지독하게 어려웠을 겁니다.
00:12:17여기서 더 나아가 볼까요?
00:12:19인용구와 함께 어울리는 사진을 추가하고 싶다고 해봅시다.
00:12:28아마 이런 식이 될 텐데요.
00:12:37값을 바꾸면 다양한
00:12:41사진들이 나올 겁니다.
00:12:42웬일인지 다 노트북 사진뿐이네요, 이유는 모르겠지만요.
00:12:46좋아요, 더 괜찮은 사진이 나왔네요.
00:12:48그런데 약간의 딜레이가 있는 게 보이실 겁니다.
00:12:50인용구 데이터를 먼저 가져오고 나서 이미지가 툭 튀어나오죠.
00:12:52이미지를 렌더링하기 시작한 후에야
00:12:57이미지를 가져오려고 다시 네트워크 요청을 하기 때문인데, 이건 별로 좋지 않죠.
00:12:58그래서 이걸 작은 preload
00:12:59도우미 함수로 바꿔보겠습니다. 유틸리티 모듈에서 가져올게요.
00:13:02그러면 이번에는 이미지와 인용구가
00:13:07동시에 나타나는 것을 볼 수 있을 겁니다.
00:13:17방금 작은 버그를 하나 발견했네요.
00:13:24나중에 수정해야겠습니다.
00:13:27하지만 어떤 개념인지는 이해하셨을 겁니다.
00:13:28연산 내부에서 await를 사용할 수 있고
00:13:30템플릿 안에서도 사용할 수 있습니다.
00:13:31그리고 이 모든 것들은 여러 컴포넌트가
00:13:34동일한 이벤트에 반응해 독립적으로 작업하더라도
00:13:36완벽하게 조화를 이루며 작동합니다.
00:13:40서버 사이드 렌더링에서도 잘 작동하죠.
00:13:44비동기 Svelte가 없었다면
00:13:47극도로 고통스러웠을
00:13:49모든 기능들을 수행합니다.
00:13:52이러한 기반 위에서 저희는
00:13:55꽤 멋진 것들을 구축할 수 있게 되었는데요, 이제
00:13:58다른 두 분께 마이크를 넘겨 이야기를 들어보겠습니다.
00:14:02네.
00:14:05제가 원격 함수(remote functions)를 빠르게 시연해 보겠는데요,
00:14:09이 기능 역시 앞서 본 기술 위에 구축될 예정입니다.
00:14:10Svelte에 비동기 기능이 생겼다는 건 정말 강력한 일입니다.
00:14:17이것 위에 구축될 예정입니다.
00:14:19이제 Svelte에 비동기 기능이 생겼으니 정말 강력해졌죠.
00:14:24하지만 그 위의 메타 프레임워크인 SvelteKit은
00:14:27말하자면 여전히 옛날 방식에 머물러 있습니다.
00:14:30별도의 파일에 존재하는 load 함수들을 사용하고 있죠.
00:14:34그래서 방금 보신 새로운 기능들을
00:14:38제대로 활용하기가 어렵습니다.
00:14:41그래서 저희가 지금 작업 중인 것이 바로 '원격 함수(remote functions)'입니다.
00:14:45이미 SvelteKit에서 사용 가능합니다.
00:14:48실험적인 단계이긴 하지만 지금 바로 써보실 수 있죠.
00:14:50시간 관계상 원격 함수를 사용하는
00:14:55가장 간단한 방법을 보여드리겠습니다.
00:14:59제가 하려는 것은
00:15:01매우 간단한 카운터를 만드는 겁니다.
00:15:04버튼을 클릭할 때마다 숫자가 올라가지만,
00:15:08그 값은 서버에 저장되도록 할 겁니다.
00:15:10이 기능을 counter.remote.ts 파일에 구현해 보겠습니다.
00:15:16먼저 count 변수부터 시작하겠습니다.
00:15:18그리고 get count 함수를 만들 건데요.
00:15:20여기서 $app/server의 쿼리를 사용합니다.
00:15:26이것이 바로 원격 쿼리입니다.
00:15:29여기서 그냥 count를 반환하도록 하죠.
00:15:31그리고 반대편에서 이 기능을
00:15:37불러온 파일로부터 await get count로 사용할 수 있습니다.
00:15:44이 import는 TypeScript에서 일반적인 방식처럼 보입니다.
00:15:48단순히 함수를 하나 가져와서,
00:15:52그것을 호출하면 프로미스를 반환하는 구조죠.
00:15:54그래서 await을 사용해 기다립니다.
00:15:56하지만 실제로 이것은 클라이언트와 서버의 경계를 넘나듭니다.
00:16:01이 get count 함수는 실제로는 서버에 존재하니까요.
00:16:05실제 동작 방식은 클라이언트가
00:16:08숨겨진 엔드포인트로 요청을 보내고
00:16:14거기서 데이터를 받아오는 방식입니다.
00:16:17물론 서버 사이드 렌더링(SSR)도 지원합니다.
00:16:19첫 로딩 때는 백엔드에 따로 요청하지 않고
00:16:23서버에서 직접 처리합니다.
00:16:25이제 count 값은 가져왔지만, 아직 아무것도
00:16:29할 수 있는 게 없습니다.
00:16:29값을 증가시키고 싶으니까요.
00:16:31이것이 원격 함수의 또 다른 용도가 될 겁니다.
00:16:34빨리 구현해 보죠. 코파일럿은 안 쓰겠습니다.
00:16:38명령어가 틀렸네요.
00:16:40$app/server의 command를 사용해야 합니다.
00:16:45여기서 서버 상태를 업데이트해 주겠습니다.
00:16:49하지만 그 자체만으로는 충분하지 않은데,
00:16:52이것이 '커맨드(command)'이기 때문에
00:16:55업데이트 정보도 함께 보내라고 알려줘야 합니다.
00:16:58그래서 우리의 원격 함수인 get count를 여기서 호출하고
00:17:03그 위에 refresh를 실행합니다.
00:17:05이렇게 함으로써 기본적으로 시스템에
00:17:08단일 요청 뮤테이션(single-flight mutation)을 지시하는 겁니다.
00:17:10호출되면 카운트를 1 증가시키고,
00:17:14그 정보를 클라이언트에 다시 보내서
00:17:19이 페이지에서 get count가 사용될 때마다
00:17:22값이 1 증가했음을,
00:17:24즉 새로운 상태가 있음을 알려주는 것이죠.
00:17:27이제 이 코드를 추가해 보겠습니다.
00:17:29on click 이벤트에 카운트를 증가시키도록 할게요.
00:17:37제가 할 작업은 이게 전부입니다.
00:17:38일반적인 함수 호출처럼 보이죠.
00:17:40하지만 다시 말씀드리면, 이건 실제로 서버를 호출하는 겁니다.
00:17:43이제 클릭하면 숫자가 올라갑니다.
00:17:49지금 보신 건 원격 함수에 대한
00:17:53정말 아주 간략한 미리보기였습니다.
00:17:55이걸로 훨씬 더 많은 것들을 만들 수 있죠.
00:17:58또한 AI와도 아주 멋지게 연동됩니다.
00:18:01예를 들어 세션 시작 5분 전에
00:18:06코드 코파일럿에게 이렇게 물어봤습니다.
00:18:12"포탈(Portal) 게임 테마의 기본 블록을 만들고
00:18:18거기서 원격 함수 몇 가지를 보여주고 싶어."
00:18:20"Svelte 5와 Svelte MCP를 사용해줘."
00:18:25엘리엇이 곧 이에 대해 자세히 설명할 겁니다.
00:18:29"그것들과 원격 함수, 비동기 기능을 사용해줘."
00:18:32그랬더니 거의 한 번에 만들어내더군요.
00:18:34이건 미리 렌더링된 겁니다.
00:18:35블록이 프리렌더링되어 있죠.
00:18:37이제 여기에 텍스트를 입력하면
00:18:42이 근처에 저장되고,
00:18:43그게 업데이트됩니다.
00:18:49내부적으로는 방금 보신 것과 같은 원리로 작동합니다.
00:18:53코드를 빠르게 훑어보면,
00:18:56await get posts를 사용하고 있습니다.
00:18:59get posts는 프리렌더 함수인데,
00:19:01이는 런타임이 아니라
00:19:05빌드 시점에 실행된다는 뜻입니다.
00:19:06아래쪽에는 댓글 섹션이 있는데,
00:19:12댓글을 불러오고 폼을 사용해서
00:19:15새 댓글을 게시하는 등의 작업을 수행하죠.
00:19:19이 모든 게 load 함수 없이 원격 함수만 사용한 겁니다.
00:19:23어디에도 load 함수는 없죠.
00:19:24AI가 이걸 한 번에 해냈습니다.
00:19:27엘리엇이 이제 이에 대해
00:19:32좀 더 자세히 이야기해 줄 것 같네요.
00:19:34네, 좋습니다.
00:19:37리치 해리스가 처음에 했던 것처럼
00:19:41화면 공유 설정을 좀 해야겠네요.
00:19:46좋아요, 됐습니다.
00:19:52잠시 시간을 내어 최근 저희가 진행해 온
00:19:57AI 개발에 대해 말씀드리겠습니다.
00:19:59여기서 '저희'라고 한 건 제가 했다는 뜻이 아님을 분명히 밝힙니다.
00:20:02파올로라는 친구와 Svelte의
00:20:06다른 기여자분들을 의미합니다.
00:20:09사실 최근에 이루어진 대부분의 AI 관련 성과는
00:20:13그분들의 노력 덕분입니다.
00:20:14그분들께 큰 감사를 전합니다.
00:20:15정말 훌륭한 일을 해내셨거든요.
00:20:18자, 화면을 좀 확대해 보겠습니다.
00:20:24됐네요.
00:20:27저희가 무엇을 구축했는지 설명하는 데
00:20:28오랜 시간이 걸릴 수도 있을 겁니다.
00:20:31저희에겐 MCP 서버가 있고,
00:20:32거기엔 정말 멋진 기능들이 들어있으니까요.
00:20:36저희가 공개한 '스킬(skills)'들도 있고요.
00:20:38하지만 다행히도 여러분이 그 세부 작동 원리를
00:20:41모두 다 아실 필요는 없습니다.
00:20:43저희가 Open Code와 Cloud Code
00:20:47플러그인도 함께 출시했기 때문이죠.
00:20:48이제 여기서 Open Code 플러그인을 설치할 건데,
00:20:52이 구성 설정을 복사해서
00:20:55라이브러리에 있는 Open Code.json 파일에
00:20:58그대로 붙여넣기만 하면 됩니다.
00:21:00그리고 Open Code가 이걸로 사이트를 구축하게 해보죠.
00:21:06어떻게 되는지 한번 봅시다.
00:21:10이렇게 요청해 볼게요.
00:21:11에셋 폴더에 이미지 몇 개를 넣어두었습니다.
00:21:17이것도 확대를 좀 해드려야겠네요.
00:21:28안타깝게도 이 부분은 확대가 잘 안 되는 것 같군요.
00:21:34아, 됐다.
00:21:34좋아요.
00:22:00[타이핑 중]
00:22:06어떤 결과가 나오는지 지켜보죠.
00:22:09실수 없이 잘 돼야 할 텐데요.
00:22:11맞아요, 그게 중요하죠.
00:22:12그게 아주 중요합니다.
00:22:13프롬프트 끝에 그 말을 붙이지 않으면
00:22:15결과가 그리 좋지 않거든요.
00:22:18이 작업이 진행되는 동안,
00:22:21그동안 진행해 온 작업들을 좀 더 설명해 드릴게요.
00:22:25Svelte 사이트에 들어오셔서
00:22:28AI 문서를 보시면 전체적인 개요를 확인하실 수 있습니다.
00:22:32저희는 전용 CLI 도구가 포함된 MCP를 출시했습니다.
00:22:36그리고 거기에는 몇 가지...
00:22:40오, 5분 사이에 이걸 고쳐놨네요.
00:22:435분 전이랑 모습이 좀 달라졌어요.
00:22:46아무튼 사용자 PC에서 활성화되는 여러 도구가 있습니다.
00:22:51대부분의 도구는,
00:22:53특히 처음 두 개는 Svelte에 대한
00:22:58양질의 정보를 얻는 것과 관련이 있습니다.
00:22:58AI 에이전트에게 문서를 읽는 법을 가르치는 거죠.
00:23:03특히 에이전트가 필요한 특정 정보를
00:23:05정확히 찾아낼 수 있도록 가르칩니다.
00:23:08문서 전체를 한꺼번에 쏟아붓거나
00:23:11불필요하게 문서를 탐색하며 시간과
00:23:12컨텍스트를 낭비하지 않도록 말이죠.
00:23:15또한 정말 멋진 'Svelte 자동 수정기(autofixer)'도
00:23:17개발했는데, LLM이 자주 사용하는
00:23:21좋지 않은 패턴을 감지해서 수정해 줍니다.
00:23:26그리고 저희 플레이그라운드와 연동되는 기능도 있어서
00:23:33여기서 바로 사용해 보실 수 있습니다.
00:23:37또 하나 멋진 점은,
00:23:39이 모든 AI 관련 작업을 할 때
00:23:44가장 중요하게 생각하는 설계 원칙 중 하나가
00:23:46에이전트뿐만 아니라 사람에게도 유용하게 만드는 것이라는 점입니다.
00:23:52저희는 이게 에이전트만 마법처럼
00:23:55뭔가를 알고 있는 불투명한 기술이 되길 원치 않습니다.
00:23:59정작 여러분은 모르고,
00:24:00알아내기도 힘들면 안 되니까요.
00:24:01그래서 기본적으로 저희가 하는 모든 작업은
00:24:04공식 문서에도 통합하려고 노력합니다.
00:24:07저희가 공개한 '스킬'들도 마찬가지인데,
00:24:09Open Code나 Cloud Code 플러그인을
00:24:12설치하면 포함되는 이 스킬들은
00:24:15모든 내용을 문서에도 게시합니다.
00:24:18따라서 저희가 LLM에게
00:24:20어떤 모범 사례를 알려주고 있는지 궁금하다면
00:24:25언제든지 직접 읽어보실 수 있습니다.
00:24:27항상 저희 사이트에서 이렇게 확인 가능하죠.
00:24:31그럼 돌아가서 AI가 얼마나
00:24:34결과물을 만들어냈는지 확인해 볼까요?
00:24:35아직은 별로 없네요.
00:24:39아니, 사실 꽤 많이 한 것 같기도 합니다.
00:24:45네, 스타일링 작업이 한창 진행 중이군요.
00:24:56로컬 호스트를 띄워서
00:25:00무슨 결과가 나왔는지 보겠습니다.
00:25:03아무것도 없네요.
00:25:07좋아요, 이게 처리되는 과정을 보느라
00:25:10시간을 너무 지체하고 싶지는 않습니다.
00:25:12시간이 좀 걸릴 수도 있거든요.
00:25:13마지막에 시간이 남으면 다시 돌아와서
00:25:15저희의 '수제 감자 대포' 사업을 위해
00:25:19LLM이 어떤 결과물을 냈는지 확인해 봅시다.
00:25:20아무튼 이게 지난 몇 달간
00:25:25저희가 진행해 온 AI 개발 성과입니다.
00:25:26환상적이네요.
00:25:32네, 새로운 시대에 정말 적절한 기술이네요.
00:25:37다음 계획은 무엇인지 정말 궁금합니다.
00:25:40앞으로 어떤 것을 기대하고 계신가요?
00:25:46다음 릴리스는 SvelteKit 3가 될 예정입니다.
00:25:51현재 활발히 작업 중입니다.
00:25:53하지만 새로운 기능이 엄청나게 많은 대규모 업데이트는 아닐 겁니다.
00:25:56새로운 기능들로 가득 찬
00:25:57거창한 것은 아닙니다. 기본적으로
00:25:59오래된 것들을 정리하고 판을 새로 짜서
00:26:02흥미로운 새 기능들을 구현하기 위한 준비 과정이죠.
00:26:06가장 큰 변화는 바로 2시간 전에 출시된
00:26:09Vite 6의 환경 API를 사용한다는 점입니다.
00:26:15그리고 최신 버전인 Svelte 5가 꼭 필요하게 될 겁니다.
00:26:21물론 원하신다면 Svelte 4를 계속 쓰실 수도 있고요.
00:26:25그 이후에는 비동기 Svelte와
00:26:29원격 함수(Remote Function)를 안정화하는 데 집중할 계획입니다.
00:26:33좋네요.
00:26:37풍문에 듣기로는 이제
00:26:41엘리엇에게 마이크를 넘겨야 할 것 같은데요,
00:26:44LLM이 결과물을 다 구워냈다고 하니까요.
00:26:46준비된 걸 보여주시겠어요?
00:26:47늘 그렇듯, 다음 순서로 넘어가자마자
00:26:49딱 1밀리초 차이로 작업이 끝났네요.
00:26:55자, 여기를 보시죠.
00:26:59네, 방금 약 1달러어치의 토큰을 써서 만든
00:27:03수제 감자 대포 상점 페이지입니다.
00:27:07코드를 훑어보니 실제로
00:27:13이상한 짓을 전혀 하지 않고
00:27:17Svelte의 권장 모범 사례(Best Practices)를 잘 따랐더라고요.
00:27:22직접 한번 써보세요.
00:27:25어떤지 의견 주시면 감사하겠습니다.
00:27:27파올로와 다른 팀원들이 작업한
00:27:29이 모든 AI 기능들에 정말 감명받았습니다.
00:27:33계속해서 개선해 나가고 싶으니
00:27:35피드백이 생기면 언제든 알려주세요.
00:27:38감사합니다.
00:27:40멋지네요, 오늘 데모의 신이 우리 편인가 봐요.
00:27:45그럼 이제 질문을 좀 받아볼까요?
00:27:47채팅창에 이미 질문이 좀 올라와 있네요.
00:27:51제가 먼저 시작해 보겠습니다.
00:27:53원격 함수에 대한 질문이 있네요.
00:27:57"원격 함수에 스트리밍 기능이 추가될까요?"
00:28:00원격 함수의 개발자 경험(DX)이 너무 좋아서
00:28:03어디서든 쓰고 싶다고 하십니다.
00:28:05리처드가 담당하시는 분야니까
00:28:06답변해 주실 수 있을 것 같아요.
00:28:10네, 그 질문을 하시니 참 재밌네요.
00:28:12마침 제가 지금 만들고 있는 앱에
00:28:15딱 이 기능이 필요하거든요.
00:28:17사이먼이 얼마 전에 PR(풀 리퀘스트)을 올려서
00:28:22일부 기능을 구현해 두긴 했습니다.
00:28:23그 이후로 설계에 대한
00:28:28저희의 생각이 조금 더 발전했어요.
00:28:31하지만 정말 빨리 다시 착수하고 싶은 작업입니다.
00:28:35아마 일주일만 늦게 이 행사를 했더라도
00:28:40"여기 PR이 있습니다"라고 보여드릴 수 있었을 텐데
00:28:43아직 그 정도 단계는 아닙니다.
00:28:44하지만 분명히 말씀드리는데, 우선순위가 매우 높습니다.
00:28:47저희도 이 기능에 대해 기대가 큽니다.
00:28:49잘 모르시는 분들을 위해 설명하자면,
00:28:51기본적으로 쿼리 함수의 실시간 버전이라고 보시면 됩니다.
00:28:55서버에 데이터를 요청하면
00:28:59비동기 이터러블(Async Iterable)을 반환하고,
00:29:04새로운 데이터가 생길 때마다
00:29:09그 데이터를 클라이언트로 즉시 전달해 줍니다.
00:29:12폴링 같은 방식 없이 실시간 데이터를 얻을 수 있죠.
00:29:15게다가 페이지에서 더 이상 해당 데이터를
00:29:16표시하지 않게 되는 즉시
00:29:21요청이 중단되고 비동기 이터러블이 스스로 정리됩니다.
00:29:23실시간 데이터 문제를 해결하는
00:29:26정말 깔끔한 방식이죠.
00:29:28네, 정말 기대됩니다.
00:29:31한 가지 확실히 짚고 넘어갈 게 있는데,
00:29:33리처드가 "곧 하겠다"고 말한 의미는
00:29:35엘리엇이 제 작업을 막고 있다는 뜻입니다.
00:29:38엘리엇이 작업을 끝내길 기다리고 있거든요.
00:29:40지금 하는 일만 마무리되면
00:29:41바로 착수할 겁니다.
00:29:43좋네요.
00:29:45다음 질문입니다.
00:29:46"다른 프레임워크 대신 왜 Svelte를 선택해야 하나요?"
00:29:50당연히 저희는 Svelte가 가장 훌륭하고 유능하다고 생각합니다만,
00:29:52요즘 같은 시대에 특정 프레임워크를 선택하는 진짜 이유는
00:29:55솔직히 다른 것보다 그게 더 즐겁기 때문일 겁니다.
00:30:07기술적인 것보다 개인의 취향에 더 좌우되는 문제죠.
00:30:11특히 요즘은 프레임워크 간 전환이 정말 쉽습니다.
00:30:13곁에 마법사 같은 AI가 있어서,
00:30:18"Vue에서는 이렇게 했는데
00:30:20Angular나 다른 데서는 어떻게 하나요?"라고 물으면
00:30:22바로 알려주니까요.
00:30:24이제 학습 곡선이라는 게
00:30:28거의 의미가 없어졌습니다.
00:30:32그러니 본인이 가장 생산적이고
00:30:35사용하면서 가장 행복한 도구를 쓰시면 됩니다.
00:30:37그 배경에는 프로젝트를 둘러싼 커뮤니티나
00:30:38프로젝트의 전반적인 철학도 포함되겠죠.
00:30:43하지만 제가 생각하기에 지금은
00:30:45"이 프레임워크만 이 기능을 할 수 있으니까"라는
00:30:49이유로 선택할 필요는 없습니다.
00:30:53결국 다 똑같은 일을 해낼 수 있거든요.
00:30:57생태계 규모도 더 이상 큰 고민거리가 아니고요.
00:31:02하지만 오늘날 굳이 하실 필요가 없다고 생각하는 일은
00:31:05어떤 프레임워크가 특정 기능을 수행할 수 있는지에 따라 결정을 내리는 것입니다.
00:31:11모든 프레임워크가 동일한 작업을 수행할 수 있기 때문입니다.
00:31:13아니면 어떤 프레임워크가 가장 큰 생태계를 가지고 있는지 따지는 것도요.
00:31:16그건 이제 더 이상 고려할 사항이 아니니까요.
00:31:18그러니 그냥 가장 재미있게 느껴지는 프레임워크를 선택하세요.
00:31:21그리고 저희는 그것이 당연히 Svelte라고 생각합니다.
00:31:26훌륭한 답변이네요.
00:31:27정말 좋습니다.
00:31:29다음으로 캐시와 관련된 새로운 소식이 있는지 묻는 분이 계시네요.
00:31:35네, 아마 원격 함수(remote functions)에 관한 질문인 것 같은데요.
00:31:38원격 함수의 맥락에서 말씀드리자면,
00:31:41저희는 아직 캐시 API를 가지고 있지 않습니다.
00:31:45내부 제안서가 하나 있기는 합니다.
00:31:48현재 진행 중인 작업이고요.
00:31:51진행 중인 다른 수많은 작업들 때문에 잠시 우선순위에서 밀려나 있었지만,
00:31:55곧 다시 착수할 예정입니다.
00:31:58그러면 원격 함수와 통합되는
00:32:01정말 멋진 캐싱 API를 갖게 될 것입니다.
00:32:05놀랍군요.
00:32:06가벼운 질문 하나 드릴게요.
00:32:08당신이 꿈꾸는 Svelte Summit 개최지는 어디인가요?
00:32:10오글거리는 말 같지만, 그들과 함께라면 어디든 좋습니다.
00:32:13하지만 유럽은 정말 멋지죠.
00:32:16아직 안 가본 유럽의 도시라면
00:32:22어디든 가보고 싶네요.
00:32:24해외로 나갈 구실이 생긴다면 늘 행복합니다.
00:32:28Svelte 세상에는 모든 것에
00:32:34'SV' 접두사를 붙이는 경향이 있죠.
00:32:36라이브러리를 만들거나 개념을 정립할 때
00:32:38단어 앞에 그냥 'SV'를 붙이곤 하는데요.
00:32:43그 철학을 제대로 밀고 나간다면,
00:32:46컨퍼런스를 '스발바르(Svalbard)'에서 열어야겠네요.
00:32:48좋네요.
00:32:51거기는 노르웨이의 제도(archipelago)죠.
00:32:56방금 즉석에서 구글링하신 건가요?
00:33:01사실 요전 날 대화 중에 나왔던 얘기예요.
00:33:04어쩌다 보니 말이죠.
00:33:06네.
00:33:08제대로 꿈을 꿔보자면, 제 꿈의 장소는
00:33:11사실 배 위입니다.
00:33:12그냥 바다 위요.
00:33:15날씨도 좋고,
00:33:20배 위에서 3일 정도 보내는 거죠. 정말 멋질 것 같아요.
00:33:23다들 근사한 아이디어네요.
00:33:27다음 Svelte Summit이 언제 어디서 열리든 정말 기대됩니다.
00:33:31커뮤니티와 이벤트 이야기가 나와서 말인데,
00:33:35"어떻게 Svelte에 참여할 수 있나요? 이벤트나
00:33:38커뮤니티 참여 기회가 있을까요?"라는 질문이 왔습니다.
00:33:41이벤트는 항상 열리고 있습니다.
00:33:45sveltesociety.dev 사이트에 가시면
00:33:47이벤트 일정을 확인하실 수 있어요.
00:33:49참여 방법에 대한 리소스도 아주 많습니다.
00:33:52특히 거주하시는 지역에 모임이 없다면
00:33:55Svelte Society의 지부를 직접 만드는 것도 가능하니,
00:33:57sveltesociety.dev에서 관련 정보를 찾아보세요.
00:34:00네, 그리고 입문자라면 디스코드에 들어오셔서
00:34:03여러 채널 중 한 곳에 가볍게 인사해 보세요.
00:34:05각 지부별 채널이나
00:34:07언어별 채널도 따로 마련되어 있습니다.
00:34:11대부분 해당 언어로 소통하는
00:34:13다른 디스코드 채널로 연결되어 있죠.
00:34:15예를 들어 독일 Svelte Society 디스코드
00:34:16채널 같은 곳들 말이죠.
00:34:19일단 디스코드 채널에 들어오시면,
00:34:22거기서부터 시작하시면 됩니다.
00:34:25그 밖에도 Svelte 관련 채널들은
00:34:28항상 즐거운 분위기입니다.
00:34:33맞아요, Svelte 사람들은 다들 정말 친절합니다.
00:34:36꼭 한번 들러보세요.
00:34:41AI에 관한 질문이 또 하나 들어왔네요.
00:34:47엘리엇, 이 부분은 아까 말씀하셨던 거죠.
00:34:49"프레임워크가 에이전트와 AI 세상에 적응하는 모습이 보기 좋습니다.
00:34:55AI 에이전트들이 기본으로 Svelte를 선택하는 비율에 대한 통계가 있나요?"
00:34:57아니요, 딱히 없습니다.
00:35:00어떤 신호 정도는
00:35:01v0 같은 서비스를 통해
00:35:06데이터를 얻을 수 있을지도 모르겠네요.
00:35:08하지만 Svelte는 일반적으로...
00:35:12Svelte 팀원들이라고 해야겠네요. 저희 팀은
00:35:16데이터 수집이나 추적에 대해서는
00:35:18꽤 부정적인 입장을 취해왔습니다.
00:35:22그래서 저희가 가진 데이터는 거의 대부분
00:35:24공개된 자료들뿐입니다.
00:35:26NPM 다운로드 트렌드 정도를 볼 수 있는데,
00:35:29요즘 왠지 모르게 비정상적으로 치솟고 있더라고요.
00:35:31그러니 그 수치를 전적으로 믿지는 마세요.
00:35:36네, 걱정하지 마시고요.
00:35:37저희는 프라이버시를 매우 중요하게 생각해서
00:35:44사용자 데이터를 전혀 수집하지 않습니다.
00:35:46여러분의 컴퓨터를 감시하고 싶지 않으니까요.
00:35:49그래서 저희가 얻는 데이터는 누구나 볼 수 있는 자료나,
00:35:53Vercel 채널을 통해 얻는 유용한 정보 정도입니다.
00:35:57경험상 LLM에 어떤 도구가 가장 좋은지 물어보면
00:36:01Svelte가 자주 언급되긴 하더라고요.
00:36:06그건 참 다행입니다.
00:36:08하지만 명시적으로 요청하지 않았을 때도
00:36:10Svelte를 선택해 주느냐는 또 다른 문제죠.
00:36:14네, 아주 흥미로운 지점입니다.
00:36:18이상적인 도구가 무엇인지 생각해보라고 유도하면,
00:36:20자주 Svelte라고 대답하곤 합니다.
00:36:22하지만 "이 프레임워크를 써달라"고 미리 말하지 않으면,
00:36:25다른 결과가 나올 수도 있겠죠.
00:36:27그렇죠.
00:36:30AI의 선택도 결국 데이터에 달려 있으니까요.
00:36:35그리고 아마도 Vercel 채널을 통해 얻는 유용한 정보 정도겠죠.
00:36:43개인적인 경험으로는, LLM에게 무엇을 선택해야 할지,
00:36:46어떤 게 가장 좋은지 물어보면 Svelte가 자주 언급됩니다.
00:36:51적어도 그건 기분 좋은 일이죠.
00:36:53하지만 그것이 실제로 Svelte를 선택하는 것으로 이어질지,
00:36:56프롬프트에 명시하지 않았을 때도 그럴지는 별개의 문제입니다.
00:37:01네, 매우 흥미로운 부분이죠.
00:37:03이상적인 도구가 무엇인지 생각해보라고 프롬프트를 주면,
00:37:06그들은 종종 Svelte라고 답할 겁니다.
00:37:08하지만 “이 프레임워크를 써라”라거나
00:37:11“가장 좋은 프레임워크를 써라”라고 말하지 않고
00:37:12그저 “앱을 만들어줘”라고 하면, 보통 기본값으로 React를 사용합니다.
00:37:17그리고 우리가 그 상황을 바꿀 수 있는 방법은 많지 않아요.
00:37:21그래서 우리는 Svelte를 선택한
00:37:23팀들이 최고의 경험을 할 수 있도록
00:37:27만드는 데 집중하고 있습니다.
00:37:29또한 AI 에이전트들이 문서를 잘 탐색하고
00:37:31실수를 파악할 수 있는 최상의 능력을 갖추도록 말이죠.
00:37:36네, 포탈 테마의 블로그나 Potato Cannon
00:37:42웹사이트에서 보셨듯이, AI 에이전트들은
00:37:46컨텍스트와 MCP 등을 다루는 데 꽤 능숙해지고 있습니다.
00:37:50이제는 그것들을 활용해 아주 빠르게 성과를 낼 수 있죠.
00:37:56좋네요.
00:37:57네, 여러분이 진행 중인 모든 작업과
00:37:58인간과 에이전트라는 두 사용자 층을 모두
00:38:01배려하는 모습이 정말 보기 좋습니다.
00:38:04Svelte 기능에 대한 좀 더 구체적인
00:38:06질문들이 몇 가지 더 들어와 있습니다.
00:38:08하나는, 마크업 내에서 동일한 원격 함수를
00:38:11여러 번 호출해도 괜찮은지,
00:38:14아니면 스크립트 태그에 참조를 하나만 두어야 하는지입니다.
00:38:17네, 괜찮습니다.
00:38:20이 부분은 현재 작업 중이시니 직접 말씀해 주시죠.
00:38:24현재 Rich가 라이브 쿼리 작업을 하지 못하게 막고 있는 요인이
00:38:26사실 이 질문과 관련이 있습니다.
00:38:29네, 동일한 원격 함수를 여러 번 호출하고
00:38:35서로 다른 위치에서 여러 번
00:38:39참조하는 것은 전적으로 괜찮습니다.
00:38:41원격 함수를 사용할 때,
00:38:44쿼리에 대한 멘탈 모델은
00:38:46인수와 함께 쿼리를 호출할 때,
00:38:50그 쿼리에 대한 참조를 얻는 것이라고
00:38:54생각해야 하며, 쿼리는 데이터 자체와는 다릅니다.
00:38:57만약 앱의 어디에서든 ID가 1인 getUser를 호출하면,
00:39:04실제로는 어디서나 해당 쿼리의
00:39:07동일한 인스턴스를 가져오게 됩니다.
00:39:08즉, 앱 전체에서 쿼리 호출이 중복 제거되므로,
00:39:11동일한 인수 집합에 대해 최대 한 번의 호출만 발생합니다.
00:39:16인수가 다르면 다른 결과가 생성되지만,
00:39:19인수가 같으면 동일한 쿼리가 생성됩니다.
00:39:21앱 전체에서 중복이 제거되는 방식이죠.
00:39:24현재 몇 가지 미묘한 주의 사항이 있긴 한데,
00:39:28지난 몇 주 동안 제가 작업해 온 것이
00:39:33그런 부분들을 수정하고 체계화하여
00:39:37좀 더 명확하게 만드는 것이었습니다.
00:39:39조만간 결과물이 나올 수 있기를 바랍니다.
00:39:41아무튼, 아주 짧게 답하자면 “네”입니다.
00:39:44그냥 호출해서 원하는 곳 어디든 사용하세요.
00:39:47네, 덧붙이자면,
00:39:48우리가 await 키워드 등을 활용해
00:39:51이 모든 작업을 하는 근본적인 이유는
00:39:54가능한 한 컴포넌트에 필요한 모든 것을
00:39:57해당 컴포넌트 내부에서
00:39:59표현할 수 있기를 원하기 때문입니다.
00:40:00따라서 위쪽에서 데이터를 가져온 다음
00:40:04그것이 필요한 모든 곳에 조심스럽게 전달하던
00:40:08그런 시대는 끝날 것입니다.
00:40:10하지만 그 과정에서 쿼리 참조를 유지하고
00:40:14그것을 여기저기 전달해야 한다면,
00:40:15우리의 목표를 달성했다고 보기 어렵죠.
00:40:17그래서 아이디어는, 이 컴포넌트도 데이터가 필요하고
00:40:20저 컴포넌트도 우연히 동일한 데이터가 필요할 때,
00:40:22두 컴포넌트가 서로 통신할 필요가 없다는 것입니다.
00:40:24그저 시스템에 쿼리 인터페이스를 통해
00:40:28데이터를 요청하기만 하면 됩니다.
00:40:29그러면 시스템이 알아서 단 한 번의 요청만
00:40:32발생하도록 처리하고,
00:40:34두 컴포넌트 사이에 데이터 불일치가
00:40:36생기지 않도록 보장해 줍니다.
00:40:40멋지네요, 감사합니다.
00:40:42다음은 애니메이션과 트랜지션 API에 관한 질문입니다.
00:40:47그 부분에 대한 대대적인 개편 계획이 있나요?
00:40:49질문자는 attachment를 통해 크기를 flip하는
00:40:54과정이 꽤 까다롭다고 하셨네요.
00:40:57이 작업을 하고 싶어서 정말 몸이 근질근질하네요.
00:41:02오랫동안 기대해 왔던 일이에요.
00:41:04할 일이 정말 많거든요.
00:41:06기본적으로 다른 일들이 계속 발목을 잡고 있네요.
00:41:09본질적으로 우리가 attachments API를 설계했을 때,
00:41:12바로 이런 점을 염두에 두었습니다.
00:41:16트랜지션과 애니메이션은 훌륭하죠.
00:41:19그리고 프레임워크에 통합되어 있어
00:41:21특정 작업들을 아주 쉽게 할 수 있게 해줍니다.
00:41:25하지만 임계값을 넘어서는 순간,
00:41:28기존 방식으로는 더 이상 도움을 줄 수 없습니다.
00:41:29더 많은 프로그래밍 방식의 제어가 필요해지죠.
00:41:33그럴 때 트랜지션과 애니메이션을 정의하기 위한
00:41:36프로그래밍 API가 유용할 것입니다.
00:41:42그리고 attachments API는—
00:41:46미래의 구상은, attachments API가
00:41:49특정 API와 결합하여 다음과 같이 말하는 것입니다.
00:41:52“이봐, 내가 DOM에서 제거될 때,
00:41:54페이드 아웃이나 살짝 흔들리는 효과를 줄 때까지
00:41:58잠시만 기다려줘.”
00:42:00“그러고 나서 나를 DOM에서 없애줘.”
00:42:02이것이 바로 더 발전된 트랜지션 및 애니메이션
00:42:06시나리오를 가능하게 해줄 것입니다.
00:42:09하지만 아직 그 단계까지는 가지 못했습니다.
00:42:11계획은 되어 있습니다.
00:42:12분명히 일어날 일입니다.
00:42:13다만 정확한 타임프레임은 말씀드리기 어렵네요.
00:42:16확실한 건 향후 2, 3개월 내에는 어렵다는 점입니다.
00:42:22좋습니다.
00:42:22적어도 고려 대상에는 있군요.
00:42:24반가운 소식입니다.
00:42:25좋아요.
00:42:25질문 하나 정도 더 받을 시간이 있을 것 같네요.
00:42:27마지막 질문입니다.
00:42:29Svelte는 도구에 구애받지 않지만, 팀원들이
00:42:32가장 좋아하는 데이터베이스는 무엇인가요?
00:42:34돌아가면서 답변해 보죠.
00:42:37SQLite요.
00:42:37예전에 간단한 실험을 위해 Neon을
00:42:47사용해 본 적이 있는데 정말 좋았습니다.
00:42:50네, SQLite 좋죠.
00:42:53제가 정말 기다리고 있는 것은
00:42:59이런 동기화 엔진들이 정말 좋아지고 널리 보급되어서
00:43:02로컬 우선(local-first) 작업이 가능해지는 것입니다.
00:43:05그렇게 되면, 솔직히 백엔드에서
00:43:09어떤 데이터베이스를 쓰든 상관없다는 게 제 생각입니다.
00:43:13네, 제 생각엔—
00:43:15딱히 하나를 최애로 꼽기는 어려울 것 같아요. 왜냐하면—
00:43:18그냥 “어떤 데이터베이스를 가장 좋아하나”라고 물으면,
00:43:22종류가 너무 많고 각자
00:43:24더 잘하는 영역이 다르기 때문입니다.
00:43:26그래서 데이터베이스를 왜 선택하는지
00:43:28이유를 정확히 알아야 최애를 고를 수 있습니다.
00:43:31저는 로컬 우선 동기화 엔진 측면에서
00:43:36Convex 같은 것들이 정말 흥미롭다고 생각합니다.
00:43:38정말 멋지고 매력적인 기능들이 많거든요.
00:43:41제가 가장 좋아하는 범용 데이터베이스는
00:43:42사실 Dynamo입니다.
00:43:45익숙해지기까지 좀 답답할 순 있지만,
00:43:47정말 정말 빠릅니다.
00:43:49그리고 확장성(scale)이 아주 아주 뛰어납니다.
00:43:51하지만 SQL도 정말 좋아합니다.
00:43:55그래서 프로젝트에 SQL 데이터베이스를
00:43:58활용할 수 있다면 아마 그걸 선택할 거예요.
00:44:04제 커리어가 데이터 분석 분야에서 시작되었기 때문에
00:44:07SQL은 기본적으로 제가 성장하며 써온 도구거든요.
00:44:09그래서 딱 하나의 최애가 있는 건 아니지만,
00:44:14저는 그렇게 생각합니다.
00:44:16좋네요.
00:44:20Paolo가 남긴 댓글이 하나 있네요.
00:44:20아까 언급하셨던 분이죠.
00:44:23그가 말하길 “색깔이 너무 많이 보이네요.
00:44:24Rich, Simon, Elliot이 Vercel에서 일하는 게 맞나요?”라네요.
00:44:27제 의자는 검은색입니다.
00:44:32네, Paolo가 저한테 Vercel 후드티를 입으라고 압박했는데,
00:44:35여기가 너무 더워서요.
00:44:38알겠습니다, 여러분.
00:44:40하지만 옷장에 넣어두었다가
00:44:45날씨가 추워지면 꺼내 입습니다.
00:44:48우리가 듣고 싶어 하던 소리네요, 굿즈를 아끼는 모습!
00:44:51멋지네요.
00:44:54네, Svelte의 미래가 정말 기대되고,
00:44:55보이지 않는 곳에서 애써주시는
00:44:58여러분과 함께해주셔서 정말 감사합니다.
00:45:01오늘 라이브에 나오지 못한 나머지
00:45:03Svelte 팀원들과 유지 관리자분들께도 감사드립니다.
00:45:05그리고 멋진 Svelte 커뮤니티 여러분께도 감사의 인사를 전합니다.
00:45:09네, 오늘 함께해주신 Rich, Simon, Elliot 감사합니다.
00:45:11감사합니다.
00:45:16안녕히 계세요.
00:45:17즐거웠습니다.
00:45:18네, 관객 여러분, 아직 가지 마세요.
00:45:20마치기 전에 아주 특별한 손님이 계시거든요.
00:45:23Vercel 교육 팀의 Eve를 모셨습니다.
00:45:26안녕하세요.
00:45:31어떻게 지내세요?
00:45:32안녕하세요, Eve.
00:45:33좋습니다.
00:45:33어떠신가요?
00:45:34아주 좋습니다.
00:45:35감사합니다.
00:45:36정말 역대급 팀원들이 모였었네요.
00:45:36네.
00:45:40정말 즐거운 시간이었습니다.
00:45:41좋습니다.
00:45:44Academy와 그동안 준비해 온 것에 대해
00:45:45더 말씀해 주시겠어요?
00:45:47네, 기꺼이 말씀드리죠.
00:45:49아직 못 들으셨다면, 이제 Vercel에 Academy가 생겼습니다.
00:45:50현재 11개의 코스가 라이브로 제공되고 있습니다.
00:45:55그중 가장 최근 코스가 오늘 공개되었습니다.
00:45:57바로—짜잔—”Svelte on Vercel” 코스입니다.
00:46:03이 코스를 완성하는 데 팀원들이
00:46:10정말 많은 도움을 주셨습니다.
00:46:13코스에서는 스키 알림 앱을 만들어 봅니다.
00:46:15만약 여러분이 스키를 타신다면—
00:46:18오, 네.
00:46:23화면 공유 중인데, 한번 띄워보겠습니다.
00:46:25좋습니다.
00:46:28아, 여기 있네요.
00:46:29나왔습니다.
00:46:30훨씬 흥미롭네요.
00:46:31“Svelte on Vercel” 코스가 활성화되었습니다.
00:46:34여기서 스키 알림 앱을 구축하게 될 텐데요.
00:46:36요즘 같은 세상에 스키를 타시는 분이라면
00:46:40이번 시즌이 꽤 힘들었다는 걸 아실 겁니다.
00:46:43눈도 거의 안 오고,
00:46:47어디나 날씨가 따뜻했죠.
00:46:48그래서 스키 타기 좋은 날이 언제인지
00:46:50알림을 받는 게 정말 중요합니다.
00:46:52그래서 이 앱을 코스 전반에 걸쳐
00:46:54직접 만들어 보게 됩니다.
00:46:58여러분이 원하는 다양한 조건에 따라
00:46:59서로 다른 알림을 설정할 수 있으므로,
00:47:02스키 타기 좋은 날을 놓치지 않고
00:47:06현장에 있을 수 있게 도와줍니다.
00:47:10네, 코스에서는 Svelte를 다룹니다.
00:47:13Vercel에 어떻게 배포하는지,
00:47:17AI SDK는 어떻게 사용하는지,
00:47:19워크플로우는 어떻게 활용하는지,
00:47:21그리고 제작 과정에서의 팁들도 함께 배웁니다.
00:47:23멋지네요.
00:47:27훌륭합니다.
00:47:28저는 직접 만들면서 배우는 것을 강력하게 믿는 사람이라
00:47:29정말 최고인 것 같아요.
00:47:31정말 감사합니다.
00:47:33라이브 리소스에도 코스 링크를
00:47:34추가해 두도록 하겠습니다.
00:47:36네, 오늘 함께해주셔서 감사합니다, Eve.
00:47:38놀랍네요.
00:47:41정말 감사합니다.
00:47:41좋습니다.
00:47:42이제 라이브 세션을 마칠 시간이 되었네요.
00:47:46저희와 함께 시간을 보내주신
00:47:49커뮤니티 여러분께 진심으로 감사드립니다.
00:47:51솔직히 오늘 채팅창 반응이 정말 뜨거웠습니다.
00:47:52보기에 정말 좋았어요.
00:47:54네, 즐거우셨기를 바랍니다.
00:47:56Rich Harris의 말처럼, Svelte는 하나의 삶의 방식입니다.
00:47:58그러니 마음껏 즐겨보세요.
00:48:02더 많은 Svelte 결과물들을 만들어보시고요.
00:48:03미래의 커뮤니티 세션에 참여하고 싶으시다면,
00:48:05저희 커뮤니티 플랫폼인
00:48:08[community.vercel.com/live에서](https://www.google.com/search?q=https://community.vercel.com/live%EC%97%90%EC%84%9C) 자세한 내용을 확인하실 수 있습니다.
00:48:11네, 모두 감사합니다.
00:48:13다음에 봬요.
00:48:15안녕히 계세요.
00:48:16안녕히 계세요.