CoPlay 플랫폼화

2023.09.16·프론트엔드 4, 백엔드 3, 하드웨어 1, UX/UI 1·프론트 팀 리딩, 팀 역량강화 스터디 진행, VUE

프로젝트 소개

이전의 실시간 원격제어의 업그레이드 버전
- 이전에는 대회를 위한 로봇제어 웹 이었다면 이번 버전은 플랫폼으로 변경되었습니다.
변경점
- 블루투스 ⇒ 와이파이
- 나의 로봇 저장 기능
- 한명의 로봇으로 누구나 조종이 가능한 권한 시스템.

담당 기능

방 & 유저 기능 구현
로봇 등록 (로봇과 통신하여 와이파이 정보를 등록)
카메라 & 로봇 할당(권한 부여) 기능 구현
방 내부 채팅 구현.
방 만들기 퍼널 페이지 구현

🔧 기술 & 라이브러리

webBluetooth
webCodec
Vue3 + pinia
TypeScript
playwright , vitest
tailwindcss

이슈

API 의존성 제거

현상 : 프런트 개발이 백엔드 API에 의존하여 API가 멈추면 프런트 개발도 멈추는 현상.
원인 : 프런트에서 개발시에 API를 그대로 가져다 사용하는 것이 문제.
해결 : msw를 이용해서 API Mock Data를 간단하게 만들어 개발 중에는 API에 종속되지 않도록 개선. msw를 선택한 이유는 기존의 코드를 변경하지 않아도 되기 때문입니다.

Observer Pattern 도입

현상 : 실시간 미디어 데이터, 로봇의 데이터를 여러 컴포넌트에서 사용.
원인 : 실시간데이터를 여러 컴포넌트에서 관찰하여 사용하다보니 관리가 힘들어짐.
해결 : 실시간데이터에 토픽을 부여하여 토픽별로 관리, 컴포넌트는 감시등록을 하여 결과적으로 어느 컴포넌트에서 무엇을 감시하고 있는 지 알기가 쉬워졌다.

observer code

typescript

import type { ObEventList, ObEventState, ObserverState } from '@/types/module';


export default class Observer {
  public static instance: Observer;
  public observer: ObserverState;
  public eventList: ObEventList;
  constructor() {
    this.observer = {} as ObserverState;
    this.eventList = [];
  }
  public init() {
    this.eventList = [];
  }
  public static getInstance = () => {
    if (Observer.instance) return Observer.instance;
    Observer.instance = new Observer();
    return Observer.instance;
  };

  private observerInterface() {
    const registerObserver = (observer: ObserverState) => {
      // 감시자 등록
      this.observer = observer;
    };
    const observer = {
      notify: (message: string, argument?: any) => {
        this.eventList.map((event: ObEventState) => {
          // const cmd = event.find((command) => command.id === message);

          if (event.id === message) {
            event.func(argument);
          }
        });
      }
    };
    registerObserver(observer);
  }
  notifyObserver(message: string, argument?: any) {
    if (argument) {
      this.observer.notify(message, argument);
      return;
    }
    this.observer.notify(message);
  }
  public addObserver = (event: ObEventState) => {
    this.eventList.push(event); //event입력
    console.log('addObserver', this.eventList);
    this.observerInterface(); // 인터페이스 동작
  };
  public removeObserver = (event: ObEventState) => {
    this.eventList = this.eventList.filter(
      (item: ObEventState) => item !== event
    );
    console.log('removeObserver', this.eventList);
    this.observerInterface();
  };
}

사용법

typescript


const signalObserver: ObEventState = {
	id: 'signal_message',
	  func: async (topic: string) => {
	    console.log('signal_message', topic);
	
	    if (topic === 'event_info') {}
		}
}
//제거
observer.removeObserver(signalObserver)
//추가
observer.addObserver(signalObserver);

팀원 역량강화를 위한 스터디 진행.

현상 : 프론트엔드 파트에 인원 충원
원인 : 기존환경에 대한 이해가 필요한 상황
해결 : 현재의 환경에 대해 간단한 문서 작성, 2주에 한번 스터디를 진행하여 기존환경의 장단점을 설명
간단한 현재 환경 설명
- 개발환경에 대하여
- 사용중인 확장프로그램
- Unit테스트
- E2E테스트

프론트엔드 팀원과의 첫 협업

같은 레포지토리를 사용하여 규칙을 정했습니다.

프로젝트에서 성장한 부분

유지보수를 위한 고민

이전 Components

현재 Components

재사용률이 높아지도록 컴포넌트화 하였습니다.

현상 : 같은 디자인의 버튼이 두 개가 생기는 등 유령 의존성과 같은 일이 발생.
원인 : 컴포넌트에 토픽을 부여하여 Login, Top 같은 방식으로 묶어내어 의존성이 생겼기 때문으로 파악.
해결 : 묶는 단위를 제거하고 컴포넌트화할 수 있는 모든 것을 컴포넌트화.

문서 작성과 PPT 능력

해당 능력들을 키우고 싶은 욕심이 있어서 최대한 많은 PPT와 문서화를 진행했습니다.
- 워크샵 PPT 1
  회사의 정보가 담겨있어 PPT자체를 올리지는 못한 것을 양해바랍니다.
- 워크샵 PPT 2