이전 게시물에서 React와 함께 Agora SDK를 사용하는 방법을 살펴보았습니다. 이제 모두가 “React 피로감”을 호소하는 상황에서, 변화를 위해 Svelte를 사용해 보겠습니다. Svelte를 시작하기 위해 SvelteKit을 사용할 것입니다: Svelte 팀에서 제공하는 공식 애플리케이션 프레임워크입니다.
SvelteKit은 서버 측 렌더링, 사전 로딩, 사전 렌더링과 같은 기능을 추가하는 것을 단순화하며, 개별 페이지의 빌드 크기를 최적화합니다. 내부적으로 Vite를 사용해 모든 것을 “초고속”으로 만듭니다. SvelteKit을 사용해 Agora Web SDK를 사용하는 방법을 배우기 위해 간단한 비디오 컨퍼런싱 애플리케이션을 구축해 보겠습니다. SvelteKit 로더를 사용해 채널 토큰으로 호출에 대한 액세스를 보호할 것입니다.
아고라 계정 생성
가입하여 계정을 생성하고 대시보드에 로그인하세요
프로젝트 관리 탭 아래의 프로젝트 목록 탭으로 이동한 후, 파란색 생성 버튼을 클릭하여 프로젝트를 생성합니다. (인증서 사용을 요청할 경우 App ID + Certificate를 선택합니다.)
앱 개발 과정에서 앱 요청을 인증하기 위해 사용할 App ID와 App Certificate를 가져옵니다.
필수 조건
프로젝트 초기화
예제 코드는 GitHub에서 확인할 수 있습니다. 또는 예제를 따라하기 위해 새로운 SvelteKit 프로젝트를 생성할 수 있습니다. 터미널을 열고 다음 명령어를 실행합니다:
> npm create svelte@latest my-app
# ┌ Welcome to SvelteKit!
# │
# ◇ Which Svelte app template?
# │ Skeleton project
# │
# ◇ Add type checking with TypeScript?
# │ Yes, using TypeScript syntax
# │
# ◇ Select additional options (use arrow keys/space bar)
# │ Add ESLint for code linting, Add Prettier for code formatting
# │
# └ Your project is ready!
> cd my-app
> npm install
> npm run dev
# Server is started on http://127.0.0.1:5173/프로젝트 구조
프로젝트 디렉토리의 구조는 다음과 같아야 합니다:
├── package.json
├── src
│ ├── app.d.ts
│ ├── app.html
│ └── routes
│ └── +page.svelte
├── static
│ └── favicon.png
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts우리는 /src 폴더에서 작업할 것입니다. 작업이 완료되면 다음과 같은 모습일 것입니다:
.
├── package.json
├── src
│ ├── app.d.ts
│ ├── app.html
│ └── routes
│ ├── call
│ │ └── [channel]
│ │ ├── +layout.ts
│ │ ├── +page.server.ts
│ │ ├── +page.svelte
│ │ └── Videocall.svelte
│ ├── +page.svelte
│ └── styles.css
├── static
├── .env
...
.환경 변수를 위한 새로운 파일인 .env를 생성하고 이전 단계에서 얻은 아고라 앱 ID와 앱 인증서를 다음과 같이 추가합니다:
PUBLIC_APP_ID=c0c4e9a283a***********
APP_CERTIFICATE=c18faddfa***********설정이 완료되었으니 이제 코드를 작성해 보겠습니다.
코드 작성
SvelteKit의 핵심은 파일 시스템 기반 라우터로, src/routes 디렉토리에 +page.svelte 파일을 생성하여 라우트를 정의할 수 있습니다. 이 파일은 서버와 클라이언트 모두에서 실행됩니다. 먼저 인덱스 라우트 src/routes/+page.svelte를 생성해 보겠습니다:
우리는 <script> 태그를 사용하여 마크업에서 액세스할 수 있는 값과 함수를 정의할 수 있습니다. channel 이름과 사용자 UID를 위한 변수를 생성하고 기본값으로 초기화합니다.
마크업에서는 중괄호(curly braces)를 사용하여 값에 액세스할 수 있습니다. 예를 들어 {variable}와 같이 사용할 수 있습니다. <input> 요소의 경우 사용자가 입력한 값으로 변수를 업데이트하는 이벤트 리스너를 작성하고 싶을 수 있습니다. 하지만 bind:value 지시어를 사용하면 양방향 데이터 바인딩을 설정하여 더 쉽게 구현할 수 있습니다. 이 지시어는 “state” 변수를 사용자 입력과 동기화합니다.
on:click 지시어를 <button> 태그에 적용하면 handleClick 함수를 호출할 수 있습니다. 이 함수는 사용자를 /call/<channel> 경로로 리디렉션하며, UID를 쿼리 매개변수로 설정합니다.
경로 호출
다음으로 새로운 파일 src/call/[channel]/+page.svelte를 생성하여 이 호출 경로를 만들어 보겠습니다.[channel] 디렉토리를 주의하세요. 이 디렉토리는 경로에서 변수/슬러그를 사용할 수 있도록 합니다. 이 변수는 나중에 사용할 것입니다.
이 파일은 서버에서 실행됩니다. load함수의 반환 값은 호출 페이지에서 사용할 수 있으며, 이는 다시 비디오 채팅 구성 요소로 전달됩니다. 우리는 agora-token 패키지의 RtcTokenBuilder 함수를 사용하여 액세스 토큰을 생성할 것입니다.
App ID, App Certificate, 채널 이름, UID, 사용자 역할, 토큰/권한 만료 시간을 전달하여 토큰을 생성합니다. 마지막으로 생성된 토큰, UID, 채널을 객체로 반환하여 비디오 채팅 구성 요소에서 액세스할 수 있도록 합니다.
비디오 채팅 구성 요소
비디오 채팅 구성 요소를 위해 콜 라우트와 함께 파일을 생성합니다. src/routes/call/[channel]/Videocall.svelte. 여기에서 비디오 채팅 로직을 작성한 후 이전에 생성한 +page.svelte 파일에 임포트합니다:
필요한 패키지를 임포트한 후, pageData에 액세스할 수 있습니다. 이 데이터를 사용하여 채널 이름, UID, 토큰에 액세스할 수 있습니다.
원격 사용자를 콜에 저장하고 로컬 비디오 및 오디오 트랙을 저장하기 위해 변수를 선언할 수 있습니다. Agora 클라이언트를 생성하여 이벤트 리스너를 연결하고 채널에 참여하며 로컬 트랙을 init 함수에서 게시할 수 있습니다.
사용자가 콜에 참여하고 오디오를 게시하면 해당 오디오에 구독하고 트랙을 재생합니다. 비디오를 게시하면 해당 비디오에 구독하고 user 배열에 추가합니다. 배열을 재할당하는 점에 주의하세요: 이는 Svelte가 DOM을 업데이트하도록 알려주는 방식입니다. 원격 사용자가 채널을 떠나면 이벤트를 수신하고 사용자 배열에서 해당 사용자를 필터링하며, 값을 재할당합니다.
또한 renderVideo 함수를 정의하여 트랙의 play 메서드를 호출하여 원격 사용자의 비디오 트랙을 렌더링합니다. 이 함수는 비디오를 렌더링할 div의 ID를 인수로 받기 때문에 원격 사용자의 UID를 사용합니다. 또한 onDestroy 함수를 정의하여 사용자 배열을 지우고, 오디오 및 비디오 트랙을 닫고, 채널을 떠나며, 모든 이벤트 리스너를 제거합니다.
<script> 태그를 닫기 전에, $ 기호를 사용하여 일부 반응형 문장을 생성합니다. 이 문장은 상태가 업데이트될 때마다 실행됩니다. columnTemplate 문장은 사용자의 수에 따라 비디오 그리드를 렌더링하기 위한 CSS 스타일을 계산합니다.
비디오 채팅 마크업
마크업에서는 {#each} 블록을 사용하여 사용자 배열을 반복하며 각 사용자의 비디오를 렌더링합니다. 사용자가 DOM에 추가될 때 renderVideo 함수를 호출하기 위해 use 지시어를 사용합니다. 로컬 사용자의 비디오를 렌더링하기 위해 id=”me”를 가진 div를 생성합니다. columnTemplate 문장을 grid-template-columns CSS 속성에 사용하는 점을 주의하세요:
다음은 우리가 사용하고 있는 나머지 CSS입니다:
연결하기
이제 이전 스크립트를 수정하여 이 Videocall 컴포넌트를 +page.svelte 파일에서 사용할 수 있습니다:
우리는 Svelte의 onMount 함수를 사용하여 DOM이 로드된 후에 컴포넌트가 렌더링되도록 합니다. 비디오 채팅 컴포넌트가 페이지 데이터에 접근할 수 있도록 하기 위해, 이전과 마찬가지로 export 문을 작성합니다.
마지막으로 동적 컴포넌트를 렌더링하기 위해 <svelte:component> 태그를 사용하며, 데이터를 전달하고 import에 this 값을 설정합니다:
비디오 채팅 구성 요소를 서버가 아닌 클라이언트에서만 렌더링하려면, +layout.ts 파일을 콜 라우트에 생성하고 SSR(서버 측 렌더링)을 false로 설정합니다. 다음과 같이:
export const ssr = false;
결론
Svelte는 프론트엔드 웹 애플리케이션 개발에 정말 신선한 접근 방식을 제시하며, SvelteKit을 사용하면 풀스택 애플리케이션 개발이 그 어느 때보다 쉬워집니다. Svelte와 Agora SDK를 함께 사용하면 실시간 상호작용 애플리케이션을 구축하는 것이 매우 간편해집니다.
Svelte의 다른 기능에 대해 알아보려면 여기를 클릭하세요. Agora SDK에 대한 자세한 내용은 를 참조하세요.
