미리보기

Description: 네이버 플레이스 데이터를 활용하여 병의원을 위한 사용자 위치 기반 맞춤형 온라인 마케팅 솔루션을 제공하는 서비스

Tech Stack:

• Vue.js

• Vite

• ApexCharts.js

Experience:

• 클라이언트 위치 정보를 기반으로 주변(500m, 1km, 2km, 동·구·시) 병의원 정보 및 비교 분석 필터 기능 구현

• 데이터를 ApexCharts.js를 기반으로 시각화하는 페이지를 구현하여 사용자에게 핵심 정보를 효과적으로 전달

  • 기존 가로형 롤리팝 차트를 area 차트로 UI와 자료구조를 변경하여 데이터 간 추세 및 변화량을 보다 직관적으로 제공

• 재사용성과 유지보수 용이성을 고려한 컴포넌트 설계 및 코드 작성

  • 외부 라이브러리 변경에 유연하게 대응할 수 있는 어댑터 패턴 적용

  • 대규모 데이터 처리 시 발생할 수 있는 성능 문제를 최소화 하도록, 타 라이브러리로 교체된 코드를 테스트 함으로써 코드 안정성 증가

• 피드백 기반 지속적인 기능 개선 및 코드 리팩토링

Description: 사주명리학 기반의 개인화된 디지털 부적 메이커를 통해 언제 어디서든 마음의 위안과 목표 의식을 강화할 수 있는 웹 애플리케이션 서비스(Website)

Tech Stack:

• Next.js v14

• React v18

• React-Query v5

• axios

• shacnd/ui

• tailwind-css

• zustand

• react-hook-form

• zod

• react-konva

• html-to-image

Experience:

• 사용자 입력 데이터를 기반으로 한 맞춤형 부적 이미지 및 스티커를 활용하여 사용자가 직접 부적을 편집할 수 있는 인터랙티브 기능 개발

  • react-konva를 활용하여 부적 이미지 및 스티커를 캔버스에 동적으로 렌더링하고, 사용자의 드래그 & 드롭, 확대/축소, 회전 등 조작을 실시간으로 반영

• 사용자가 완성한 부적을 base64로 변환하여 서버에 저장하고, 다운로드 하여 소유할 수 있는 기능 구현

• 기획 및 개발 전반에 관련된 의사 결정에 적극적으로 참여

개요: 모각코(모여서 각자 코딩)를 효율적으로 지원하는 모임 및 메이트 매칭 플랫폼(Website)

기술 스택:

• React

• Firebase

• JavaScript

• React-Query

• Recoil

• Emotion.js

• Ant Design

• Quill

Experience:

• 맞춤 모임 추천 온보딩 페이지 개발: 사용자의 기술 스택, 선호 시간 및 지역 설정 기능을 통해 개인 맞춤형 모임 추천 기능 제공

• 팀 페이지 기능 개발: 사용자 프로필 및 팀 멤버 프로필 조회, 개설자와 비개설자에 따른 맞춤형 컴포넌트 제공, 카카오Map API를 사용하여 모임 장소 추가, 모임 신청 승인/거절, 모임 탈퇴 등 다양한 기능을 구현하여 모각코 활동을 원활하게 지원

• 디바운싱을 활용한 더블 클릭 방지:

  모임 구인 작성 시 다중 업로드 에러를 방지하기 위해 디바운싱 기법을 적용하여 API 요청 과부하에 따른 서버 문제 해결

• 코드 품질 관리: 코드 컨벤션 및 Lint를 적용하여 프로젝트 코드의 일관성 및 가독성 향상