CoPlay 한국/일본 2022 01 ~ 10/07

2023.09.16·프론트엔드 1, 백엔드 1, 하드웨어 2, 머신러닝 1, UX/UI 1·Vue3, graphQL, TypeScript, Tailwindcss

프로젝트 소개

누구나 접속하여 리얼타임 원격 로봇 제어를 체험할 수 있는 플랫폼.
팀그릿의 자체 미디어 서버를 이용하여 실시간 원격제어를 제작.

🔧 기술 & 라이브러리

Vue3 + vuex
TypeScript
graphQL
Tailwindcss
Amplify
Cypress(E2E)

webBluetooth
webCodec
webSocket
i18n
iamport

새로운 도입

TypeScript
Tailwindcss : css 개발속도 증가를 위해.
Cypress : E2E 도입을 위해 가장 보편적인 기술 사용
webBluetooth : 웹에서 블루투스를 사용하기 위해 도입
graphQL : 부분적으로 api 데이터를 호출하여 비용 절감
Vite : webpack과 비교하여 번들링 속도 증가
webCodec : 대역폭 문제 + 해상도 유연성의 필요
i18n

이슈

CI/CD

S3, Cloud Front를 이용하여 배포.

현상 : 배포할 때 마다 AWS웹에 접속하여 S3, Cloud Front 작업 진행.
원인 : 매번 직접 삭제, 생성, 무효화 하는 작업은 생산성이 심하게 저하.
해결(채택) : shellscript를 이용하여 일련의 작업을 한번에 진행.
해결2 : githubAction을 사용.
- 사용하지 않은 이유 : 아직 필요성을 느끼지 못했고 러닝커브도 있다고 판단하여 새로 오시는 분들도 힘들어 할 수 있기 때문에.

package.json

shell

"dev-all": "sh deploy.sh",

deploy.sh

shell


echo `yarn`
echo `yarn prod-build` # 빌드
echo `yarn prod-clear` # S3 클리어
echo `yarn prod-deploy` # S3 배포
echo `yarn prod-invalid` # Cloud Front 무효화

WebCodec 도입

webRTC를 사용하지 않고 자체 솔루션으로 미디어조작이 가능해야하는 상황.

현상 : webSocket으로 미디어를 전달하면 용량이 너무 큰 현상.
원인 : 이미지 압축과정이 없는 jpeg 혹은 webp로 보내기 때문.
해결 : webcodec으로 이미지를 압축하여 h264 혹은 vp8로 전달.
성과 : jpeg : 80kb, webp : 30kb, chunckData : 7.5kb

webcodec code

encoder.js

javascript

const encoder = (() => {
  let encoderObject;
  return {
    set: (videoEncoder) => {
      encoderObject = videoEncoder;
    },
    get: () => {
      return encoderObject;
    }
  };
})();

export const configVideoEncoder = async (codecConfig, stream, mothPub) => {
  const init = {
    output: (chunk) => {
      encoder.pendingOutputs--;
      handleChunk(chunk);
    },
    error: (err) => {
      encoder.keepGoing = false;
      throw err;
    }
  };

  const handleChunk = (chunk) => {
    const chunkData = new Uint8Array(chunk.byteLength);
    chunk.copyTo(chunkData);
    mothPub.sendByte(chunkData);
  };

  const track = stream.getVideoTracks()[0];
  const trackProcessor = new MediaStreamTrackProcessor(track);

  encoder.reader = trackProcessor.readable.getReader();

  const { supported } = await VideoEncoder.isConfigSupported(codecConfig);
  if (supported) {
    const videoEncoder = new VideoEncoder(init);
    videoEncoder.configure(codecConfig);

    encoder.set(videoEncoder);
    encoder.pendingOutputs = 0;
    encoder.keepGoing = true;
    encoder.frameCounter = 0;
    encoder.keyFrameInterval = codecConfig.interval;

    const mimeAPI = new videoMimeAPI();
    mimeAPI.parseByCodecConfig(codecConfig);
    const mimeString = mimeAPI.getMimeString(codecConfig);

    console.log("codecConfig on :", mimeString);
    mothPub.sendString(mimeString);
  } else {
    throw "Codec Configuration Not supported";
  }
};

