미리보기

• AI 기반 비즈니스 리서치 서비스 풀스택 개발

• 온라인 직무 테스트 서비스 개발

• 효율적인 통합 채용을 위한 지원자 관리 시스템(ATS) 개발

• 기존 서비스 유지보수 및 개발 문화 개선

• Vanilla JS 기반 Chart Solution 패키지 기능 개발

기술 스택

Next.js, React Query, Tailwind, Shadcn, React Email, Nest.js, TypeORM, MySQL

Achievements

• AI 기반 비즈니스 리서치 솔루션을 성공적으로 개발하고 베타 서비스 오픈

• 효과적이고 빠른 개발을 위해 새로운 UI 라이브러리 도입 추진

• 각 기능의 프론트엔드와 백엔드를 모두 담당하여 업무 속도와 효율성 향상 및 커뮤니케이션 비용 감소

What I did

프론트엔드 개발:

• React Query를 사용하여 데이터 Fetching과 API 모듈화를 통해 효율적인 데이터 관리

• custom hook 사용하여 기능 모듈화

• Next.js API Routes를 활용하여 외부 이미지 로딩 시 발생하는 CORS 문제를 해결하고 이미지 렌더링을 최적화 함

• 특정 유저 혹은 특정 비율의 유저에게만 기능을 공개하는 Feature Flag를 활용한 유연한 기능 배포 관리

• Headless UI를 활용하여 스타일의 중복 코드를 최소화하고, 효율적인 컴포넌트화를 통해 재사용

• Tailwind CSS의 레이어 기능과 변수를 사용하여 변화에 유연한 CSS 시스템 구현

백엔드 개발:

• Nest.js와 TypeORM 사용하여 MySQL 데이터베이스와 연동하여 백엔드 로직과 데이터 관리 구현

• 20여가지 다양한 리포트 종류를 유연하게 대응하기 위해 ReportDto 구조 설계

• 사용자의 활동에 따라 크레딧을 부여하고 리포트 생성시 사용하는 크레딧 시스템 개발

• 사용자가 생성한 리포트를 다른 사용자와 공유할 수 있는 리포트 공유 기능 구현

기술 스택

TypeScript, Next.js, React Query, Emotion, i18n

Achievements

• 프론트엔드 개발을 통해 온라인 직무 테스트 서비스를 성공적으로 개발하고 베타 서비스 오픈

What I did

• MediaRecorder와 Blob API를 활용하여 응시자가 영상을 촬영, 업로드, 재촬영할 수 있는 기능 구현

• 단일 웹캠 스트림으로 두 개의 독립적인 녹화를 제어할 수 있는 비디오 레코더 구현

• Blob 데이터를 효율적으로 관리하여 응시자의 영상 데이터 처리 최적화

• 채팅형 질의 UI에서 새로 고침 혹은 재접속을 고려한 자연스러운 스크롤 이벤트 구현

• 국제화(i18n)를 사용해 다국어 지원

• TS를 활용해 평가 종류와 같은 개념을 명확히 정의하여 코드의 타입 안전성과 일관성을 강화

• 동일 서비스 내에서 2개의 유저 세션(관리자, 응시자)이 독립으로 동작할 수 있도록 권한 분리에 집중해서 개발

기술 스택

React, Redux Toolkit (RTK), SCSS, Firebase, i18n

Achievements

• 개발한 ATS(지원자 추적 시스템) 서비스는 한 공고당 평균 200명의 지원자를 성공적으로 관리

• 기존 회사 메인 프로덕트와의 뛰어난 연동성으로 대형 고객사를 성공적으로 유치

• 프로젝트 플래닝을 담당해 주도적으로 일정을 산정하고 목표를 달성하는 능력을 키워 긍정적인 동료 평가 및 연봉 인상

What I did

• HR 담당자가 채용 공고 생성, 면접 평가, 서류 제출, 오퍼레터 발송 및 수락 추적 등 채용 절차의 모든 단계를 공고별로 독립적으로 관리할 수 있는 기능을 개발

• 지원자가 링크를 통해 지원하면, 각 단계별 진행 상황을 실시간으로 추적하고 데이터베이스에 축적하는 시스템 개발

• 4가지 사용자(워크스페이스 오너, 채용 담당자, 면접관, 지원자) 권한에 따른 접근 제어 및 사용자 인터페이스 구성

• Firebase를 활용한 서버리스 아키텍처로 데이터 CRUD 작업 및 로직 구현

• 효율적인 데이터 관리를 위한 NoSQL 데이터베이스 구조 설계 및 최적화

기술 스택

JavaScript, ESLint, Prettier, Sentry, TypeScript

Achievements

• ESLint와 Prettier 도입으로 코드 컨벤션을 정립하고, 피어 리뷰 문화를 구축하여 코드 가독성과 품질을 대폭 개선

• 기존 직접 database client console에서 진행하던 반복 작업을 모듈 개발하여 업무 효율 향상

• 3개월 내에 매일 10~15개의 오류 알림이 발생하던 상황을 열흘에 1개로 줄이며, 코드의 안정성과 신뢰성을 대폭 향상

• 깃 브랜치 전략 및 커밋 메시지 컨벤션을 문서화하여, 새로운 개발자들이 쉽게 적응할 수 있도록 함

What I did

• Sentry replay 데이터를 활용하여 사용자 행동을 분석하는 케이스 스터디를 진행하여 UI/UX 개선 방안을 도출

• Sentry 연동을 통해 실시간 오류 모니터링 및 슬랙 알림 설정으로 신속한 오류 대응 체계 구축

• 매일 Sentry 오류 수정을 통해 자바스크립트 오류 유형과 해결 방법을 학습, 코드 품질을 지속적으로 개선

• 자바스크립트의 동적 특성과 이로 인한 문제점을 해결하기 위해 이후 프로젝트에서 타입스크립트를 도입

기술 스택

Vanilla JS, raphael.js, SVG

Achievements

• 마우스 이벤트에 따른 svg의 path를 계산하여 차트 영역 위에 십자선과 세부 정보 제공 기능 구현

• 사용자가 원하는 영역을 입력받아 svg의 path를 계산하여 차트 영역 위에 표현하는 기능 개발

What I did

• 다양한 브라우저 엔진에 대한 이해를 바탕으로 크로스 브라우징 문제를 해결

• IE11에서 최신 자바스크립트 기능 미지원으로 인한 문제를 폴리필로 해결

• 모바일 기기 OS 버전에 따라 발생하는 CSS 호환성 문제를 대응

• PC, 태블릿, 모바일 등 다양한 기기에서 문제없이 기능하도록 반응형 기반으로 개발

• 가벼운 순수 자바스크립트 차트 라이브러리 개발을 위해 외부 라이브러리를 사용하지 않고, 로우 레벨의 SVG 조작하여 차트 생성 기능 구현

• 스펙 설정, 설계, 개발, 버그 픽싱, 릴리즈까지 개발의 전반에 걸친 과정을 담당하여 공수 설계 및 서비스 개발 경험 축적