Skip to content
← Back to Blog

Astro를 사용하여 영상 통화 앱 구축하기

By Tadas Petra In 개발자

Astro라는 프레임워크가 인기를 얻고 있어서 웹 개발을 배워보기로 결심했습니다. 이 프레임워크로 몇 개의 사이트를 만들다가 문득 이런 생각이 들었습니다: “Astro로 영상 통화 앱을 만들 수 있을까?”라고요.

대답은 ‘예’입니다! 이 글에서는 여러분도 정확히 어떻게 할 수 있는지 알려드립니다. 

사용 방법

당연히 이 글의 제목이기 때문에 Astro가 필요합니다.

제목의 두 번째 부분은 화상 통화에 관한 것입니다. 이를 위해 아고라를 사용하겠습니다. 구체적으로, 우리는 agora-react-uikit 패키지를 사용할 것입니다. 이 패키지는 영상 통화 앱을 쉽게 구축할 수 있게 해주는 UI 컴포넌트 세트인 Agora UI Kit의 React wrapper입니다.

현재 네이티브 Astro 패키지는 없습니다. 하지만 거의 모든 인기 있는 웹 프레임워크를 아스트로 애플리케이션에 사용할 수 있기 때문에, agora-react-uikit 은 잘 동작할 것입니다. 

또한 애플리케이션의 약간의 스타일링을 위해 Tailwind CSS를 사용할 것입니다.

아고라 계정 만들기

아고라 계정을 만들고 대시보드에 로그인합니다. 

Project Management 탭 아래의 Project List 탭으로 이동한 다음 파란색 Create 버튼을 클릭하여 프로젝트를 만듭니다. 

애플리케이션을 개발할 때 앱 요청을 승인하는 데 사용한 App ID 를 가져옵니다. 

Astro 프로젝트 시작하기

  1. npm create astro@latest 를 사용하여 Astro 프로젝트를 생성합니다.
  2. npx astro add tailwind 를 사용하여 Tailwind CSS 를 추가합니다.
  3. npx astro add react. 를 사용하여 React 를 추가합니다.
  4. npm install agora-react-uikit 을 사용하여 Agora UI Kit 을 추가합니다.
  5. PUBLIC_AGORA_APP_ID = '<---Your App Id--->' 를 추가합니다.

프로젝트 구조

├── src 
│ ├── components 
│ │ └── Call.tsx 
│ ├── layouts 
│ │ └── Layout.astro 
│ └── pages 
│   ├── index.astro 
│   └── channel 
│     └── [channelName].astro 
├── public 
│ └── favicon.png 
├── package.json 
├── astro.config.js 
├── tsconfig.json 
└── tailwing.config.cjs

Astro 를 사용하여 폼 구축하기

Astro SSG 와 SSR

기본적으로 Astro 프로젝트는 변경할 수 없는 정적 사이트를 생성하는 정적 사이트 생성기(SSG)를 사용합니다. Astro는 아일랜드라는 메커니즘을 사용하여 다양한 프레임워크(React, Svelte, Vue 등)와 인터페이스할 수 있는 방법을 제공합니다. 폼은 대화형이어야 하며, 이를 위해 아일랜드를 사용할 수 있습니다. 하지만 Astro를 사용하면 자바스크립트가 전혀 없는 폼을 만들 수 있습니다. 

그러기 위해서는 astro.config.mjs  에 output: 'server' 를 추가하여 서버 측 렌더러(SSR)를 활성화해야 합니다. 즉, 페이지가 서버에서 렌더링된다는 뜻입니다. 이렇게 하면 페이지가 로드되기 전에 서버 측 데이터에 액세스하고 일부 기능을 실행할 수 있다는 이점이 있습니다. 

UI 폼

폼을 작성하여 전송하는 경우, 처음에 페이지를 불러와서 폼을 보여줍니다. 그런 다음 폼을 전송할 때마다 API 엔드포인트처럼 동작합니다. 