export const startVideoEncoding = async () => {
  const roomStore = useStoreRoom();
  async function readFrame() {
    const result = await encoder.reader.read();
    const frame = result.value;

    if (frame === undefined) {
      return;
    }

    if (
      encoder.get().state == "configured" &&
      encoder.keepGoing &&
      encoder.pendingOutputs <= 2
    ) {
      if (focusWindow) {
        //포커스 하고 있을 때만 인코딩.
        encoder.frameCounter++;
        encoder.pendingOutputs++;
        encoder.get().encode(frame, {
          keyFrame: encoder.frameCounter % encoder.keyFrameInterval == 0
        });
      }
      frame.close();
    } else {
      frame.close();
    }

    setTimeout(readFrame, 1);
  }

  readFrame();
};

export const stopVideoEncoding = async () => {
  try {
    const videoEncoder = encoder.get();
    let frame = await encoder.reader.read().value;
    if (frame) {
      await encoder.reader.read().value.close();
      frame = undefined;
    }

    await videoEncoder.flush();
    videoEncoder.close();

    return true;
  } catch (err) {
    console.log(err);
  }
};

decoder.ts

typescript

const pendingFrames: Array<VideoFrame> = [];
let underflow = true;
let time_base = 0;
let decoder: VideoDecoder;

let paintCount = 0;
let startTime = 0.0;

let canvas: HTMLCanvasElement;
let fpsElement: HTMLElement | null;

let isKeyFrameRecv = false;

let mimeData = {
  codec: "",
  width: 0,
  height: 0,
  bitrate: 0,
  // avc: { format: "annexb" },//H.264 용
  hardwareAcceleration: "prefer-hardware",
  framerate: 30
  // optimizeForLatency:true
};

const handleFrame = (frame: VideoFrame) => {
  // console.log("handleFrame", frame);
  pendingFrames.push(frame);
  if (underflow) setTimeout(renderFrame, 0);
};

const init = {
  output: handleFrame,
  error: (e: Error) => {
    console.log(e.message);
  }
};

export const decoderStart = async (
  canvasEl: HTMLCanvasElement,
  fpsEl: HTMLElement | null,
  mime: any
) => {
  canvas = canvasEl;
  fpsElement = fpsEl;
  mimeData = mime;

  try {
    const { supported } = await VideoEncoder.isConfigSupported(mime);
    if (supported) {
      decoder = new VideoDecoder(init);
      decoder.configure(mime);
      if (mime && decoder.state == "unconfigured") {
        console.log("decoder reconfig");
      }
    } else {
      console.log("Codec Configuration Not supported");
      alert("codec을 지원하지 않습니다.");
      return;
    }
  } catch (error) {
    console.log("VideoEncoder Error : ", error);
  }
};
export const decodeFrame = async (evtByte: any) => {
  const chunk = new EncodedVideoChunk({
    timestamp: evtByte.timeStamp,
    type: evtByte.type ? "key" : "delta",
    data: evtByte.data,
    duration: undefined
  });

  if (chunk.type === "delta") {
    if (!isKeyFrameRecv) return;
  } else {
    isKeyFrameRecv = true;
  }
  try {
    decoder.decode(chunk);
  } catch (err) {
    console.log("decoder.decode error : ",err)
  }
};

const calculateTimeUntilNextFrame = (timestamp: any) => {
  if (time_base == 0) time_base = performance.now();
  const media_time = performance.now() - time_base;
  return Math.max(0, timestamp / 1000 - media_time);
};

