미리보기

askyour.trade 서비스 개발

AI를 활용하여 무역 업무에서 발생하는 비정형화되고 반복적인 작업을 자동화하여 효율성을 극대화하는 솔루션 서비스

• MVP 이후부터 참여하여 제품을 고도화 및 안정화하여 정식 오픈

• Headless UI 라이브러리를 이용하여 사내 디자인 시스템

• 메일 서비스, 수입화물조회, 대시보드, canvas를 이용한 PDF 파일 편집

• 사용자 피드백을 위한 채널톡 무료 플랜 도입

위메프 특가 상품 프로세스 개선

• 스쿼드 체제로 위메프 특가 상품 등록 프로세스 개선 작업 참여

  • 더미 데이터 개선

  • 등록 절차 간편화 & 등록 문의 횟수 감소

  • 상품 리뷰 통합

위메프 상품 카탈로그 어드민

• FE 관련 기능 개발

• 신규 메뉴, 신규 페이지 개발에 필요한 보일러플레이트 코드 생성 CLI 개발

  • 개발 리소스 감소

• eslint를 이용하여 코드 품질 향상 및 스타일 통일 작업

• Vue2 -> Vue3 마이그레이션

위메프 여행레저

• 숙박 상품의 날짜별 캘린더의 가격 표시 개발을 통해 사용자 경험 개선 작업 수행

• JSP로 구성된 공연티켓 프로젝트의 FE 코드 분리 후 개발 환경 개선 및 팀 내 스펙 통일화 작업

  • Vue 프로젝트로 리팩토링

PDF 파일의 도장 이미지를 삽입하는 기능을 제공하는 페이지 입니다.

• 작업

  • PDF 파일의 페이지를 canvas를 통해 도장 이미지 삽입 기능 개발

  • 다량의 페이지 작업시 일괄 도장찍기 기능

• 기술스택

  • fabric.js, pdf.js, pdf-lib, zustand, react-query

수입 화물을 등록하면 주기적으로 최신화 진행 및 변경점을 알림과 하이라이트를 통해 사용자에게 알려주는 모니터링 페이지 입니다.

• 작업

  • 등록한 화물을 10초마다 조회 API를 통해 상태 최신화 및 변경된 값에 대한 알림, 하이라이트 기능 개발

  • 부모 윈도우와 팝업의 상태 동기화되도록 개발

  • 동기화 진행중인 열에 대하여 개별적인 애니메이션 추가

• 기술스택

  • react-query, Notification API, framer-motion, zustand

메일 기능 + 무역업 도움이 되는 편의 기능을 탑재한 서비스입니다.

• 작업

  • 메일 수신, 발신, 회신, 전달 기능, 서명 기능 개발

  • 한/영 무역 용어 번역기, 메일 초안 작성, 오타 검사기, 본문 뉘앙스 수정 컴포넌트를 개발하여 메일 발신 화면, 기능 단독 메뉴, 랜딩 페이지에서 재사용

  • SSE와 Notification API를 이용하여 유저가 서비스 접속시 메일 수신 알림 기능 개발

• 기술스택

  • froala-editor, SSE, Notification API, react-query, zustand

위메프 특가 상품 등록 프로세스를 간편화하고 파트너사의 서비스 사용 경험을 개선하기 위해서 만들어진 스쿼드 체제 팀에 합류

• 작업

  • 특가 상품 등록 메뉴 통합

  • 상품 검수 자동화

  • 등록된 특가 상품 예약 오픈 시스템 도입

    • 등록된 특가 상품 재사용 가능

• 성과

  • 특가 상품의 더미 데이터 축척 감소

  • 상품 리뷰 통합

  • 파트너사의 특가 상품 등록 문의 횟수 감소

• 기술스택

  • react, recoil

어드민 특성상 비슷한 layout을 가진 화면 개발 이슈가 자주 요청되는 것을 확인 후 반복적인 작업에대한 CLI 도구를 개발

같은 패턴으로 생성되는 보일러플레이트 코드와 반복적으로 추가되는 코드를 확인한 후, CLI를 통해 화면에 대한 정보를 입력받으면 Menu, Layout, Router, Store 등 각 경로에 맞는 파일을 생성하고 코드를 추가해주는 도구를 개발하여 프로젝트에 적용

• 작업

  • 반복적으로 생성되는 파일과 코드를 파악

  • 신규 파일이 필요한 경우 ejs 를 사용한 template 코드를 작성하여 개발

  • 기존 코드에 새로운 코드를 주입해야 하는 경우 정규식을 이용하여 cli를 통해 전달받은 인자를 통해 동적으로 코드 생성 및 주입

• 성과

  • 개발 리소스 감소

  • 개발 가이드 역할, 쉬운 러닝 커브

• 기술스택

  • hygen,

    Vue

Vue3 에서 핵심적으로 사용중인 Composition API를 현재 프로젝트에 도입하여 mixin 과 기능 일부를 hook 기반으로 변경하며 점진적인 버전 업그레이드 작업을 수행

• 작업

  • Composition API : optional → compositional

  • vuex -> pinia

  • mixin -> hook

• 성과

  • Composition API를 도입하면서 TS 추론기능 향상 및 hook 기반으로 더 유연한 개발이 가능

  • vue3 의 proxy 방식은 객체기반의 상태 변화를 감지하는데 더 효과적으로 작동

  • 전역 상태관리를 vuex에서 pinia로 수정하면서 보일러플레이트 코드 감소

• 기술스택

  • Vue, pinia