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

  • ZOOPZOOP

    웹에서 찾은 콘텐츠를 손쉽게 저장하고 팀과 함께 시각적으로 아이디어를 확장할 수 있는 지식 협업 플랫폼입니다. 프로그래머스 데브코스 4차 프로젝트 🥇최우수작으로 선정

    • • 확장 프로그램 설계 및 구현
    • • 스페이스 관리 및 팀원 관리
    • • 로그인, 회원가입, 토큰 컨트롤 및 Auth 기능
    • • API(server, client) 통신 흐름 설계 및 공통 에러 설계
    • • Next, tanstack-query 캐시 전략 설계
    • Next.js
    • Tanstack Query
    • Zustand
    • Chrome-extension

  • Anonimo

    단순한 텍스트를 넘어 그림, 이모지, 이미지로 진짜 마음을 전하는 새로운 확장형 익명 소통 플랫폼입니다. 프로그래머스 데브코스 3차 프로젝트 🥇최우수작으로 선정

    • • 피드 실시간 업데이트 및 최적화 (가상화)
    • • 이모지 실시간 업데이트 및 낙관적 업데이트
    • • 이스터에그 설계 및 구현
    • • 공통 모달 레이아웃, 공통 Input 컴포넌트
    • • 전반적인 프로젝트 리드 및 셋업
    • React
    • Tanstack Virtual
    • Zustand
    • Tailwind CSS

  • Seediary

    사용자 일기 데이터를 기반으로 AI 감정 분석과 멘탈 케어 챗봇등이 추가된 확장형 감정일기 플랫폼입니다. 프로그래머스 데브코스 2차 프로젝트 🥇최우수작으로 선정

    • • 로그인/회원가입 기능 및 Auth 상태 관리
    • • Gemini API를 활용한 멘탈 케어 챗봇 및 AI 감정 분석
    • • 실시간 알림
    • • useForm, localStorage, useAuth 등 공통 훅
    • React
    • Vite
    • Supabase
    • Gemini API

  • connectdid

    패션 업계의 창작자들(사진작가, 디자이너, 스타일리스트, 아티스트)을 연결하고, 그들의 진정성 있는 창작 스토리와 창의성을 공유하는 플랫폼입니다

    • Next.js
    • Jotai
    • Styled-components
    • AWS

Archive

  • 2025-11-18

    requestAnimationFrame 란?

    requestAnimationFrame(rAF)은 브라우저에게 다음화면을 그리기 직전에 이 함수를 실행 해달라고 요청하는 Web API입니다.

    • web
    • API
    • basic
  • 2025-10-31

    리액트 동시성 모드

    React의 동시성 모드는 React가 여러 작업을 동시에 준비하고, 우선순위에 따라 렌더링을 중단하거나 재개할 수 있는 메커니즘이다.

    • react
    • frontend
  • 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
아카이브 더보기