본문으로 건너뛰기

LearnQue

구분내용
프로젝트명LearnQue
개발 기간2021.12 ~ 2022.07 (현재 사업 중단)
가담 인원 (개발/비개발)3명/3명

개요​

LearnQue는 랩이즈에서 개발한 완전 모듈형 드론 기반의 체감형 블록코딩 교육 솔루션으로, 단순히 드론 조종, 기본 프로그래밍에서 끝나는 것이 아니라 택배모듈, 소방모듈 등 실제 현장에서 만나볼 수 있는 교육을 지향하였습니다.

공동창업자로써 심층 인터뷰와 정책 동향에 기반한 설득력있는 투자 유치 활동으로 울산청년창업사관학교, 창업 300 밸류-UP 등 국가/민자 엑셀러레이팅 프로그램을 유치, 수료하였으며, 이 과정에서 창업과 벤쳐 업계에 관한 심도 있는 이해를 가질 수 있었습니다.

또한 하이브리드 애플리케이션을 개발하며, 블록코딩 UI, 블록코드 컴파일러, 시리얼 통신 등 처음 접하는 문제를 해결해 나가는 과정에서 기술적으로 많은 것을 배울 수 있었습니다.

Showcase​

정보

아래 링크에서 더 많은 Showcase를 확인할 수 있습니다.

https://github.com/01Joseph-Hwang10/dbcav3#showcase

주요 기술 스택​

구분기술 스택
언어Typescript
프레임워크React Native
UI 라이브러리@react-navigation, raect-native-redash, styled-components
상태 관리redux, @reduxjs/toolkit
시리얼 통신react-native-ble-plx
유틸리티react-hook-form

업무 경험 및 성과​

서비스 기획을 위한 심층 인터뷰 진행​

Service PlanningCommunication@labis
  • 울산광역시 중구/북구/문수/성남/동구 청소년문화의집 등 울산 내의 많은 방과후 교육 기관을 방문해 데이터 수집함.
    • 시장의 수요 파악을 위해 타겟인 프리랜서 강사 및 청소년문화센터 담당자와의 심층 인터뷰 진행함.
  • => 심층인터뷰를 통한 데이터 수집 과정을 통해 인터넷 서칭으로는 찾을 수 없는 실질적인 현장의 Pain Point를 파악할 수 있었음.
  • => 이후 엑셀러레이팅 프로그램 유치에 큰 영향

엑셀러레이팅 프로그램 유치를 위한 사업계획서 및 피치덱 작성​

Project Management@labis
정보

아래 링크에서 위의 피치덱을 확인할 수 있습니다.

https://drive.google.com/file/d/1HczhzUcrE3G31cn9tiu6fXh3vUofvIdq/view?usp=sharing

Observer 패턴을 활용한 상태 관리​

FrontendImprovement@labis
  • Redux에 과도하게 의존적인 코드로 복잡한 블록코드 UI 개발에 비효율이 발생함.
  • 이에 이벤트를 관리하는 EventRegistry 클래스를 구현하여, EventRegistry.emit 을 통해 이벤트를 발생시키고, EventRegistry.on 을 통해 이벤트를 구독하는 방식으로 상태 변경 사항을 관리하게끔 상태 관리 방식을 대거 수정함.
  • => 불필요한 Redux 사용을 줄이고 코드 유지보수가 효율화
EventRegistry
class _EventRegistry {
  private events: Record<string, Event<any>> = {};

  public on<T = any>(eventName: string, callback: Event<T>): string {
    this.events[eventName] = callback;
    return eventName;
  }

  public remove(eventName: string) {
    delete this.events[eventName];
  }

  public removeAll() {
    this.events = {};
  }

  public emit<T = any>(eventName: string, data?: T, strict?: boolean) {
    const event = this.events[eventName];
    if (event) {
      event(data);
      return;
    }
    if (strict) {
      handleError(`Event ${eventName} not found`);
    }
  }
}
See Also​

OOP를 활용한 블록 코드의 블록 정의 개발​

FrontendFeature@labis
  • 각 블록정의는 AbstractBlock을 상속하고 actionChain이라는 메서드를 구현해야하며, 이 메서드는 상속과 참조를 통해 Redux Store로 연결되는 액션의 체인을 구성함.
  • => AbstractBlock을 종점으로 상태 관리에 있어 단순함을 유지하며, OOP에 기반해 블록 정의의 확장성을 높임.
See Also​

ESP32와 react-native-ble-plx를 활용한 드론 블루투스 통신부 개발​

FrontendFeature@labis
  • react-native-ble-plx의 제공 API가 Bluetooth 연결 가능한 디바이스를 활용하는데 있어 비교적 저수준의 API만 제공해 코드가 복잡해지는 문제가 있었음.
  • Prototype extension을 통해 react-native-ble-plx의 API를 확장하고, 이를 활용해 ESP32와의 블루투스 통신부를 깔끔하게 구현함.
  • => Javascript가 prototype based language라는 특성을 활용해 라이브러리의 API를 확장함으로써 코드의 복잡성을 줄임.
Prototype Extension Example: Device
import { CustomSnackBars } from "@src/components/common/utilities/snackbars";
import { Nullable } from "@src/utils/types";
import { Device, Characteristic } from "react-native-ble-plx";

declare module "react-native-ble-plx" {
  // eslint-disable-next-line no-shadow
  interface Device {
    exploit(): Promise<Nullable<Device>>;
    allCharacteristics(): Promise<Characteristic[]>;
    use(characteristicUUID: string): Promise<Nullable<Characteristic>>;
  }
}

Device.prototype.exploit = async function () {
  try {
    await this.connect();
    await this.discoverAllServicesAndCharacteristics();
    return this;
  } catch (error) {
    CustomSnackBars.somethingWentWrong();
    return null;
  }
};

Device.prototype.allCharacteristics = async function () {
  const services = await this.services();
  const characteristics: Characteristic[] = [];
  for (const service of services) {
    characteristics.push(...(await service.characteristics()));
  }
  return characteristics;
};

Device.prototype.use = async function (characteristicUUID: string) {
  const characteristics = await this.allCharacteristics();
  return characteristics.find(
    (characteristic) => characteristic.uuid === characteristicUUID,
  );
};