const renderFrame = async () => {
  if (startTime === 0.0) {
    startTime = performance.now();
  }

  underflow = pendingFrames.length == 0;
  if (underflow) return;

  const frame = <VideoFrame>pendingFrames.shift();

  const timeUntilNextFrame = calculateTimeUntilNextFrame(frame.timestamp);
  await new Promise((r) => {
    setTimeout(r, timeUntilNextFrame);
  });
  if (!canvas) {
    console.log("decoder renderFrame canvas 없음.");
  } else {
    canvas.width = mimeData.width;
    canvas.height = mimeData.height;

    const ctx = <CanvasRenderingContext2D>canvas.getContext("2d");
    ctx.drawImage(frame, 0, 0);
  }

  frame.close();

  const elapsed = (performance.now() - startTime) / 1000.0;
  const fps = (++paintCount / elapsed).toFixed(3);
  if (fpsElement) {
    fpsElement.innerText = `${Math.floor(Number(fps))}`;
  }

  setTimeout(renderFrame, 0);
};

export const stopVideoDecode = async () => {
  try {
    await decoder.flush();
    decoder.close();
  } catch (err) {
    console.log("stopVideoDecode error : ", err);
  }
};

Tailwindcss 도입

이전 프로젝트에서 CSS를 사용하였고 개선이 필요한 상황.

현상 : CSS에서 개발 속도가 느림.
원인 : CSS코드가 손이 많이 가고 미디어쿼리로 반응형 개발이 어렵다고 생각.
해결1 : SCSS를 사용한다면 개발 속도보다는 코드 가독성과 사용성 등 유지보수가 편해지지만 개발 속도에서 드라마틱한 결과를 볼 수 없다고 판단했습니다.
해결2(채택) : Tailwindcss가 근본적으로 개발 속도를 늘어난다고 생각했습니다. 코드가 짧고 간결하여 외우기 쉽고 빠르게 치고 내려갈 수 있습니다. id 혹은 class 네이밍을 일반 css보다 덜 생각하고 개발할 수 있습니다.
성과 : UI 개발 속도가 40% 향상했습니다.

직접 기술도입 & 테스트봇 개발 후 제안

로봇으로 사용할 가벼운 하드웨어를 검증해야함.

현상 : 새로운 대회는 좀 더 많이 가벼운 하드웨어를 사용할 계획.
원인 : 대회에 적합한 하드웨어를 선택해야하는 상황 - 레고, 마이크로비트, esp32, 라즈베리파이 미니
해결
- 채택 이유 : 로봇의 컨셉이 직접 조립, 개선, 사용에 용의하여 교육 로봇에 가까워야하기 때문.
- 증명 : 실시간 컨트롤을 구현하여 증명 + 구글의 실험적인 기술의 문제를 자동 재연결 기능으로 상쇄하며 사용가능을 증명.
성과 : 제안된 로봇 채택 후 대회에서 직접 사용

프로젝트에서 성장한 부분

웹 기획

기획자 없이 시작하여 어느정도 웹 기획에 참여하였습니다.

개발단계 - 작동단계 - 프로덕트단계로 나누어 일정을 조율했습니다.
디자이너와 함께 디자인을 보고 모달과 팝업을 기능을 분리하고 로그인 기능에서 웹보안에 적절하게 아이디와 비밀번호 중 무엇이 틀렸는지 말하지 않는 등 웹보안과 웹 접근성에 맞게 재조정하는 역할을 맡았습니다.

디자이너와의 협업

서비스를 이해하는 UI를 디자이너분이 제작할 수 있도록 개발적으로 왜 이부분에서 로딩이 필요하고 왜 이런 순서가 UI에 들어가야하는 지 설명하기 위해서 최대한 간단하고 알기 쉽도록 그림을 그려서 설명드렸습니다.
이 경험을 통해 비개발 직군에게 어떻게 의사소통을 해야 잘 이해하는 지 알 수 있는 계기가 되었습니다.

유지보수를 위한 고민

파일 기능 분리

이전에 한 파일에 몰아서 작업하다보니 코드를 찾는 시간이 늦고 너무 길고 복잡하다고 생각이 들어 기능별로 분할하였습니다.

전 프로젝트

이번 프로젝트

자주 사용하는 기능 분리

Vue 내부에서 여러번 사용되는 코드를 ts파일로 분리하여 여러 Vue에서 사용하였습니다.

