연습 - 음성 통화 웹앱 스캐폴딩

3분

이 단원에서는 웹앱을 만들고 브라우저에서 실행합니다.

앱 폴더 만들기

콘솔 창(예: cmd, PowerShell 또는 Bash)에서 다음 명령을 사용하여 앱에 대한 새 폴더를 만들고 해당 폴더로 변경합니다.
```
mkdir VoiceCallingApp
cd VoiceCallingApp
```
다음으로, 웹앱이 될 새 폴더를 준비합니다.
```
npm init -y
```

그러면 Node.js용 폴더가 설정되고 종속성을 저장하고 관리할 수 있습니다.

필수 종속성 추가

이제 필요한 종속성을 추가합니다.

먼저 Azure Communication Services 특정 종속성을 추가합니다.

npm install --save @azure/communication-common @azure/communication-calling

그런 다음 브라우저에서 앱을 실행할 수 있는 Parcel을 추가합니다.
```
npm install --save-dev parcel
```

인덱스 HTML 파일 만들기

index.html이라는 앱 디렉터리에 새 파일을 만듭니다.

이 파일의 내용에 대해 다음 텍스트를 입력합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Azure Communication Services - Simple voice calling app</title>
  </head>
  <body>
    <h1>Azure Communication Services</h1>
    <h2>Simple voice calling app</h2>

    <!-- Calling HTML here -->

    <script src="./app.js" type="module"></script>
  </body>
</html>

앱의 JavaScript 파일 만들기

app.js라는 앱 디렉터리에 새 파일 만들기
지금은 app.js 파일을 비워 두고 다음 단원에서 추가하겠습니다.

새 앱 테스트

콘솔 창의 프로젝트 디렉터리 내에서 다음 명령을 실행합니다.
```
npx parcel index.html
```
이제 Parcel이 앱을 컴파일하고 실행합니다.
완료되면 브라우저 내에서 앱을 볼 수 있는 링크가 제공됩니다. 이 링크는 일반적으로 http://localhost:1234/입니다.
브라우저에서 이 링크를 열면 브라우저에 빈 앱이 표시됩니다.