Vue.js 로 웹 컨퍼런싱 앱 구축하기 - 실시간 화상 회의 구현

소개

이 프로젝트에서는 Vue.js 2.x 를 사용하여 웹 컨퍼런싱 애플리케이션을 구축하는 방법을 배우게 됩니다. 이 프로젝트는 웹 컨퍼런싱 소프트웨어에서 참석자 목록에 대한 다양한 표시 효과를 구현하는 데 중점을 둡니다.

👀 미리보기

Web conferencing app preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

로그인 및 참가자 창에서 사용자 데이터를 가져와 표시하기 위해 비동기 데이터 읽기 및 렌더링 기능을 구현하는 방법.
로그인 및 로그아웃 전환 기능을 구현하여 사용자가 애플리케이션에 로그인하고 로그아웃할 수 있도록 하는 방법.
로그인한 사용자가 항상 참가자 목록의 첫 번째 사용자로 표시되도록 하는 방법.
참가자 창의 가시성을 전환하는 기능을 구현하는 방법.
모든 참가자 표시, 참가자 목록 숨기기, 현재 로그인한 사용자만 표시 등 참가자 목록의 표시 효과를 전환하는 기능을 구현하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

다양한 사용자 인터페이스 기능을 갖춘 Vue.js 2.x 를 사용하여 웹 컨퍼런싱 애플리케이션을 구축할 수 있습니다.
Axios 를 사용하여 데이터를 비동기적으로 가져오고 표시할 수 있습니다.
Vue.js 애플리케이션에서 상태 관리 및 이벤트 처리를 구현할 수 있습니다.
동적 사용자 인터페이스를 생성하고 다양한 표시 모드 간에 전환할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요.

이 프로젝트의 프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── index.html
├── css
├── images
└── js
    ├── axios.min.js
    ├── userList.json
    └── vue.js

그 중:

index.html은 메인 페이지입니다.
css는 스타일 폴더입니다.
images는 이미지 폴더입니다.
js/axios.min.js는 axios 파일입니다.
js/userList.json은 요청해야 하는 데이터 파일입니다.
js/vue.js는 Vue 2.x 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

Image Description

비동기 데이터 읽기 및 렌더링 구현

이 단계에서는 비동기 데이터 읽기 및 렌더링 기능을 구현하는 방법을 배우게 됩니다.

제공된 프로젝트에서 index.html 파일을 엽니다.
Vue 인스턴스의 data 옵션에 나중에 사용할 몇 가지 속성을 추가합니다.

new Vue({
  el: "#app",
  data() {
    return {
      list: [],
      indexUser: "Tom",
      isShow: false,
      isShowRbtn: false,
      isShowUserList: true,
      isShowOtherUser: false,
      isShowIndexUser: true,
      user: "",
      buttonIndex: 2
    };
  }
});

new Vue() 인스턴스에서 mounted() 라이프사이클 훅에 다음 코드를 추가하여 Axios 를 사용하여 ./js/userList.json에서 사용자 데이터를 가져옵니다.

new Vue({
  el: "#app",
  data: {
    // ...
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      // Use axios to fetch data from the server
      const res = await axios({
        url: "./js/userList.json"
      });
      this.list = res.data;
    }
  }
});

로그인 창에서 드롭다운에 가져온 사용자 데이터를 표시하도록 코드를 업데이트합니다.

<!-- The original code: -->
<!-- <p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p> -->

<!-- The updated code: -->
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>

이 단계를 완료하면 로그인 창에 ./js/userList.json에서 비동기적으로 가져온 사용자 데이터가 표시됩니다.

효과는 다음과 같습니다.

Asynchronous data rendering effect in login window

로그인 및 로그아웃 전환 구현

이 단계에서는 로그인 및 로그아웃 전환 기능을 구현하는 방법을 배우게 됩니다.

제공된 프로젝트에서 index.html 파일을 엽니다.
new Vue() 인스턴스의 methods에 login 함수를 추가합니다.
login() 메서드에서 로그인 및 로그아웃 창 간을 전환하는 코드를 추가합니다.

methods: {
  // ...
  login() {
    this.isShow = !this.isShow;
    this.user = this.list.find((item) => item.name == this.indexUser);
  },
},

new Vue() 인스턴스의 computed에 텍스트 표시를 제어하는 isShow 속성을 추가합니다.

computed: {
  loinOrlogout() {
    return this.isShow ? "Logout" : "Login";
  }
},
methods: {
  // ...
},

로그인 또는 로그아웃 창에서 로그인 상태에 따라 적절한 콘텐츠를 표시하도록 코드를 업데이트합니다.

<!-- The original code: -->
<!-- <h3>Login</h3>
<p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p>

<a class="login-btn">Login</a> -->

<!-- The updated code: -->
<h3>{{loinOrlogout}}</h3>
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>
<a @click="login" class="login-btn">{{loinOrlogout}}</a>

이 단계를 완료하면 로그인 및 로그아웃 전환 기능이 구현되고, 기본적으로 참가자 창에는 현재 로그인한 사용자의 정보만 표시됩니다.