validation.ts : 유효성 검사

typescript

export const isKo = (asValue: string, min: number, max: number) => {
  const regExpKo = "^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]{min,max}$";
  const Min = regExpKo.replace("min", `${min}`);
  const Max = Min.replace("max", `${max}`);
  const regex = new RegExp(Max, "i");

  return regex.test(asValue);
};
export const isEng = (asValue: string, min: number, max: number) => {
  // const regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{4,12}$/;
  // return regExp.test(asValue);
  const regExp = "^[a-zA-Z0-9]{min,max}$";
  const Min = regExp.replace("min", `${min}`);
  const Max = Min.replace("max", `${max}`);
  const regex = new RegExp(Max, "i");

  return regex.test(asValue);
};
export const isEngAndKo = (asValue: string, min: number, max: number) => {
  const regExp = "^[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|]{min,max}$";
  const Min = regExp.replace("min", `${min}`);
  const Max = Min.replace("max", `${max}`);
  const regex = new RegExp(Max, "g");

  return regex.test(asValue);
};
export const isEnAndNum = (asValue: string, min: number, max: number) => {
  const regExp = "^[0-9a-zA-Z]{min,max}$";
  const Min = regExp.replace("min", `${min}`);
  const Max = Min.replace("max", `${max}`);
  const regex = new RegExp(Max, "g");

  return regex.test(asValue);
};
export const isSpecial = (asValue: string) => {
  const regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g;
  return regExp.test(asValue); // 형식에 맞는 경우 true 리턴
};
export const isMail = (asValue: string) => {
  const regExp =
    /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
  return regExp.test(asValue); // 형식에 맞는 경우 true 리턴
};
export const isPhone = (asValue: string) => {
  const regExp = /^\d{11}$/;
  return regExp.test(asValue); // 형식에 맞는 경우 true 리턴
};

export const byteLength = (string: string) => {
  const byteLength = string.replace(
    /[\0-\x7f]:(0-\u07ff]:(.))/g,
    "$&$1$2"
  ).length;
  return byteLength;
};

keyBoard.ts : 로봇 컨트롤

typescript

import { UartService } from "microbit-web-bluetooth/types/services/uart";

//control : service or colink
const SEND_LIMIT_BYTE = 20;
const DRIVE_MIN_VALUE = 0;
const DRIVE_MAX_VALUE = 255;

const DRIVES = {
  //Stop drive
  STOP: "ST",
  //For robot
  FORWARD: "FW",
  BACKWARD: "BW",
  LEFT: "L",
  RIGHT: "R",
  NE: "NE",
  SE: "SE",
  SW: "SW",
  NW: "NW",
  CW: "CW",
  CCW: "CC",
  //For drone
  ARM: "AM",
  DISARM: "DA",
  ROLL: "RL",
  PITCH: "PT",
  YAW: "YW",
};
const ACTIONS = {
  CATCH_UNIT: "CT",
  CRANE: "CR",
};
const DRIVE_KEYCODES = [38, 40, 37, 39, 90, 88];
const ALLOWED_KEYCODES = [38, 40, 37, 39, 90, 88, 65, 83];
let _sendPending = false;
const _controlKey = new Map();

/*
  1. Forward: 38(up)
      + Left
      + Right
      + CCW
      + CW
  2. Backward: 40(down)
      + Left
      + Right
      + CCW
      + CW
  3. CCW: 37
  4. CW: 39
  5. Left: 90(z)
  6. Right: 88(x)
  7. Catch: 65(a)
  8. Crane|Shoot: 83(s)
*/

// let lr_interval: any = null;
/**
 * @param keyValue keyboardEvent
 * @param uartService microbit uartService
 * @param deviceId  id
 */
