미리보기
기본 정보
문제의 본질을 파악하고 해결하는 과정을 중요하게 생각합니다. 문제를 해결하기 위해서 영역을 구분하지 않고 개발 자체를 즐기며, Zustand 공식 문서를 참고하여 v4에서 업데이트된 Par tialState와 useStore를 통해 Slice 패턴으로 스토어를 통합 관리하는 방식으로 성능을 개선하는 등 더 나은 개발 방법론을 고민하고 있습니다. Electron.js를 기 반으로 한 Task 관리 브라우저를 만들며 Tiptap-editor, Dnd-kit등 다양한 라이브러리를 커스텀해 사용자 경험을 향상시킨 경험이 있습니다. Dnd-kit 사용 할 때 "드래그 오버 시 드래그된 요소와 대상 요소 간의 방향을 지정하면 더 쉽게 처리할 수 있지 않을 까?"라는 아이디어를 제네릭 타입을 활용하여 드래그 가능한 타입과 드롭 가능한 타입을 명확하게 구분하는 방식으로 열두 가지 경우의 Dnd 로직을 보다 직관적이고 정확하게 처리한 경험이 있습니다. 다른 동료와 협업할 때, 저는 생각 맞추기를 가장 중요하게 생각합니다. 다른 역할을 가진 동료가 용어와 개념을 다르게 이해할 수 있음을 인정하는 과정이었습니다. 배경 지식을 공유함으로써 원활한 의사소통을 가능하였습니다.
기술 스택
JavaScript, TypeScript, Node.js, React, Electron, zustand, TailwindCSS
경력
작가 주식회사
팀원 | 개발
2024.02. ~ 2024.12. (11개월)
Product Developer
React, TypeScript, Electron.js, Zustand, Million.js, Supabase, Tailwind CSS
Electron.js를 활용해 Task 관리에 최적화된 생산성 브라우저 데스크탑 앱을 개발했습니다.
사용자는 To-Do List로 할 일을 정리하고, Rich Text Editor를 통해 노트를 작성하며, 브라우저 기능을 Task 기능과 함께 활용하여 보다 효율적인 작업 환경을 제공합니다.
주요 개발 내용
Million.js 도입 → 퍼포먼스 개선을 통해 동일 조건에서 렌더링 속도를 65% 감소
TipTap Editor 적용 → 리치 텍스트 에디터 구현 및 Electron.js 프로세스와 연동하여 키보드 단축키 연결
Dnd-kit 활용 → Space, Tab-group, Tab 간의 드래그 앤 드롭 기능 구현
Web Worker 적용 → 각 공간(Space)별 시간을 백그라운드에서도 지속적으로 기록 및 관리
Color Picker 커스텀 → 확장성 높은 색상 팔레트 구현 및 CWAG 기준에 맞춘 텍스트 컬러 실시간 반영
프로젝트
Angry MARIMO
멋쟁이 사자처럼 프론트 심화 3기
2025.02. ~ 진행 중
디지털 외로움 해결 프로젝트
드래그 앤 드랍을 통해 상호작용하는 다마고치형 웹 사이트입니다. 앵그리 마리모는 웹을 통해 언제 어디서나 키울 수 있는 디지털 반려 존재입니다. web-worker를 이용하여 백그라운드에서 마리모를 움직이고, 쓰레기를 생성하는 게이미케이션 요소를 가미하였습니다.
사용 스택 : Next.js, TypeScript, Zustand, Prisma, Vitest, Playwright
What did i do
Vitest와 Playwright를 이용하여 테스트 코드 작성 및 스터디 진행
테스트 코드를 통해 엣지 케이스를 개발 단계에서 검증하여 빠른 배포와 지속적 통합을 구현하였습니다.
모든 팀원과 테스트 코드 작성을 위한 사전 스터디를 진행 하였습니다. (WIKI)
self-hosted runner를 통해 Github-Action CI/CD 파이프라인을 작성하여 SSH 서버에 Nginx의 리버시 프록스를 활용한 배포를 구현하였습니다.
미니PC로 이루어진 서버에 접근하기 위하여 self-hosted runner를 설정하여 파이프라인을 작성하였습니다.
서버에 8개의 서버가 올라가야했기 때문에 Nginx의 리버시 프록스를 활용하여 도메인과 포트를 연결하였습니다.
Toss Payments 연동을 통한 테스트 결제 시스템 구축 (WIKI)
위젯이 중복 렌더링 되는 AlreadyWidgetRenderedError 문제와 redirect를 사용하기때문에 발생하는 인증 문제를 해결하였습니다.
실시간 질의 응답을 할 수 있는 디스코드 쓰레드 활용, 매주 서로의 이슈와 코드에 대한 스터디 및 회고 주도
한주를 스프린트로 관리해 난이도와 컨디션을 관리할 수 있도록 회고의 시간을 주도하였습니다.
서로 어려웠던 부분을 논의하며 함께 해결책을 찾기도 하고, 경험했던 문제와 지식을 공유하는 시간을 가지며 프로젝트에 대한 서로의 생각을 맞추는 시간을 가졌습니다.
하루 담은
멋쟁이 사자처럼 프론트 심화 3기
2025.02. ~ 2025.03.
건강한 하루 식단을 위한 맞춤형 쇼핑몰
기존 이커머스 플랫폼에서 제공하지 못한 맞춤형 헬스케어 서비스를 제공하여 차별화 한 서비스. 현대인의 권장 영양 성분표를 차트로 시각화하 장바구니에서 실시간 영양성분 반영 차트를 제공함으로써 모두의 건강을 가치 창출 목표로 하고 있습니다.
사용 스택 : Next.js, TypeScript, Zustand, Supabase
What did i do
Zustand의 Slice 패턴을 활용한 전역 상태 관리
Zustand의 특징인 모듈 팩토리 패턴으로 상태를 관리 할 때 생기는 문제를 개선하기 위해 Slice 패턴을 이용하여 use_store 훅으로 한 곳에서 관리할 수 있도록 구성하였습니다. (notion)
Dnd-kit을 이용하여 서로 다른 컴포넌트인 장바구니와 한끼 장바구니 간의 아이템 이동
드래그 앤 드랍 기능을 확장성 있게 설계하기 위해 드래그 방향을 정의하는 방식을 도입해 다양한 유형의 드래그 앤 드랍을 가능하도록 개선하였습니다. (Wiki)
Next.js 이미지 최적화 및 Blur-image를 통한 사용자 경험 개선
Blur-image를 통해 초기 로딩 경험을 개선하여 사용자 이탈률을 낮추는 효과를 기대할 수 있었습니다. (Wiki)
Chart.js 라이브러리를 이용한 권장 영양성분 데이터 시각화
장바구니 아이템의 영양성분을 유저 한끼 권장 영양소와 비교하여 시각화 하여 보여주었습니다.
Github Project의 칸반 보드와 wiki를 활용하여 효율적인 협업 관리를 주도하였습니다
요구사항을 명시적으로 이슈에 작성하며, 문제 상황을 공유하여 함께 논의하였습니다.
적극적인 PR 리뷰 참여로 코드에 대하여 더 깊은 고민을 나누었습니다