효과는 다음과 같습니다.

Effect after login

Effect after logout

로그인한 사용자가 항상 참여자 목록의 첫 번째에 위치하도록 보장

이 단계에서는 로그인한 사용자가 항상 참가자 목록의 첫 번째에 오도록 보장하는 방법을 배우게 됩니다.

제공된 프로젝트에서 index.html 파일을 엽니다.
참가자 창에서 class="say-list" 및 class="user-list"에 대한 코드를 업데이트하여 기본적으로 현재 로그인한 사용자의 정보만 표시하도록 합니다.

<ul class="say-list">
  <li>
    <span class="iconfont icon-microphone"></span>
  </li>
  <li class="line"></li>
  <li>Being spoken to: {{list.find((item) => item.isHost).name}};</li>
</ul>
<ul v-if="isShow" class="user-list">
  <li v-if="isShowIndexUser">
    <img class="header" :src="user.imgPath" />
    <div class="user-name">
      <span v-if="user.isHost" class="iconfont icon-user header-icon"></span>
      <span class="iconfont icon-microphone"></span>
      {{user.name}}
    </div>
  </li>
  <li v-for="item in list" v-if="item.name!=user.name&&isShowOtherUser">
    <img class="header" :src="item.imgPath" />
    <div class="user-name">
      <span
        v-if="item.isHost&&changeBtnActive"
        class="iconfont icon-user header-icon"
      ></span>
      <span class="iconfont icon-microphone"></span>
      {{item.name}}
    </div>
  </li>
</ul>

이 단계를 완료하면 로그인한 사용자가 항상 참가자 목록의 첫 번째 사용자로 표시됩니다.

효과는 다음과 같습니다.

The first user in the participant list is always the logged-in user

참가자 창의 가시성 전환 구현

이 단계에서는 참가자 창의 가시성을 전환하는 기능을 구현하는 방법을 배우게 됩니다.

제공된 프로젝트에서 index.html 파일을 엽니다.
new Vue() 인스턴스의 methods에 showUserList 함수와 showRbtn 함수를 추가합니다.

methods: {
  showUserList() {
    this.isShowUserList = !this.isShowUserList;
    this.showRbtn();
  },
  showRbtn() {
    this.isShowRbtn = !this.isShowRbtn;
  },
},

HTML 에서 참가자 창을 표시하거나 숨기는 버튼을 추가하도록 코드를 업데이트합니다.

<!-- The original code: -->
<!-- <button id="show" class="right-btn">
  <span class="iconfont icon-left-arrow"></span>
</button> -->

<!-- The updated code: -->
<button
  v-if="isShow&&isShowRbtn"
  @click="showUserList"
  id="show"
  class="right-btn"
>
  <span class="iconfont icon-left-arrow"></span>
</button>

이 단계를 완료하면 버튼을 클릭하여 참가자 창을 표시하거나 숨길 수 있습니다.

효과는 다음과 같습니다.

Position of the Hide/Show Participant Window button icon

참가자 목록 표시 효과 전환 구현

이 단계에서는 참가자 목록의 표시 효과를 전환하는 기능을 구현하는 방법을 배우게 됩니다.

제공된 프로젝트에서 index.html 파일을 엽니다.
new Vue() 인스턴스의 methods에 changeBtnActive 함수를 추가합니다.
changeBtnActive() 메서드에서 참가자 목록 표시 효과의 전환을 처리하는 코드를 추가합니다.

methods: {
  changeBtnActive(userFlag, otherUserFlag, value) {
    this.isShowIndexUser = userFlag;
    this.isShowOtherUser = otherUserFlag;
    this.buttonIndex = value;
  },
},

HTML 에서 class="user-dialog"를 찾아 참석자 목록의 표시 효과를 토글하는 데 사용되는 버튼을 추가하도록 코드를 업데이트합니다.

<div v-if="isShowUserList&&isShow" class="user-dialog">
  <ul class="tools">
    <li class="tools-left">
      <button
        @click="changeBtnActive(false,false,1)"
        :class="{'active': buttonIndex==1 ? true : false}"
      >
        <span class="iconfont icon-close"></span>
      </button>
      <button
        @click="changeBtnActive(true,false,2)"
        :class="{'active': buttonIndex==2 ? true : false}"
      >
        <span class="iconfont icon-dialog"></span>
      </button>
      <button
        @click="changeBtnActive(true,true,3)"
        :class="{'active': buttonIndex==3 ? true : false}"
      >
        <span class="iconfont icon-list"></span>
      </button>
    </li>
    <li @click="showUserList" class="tools-right">
      <button class="show-list">
        <span class="iconfont icon-retract"></span>
      </button>
    </li>
  </ul>
  <!-- user list -->
  <!-- Omit the code already mentioned... -->
</div>

이 단계를 완료하면 해당 버튼을 클릭하여 참가자 목록의 표시 효과를 전환할 수 있습니다.

효과는 다음과 같습니다.

Effect of showing all participants