export const microbitControl = async (
  keyValue: any,
  uartService: UartService,
  deviceId: string
) => {
  const _uartService = uartService;
  console.log("-----deviceId:", deviceId);

  //커맨드 전송
  const sendCommand = async (command: string) => {
    try {
      if (_uartService) {
        if (command) {
          if (_sendPending === false) {
            _sendPending = true;
            _uartService.sendText(`${command}$`);
            console.log("command", command.split(",")[0]);

            _sendPending = false;
          }
        }
      }
    } catch (error) {
      console.log("-----sendCommand exception:", error);
    }
  };

  //커맨드데이터 전송
  const sendCommandData = async (eventName: string, keyCode: number) => {
    console.log(`-----keyEvent, keyCode:${eventName}, ${keyCode}`);
    let command = "";
    let key = "";
    try {
      if (eventName === "keydown") {
        if (keyCode == 38) {
          //Key: Up
          key = DRIVES.FORWARD;
        } else if (keyCode === 40) {
          //Key: Down
          key = DRIVES.BACKWARD;
        } else if (keyCode === 37) {
          //Key: CCW
          key = DRIVES.CCW;
        } else if (keyCode === 39) {
          //Key: CW
          key = DRIVES.CW;
        } else if (keyCode === 90) {
          //Key: z(Left)
          key = DRIVES.LEFT;
        } else if (keyCode === 88) {
          //Key: x(Right)
          key = DRIVES.RIGHT;
        } else if (keyCode === 65) {
          //Key: a(Catch Unit)
          key = ACTIONS.CATCH_UNIT;
        } else if (keyCode === 83) {
          //Key: s(Crane)
          key = ACTIONS.CRANE;
        }
        if (key) {
          command = `${key},${DRIVE_MAX_VALUE}`;
        }
      } else if (eventName === "keyup") {
        command = `${DRIVES.STOP},1`;
        console.log(`-----stop 전송`);
      }
      if (command) sendCommand(command);
    } catch (error) {
      console.log("-----sendCommandData exception:", error);
    }
  };

  const isDriveKeyCode = (keyCode: number) => {
    let existKeyCode = false;
    console.log("-----find keyCode:", keyCode);
    for (const index in DRIVE_KEYCODES) {
      const kc = DRIVE_KEYCODES[index];
      console.log("-----kc:", kc);
      if (kc == keyCode) {
        existKeyCode = true;
        break;
      }
    }
    console.log("-----existKeyCode:", existKeyCode);
    return existKeyCode;
  };

  const isAllowedKeyCode = (keyCode: number) => {
    let existKeyCode = false;
    console.log("-----find keyCode:", keyCode);
    for (const index in ALLOWED_KEYCODES) {
      const kc = ALLOWED_KEYCODES[index];
      console.log("-----kc:", kc);
      if (kc == keyCode) {
        existKeyCode = true;
        break;
      }
    }
    console.log("-----existKeyCode:", existKeyCode);
    return existKeyCode;
  };

  /* 단일 로봇의 단일 제어를 위한 오리지널 코드(2022.9.7 이전)
  if (keyValue.key === "keyup") {
    _prevKeyCode = null;
    console.log("microbitControl", keyValue);
    if (isDriveKeyCode(keyValue.keyCode)) {
      if (_moveKeyCode) {
        if (keyValue.keyCode == 38 || keyValue.keyCode == 40) {
          _moveKeyCode = null;
          sendCommandData(keyValue.key, keyValue.keyCode);
          _prevKeyCode = null;
        } else {
          sendCommandData("keydown", _moveKeyCode);
        }
      } else {
        sendCommandData(keyValue.key, keyValue.keyCode);
        _prevKeyCode = null;
      }
    }
  }

  if (keyValue.key === "keydown") {
    if (keyValue.keyCode == 38 || keyValue.keyCode == 40) {
      _moveKeyCode = keyValue.keyCode;
      sendCommandData(keyValue.key, keyValue.keyCode);
    }
    if (_prevKeyCode) {
      if (_prevKeyCode == keyValue.keyCode) {
        //현재 키코드가 이전 키코드와 같으면 명령을 전송하지 않는다.
      } else {
        _prevKeyCode = keyValue.keyCode;
        sendCommandData(keyValue.key, keyValue.keyCode);
      }
    } else {
      _prevKeyCode = keyValue.keyCode;
      sendCommandData(keyValue.key, keyValue.keyCode);
    }
  }
  */

  // 여러 로봇의 동시 제어를 위한 오리지널 코드(2022.9.7)
  if (keyValue.key === "keyup") {
    if (_controlKey.get(deviceId))
      _controlKey.get(deviceId)["prevKeyCode"] = null;
    else _controlKey.set(deviceId, { prevKeyCode: null });
    console.log("microbitControl", keyValue);
    if (isDriveKeyCode(keyValue.keyCode)) {
      if (
        _controlKey.get(deviceId)["moveKeyCode"] != null &&
        _controlKey.get(deviceId)["moveKeyCode"] != undefined
      ) {
        if (keyValue.keyCode == 38 || keyValue.keyCode == 40) {
          if (_controlKey.get(deviceId))
            _controlKey.get(deviceId)["moveKeyCode"] = null;
          else _controlKey.set(deviceId, { moveKeyCode: null });
          sendCommandData(keyValue.key, keyValue.keyCode);
          if (_controlKey.get(deviceId))
            _controlKey.get(deviceId)["prevKeyCode"] = null;
          else _controlKey.set(deviceId, { prevKeyCode: null });
        } else {
          sendCommandData("keydown", _controlKey.get(deviceId)["moveKeyCode"]);
        }
      } else {
        sendCommandData(keyValue.key, keyValue.keyCode);
        if (_controlKey.get(deviceId))
          _controlKey.get(deviceId)["prevKeyCode"] = null;
        else _controlKey.set(deviceId, { prevKeyCode: null });
      }
    }
  }

  if (keyValue.key === "keydown") {
    if (keyValue.keyCode == 38 || keyValue.keyCode == 40) {
      if (_controlKey.get(deviceId))
        _controlKey.get(deviceId)["moveKeyCode"] = keyValue.keyCode;
      else _controlKey.set(deviceId, { moveKeyCode: keyValue.keyCode });
      sendCommandData(keyValue.key, keyValue.keyCode);
    }
    if (
      _controlKey.get(deviceId)["prevKeyCode"] != null &&
      _controlKey.get(deviceId)["prevKeyCode"] != undefined
    ) {
      if (_controlKey.get(deviceId)["prevKeyCode"] == keyValue.keyCode) {
        //현재 키코드가 이전 키코드와 같으면 명령을 전송하지 않는다.
      } else {
        if (_controlKey.get(deviceId))
          _controlKey.get(deviceId)["prevKeyCode"] = keyValue.keyCode;
        else _controlKey.set(deviceId, { prevKeyCode: keyValue.keyCode });
        sendCommandData(keyValue.key, keyValue.keyCode);
      }
    } else {
      if (_controlKey.get(deviceId))
        _controlKey.get(deviceId)["prevKeyCode"] = keyValue.keyCode;
      else _controlKey.set(deviceId, { prevKeyCode: keyValue.keyCode });
      sendCommandData(keyValue.key, keyValue.keyCode);
    }
  }
};

