프론트엔드 개발자

김영천

보충역 신규 산업기능요원으로 구직하고 있어요.

- 문제를 해결하기 위한 도구가 있다면 빠르게 학습합니다. 
관리자 페이지 제작을 위해 Express를 학습하고 백엔드 서버를 구축했습니다.

- 개발 뿐만 아니라 사용자 관점에서 비즈니스 임팩트의 중요성을 알고 있습니다. 
아이디어 검증을 위해 랜딩 페이지에서 19% CVR을 달성하고, 실제 참여자들을 만나 10명이상 인터뷰를 진행했습니다.

- ‘소통은 수평적으로, 업무는 수직적으로’ 라는 생각을 항상 가지고 있습니다.
의견 교환은 누구나 할 수 있어야 하고, 결정권자의 선택은 팀원들이 믿고 따라야 한다고 생각합니다.

<ul><li>오픈소스SW를 활용한 개발 결과물 NextBlog를 i-OSS 플랫폼에 공유하고, 라이선스 준수 및 코드 품질을 인정받았습니다.</li></ul>

[수상] 2024 인하대학교 오픈소스SW 페스티벌 우수상

<ul><li>카페 프리퀀시 NFT를 작은 카페에도 도입할 수 있는 Dapp을 개발하였습니다.</li><li>팀원은 총 5명으로 스마트 컨트랙트, 프론트엔드 개발을 맡아 진행했습니다.</li></ul>

[수상] NFT 블록체인 마켓 앱 만들기 with 그라운드 X 3기 대상

<ul><li>인하대학교 직할, 창업지원단 소속 창업동아리 인하벤처클럽에서 부회장으로 활동했습니다.</li><li>1년간 7명의 운영진과 함께 약 100명 규모의 동아리를 기획하고 운영하며 팀원들과의 협업하는 과정을 배울 수 있었습니다.</li><li>1년동안 크라우드 펀딩, 총 80명 규모의 대학 연합 아이디어톤 Connect(얌얌톤), 스타트업 총회를 주도적으로 기획하고 운영하였습니다.</li></ul>

[활동] 창업동아리 인하벤처클럽 부회장

Blog

Github

<h4>소개</h4>SaaS template인 vercel의 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nextjs/saas-starter">saas-starter</a>의 다음과 같은 문제점을 해결하여 오픈소스로 공개했습니다.<ul><li>한국에서 지원되지 않는 Stripe Payments → StepPay로 한국 결제 &amp; 정기결제 지원<ul><li>초기에 PortOne으로 마이그레이션 시도 후, 코드베이스 복잡성을 고려해 Stripe와 구조가 유사한 StepPay로 최종 결정</li><li>사용자가 코드베이스를 쉽게 이해하고 확장할 수 있도록 설계</li></ul></li><li>Oauth 없음 → Google, Naver Oauth 로그인 추가 &amp; 기존 로그인과 Auth.js로 통합</li><li>다국어 지원 X → 한/영 지원 &amp; 번역 엑셀 파일을 파싱하여 json으로 변환하는 스크립트 추가</li><li>다크모드 X → 다크모드 추가</li></ul><h4>주요 문제 해결 &amp; 구현</h4><ul><li>PortOne 결제 시스템 구현 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.nextblog.me/YoungCheon%20Kim/1b1e895f-ae86-80e4-a315-cb4541c23223#1b1e895fae8680bb8d5ed13b5b018c1f">블로그</a><ul><li>Next.js serverless API로 빌링키 발급 및 정기결제 프로세스 구축</li><li>결제 후 Webhook API를 처리하는 동안 이전 버전의 DB 반영 문제</li><li>결제 요청 즉시 구독 상태 업데이트(낙관적 업데이트) 후 webhook 검증 도입으로 사용자 대기 시간 최소화</li></ul></li><li>Multi Language 번역 Excel 파일 json으로 자동 변환 도입 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/kych0912/saas-starter-ko/blob/main/scripts/CsvToLocales.js">Github</a><ul><li>i18n 도입으로 언어 번역 시 json 변환 시간 오래 걸리는 문제</li><li>Excel파일을 파싱하여 자동으로 json 파일로 변환하는 스크립트 도입으로 번역 후 json 변환시간 50% 이상 단축</li></ul></li></ul><h4>기술</h4><ul><li>Frontend<ul><li>Next.js (15), TypeScript, tailwind, shadcn/ui,</li></ul></li><li>DB<ul><li>Drizzle, Supabase</li></ul></li><li>Payment<ul><li>StepPay</li></ul></li></ul><h4>소스</h4><a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://github.com/kych0912/saas-starter-ko">Github</a> / <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://saas-starter-ko.vercel.app/">Example</a> (id: <a target="_blank" rel="noopener noreferrer nofollow" href="mailto:test@test.com">test@test.com</a>, pw: admin123)

saas-starter-ko | saas building template ( 오픈소스 STAR 180+)

