折叠
禁止及拒绝在未经各信息主体同意的情况下，擅自收集本服务提供的用户个人信息数据等行为。特此告知，即使是公开数据，若未经许可使用爬虫等技术手段进行收集，也可能根据个人信息保护法受到刑事处罚。
© 2025 Rocketpunch, Double Ace Co., Ltd., Kim In-ki, 韩国首尔特别市城东区圣水一路10街12号12层1室, 04793, support@rocketpunch.com, +82 10-2710-7121 营业执照注册号 206-87-09615 通信销售业申报编号 2025-首尔城东-0105 职业信息提供业务申报编号：J1202020240015 折叠
自定义 Cookie 设置
김도현
软件开发 · 中级
안녕하세요, 6년 차 풀스택 개발자 김도현입니다. 프론트엔드 개발자로 커리어를 시작해 현재는 풀스택 개발자로 일하고 있으며, 현재는 AI 개발에 관심을 갖고 서비스를 만들어가고 있습니다. 자세한 이력은 아래 링크에서 확인할 수 있습니다. - https://volcano-sundial-864.notion.site/322ef34a8ef680a998e4d75db6916e83?source=copy_link
工作经历
웹·앱 개발부터 AI 서비스 개발까지, 다양한 서비스 개발 경험이 있습니다. 기획 단계부터 런칭까지 개발팀 리드로 프로젝트를 성공적으로 완수한 경험이 있으며 스타트업 환경에서 개발 환경 구축, 기술 부채 해결 등 팀의 다양한 기술적 문제를 해결한 경험이 있습니다.
查看更多
뱅크몰은 금융 상품 비교 및 대출 관련 서비스를 제공하는 핀테크 플랫폼으로 대출 비교 서비스, 금융상품 추천, 신용 분석 등을 다루며, 다양한 금융사와 제휴하여 사용자들에게 맞춤형 금융 정보를 제공합니다. 프론트엔드 개발자로 근무하며 전반적인 프론트엔드 개발을 담당했습니다. ### 주요 업무 1. 코딩 컨벤션 문서화 및 husky를 이용한 자동화 도구(commitlint, lint-staged, Stylelint) 도입 Problem - 팀 합류 당시 개발 관련 문서가 없어 기존 코드 히스토리를 파악하기 어려웠음 - 코딩 컨벤션이 정해져 있지 않아 팀원별로 코드 스타일이 달라 가독성과 유지보수성이 저하됨 Solution - 브랜치 전략 및 코딩 컨벤션을 정립하고, 이를 노션 문서화하여 팀원들이 참고할 수 있도록 함 - Husky, commitlint, lint-staged, Stylelint를 활용하여 코드 스타일을 자동화하고 개발 일관성을 확보 2. Next.js & React 버전 업그레이드 (Next.js 10.2 → 13.5, React 17 → 18) Problem - 레거시 환경에서 개발이 진행되면서 새로운 기능 추가 시 기술 부채 증가 - Next.js의 성능 이슈로 빌드 시간이 증가하고 유지보수가 어려움 Solution - Stable한 최신 버전(Next.js 13.5, React 18)으로 업그레이드하여 성능 개선 - 신규 API 및 최적화 기능 활용하여 빌드 속도 단축 및 개발 생산성 향상 3. Suspense와 Error Boundary를 사용한 선언적 UI 처리 Problem - 기존 코드에서는 로딩 및 에러 처리가 개별 컴포넌트 내부에 분산되어 있어 관심사의 분리가 어려움 Solution - Suspense를 사용하여 로딩 상태를 컴포넌트 단위로 관리 - Error Boundary를 활용하여 API 응답 코드에 따른 에러 처리 체계 구축 - 전역 Error Boundary를 적용하여 예외 처리의 일관성을 확보 4. 타입스크립트 도입 및 점진적 마이그레이션 Problem - 팀 내 타입스크립트 도입이 전무한 상태였으며, 운영 중 런타임 오류 발생 후 hotfix로 급하게 대응하는 일이 빈번하게 발생 Solution - 타입스크립트를 도입하여 컴파일 시점에 에러를 사전 검출 - 팀 내 타입스크립트 스터디 운영 및 도입 가이드 제공 - 점진적 마이그레이션을 통해 1년 내 전체 코드베이스의 40% 이상을 타입스크립트로 변환 5. 아이콘 생성 자동화 Problem - 아이콘 추가 방식이 통일되지 않아 SVG 직접 작성 또는 개별 파일 import 방식이 혼재 - 공통적인 아이콘 관리 체계가 없어 유지보수 및 재사용성이 떨어짐 Solution - SVG 파일을 React 컴포넌트로 자동 변환하는 스크립트 개발 - npm 명령어 실행만으로 `<Icon name="ArrowLeft" />` 형태로 아이콘을 사용할 수 있도록 개선 6. 상태 관리 도구 변경 (Redux → TanStack Query & Recoil) Problem - 기존 코드에서는 Redux를 사용하여 서버 상태와 클라이언트 상태를 동일한 Store에서 관리 - useEffect와 useState사용으로 지역적으로 상태관리를 하고 있었기 때문에 API 요청이 중복 실행되는 문제 발생 Solution - TanStack Query를 도입하여 서버 상태와 클라이언트 상태를 분리 - API 별 캐싱 정책 적용으로 불필요한 API 호출을 줄이고 응답 속도 개선 7.테스팅 환경 구축 및 테스트 코드 도입 Problem - 기존에는 테스트 코드가 없어 대출 관련 복잡한 시나리오를 코드 레벨에서 검증하기 어려움 - QA 단계에서 발견되는 오류가 많아, 개발 생산성 저하 Solution - Jest & React Testing Library 기반의 단위 테스트 및 통합 테스트 환경 구축 - MSW를 활용한 API Mocking으로 테스트 환경에서 안정적인 데이터 테스트 가능
查看更多
풀스택 개발자
프리랜서 · 프리랜서
2022년 9월 - 2023년 3월 · 7개월
풀스택 개발자로 B2B, B2C 서비스, 랜딩 페이지 등 다양한 프로젝트에 참여했습니다.
크로스팀은 시공 프로젝트를 관리할 수 있는 B2B 서비스로 건설현장에서 시공, 감리와 같은 업체들이 서로 정보를 공유하고 문서작성과 전자결재와 같은 업무를 협업해서 진행할 수 있는 기능을 제공하는 서비스입니다. 크로스팀 서비스와 백오피스의 초기 개발 환경 세팅 및 전반적인 프론트엔드 개발을 담당했습니다. ### 주요 업무 1. 리액트 쿼리(React Query) 도입 후 서버 상태와 클라이언트 상태 분리 Problem - 기존 Redux Toolkit을 활용한 상태 관리 방식에서 비동기 처리와 전역 상태 관리가 결합되어 있었음 - API 통신 로직이 Redux Store에 포함되면서 Store가 점점 비대해지고 유지보수가 어려워지는 문제 발생 Solution - React Query를 도입하여 서버 상태와 클라이언트 상태를 분리하여 코드의 가독성 및 유지보수성 향상 - 기존 Redux에서 관리하던 API 통신 관련 상태를 React Query로 대체하여 전역 상태의 복잡성 감소 - React Query의 자동 캐싱 및 데이터 동기화 기능을 활용하여 불필요한 API 요청 감소 및 성능 최적화 2. 타입스크립트(TypeScript) 도입 Problem - 기존 JavaScript 코드 기반에서는 동적 타입 언어의 특성상 타입 오류를 컴파일 단계에서 감지할 수 없음 - 프로젝트 규모가 커지면서 런타임 시점에서 발생하는 타입 관련 에러가 증가 Solution - TypeScript 도입을 통해 정적 타입 시스템을 적용하여 컴파일 단계에서 오류 사전 감지 - 코드 자동완성과 타입 체크 기능을 활용하여 개발 생산성 향상 및 협업 효율성 증가 - 점진적 마이그레이션을 진행하여 기존 코드와의 호환성을 유지하면서 전환을 원활하게 수행 3. Code Splitting과 이미지 Preloading을 이용한 성능 최적화 Problem - 프로젝트 규모 확장에 따라 번들 크기가 커지고 초기 로딩 속도가 저하되는 문제 발생 Solution - Route-based Code Splitting 적용해서 페이지 단위로 동적 import를 활용하여 필요한 코드만 로드하도록 처리 - Lazy Loading & Dynamic Import 도입해서 특정 기능과 관련된 컴포넌트는 사용 시점에만 로드하도록 최적화 - 이미지 Preloading을 적용하여 주요 페이지의 이미지 로딩 속도를 개선 - 불필요한 번들 크기를 줄이고, 초기 로딩 속도를 단축하여 사용자 경험 개선
查看更多
学历
컴퓨터공학 (공학인증) 전공
活动
프로젝트
커리어마이징
2025년 7월 - 2026년 5월 · 11개월
소개 : Careermizing은 취업 준비생이 자신의 경험을 AI 코칭을 통해 구조화하고, 맞춤형 자기소개서를 생성·관리할 수 있는 AI 기반 취업 지원 플랫폼입니다. AI 경험 정리, 자기소개서 작성·분석·첨삭, 면접 질문 생성, 결제 및 구독 플랜 등 서비스 전반의 풀스택 개발을 담당했습니다. - 링크: https://www.careermizing.com/ ### 주요 업무 1. AI 응답 방식을 Non-streaming → SSE Streaming으로 전환 및 연결 끊김 복구 처리 Problem - 기존 AI 응답이 전체 생성이 완료된 후 단번에 반환되는 방식으로, 응답 대기 시간 동안 사용자에게 아무런 피드백이 없어 UX가 저하됨 - 모바일 환경에서 스트리밍 도중 네트워크가 끊기면 생성 중이던 AI 응답이 유실되어 사용자가 재시도해야 하는 문제 발생 Solution - OpenAI Node SDK의 `stream: true` 옵션과 Web Streams API(ReadableStream)를 활용한 SSE(Server-Sent Events) 방식으로 전환, 응답이 생성되는 즉시 청크 단위로 클라이언트에 전송 2. n8n을 활용한 업무 자동화 - n8n 워크플로우를 구성하여 구글 드라이브 파일 공유 링크 자동 생성 및 사용자 전달 등 반복 운영 작업을 자동화 3. Toss Payments를 활용한 결제 시스템 구축 - `@tosspayments/tosspayments-sdk` 위젯 기반 결제 후, Server Action에서 Toss 승인 API 호출 및 Firestore 트랜잭션으로 크레딧 적립을 원자적으로 처리 - DB 저장 실패 시 Toss 취소 API를 즉시 호출하는 자동 롤백 로직 구현, 결제는 됐으나 크레딧이 미적립되는 상황 방지 4. Next.js Server Action 도입을 통한 결제·크레딧 로직 보안 강화 Problem - 기존에는 환경 변수 및 결제 로직과 같이 민감한 정보를 포함한 코드가 클라이언트에 노출되는 구조적 문제가 있었음 Solution - Server Action으로 결제 승인, 크레딧 차감 로직을 서버에서만 실행하도록 하고, 민감한 환경변수가 클라이언트 번들에 포함되지 않도록 처리 - Firebase Admin SDK를 Server Action 내에서 직접 사용하여 Firestore 트랜잭션을 서버에서 실행
프로젝트
Checkmate Korea
하우스버디 · 2025년 4월 - 2026년 4월 · 1년 1개월
소개 : Checkmate Korea는 외국인 유학생 및 외국인 근로자를 대상으로 한국 임대 매물 검색 및 계약 서비스를 제공하는 플랫폼입니다. 지도 기반 매물 탐색, 예약/결제, 마이페이지, 리뷰, 찜(즐겨찾기) 등 서비스 전반의 프론트엔드 개발을 담당했습니다. 링크: https://checkmatekorea.com/ ### 주요 업무 1. Feature-Sliced Design(FSD) 아키텍처 도입 및 ESLint를 통한 레이어 규칙 강제 Problem - 기존 레거시 컴포넌트 구조에서 계층 간 의존 방향이 불분명한 문제. - 팀원 간 코드 구조에 대한 공통 기준이 없어 파일 위치 결정에 소요되는 커뮤니케이션 비용이 높았음 Solution - app → pages → widgets → features → entities → shared 의 단방향 의존 계층 구조를 설계하고, 각 레이어의 역할과 책임을 정의 - ESLint `no-restricted-imports` 규칙으로 레이어 위반 임포트를 경고로 감지하도록 자동화하여 아키텍처 규칙을 코드 레벨에서 강제하도록 처리 2. 다국어(i18n) 도입 — 영어·베트남어·중국어·일본어 지원 Solution - `i18next` , `react-i18next`를 도입하고, 기능 도메인별로 번역 네임스페이스를 분리 하여 번들 크기 최적화와 유지보수성을 동시에 확보 - URL 기반 언어 라우팅 구현으로 브라우저 언어를 감지하여 지원 언어인 경우 자동으로 언어 경로로 리다이렉트 처리 3. 성능 최적화(폰트·이미지·Preloading)를 통한 Core Web Vitals 지표 개선 Problem - 레거시한 CRA 환경에서 개발이 되고 있었기 때문에, 폰트, 이미지 등을 프레임워크 자체적으로 최적화를 하고 있지 않은 상황 - Pretendard 전체 폰트 파일 로딩으로 인한 초기 렌더링 지연 문제 발생 - 이미지 및 주요 에셋의 늦은 로딩으로 LCP 점수가 낮은 상황 Solution - React.lazy() , Suspense를 전체 페이지 라우트에 적용하여 초기 JS 번들 크기 감소 - 폰트를 서브셋으로 경량화 및 webp 사용
프로젝트
리페어스 - 수리톡톡(뚝닥)
2025년 7월 - 2026년 3월 · 9개월
수리톡톡(뚝닥)은 한국 가정 수리 서비스를 연결하는 플랫폼으로, 고객(user), 기술자(expert), 운영 관리자(admin) 3개의 독립 애플리케이션으로 구성됩니다. 견적 요청부터 예약, 정산, A/S, 운영 대시보드까지 서비스 전반의 개발을 담당했습니다 링크: https://www.suritoktok.com/ ### 주요 업무 1. Turborepo 기반 모노레포 개발 환경 구축 Problem - 3개의 독립되어 있는 앱이 공통 컴포넌트 및 유틸리티를 각자 관리하면서 중복 코드와 버전 불일치 문제 발생 - 앱마다 독립적으로 lint, 빌드, 타입 체크를 수행해 CI 시간이 불필요하게 길어지는 문제 Solution - 3개의 독립되어 있는 앱이 공통으로 사용하고 있는 로직과 디자인시스템이 있었기 때문에 Turborepo를 도입하고 공통으로 사용되는 여러 로직들을 Internal Packages로 관리 - `pnpm catalog:`로 워크스페이스 전체의 의존성 버전을 일관되게 고정 2. SSR 환경에서 TanStack Query Prefetching을 통한 초기 로딩 속도 개선 Problem - 클라이언트에서 데이터를 fetch하는 방식으로 인해 페이지 진입 시 로딩 스피너가 노출되는 상황 - 서버 컴포넌트와 클라이언트 컴포넌트 간 Query key 불일치로 인한 캐시 미적중 발생 Solution - Query Factory Pattern 도입을 통해 `queryOptions({ queryKey, queryFn })`을 엔티티 단위 객체로 응집시켜 서버 컴포넌트의 prefetchQuery와 클라이언트 컴포넌트의 useSuspenseQuery가 동일한 옵션 객체를 공유하도록 구현 - 데이터 Prefetch를 통해 화면을 미리 구성하여, 불필요한 로딩 스피너 노출을 제거
프로젝트
뱅크몰 프론트엔드 개발
2023년 4월 - 2024년 5월 · 1년 2개월
링크: https://www.bank-mall.co.kr/ ### 주요 업무 1. 코딩 컨벤션 문서화 및 husky를 이용한 자동화 도구(commitlint, lint-staged, Stylelint) 도입 Problem - 팀 합류 당시 개발 관련 문서가 없어 기존 코드 히스토리를 파악하기 어려웠음 - 코딩 컨벤션이 정해져 있지 않아 팀원별로 코드 스타일이 달라 가독성과 유지보수성이 저하됨 Solution - 브랜치 전략 및 코딩 컨벤션을 정립하고, 이를 노션 문서화하여 팀원들이 참고할 수 있도록 함 - Husky, commitlint, lint-staged, Stylelint를 활용하여 코드 스타일을 자동화하고 개발 일관성을 확보 2. Next.js & React 버전 업그레이드 (Next.js 10.2 → 13.5, React 17 → 18) Problem - 레거시 환경에서 개발이 진행되면서 새로운 기능 추가 시 기술 부채 증가 - Next.js의 성능 이슈로 빌드 시간이 증가하고 유지보수가 어려움 Solution - Stable한 최신 버전(Next.js 13.5, React 18)으로 업그레이드하여 성능 개선 - 신규 API 및 최적화 기능 활용하여 빌드 속도 단축 및 개발 생산성 향상 3. Suspense와 Error Boundary를 사용한 선언적 UI 처리 Problem - 기존 코드에서는 로딩 및 에러 처리가 개별 컴포넌트 내부에 분산되어 있어 관심사의 분리가 어려움 Solution - Suspense를 사용하여 로딩 상태를 컴포넌트 단위로 관리 - Error Boundary를 활용하여 API 응답 코드에 따른 에러 처리 체계 구축 - 전역 Error Boundary를 적용하여 예외 처리의 일관성을 확보 4. 타입스크립트 도입 및 점진적 마이그레이션 Problem - 팀 내 타입스크립트 도입이 전무한 상태였으며, 운영 중 런타임 오류 발생 후 hotfix로 급하게 대응하는 일이 빈번하게 발생 Solution - 타입스크립트를 도입하여 컴파일 시점에 에러를 사전 검출 - 팀 내 타입스크립트 스터디 운영 및 도입 가이드 제공 - 점진적 마이그레이션을 통해 1년 내 전체 코드베이스의 40% 이상을 타입스크립트로 변환 5. 아이콘 생성 자동화 Problem - 아이콘 추가 방식이 통일되지 않아 SVG 직접 작성 또는 개별 파일 import 방식이 혼재 - 공통적인 아이콘 관리 체계가 없어 유지보수 및 재사용성이 떨어짐 Solution - SVG 파일을 React 컴포넌트로 자동 변환하는 스크립트 개발 - npm 명령어 실행만으로 `<Icon name="ArrowLeft" />` 형태로 아이콘을 사용할 수 있도록 개선 6. 상태 관리 도구 변경 (Redux → TanStack Query & Recoil) Problem - 기존 코드에서는 Redux를 사용하여 서버 상태와 클라이언트 상태를 동일한 Store에서 관리 - useEffect와 useState사용으로 지역적으로 상태관리를 하고 있었기 때문에 API 요청이 중복 실행되는 문제 발생 Solution - TanStack Query를 도입하여 서버 상태와 클라이언트 상태를 분리 - API 별 캐싱 정책 적용으로 불필요한 API 호출을 줄이고 응답 속도 개선 7.테스팅 환경 구축 및 테스트 코드 도입 Problem - 기존에는 테스트 코드가 없어 대출 관련 복잡한 시나리오를 코드 레벨에서 검증하기 어려움 - QA 단계에서 발견되는 오류가 많아, 개발 생산성 저하 Solution - Jest & React Testing Library 기반의 단위 테스트 및 통합 테스트 환경 구축 - MSW를 활용한 API Mocking으로 테스트 환경에서 안정적인 데이터 테스트 가능
프로젝트
크로스빔 프론트엔드 개발
2021년 3월 - 2022년 8월 · 1년 6개월
### 주요 업무 1. 리액트 쿼리(React Query) 도입 후 서버 상태와 클라이언트 상태 분리 Problem - 기존 Redux Toolkit을 활용한 상태 관리 방식에서 비동기 처리와 전역 상태 관리가 결합되어 있었음 - API 통신 로직이 Redux Store에 포함되면서 Store가 점점 비대해지고 유지보수가 어려워지는 문제 발생 Solution - React Query를 도입하여 서버 상태와 클라이언트 상태를 분리하여 코드의 가독성 및 유지보수성 향상 - 기존 Redux에서 관리하던 API 통신 관련 상태를 React Query로 대체하여 전역 상태의 복잡성 감소 - React Query의 자동 캐싱 및 데이터 동기화 기능을 활용하여 불필요한 API 요청 감소 및 성능 최적화 2. 타입스크립트(TypeScript) 도입 Problem - 기존 JavaScript 코드 기반에서는 동적 타입 언어의 특성상 타입 오류를 컴파일 단계에서 감지할 수 없음 - 프로젝트 규모가 커지면서 런타임 시점에서 발생하는 타입 관련 에러가 증가 Solution - TypeScript 도입을 통해 정적 타입 시스템을 적용하여 컴파일 단계에서 오류 사전 감지 - 코드 자동완성과 타입 체크 기능을 활용하여 개발 생산성 향상 및 협업 효율성 증가 - 점진적 마이그레이션을 진행하여 기존 코드와의 호환성을 유지하면서 전환을 원활하게 수행 3. Code Splitting과 이미지 Preloading을 이용한 성능 최적화 Problem - 프로젝트 규모 확장에 따라 번들 크기가 커지고 초기 로딩 속도가 저하되는 문제 발생 Solution - Route-based Code Splitting 적용해서 페이지 단위로 동적 import를 활용하여 필요한 코드만 로드하도록 처리 - Lazy Loading & Dynamic Import 도입해서 특정 기능과 관련된 컴포넌트는 사용 시점에만 로드하도록 최적화 - 이미지 Preloading을 적용하여 주요 페이지의 이미지 로딩 속도를 개선 - 불필요한 번들 크기를 줄이고, 초기 로딩 속도를 단축하여 사용자 경험 개선
KO