미리보기

• 2021. 11 ~ 2021. 12 2개월간 Dr.Listen 모바일 앱 개발자로 인턴 근무를 하다 2022년 1월 정규직으로 제네시스랩의 웹프론트엔드팀의 팀원으로 합류

• Dr.Listen 모바일 앱 서비스를 시작으로, 사내에서 운영 중인 다양한 서비스의 웹 개발 담당

• 외국인 관광객 대상으로 국내 투어 가이드 서비스를 제공하는 여행사 원데이코리아의 웹 서비스 풀스택 개발

• 인공지능 챗봇 서비스 Tumakr 및 사내 상품 데이터를 조회하기 위한 서버 개발 담당

Viewinter HR Admin, Company 개발

• 기업용 영상 면접 서비스 Viewinter HR 서비스를 보조하기 위한 백오피스 웹 서비스

• 프론트엔드 개발 담당

개발 스택

• TypeScript/JavaScript, React, React Router, MUI, Redux, Redux Saga, Axios

• 기타: ESLint, Prettier

JavaScript -> TypeScript 적용

• JavaScript로 작성된 오래된 코드를, 새로 적용한 TypeScript 환경에 맞게끔 Migration 처리를 지속적으로 진행

• IDE내의 Type Hint가 원활하게 동작하는 것을 주 목적으로 하였고, 필요에 따라 JSDoc을 함께 이용하며 구 버전의 코드가 TypeScript 환경에서 원활하게 동작할 수 있게 처리

Bullet List를 지원하는 텍스트 편집기 개발

• Markdown 편집기와 유사하게 동작하는 텍스트 편집기 개발

• - 하이픈을 이용하여 bullet list를 만들 수 있고, 엔터 키를 통한 줄바꿈 시 들여쓰기에 따라 알맞은 depth의 bullet item을 생성

Dr.Listen Agent 웹 개발

• Dr.Listen 서비스 이용을 보조하는 AI 챗봇 에이전트를 서비스하기 위한 웹 개발

• 프론트엔드 개발 담당

개발 스택

• TypeScript, React, GraphQL, Apollo Client, Styled Components, Vite

• 기타: ESLint, Prettier, MSW, GraphQL Code Generator

모바일 앱과의 통신

• 모바일 앱 내부에서 웹뷰를 통해 서비스될 목적으로 개발되어, 모바일 기기와의 데이터 전송 처리 적용

챗봇 모델과의 채팅 로직 구현

• 전송된 채팅에 대한 서버의 응답을 수신하기 위해 Polling 방식의 네트워크 처리 적용

Zuicy(쥬씨) Studio 웹 개발

• 인터랙티브 콘텐츠를 서비스하는 엔터테인먼트 모바일 앱 Zuicy의 콘텐츠를 만드는 웹 에디터

• 프론트엔드 개발 담당

개발 스택

• React, TypeScript, ReactFlow, Recoil, GraphQL, Apollo Client

• 기타: ESLint, Prettier

콘텐츠 만들기에 필요한 파일 관리 기능 개발

• 트리 형태로 반복되는 폴더/파일 컴포넌트를 재귀 방식으로 구현하여 여러 단계의 Depth를 갖게 처리

• "열림" 상태가 아닌 폴더의 데이터를 불필요하게 호출하지 않도록 Lazy Load 방식 적용

• Drag-Drop을 이용한 파일/폴더 다중 이동 및 업로드 처리 구현

Recoil을 이용한 트리 구조 데이터 관리 최적화

• 디렉토리 트리 구조를 Recoil의 atomFamily로 관리

• 변경사항이 있는 특정 디렉토리 내의 상태값만을 업데이트하여 불필요한 메모리 업데이트를 최소화

Dr.Listen(닥터리슨) 모바일 앱 개발

• 정신건강 자가평가 서비스를 제공하는 모바일 앱 서비스

  • iOS(App Store) /

    Android(Google Play)

  • https://home.drlisten.ai/

• 프론트엔드 개발 전담,

  React Native를 이용하여 iOS, Android 동시 개발 진행

• 앱 스토어, 플레이 스토어 심사 및 배포, 인앱 상품 등록, 다국어 상품 페이지 등록 등 마켓 퍼블리싱 관련 작업 경험