export const robercControl = (
  keyValue: any,
  characteristics: BluetoothRemoteGATTCharacteristic
) => {
  //Send motion data via BLE
  const sendMotionData = (eventName: string, keyCode: any) => {
    console.log(`-----keyCode:${eventName}, ${keyCode}`);
    const commonValue = 20;
    if (characteristics) {
      const encoder = new TextEncoder();
      let value;
      if (eventName === "keydown") {
        if (keyCode == 38) {
          //Up
          value = { motion: { key: "forward", value: commonValue } };
        } else if (keyCode === 40) {
          //Down
          value = { motion: { key: "back", value: commonValue } };
        } else if (keyCode === 37) {
          //Left
          value = { motion: { key: "left", value: commonValue } };
        } else if (keyCode === 39) {
          //Right
          value = { motion: { key: "right", value: commonValue } };
        } else if (keyCode === 90) {
          //char:z, CW
          value = { motion: { key: "cw", value: commonValue } };
        } else if (keyCode === 88) {
          //char:x, CCW
          value = { motion: { key: "ccw", value: commonValue } };
        }
      } else if (eventName === "keyup") {
        value = { motion: { key: "stop", value: commonValue } };
      }
      if (value)
        characteristics.writeValue(encoder.encode(JSON.stringify(value)));
    }
  };
  //Send catch unit data via BLE
  const sendCatchUnitData = (eventName: string, keyCode: any) => {
    console.log(`-----keyCode:${eventName}, ${keyCode}`);
    const commonValue = 20;
    if (characteristics) {
      const encoder = new TextEncoder();
      let value;
      if (eventName === "keydown") {
        if (keyCode === 65) {
          //char:a, Catch on/off toggle
          value = { motion: { key: "catch", value: commonValue } };
        }
      }

      if (value)
        characteristics.writeValue(encoder.encode(JSON.stringify(value)));
    }
  };
  if (keyValue.key === "keyup") {
    console.log("robercControl: ", keyValue, characteristics);

    sendMotionData("keyup", keyValue.keyCode);
  }
  if (keyValue.key === "keydown") {
    if (keyValue.keyCode === 65) {
      //KeyCode(Catch unit: 65)
      sendCatchUnitData("keydown", keyValue.keyCode);
    } else {
      //KeyCode(Up: 38, Down: 40, Left: 37, Right: 39)
      sendMotionData("keydown", keyValue.keyCode);
    }
  }
};

