Kim Hyunbin
Frontend Engineer
깊이 있게 고민하고, 꼼꼼하게 구현하여 완성도 높은 사용자 경험을 추구합니다.
About
자기소개
안녕하세요, 프론트엔드 개발자 김현빈입니다. 저의 가장 큰 강점은 끈기 있고 열정적인 태도입니다. 꾸준히 기술 블로그를 작성하고 주도적으로 프로젝트를 리드하고 몰입한 결과, 프로그래머스 데브코스를 수료하며 2차·3차·4차 프로젝트 모두 최우수상을 수상했습니다.
이런 성과에는 커뮤니케이션이 큰 역할을 했다고 생각합니다. 저는 사람들과 대화를 나누고 의견을 공유하며 토론하는 것을 좋아합니다. 모르는 것을 적극적으로 질문하고, 팀원들의 관점을 경청하며, 더 나은 방향을 함께 찾아가는 과정을 즐깁니다. 특히 2년간 풀스택 실무 경험이 있어 API 설계와 데이터 흐름을 이해하고 있어, 백엔드 팀과 원활히 소통하는 데 도움이 되었습니다.
개발할 때는 사용자 경험을 최우선으로 생각합니다. 단순히 기능을 구현하는 것을 넘어, 사용자의 입장에서 깊이 있게 고민하고 더 나은 경험을 제공하려 노력합니다. 접근성, 성능, 예외 상황까지 꼼꼼하게 고려하며 작업에 임하고 있습니다. 이런 접근이 결국 완성도 높은 사용자 경험으로 이어진다고 확신합니다.
아래 도구들로 문제를 해결합니다.
- React
- Next.js
- TypeScript
- Tailwind CSS
- TanStack Query
- Zustand
- Jotai
- Vite
- Storybook
- Supabase
- Vercel
- Git
Projects
웹에서 찾은 콘텐츠를 손쉽게 저장하고 팀과 함께 시각적으로 아이디어를 확장할 수 있는 지식 협업 플랫폼입니다. 프로그래머스 데브코스 4차 프로젝트 🥇최우수작으로 선정
- • 확장 프로그램 설계 및 구현
- • 스페이스 관리 및 팀원 관리
- • 로그인, 회원가입, 토큰 컨트롤 및 Auth 기능
- • API(server, client) 통신 흐름 설계 및 공통 에러 설계
- • Next, tanstack-query 캐시 전략 설계
- Next.js
- Tanstack Query
- Zustand
- Chrome-extension
단순한 텍스트를 넘어 그림, 이모지, 이미지로 진짜 마음을 전하는 새로운 확장형 익명 소통 플랫폼입니다. 프로그래머스 데브코스 3차 프로젝트 🥇최우수작으로 선정
- • 피드 실시간 업데이트 및 최적화 (가상화)
- • 이모지 실시간 업데이트 및 낙관적 업데이트
- • 이스터에그 설계 및 구현
- • 공통 모달 레이아웃, 공통 Input 컴포넌트
- • 전반적인 프로젝트 리드 및 셋업
- React
- Tanstack Virtual
- Zustand
- Tailwind CSS
사용자 일기 데이터를 기반으로 AI 감정 분석과 멘탈 케어 챗봇등이 추가된 확장형 감정일기 플랫폼입니다. 프로그래머스 데브코스 2차 프로젝트 🥇최우수작으로 선정
- • 로그인/회원가입 기능 및 Auth 상태 관리
- • Gemini API를 활용한 멘탈 케어 챗봇 및 AI 감정 분석
- • 실시간 알림
- • useForm, localStorage, useAuth 등 공통 훅
- React
- Vite
- Supabase
- Gemini API
connectdid 해외 패션 플랫폼
패션 업계의 창작자들(사진작가, 디자이너, 스타일리스트, 아티스트)을 연결하고, 그들의 진정성 있는 창작 스토리와 창의성을 공유하는 플랫폼입니다
- Next.js
- Jotai
- Styled-components
- AWS
Archive
- 2025-10-24
CDN이란 무엇인가?
CDN(Content Delivery Network)은 전 세계에 분산되어 있는 서버들을 통해 사용자에게 웹 컨텐츠를 빠르고 효율적으로 제공하는 기술이다.
- cs
- next
- cache
- basic
- 2025-10-19
4차 프로젝트 회고록
4차 프로젝트는 백엔드 팀과의 협업으로 진행되었다. 처음 해보는 협업이어서 걱정이 많았다. 우여곡절이 많았던 마지막 프로젝트 "ZOOPZOOP"의 회고록을 작성해보았다.
- 회고록
- programmers
- 4차 프로젝트
- 2025-09-15
컴포넌트 간 state 공유하기
컴포넌트 간 state를 공유하는 방법 중 가장 간단한 방법은 컴포넌트들의 가장 가까운 공통 부모를 찾고 state를 끌어올려 관리하는 방법이다.
- react
- state
- basic
- 2025-09-13
3차 프로젝트 회고록
3차 프로젝트는 2차프로젝트보다 기간이 짧아서 정말 빠르게 지나간 것 같다. 이번에도 3차 프로젝트 “Anonimo” 회고록을 작성해보았다.
- 회고록
- programmers
- 3차 프로젝트
- 2025-09-09
State를 사용해 Input 다루기
리액트로 Form을 다루다 보면 입력중, 검증 중, 제출 중.. 수많은 상태가 얽혀 복잡해진다. 리액트 공식 문서가 제안하는 선언형 상태 관리로 이문제를 어떻게 해결할 수 있는지 정리해보았다.
- react
- basic
- state