Skills
Typescript
Javascript
React
React Native
Next.js
Node.js
Tailwind CSS
PostgreSQL
Python
Django
Google BigQuery
Experiences
2025.08~2026.02
이지원
프론트엔드 개발자
Nexjs 금융 앱 하이펀딩 프론트 개발
- Nextjs 기본 문법, 핵심 라이브러리 관리, git 관리, 코드 퀄리티 툴(biomejs) 관리 문서화를 통한 아키텍팅
- Next-Auth + 서드파티 인증 모듈 파이프라인 설계 및 역할(Role) 기반 인증 및 페이지 접근 제어 구현
- Justand, React hook form 및 Tanstack query를 활용한 멀티 스텝 툴를 활용한 핵심 투자 대출 기능 구현
2023.10~2024.09
커넥트아이
프론트엔드 개발자
기존 앱의 리팩토링, 네이티브 관련 기능의 최신화 및 리팩토링 수행
- React Native Echarts를 활용한 대규모 데이터 차트 시각화 구현
- 15년 간의 아이 성장 데이터를 시각화 대쉬보드 구현 및 퍼포먼스 문제 해결
- React Native Vision Camera를 활용한 사진 촬영 및 업로드 기능 구현
2022.09~2023.06
아이비에스테크
프론트엔드 리드
외과 시험 소프트웨어 개발 책임, WebRTC, Rnd, Vue3 등 요구사양에 맞춘 라이브러리 & 프레임워크 직접 선정 후 출시까지 개발
- Dnd-kit 활용한 드래그 앤 드롭 시험 인터페이스 구현
- Web-worker를 활용한 멀티 쓰레딩 타이머 구현
- WebRTC 프로토콜을 활용한 CCTV 영상 재생 + 실시간 업로드 구현
2021.01~2022.05
애기야가자
개발 리드
풀스택 설계 및 개발
- Firebase + Google cloud Bigquery를 활용한 앱 유저 데이터 5억건 시각화 및 관리 프로세스 구현
- Django Rest Framework를 활용한 백엔드 API 개발 및 관리
- React Native를 활용한 앱 개발 및 유지 보수
2019.03 ~ 2020.08
플라잉캣
프론트엔드 개발자
플라잉캣 Web, App(React-Native) 개발 및 유지 보수. 첫 개발부터 출시까지 개발
- React Native를 활용한 앱 개발 및 유지 보수
- Godomall + React를 활용한 웹 개발 및 유지 보수
Posts
react-native
conceptual
use-case
skia
React Native로 대용량 차트 그리기 - react native echarts
react native로 15년간의 데이터를 차트로 그려내면서 생각했던 과정입니다.
conceptual
personal-growth
monk-mode
30일간의 몽크 모드 경험
더 나은 나, 더 나은 개발자가 되기 위해 30일간 고민하고 실천한 내용에 대해 다룹니다
Chrome
Agentic coding
retrospective
project
Agentic Coding으로 처음 크롬 익스텐션을 5일간 만들어본 후기
Agentic Coding 기법을 사용해 크롬 익스텐션 Monkmode를 만든 경험에 대해 공유합니다.
AI
workflow
development-tools
conceptual
Agentic Coding이란? 기본 개념 확인 및 실전 워크플로우 수칙에 대해 알아보기
Agentic Coding이란 무엇인지? 각 개념을 어떤 경우에 사용할 것인지에 대해 알아봅니다.
AI
agile
form
Claude Code
use-case
Claude code를 끼얹어 멀티스탭 폼을 개발 해보기
Agentic 코딩의 이해를 위해 AI 개발 팀을 선정하고 실제로 회원가입 폼을 구현해 봅니다.
Next.js
retrospective
project
Nextjs 프로젝트 처음 해본 후기 - 하이펀딩
SI 업체에서 Nextjs 프로젝트를 처음 해본 경험을 회고해봅니다.
React
TanStack Query
data-fetching
API
use-case
Tanstack Query에서 useQuery에서 POST를 사용해도 될까?
Tanstack Query에서 useQuery에서 POST 요청을 사용해도 괜찮은지에 대해 알아봅니다.
Docker
dev-environment
setup
conceptual
개발 환경 세팅 - Docker
Docker 도입을 통해 프로젝트를 개발 환경 상의 Delay를 줄이기
Fumadocs
documentation
setup
conceptual
개발 환경 세팅 - Fumadocs
Fumadocs를 Nextjs 프로젝트에 셋업하는 방법에 대해 알아봅니다.
AI
workflow
development-tools
conceptual
Agentic Workflow에 대해서 알아보기
실제 현업에서 사용하는 개발팀의 Agentic workflow에 대해 번역해봅니다.
canvas
graphics
architecture
conceptual
Immediate mode vs Retained mode
그래픽 라이브러리의 두 패러다임에 대해 알아봅니다.
canvas
graphics
use-case
Figma 스타일 Infinite canvas 구현하기
html canvas를 통해 피그마 스타일의 Infinite canvas 구현하기
Next.js
UX
navigation
use-case
nextjs - scroll 위치 유지하기
Nextjs에서 탭 내비게이션으로 이동해도 스크롤 위치가 초기화되지 않도록 하는 방법에 대해 알아봅니다.
Next.js
routing
navigation
use-case
nextjs에서 tab 내비게이션 구현
nextjs에서 tab 내비게이션을 구현하는 방법에 대해 알아봅니다.
Zod
React Hook Form
validation
form
use-case
Zod superRefine으로 비밀번호 확인 필드 처리
Zod + React Hook Form 환경에서 비밀번호 확인 필드 구현하는 방법에 대해 알아봅니다.
Web Worker
performance
React
timer
use-case
웹 워커로 멈추지 않는 시계 만들기
웹 워커를 사용해 메인 쓰레드와 타이머를 분리하는 과정에 대해 알아봅니다.
Git
workflow
version-control
conceptual
Git rebase와 git pull의 차이
git rebase와 git pull(fetch+merge)의 차이점과 깃 플로우 관리에 있어서의 장단점에 대해서 알아봅니다.
pnpm
Windows
performance
package-manager
Windows에서 pnpm이 느린 이유에 대한 서치
Windows powershell 환경에서 pnpm이 왜 느린지에 대해 알아봅니다.