// eslint-disable-next-line @typescript-eslint/ban-types
export const deviceTest = (uartService: any, EndTest: Function) => {
  let timer: ReturnType<typeof setInterval>;

  const keyValue = {
    key: "keydown",
    keyCode: 38,
  };
  // back 40
  // left 39
  // right 90
  let timerL = 0;
  const deviceId = "test";

  const stop = () => {
    keyValue.key = "keyup";
    microbitControl(keyValue, uartService, deviceId);
  };
  try {
    if (uartService) {
      microbitControl(keyValue, uartService, deviceId);

      timer = setInterval(() => {
        timerL++;
        if (timerL === 1) {
          stop();
          keyValue.key = "keydown";
          keyValue.keyCode = 40;
          microbitControl(keyValue, uartService, deviceId);
        }
        if (timerL === 2) {
          stop();
          keyValue.key = "keydown";
          keyValue.keyCode = 39;
          microbitControl(keyValue, uartService, deviceId);
        }
        if (timerL === 3) {
          stop();
          keyValue.key = "keydown";
          keyValue.keyCode = 90;
          microbitControl(keyValue, uartService, deviceId);
        }
        if (timerL === 4) {
          stop();
          clearInterval(timer);
          EndTest();
        }
      }, 1000);
    }
  } catch (err) {
    console.log("deviceTest Error : ", err);
  }
};

effectSound.ts : 로봇의 사운드를 컴퓨터에서 나오도록 구현

typescript

import { Howl } from "howler";
import move_sound from "assets/Audio/move_sound.wav";
import tongs_move from "assets/Audio/tongs_move.wav";
import tongs_open from "assets/Audio/tongs_open.wav";
import { useStoreRoom } from "../store/room";
import { useStoreGuestRoom } from "../store/guestRoom";

const move = new Howl({
  src: [move_sound],
  loop: true,
  sprite: {
    track01: [400, 400],
  },
});
const 집게열기 = new Howl({
  src: [tongs_open],
});
const 집게올리기 = new Howl({
  src: [tongs_move],
});

interface keyState {
  type: string;
  function: string;
  code: number;
  isSound: boolean;
}

export class effectSound {
  // 추가된 사항. ping을 던짐.
  private static instance: effectSound;
  private keyCodeDrive: number[];
  private keyCodeFunction: number[];
  private keyState: keyState;
  private keyQueue: string[];
  private oldQueueLeng: number;