• 프로젝트를 초기 단계부터 단독으로 개발하여 2022년 7월 7일 성공적으로 서비스를 런칭

  • 2022년 7월 서비스를 시작으로 2024년 현재까지 연 200% 회원가입 성장

개발 스택

• TypeScript, React Native, Redux, Redux Toolkit, GraphQL, Apollo Client, Realm

• 기타: Apollo Server(NodeJS), GraphQL Code Generator, Sentry, MSW, ESLint, Prettier, Detox

복약 알림 기능 개발

• 매주, 매일, 격주 등의 단위로 동작하는 로컬 푸시 알림 스케줄 등록

  • 반복 스케줄러 등록이 불가능한 패턴으로 인해 스케줄을 지나치게 많이 등록해야 하는 문제

  • 서버로부터 정기적으로 데이터 푸시 알림을 전달받아, 백그라운드로 푸시 알림 스케줄을 갱신하도록 처리

• 전화 알림 기능

  • "전화 알림" 기능의 구현을 위해 타 서비스의 동작 방식을 분석

  • 네트워크가 연결된 상태에서만 동작한다는 점을 파악하여, 서버의 데이터 푸시 알림을 이용하여 동작 구현에 성공

로컬 데이터베이스 관리

• 네트워크 문제가 생겼을 때 유실될 수 있는 "기록하기" 기능의 데이터 보존을 위해 로컬 데이터베이스에 저장

  • 서버-클라이언트 데이터베이스간의 데이터 동기화 로직 구성

  • 다양한 형식의 "기록하기" 데이터를 한 번에 관리할 수 있도록 데이터베이스 스키마 정의

• 자주 업데이트되지 않는 "정신건강 기관 정보 지도" 서버 데이터를 매번 요청하지 않도록 로컬 데이터베이스에 저장

  • 서버 데이터와의 버전 관리로 최신화가 필요한 경우에만 신규 데이터를 요청

GraphQL, Mock 서버를 통한 생산성 향상

• 백엔드 개발자의 리소스 문제로 서버 개발보다 먼저 프론트엔드 로직 개발이 필요한 상황

• 기능 기획 단계부터 직접 참여하여 백엔드 개발자와 서버 API에 대한 스키마를 함께 설계함

• 완성된 GraphQL 스키마를 기반으로 Mock 서버를 구현하여 프론트엔드 개발을 먼저 진행

• GraphQL Code Generator를 이용하여, TypeScript의 타입들을 자동 생성

CodePush를 이용한 실시간 앱 업데이트

• 앱 심사로 인해 2~3일정도 소요되는 스토어 업데이트를 대신하는 업데이트 방식 도입

• 버그 수정이나 기능 배포를 훨씬 더 자주 수행하여 서비스에 다양한 시도를 할 수 있는 환경 구성

인공지능 챗봇 Tumakr 웹 개발

• 외국인 관광객 대상의 24시간 응대를 위한 인공지능 챗봇 서비스

• 풀스택 개발 담당

개발 스택

• 서버: Python, Django, MySQL, Rasa

• 클라이언트: Python, Flask, JavaScript, jQuery, css

• 기타: Python, chatette

백엔드 API 구현

• 자사 상품 데이터를 저장하고 불러오기 위한 서버를 Python의 Django 프레임워크와 MySQL로 구성

• Python을 사용하는 챗봇 프레임워크 Rasa를 이용하여 사용자 메시지에 대한 응답 처리 구현

프론트엔드 챗봇 페이지 개발

• Python의 Flask 프레임워크로 웹 서버 구성

• 순수 html, css를 이용하여 요소를 디자인하고, jQuery를 이용하여 버튼 등의 상호작용 요소를 구현

챗봇 학습 데이터 수집 및 전처리

• 이메일을 통해 자주 문의/답변되는 내용을 챗봇의 데이터로 학습

  • Python을 이용하여 메일 데이터를 추출하는 스크립트를 작성

  • chatette 라이브러리를 이용하여, 부족한 학습 데이터를 템플릿을 통해 생성하여 챗봇 모델 생성에 적용