Jaaack

About

프론트엔드 개발자 공재혁입니다. 웹 백오피스 빌더를 개발하면서 많은 기능과 복잡한 인터랙션들을 안정적으로 제공할 수 있도록 기여했습니다. 웹에서 나타나는 다양한 문제들을 해결하고 어플리케이션이 계속해서 발전해 나갈 수 있도록, 팀이 겪고 있는 가장 어려운 문제들을 찾아 해결해왔습니다.

Career

Hops Screenshot, shows a list of recommended posts

Hops Screenshot, shows personal information and a list of posts

Hops

2023.07 -

데이터 소스를 연결해 워크플로우를 활용하고, 다양한 컴포넌트를 추가해 어드민 페이지를 만들고 관리할 수 있는 웹 백오피스 빌더를 만드는 홉스에서 프론트엔드 개발자로 일했습니다.

워크플로우 및 페이지 기능 추가

AI 워크플로우 편집 및 AI 페이지 생성 기능을 추가했습니다.
사용자가 별도의 커스텀 컴포넌트를 추가할 수 있는 기능을 작업했습니다.
슬랙, 구글 드라이브, 구글 시트와 같은 다양한 데이터 소스를 연동할 수 있도록 작업을 맡았습니다.
탭 버튼, 슬라이더 등의 컴포넌트를 추가하는 작업을 맡았습니다.
테이블 컴포넌트 기능을 추가하는 작업을 맡았습니다. 행 선택 및 정렬, 필터링, 페이지네이션 기능을 추가했습니다.
Unit Test Code를 작성하고 체계화했습니다. 주요 컴포넌트 및 코어 로직에서 테스트 커버리지가 90% 이상 유지되도록 기여했습니다.

페이지 편집 기능 안정화

컴포넌트 드래그 선택 기능을 작업했습니다. 드래그 안정성을 높이고 컴포넌트 순서 이동 및 멀티 컬럼 생성이 용이하도록 작업했습니다.
컴포넌트를 shortcut으로 생성할 수 있도록 기능을 작업했습니다.
페이지 편집 기능을 플러그인으로 제공하도록 작업했습니다.

에디터 내 의존성 상태 관리

사용자가 입력한 전용 템플릿 언어를 기반으로 의존성이 연결돼, 컴포넌트가 워크플로우의 결과값을 바탕으로 렌더링되고 컴포넌트에서 변경한 상태가 워크플로우에 반영되는 의존성 관리 기능을 작업했습니다.
의존성 관리 시 지나치게 워크플로우가 자주 실행되거나 컴포넌트 상태가 초기화되는 문제를 해결했습니다.
자식 컴포넌트, 배열 형태의 컴포넌트 등의 복잡한 상태 관리구조를 처리할 수 있도록 작업했습니다.

업무 프로세스 간소화

기존의 Storybook을 활용해 적은 리소스로 관리할 수 있는 Hops Design-System 문서 시스템을 구축했습니다.

Projects

Receiptally Screenshot, shows a list of recommended posts

Receiptally Screenshot, shows personal information and a list of posts

Receiptally Screenshot, shows a list of hot posts

레싯톨리

2024 • 2인 팀 프로젝트 • 프론트엔드 및 디자인

영수증 이미지를 업로드하면 OCR → 항목 분류 → 세무용 CSV/Excel 내보내기 과정을 자동화한 서비스입니다. 프론트엔드 및 디자인을 맡아 작업했습니다.

UnoCSS를 기반으로 커스텀 디자인 토큰 프리셋을 제작해 사용했습니다. 컬러 및 타이포그래피, 스페이싱에서 디자인 의도가 코드에서 그대로 매칭될 수 있도록 해 디자인 언어를 정의했었습니다.

Vaco Blog Screenshot, shows a list of recommended posts

Vaco Blog

2024 • 2인 팀 프로젝트 • 프론트엔드 • Site Link • Github Link

여러 개발 블로그 글을 한 곳에 모아 읽을 수 있는 프로젝트입니다. RSS Feed 기반으로 사용자들의 포스트들을 확인하고 인기있는 글들을 확인할 수 있도록 했습니다.

Jaam Toast Deploy Page Screenshot. Shows a selectable list of repositories

Jaam Toast Deploy Page Screenshot, shows a setting options for deploy

Jaam Toast Deploy Page Screenshot, shows a deploy progress logs

Jaam Toast Project Page Screenshot, shows a form to create a new schema

Jaam Toast

2023 • 2인 팀 프로젝트 • 프론트엔드 및 백엔드 • Frontend Github Link • Backend Github Link

Vercel에 영감을 받아 만든 웹 서비스 배포 서비스입니다. GitHub 연동으로 정적 블로그를 빌드, 배포하고, CMS 기능을 더해 각 포스트 컬렉션의 스키마를 지정해 포스트를 관리할 수 있도록 했습니다.

AWS 서비스들을 이용해 Vercel만큼 빠르고 안정적인 배포 시스템을 구축할 수 있을까?하는 문제에 도전했던 프로젝트입니다. 이벤트 기반 구조를 적용해 비동기로 진행할 수 있는 작업이 한 번에 진행할 수 있도록 했습니다.

Crudify Dashboard Home Page Screenshot, shows a button to create a new collection

Crudify Dashboard Collection Page Screenshot, shows API endpoint settings

Crudify Screenshot, shows a loading indicator while waiting for the server to restart

Terminal Screenshot, shows a command to create a new project

Crudify

2022 • 개인 프로젝트 • 프론트엔드 및 CLI 작업 • Github Link

단일 CLI 명령으로 CRUD API 서버와 대시보드를 즉시 생성하게 해주는 도구입니다. ‘파일’을 진실의 원천으로 런타임에 엔드포인트가 생성되는 Express 서버가 구동될 수 있도록 했습니다.

파일 내용을 변경하거나 서버를 재시작하는 등 서버를 제어할 수 있는 웹 대시보드를 만들었던 프로젝트입니다.

PPTHub Upload Page Screenshot, shows a uploaded PPT file and a button to upload another file

PPTHub

2022 • 3인 팀 프로젝트 • 프론트엔드 및 백엔드 • Github Link

PPT(파워포인트) 파일도 코드처럼 Diff & Merge 할 수 있지 않을까? 하는 아이디어에서 출발한 프로젝트입니다.

외부 라이브러리를 쓰지 않고 PPT 파일을 파싱해 각 슬라이드 별 데이터를 추출해 슬라이드가 렌더링 되고 변경 사항을 diff로 표현할 수 있도록 했습니다.

추가 혹은 제거된 슬라이드와 변경 된 슬라이드를 구분하기 힘들었는데, 슬라이드 별 고유 id를 key로 사용해 각 슬라이드를 구분해 비교했습니다.