일반적으로 폼을 전송할 때 데이터가 URL 에 추가되므로 이를 파싱해야 합니다. 폼의 데이터 전송 방법을 POST 로 변경하면 Request body 부분의 일부로 폼의 데이터가 전송됩니다. 이 애플리케이션의 경우 필요한 데이터는 사용자가 참여하려는 채널의 이름뿐입니다.

폼은 다음과 같아야 합니다:

Build a Video Call App with Astro - Sample Form

폼 데이터 검색 및 콜 페이지로

리다이렉트 Request 에 데이터와 함께 폼이 전송되면 페이지가 다시 로드되고 데이터가 서버로 전송됩니다. 이 데이터는 페이지가 표시되기 전에 서버 측에서 검색하여 처리할 수 있습니다. 이 경우 오류가 있는지 확인합니다. 오류가 있으면 동일한 페이지를 다시 렌더링하여 사용자에게 오류를 표시합니다. 오류가 없으면 사용자가 입력한 영상 통화 채널과 연결된 페이지로 리다이렉션됩니다. 

콜 페이지

agora-react-uikit 에서 제공하는 통화 컴포넌트를 제외하고 통화 페이지는 간단합니다. Join 한 채널의 이름을 출력하고 싶습니다.  

이전 단계에서 사용한 리다이렉션은 동적이며, 우리가 입력한 채널 이름에 따라 달라질 것입니다. Astro 에서 이를 처리하려면 channel폴더를 만들고 [channelName].astro 라는 파일을 정의해야 합니다. 대괄호는 URL의 동적 ${channelName} 이 이 컴포넌트에서 매개변수로 전달됨을 나타냅니다. 이를 검색하여 UI 에 표시하시만 하면 됩니다.

클라이언트 명령어

Call 컴포넌트의 경우 channelName 과 appId 를 전달합니다. client:only="react"  명령문도 추가합니다. 이 명령문은 Astro 아일랜드를 생성하는 데 필요합니다. 앞서 언급했듯이 Astro 는 사이트에 대한 정적 HTML 코드를 생성하고 있으며, 우리가 생성하는 영상 통화는 대화형이어야 합니다. 따라서 이 명령문이 없으면 Astro는 이 React 컴포넌트에서 정적 HTML을 렌더링하려고 시도할 것입니다.

하지만 client:only 를 사용하면 서버측 렌더링을 건너뛰고 React가 원하는 작업을 클라이언트에서만 렌더링하도록 할 수 있습니다.

Astro는 많은 프레임워크를 지원하기 때문에 우리에게 필요한 프레임워크도 지정해야 합니다. 

Call 컴포넌트 추가

마지막 컴포넌트는 순수 React 컴포넌트입니다. 상태 변수 activeCall 을 통하여 true일 때 영상 통화 화면으로 전환하고 false 일 때 rejoin 및 뒤로가기 버튼으로 사용합니다.

아고라 UI Kit 을 사용하려면 콜백 외에 App ID 와 채널이름이 포함된 rtcProps를 전달해야 합니다. 이 경우, activeCall을 false 로 변경하려는 EndCall콜백만 정의합니다.

최종 영상 통화는 다음과 같은 모습이어야 합니다:

Build a Video Call App with Astro - Final demo

요약

이를 통해 완벽한 영상 통화 경험을 하였습니다. 구축 방법은 다음과 같습니다.

  1. Astro 프로젝트를 생성합니다.
  2. Tailwind CSS, React, Agora UI Kit 를 설치합니다.
  3. 채널 이름을 입력할 폼을 생성합니다.
  4. 채널 이름이 포함된 URL로 사이트를 리다이렉션 합니다.
  5. 영상 통화에 채널 이름을 표시합니다.

이 프로젝트의 코드는 여기에서 확인할 수 있습니다. 그리고 아고라 영상 통화에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

읽어주셔서 감사합니다!

Blog Cta
Blog Cta mobile