Introduce

Product Developer

저는 단순히 기능을 구현하는 것이 아니라, 문제의 본질을 파악하고 해결하는 과정을 중요하게 생각합니다.
다양한 기술과 도구를 활용하여 확장성과 유지보수성을 고려한 해결책을 찾아, 더 나은 사용자 경험과 시스템 성능을 제공하는 개발을 이어가고 있습니다.

CONNECT

Skills

JavaScript

React.js

Styled-Components

TypeScript

Tailwind-css

Electron.js

Next.js

CSS-modules

Work Experience

작가 주식회사

Product Developer (2024. 02 ~ 2024. 12)
React, TypeScript, Electron.js, Zustand, Million.js, Supabase, Tailwind-css

Electron.js를 활용해 Task 관리에 최적화된 생산성 브라우저 데스크탑 앱을 개발했습니다.
사용자는 To-Do List로 할 일을 정리하고, Rich Text Editor를 통해 노트를 작성하며, 브라우저 기능을 프로스페이스 앱에서 Task 기능과 함께 활용해 효율적인 작업을 도와주는 서비스 입니다.

  • million.js를 활용한 퍼포먼스 개선으로 같은 조건에서 시작한 랜더링의 완료 속도가 65% 가량 감소 (Wiki)
  • tiptap-editor를 이용하여 리치 텍스트 에디터 구현 및 키보드 단축키 연결
  • Dnd-kit을 활용하여 space, tab-group, tab 사이의 드래그 앤 드랍 구현
  • Web-Worker를 통해 각 스페이스(공간)별 시간 기록
  • color-picker를 이용해 확장성 높은 색상 팔레트 구현 및 cwag기준에 맞는 텍스트 컬러 변경

Project

하루 담은

Github | PPT (2024. 02 ~ 2024. 12)
Next.js, TypeScript, Zustand, Chart.js, Dnd-kit, Supabase, Css-modules

건강한 하루 식단을 위한 맞춤형 쇼핑몰
기존 이커머스 플랫폼에서 제공하지 못한 맞춤형 헬스케어 서비스를 제공하여 차별화 한 서비스. 현대인의 권장 영양 성분표를 차트로 시각화하 장바구니에서 실시간 영양성분 반영 차트를 제공함으로써 모두의 건강을 가치 창출 목표로 하고 있습니다.

What did i do
- Chart.js 라이브러리를 이용한 권장 영양성분 데이터 시각화
- Dnd-kit을 이용하여 장바구니와 한끼 장바구니 아이템 이동
- Supabase 구글 로그인과 Next.js middleware를 이용한 유저 인증
- plaiceholder 라이브러리로 blur 이미지를 생성하여 사용자 경험 향상

1. Zustand를 이용한 중앙 상태 관리 (Wiki)

Zustand를 활용해 상태 관리를 할 때, 개별 store를 분리하면 다음과 같은 문제가 발생합니다.
- 각 store에서 상태를 가져오려면 import와 선언문이 길어짐
- 서로 다른 store의 상태를 직접 참조할 수 없음

이 문제를 해결하기 위해 use_store 훅을 도입하여 상태를 한 곳에서 관리할 수 있도록 구성했습니다.
- 모든 store를 use_store에 통합해 상호 참조 가능하도록 변경
- localStorage에 상태를 저장하여 데이터 휘발 방지 및 재사용성 향상

2. Dnd-kit - 유연한 드래그 앤 드롭 시스템 구현(Wiki)

드래그 앤 드롭 기능을 확장성 있게 설계하는 과정에서 드래그 방향을 명확히 정의하는 방식을 도입해 다양한 유형의 드래그 앤 드롭이 가능해졌으며, 코드 확장성이 대폭 향상되었습니다.

핵심 문제
- 서로 다른 유형의 컴포넌트 간 드래그가 필요
- 드래그 가능 대상과 드랍 가능 대상의 명확한 구분 필요

해결 방법
- DraggableComponent, DroppableArea 타입 정의 → 역할을 명확히 분리
- getDragDirection 유틸 생성 → 드래그 방향을 문자열로 지정
- 방향 기반 분기 처리 → 지정된 방향에 따라 이벤트 적용

3. Next.js 이미지 최적화 및 Blur-image를 통한 사용자 경험 개선(Wiki)

이미지 최적화를 통해 페이지 로딩 속도를 단축하고, 초기 로딩 경험을 개선하여 사용자 이탈률을 낮추는 효과를 얻을 수 있었습니다.

핵심 문제
- 쇼핑몰 페이지에서 이미지 로딩 속도가 1.5초 이상 지연되는 현상 발생
- next/image의 lazy-loading만으로는 초기 화면에서 빈 공간이 발생
- 외부 스토리지를 사용할 경우 blur 이미지 제공이 어려움

해결 방법
- next/image의 lazy-loading 적용 → 보이지 않는 이미지를 늦게 로딩하여 성능 최적화
- Blur Placeholder 적용 → 로딩 중에도 흐릿한 이미지 표시로 자연스러운 UX 제공
- plaiceholder 라이브러리 활용 → 서버에서 blur 이미지를 생성하여 성능 향상

Education

멋쟁이 사자처럼 3기

Front-end Plus (2024. 12 - 2025. 03)

KDT-심화 부트캠프로 TypeScript 심화과정과 Next.js 프로젝트를 진행

코드스테이츠 45기

React (2023. 04 - 2023. 10)

프론트엔드 KDT. DOM의 기초 및 CSS, React를 활용한 프로젝트 진행

항해 99 10기

Node.js (2022. 11 - 2023. 02)

백엔드. 공공API를 받아 가공하여 약학 데이터를 시각적으로 보여주는 프로젝트를 진행