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
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이 왜 느린지에 대해 알아봅니다.