<h4>소개</h4>노션 페이지를 블로그 포스트로 만들어주는 블로그 플랫폼작성한 블로그들을 해당 서비스에 업로드 하고 있습니다.<h4>주요 문제 해결 &amp; 구현</h4><ul><li>노션 페이지 검증 속도 개선 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.nextblog.me/YoungCheon%20Kim/163e895f-ae86-8071-a8ba-f61a6e39c697">블로그</a><ul><li>블로그 포스트로 변환한 노션 페이지 ID만 저장되어 하위 페이지가 저장되지 않는 문제</li><li>단일 노션 페이지만 저장하고 Bottom-Up 검증 방식 도입으로 업로드 시간 91.7% 개선 (19.86s → 1.64s)</li><li>페이지 접근 시 재귀적으로 상위 페이지 확인하는 알고리즘으로 DB 저장 공간 효율화</li></ul></li><li>노션 API 호출 최적화 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.nextblog.me/YoungCheon%20Kim/163e895f-ae86-8015-a966-fe0b74e618aa">블로그</a><ul><li>블로그 포스트 미리보기 Section에서 노션 페이지 간 이동 시 불필요한 API호출 문제</li><li>React Query staleTime 및 cacheTime 설정으로 API 호출 50% 감소</li><li>중복 API 요청 제거로 페이지 이동 시 응답시간 60% 단축 (460ms → 185ms)</li></ul></li><li>Context API 성능 개선 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.nextblog.me/YoungCheon%20Kim/163e895f-ae86-80b7-9b94-ed4a3ec2ecb3">블로그</a><ul><li>Context의 불필요한 구독 패턴 제거로 렌더링 성능 14.3% 개선 (47.7ms → 40.9ms)</li></ul></li><li>사용자 경험 향상 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.nextblog.me/YoungCheon%20Kim/1b0e895f-ae86-80df-bc30-d5a5520574f0">블로그</a><ul><li>Fetcher Component에 loading/error 상태 통합 관리 &amp; API 호출 선언적으로 접근</li><li>Error Boundary로 에러 발생 컴포넌트만 격리하여 재시도 UI 제공</li></ul></li></ul><h4>기술</h4><ul><li>Frontend<ul><li>Next.js (14), TypeScript, React-Query, Material UI, react-notion-x, next-auth</li></ul></li><li>DB<ul><li>Mysql, EC2</li></ul></li></ul><h4>소스</h4><a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://github.com/kych0912/notion-blog-next">Github</a> / <a target="_blank" rel="noopener noreferrer nofollow" href="http://NextBlog.me">NextBlog.me</a>

노션 블로그 서비스 NextBlog

<h4>소개</h4>친구들과 함께 여행을 가고자 할 때 쉽고 간단하게 여행 일정을 맞출 수 있게 도와주는 서비스<h4>인원</h4>PM 1명/프론트 3명/백엔드 4명/디자인 2명<h4>주요 업무</h4><ul><li>프론트 팀 리드<ul><li>주간 미팅 진행 및 개발 일정, 우선순위 설정으로 프로젝트 일정 관리</li><li>회의록, 컴포넌트 사용 방법 등 소통을 위한 문서화</li></ul></li><li>복잡한 UI 상태 관리를 zustand를 활용하여 추상화한 모달 시스템 개발 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Yeogigallae/Front-End/pull/132">Modal PR</a></li><li>합성 컴포넌트 패턴, 확장 규칙 설계 등을 이용하여 UI 컴포넌트(버튼, 카드, 헤더, 모달, 스켈레톤) 구현</li><li>Kakao Map API, 모빌리티 API를 이용하여 여행 경로 시각화</li><li>코스, 친구, 마이페이지 개발</li></ul><h4>주요 문제 해결</h4><ul><li>다중 페이지 상태 관리 개선 &amp; 응집도, 추상화 개선 - <a target="_blank" rel="noopener noreferrer nofollow" href="https://drive.google.com/file/d/1TQSIyr9iVsdKiywzfQJfksoAs76iRys5/view?usp=sharing">발표자료</a> / <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.nextblog.me/YoungCheon%20Kim/1ade895f-ae86-8042-ab24-c6ab813edac1">블로그1</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.nextblog.me/YoungCheon%20Kim/1afe895f-ae86-8004-8610-cb38996e935f">블로그2</a><ul><li>toss useFunnel 오픈소스를 참고하여 필요한 부분만 팀에서 사용하기 위한 Custom useFunnel(useFunnel)로 도입</li><li>제네릭 타입을 활용한 타입 안정성 강화 및 자동완성 지원</li><li>상태 관리 (useState) 보일러 플레이트 문제를 해결하기 위해 useFunnel 내 상태관리 도입으로 DX개선 후 해당 내용 발표</li></ul></li></ul><h4>기술</h4><ul><li>Frontend<ul><li>React, TypeScript, Zustand, styled-components, React-Query, Axios</li></ul></li><li>배포<ul><li>Github Actions, Vercel</li></ul></li></ul><h4>소스</h4><a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://github.com/Yeogigallae/Front-End">Github</a> / <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://www.figma.com/design/8loimbVOIQc7kgI2B92Y6X/%EC%97%AC%EA%B8%B0%EA%B0%88%EB%9E%98-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%95%88?node-id=971-5614&amp;t=9Yq1VCPyXY2f3Oku-1">Figma</a>