  constructor() {
    this.keyCodeDrive = [38, 40, 37, 39, 90, 88];
    this.keyCodeFunction = [65, 83];
    this.keyState = {
      type: "",
      function: "", // drive,func
      code: 0,
      isSound: true,
    };
    this.keyQueue = [];
    this.oldQueueLeng = 0;
  }
  //65 Catch Unit
  //83 Crane
  public static getInstance(): effectSound {
    if (!effectSound.instance) {
      effectSound.instance = new effectSound();
    }
    return effectSound.instance;
  }
  testKeyEvent() {
    const key = (e: KeyboardEvent) => {
      this.getKeyState(e);
    };
    document.body.addEventListener("keydown", key, true);
    document.body.addEventListener("keyup", key, true);
  }
  soundOff() {
    if (move) move.stop();
  }
  getKeyState(k: KeyboardEvent) {
    // console.log("key", this.onKeyDown);
    this.keyState.type = k.type;
    const setKeyFunction = () => {
      for (const index in this.keyCodeDrive) {
        //   console.log(k.keyCode, Number(index));
        if (k.keyCode === this.keyCodeDrive[index]) {
          this.keyState.function = "drive";
          break;
        }
      }
      switch (k.keyCode) {
        case 65:
          this.keyState.function = "CatchUnit";
          break;
        case 83:
          this.keyState.function = "Crane";
          break;
      }
    };
    setKeyFunction();
    if (!this.keyState.isSound && this.keyState.code !== k.keyCode) {
      this.keyState.isSound = true;
    }
    // {
    //     this.keyQueue.push(this.keyState.type)
    // }
    if (this.keyState.type === "keydown" && this.keyState.isSound) {
      this.onSoundBeta(this.keyState);
      this.keyState.code = k.keyCode;
      this.keyState.isSound = false;
    }
    if (this.keyState.type === "keyup") {
      this.onSoundBeta(this.keyState);
      this.keyState.isSound = true;
    }
  }
  onSoundBeta(keyState: keyState) {
    console.log(this.keyState.type, this.keyState.isSound);

    if (this.keyState.type === "keydown") {
      this.keyQueue.push(keyState.function);

      switch (keyState.function) {
        case "drive":
          if (this.keyQueue.length === 1) {
            move.play("track01");
          }
          break;
        case "CatchUnit":
          집게열기.play();
          break;
        case "Crane":
          집게올리기.play();
          break;
      }
    } else {
      this.keyQueue.splice(0, 1);
      if (this.keyState.isSound) {
        this.keyQueue.length = 0;
      }
    }
    if (this.keyQueue.length === 0) {
      if (move) move.stop();
    }
  }
  onSound(cmd: string) {
    let soundFlag = false;

    const roomStore = useStoreRoom();
    const guestStore = useStoreGuestRoom();
    if (cmd === "ST") {
      // if (lr_interval) clearInterval(lr_interval);

      //CW,CC 좌우회전
      //FW,BW 상하
      //L, R 왼쪽 오른쪽이동
      soundFlag = false;
    } else if (cmd === "FW" || cmd === "BW") {
      if (!soundFlag) move.play("track01"); // 상하
      soundFlag = true;
    } else if (cmd === "CW" || cmd === "CC" || cmd === "L" || cmd === "R") {
      //좌우
      soundFlag = true;
    } else if (cmd === "CR") {
      if (
        roomStore.gameInfo.title === "PickDrop" ||
        guestStore.gameInfo?.title === "PickDrop"
      ) {
        집게열기.play();
      }
    } else if (cmd === "CT") {
      집게올리기.play();
    }
    //sound
  }
}

다음 프로젝트에서 도입하기 위해 공부한 기술

Playwright
Jest
DesignPattern
webWorker

프로젝트 소개

🔧 기술 & 라이브러리

새로운 도입

이슈

CI/CD

WebCodec 도입

Tailwindcss 도입

직접 기술도입 & 테스트봇 개발 후 제안

프로젝트에서 성장한 부분

웹 기획

디자이너와의 협업

유지보수를 위한 고민

다음 프로젝트에서 도입하기 위해 공부한 기술

Youtube : Link