김하연 (Hayeon Kim)

기본정보

이름 김하연


생년월일1998.02.26 (만 25세)


연락처010-3932-9826


경력사항총 3년 1개월 핀다(1년), 인썸니아(2년 1개월)




안녕하세요, 3년차 프론트엔드 개발자 김하연 입니다.
저는 _ _ _ _ _ _ 하는 개발자 입니다.
  • 사용자의 입장에서 꼼꼼하게 제품을 개발하는
  • 조직의 발전과 성장하는 개발문화를 고민하는
  • 개발 지식을 문서화하고 공유하는 것을 좋아하는

Introduction.

3년차 프론트엔드 개발자 김하연 입니다. 새로운 기술의 습득을 중요시하며, 사내 스터디 블로그를 통해 개념을 문서화하여 정리하는 것을 좋아합니다. 적극적인 코드리뷰와 동료들과의 기술 토론을 즐기고, 토이 프로젝트를 통해 아이디어를 직접 실현하는 것에 큰 흥미를 느낍니다.

전국 대학 연합 프로그래밍 동아리 활동에서의 2년간의 운영진 활동, 그리고 세 번의 서비스 런칭을 시작으로 개발자의 커리어를 시작하게 되었습니다. 이후, 2년간 스타트업 전문 개발사에서 약 10여개의 스타트업 MVP 출시하며 고객사와의 효율적인 협업과 애자일 프로세스를 경험했습니다. 현재는 핀테크 스타트업을 경험하며 핀테크 도메인에 대한 이해를 높이고 페어 프로그래밍, 적극적인 코드리뷰, 사내 프론트엔드 개발 스터디 활동을 통해 더욱 전문적인 FE 개발자로 성장하고 있습니다.

Experience.


세상에 없던 대출 비교 플랫폼, 핀다


Period 2022.05 ~ 재직중


Position Frontend(Web), 대출 그로스, 인앱약정 2PT, 금융상품 PG


Projects 핀다 웹사이트, 핀다 웹앱


Tech React, Next.js, Typescript, Redux, Tailwind, Emotion, Cypress, Storybook


금융상품 PG

Frontend Engineer

2022.12 - 현재

Description.

핀다의 메인 프로덕트인 '비교 대출' 금융 서비스를 맡아 프론트엔드 개발을 작업하고 있습니다. 기존의 비교 대출 앱 페이지들을 웹 페이지로 이전하고, 리뉴얼 및 새로운 기능 추가 등의 개발을 맡았습니다. 2명의 FE 개발자와 2명의 ios / Aos 개발자, 백엔드 개발자, 디자이너, PO와 함 팀을 이뤄 애자일 프로세스로 작업을 진행했습니다.

React, Next.js, Typescript, Redux, Tailwind, msw를 이용해 개발했습니다.

What I did.

  • 기존 비교 대출 인트로 페이지를 리뉴얼하고, 웹으로 이전하는 작업을 진행했습니다. 기획부터 디자인, API 설계, 프론트개발까지 일주일이라는 짧은 시간에 작업하며 애자일 프로세스를 경험할 수 있었습니다. A/B 테스트 결과, 개선된 인트로 페이지를 본 사용자들의 한도 조회 비율이 이전 버전 인트로 조회 사용자에 비해 9% 상승하였습니다. [예시] [관련 기사]
  • 대출 한도 조회시 사용자들이 대출 의사결정을 더 쉽게 할 수 있는 '대출 의사결정 개선' 프로젝트를 작업했습니다. 프론트엔드 페이지 개발 및 설계를 주도하여 기존 대출 한도 조회 앱 페이지들을 웹으로 이전하는 작업을 맡아 하였습니다. 구체적으로 대출 한도 조회 리스트, 상세 페이지, 부결 페이지, 미승인 리스트 등의 페이지를 작업했으며, 확장성 있는 설계와 효율적인 컴포넌트화에 집중하여 개발했습니다. [예시]

인앱약정 2PT

Frontend Engineer

2022.09 - 현재

Description.

핀다 앱 내에서 은행 대출 상품을 확인하고 바로 약정을 체결할 수 있는 제품, 인앱약정 기능의 프론트엔드 개발을 맡고 있습니다. 2명의 FE 개발자와 2명의 ios / Aos 개발자, 백엔드 개발자, 디자이너, PO와 함 팀을 이뤄 애자일 프로세스로 작업을 진행했습니다. [예시]

React, Next.js, Typescript, Redux, Tailwind, msw를 이용해 개발했습니다.

What I did.

  • 인앱약정 프로세스 중 잦은 API를 호출하던 방식에서, Redux를 사용하여 상태값을 관리하고 최소한의 API 호출을 할 수 있도록 설계를 개선했습니다. 15회이상 여러번 호출되던 API 횟수를 줄여 불필요한 서버 요청을 5단계로 줄일 수 있었고, 프론트에서 Redux의 상태값을 바로 가져올 수 있도록 수정해 페이지 전환 속도를 개선하였습니다. [상세 코드]
  • 기존에 앱과 웹 사이의 페이지 이동이 부자연스럽다는 피드백이 있어, 웹을 옆으로 넘길 때 앱처럼 작동할 수 있는 transition을 적용했습니다. react-spring을 이용하여 웹에서도 앱처럼 자연스러운 모션으로 이동할 수 있도록 사용성을 개선하였습니다. [상세 코드]
  • 주소 검색을 위한 API 연동 및 Intersection Observer를 이용한 무한 스크롤 도입을 작업했습니다. 한번에 수백가지의 주소를 모두 가져오지 않고, 20개씩 끊어서 데이터를 가져올 수 있게 하여 사용자 경험을 개선하고 성능을 최적화했습니다.
  • 3주 단위 스프린트(2주 기능개발, 1주 QA)로 애자일 개발 프로세스를 경험했습니다. 매 스프린트 마다 적극적인 피드백을 주어 제품을 개선하였고, 구글 스프레드 시트에 자체 QA 사항을 체크하며 업무 상황을 공유하였습니다. 탁월한 제품 개발과 함께 성장할 수 있는 개발 문화를 만들 수 있도록 노력했습니다.

대출 그로스팀

Frontend Engineer

2022.06 - 현재

Description.

핀다의 ‘개인화된 금융 서비스를 더욱 빠르고 안정적이게 제공’하는 목표를 가지고 마케팅 팀과 협업, 디자인 시스템 구축의 업무를 맡고 있습니다. 특히, 핀다 내 컴포넌트의 재사용성을 높이고 관리하기 쉬운 디자인 시스템을 구축하기 위해 Storybook을 주도하여 개발, 관리하고 있습니다.

React, Next.js, Typescript, Redux, Tailwind, Storybook, styled-components를 이용해 개발했습니다.

What I did.

  • 디자인팀과 협업하여 디자인 시스템을 구축하였습니다. 기존 핀다 컴포넌트를 Storybook에 모두 정리하여 디자이너와 개발자간의 커뮤니케이션 비용과 프론트엔드 개발자의 컴포넌트 적용 시간을 개선하였습니다. (Jira 협업 요청 20% 개선)
  • Storybook을 주도적으로 관리하고 있으며, 팀원간 내용 공유를 위해 Storybook 사용 방법을 디자인팀 / Tech 전체팀에 발표하였습니다. 또현, 기존 컴포넌트를 최신화하여 전체적인 디자인을 변경 작업중입니다. 핀다 제품의 통일성을 증대시키고, 사용자 경험을 개선하는데 노력하고 있습니다. [참고 링크]
  • 마케팅팀과 협업하여 후순위 담보 대출 인트로 페이지 작업을 진행했습니다. Tailwind의 transition-transform, transform, duration, ease-in-out등 transition 클래스를 활용하여 재사용 가능한 자동 롤링 배너를 개발했습니다. 코드 재사용을 가능하게 하여 개발 효율성을 증대시켰으며, transition css를 활용하여 자연스러운 전환 효과를 적용하였습니다. [상세 코드]

Frontend(Web)

Frontend Engineer

2022.05 - 현재

Description.

핀다의 웹사이트를 개발하고 유지보수하는 업무를 맡고 있습니다. 효율성을 극대화 하기 위한 모바일 콘솔 적용, 레거시 클래스 코드를 함수형 코드로 리팩터링 (전세/오토/신용 대출 상품 페이지), 피플팀과 협업하여 채용페이지 관리 등의 업무를 맡았습니다.

React, Next.js, Typescript, Redux, Tailwind, styled-components, Cypress, Jest를 이용해 개발했습니다.

What I did.

  • 사내 프론트엔드 팀 내에서 기술 세미나 및 스터디에 적극적으로 참여했습니다. PR이 올라오면 주도적으로 코드 리뷰를 하였고, 동료들의 피드백을 반영하여 코드를 리팩토링 하였습니다. 혼자만 공부하는 개발자가 아니라, 함께 공유하고 소통하는 건강한 개발 문화를 위해 노력하였습니다.
  • 모바일 웹 콘솔 (vconsole)을 도입하여 stage, devstage에서 효율적인 디버깅을 할 수 있도록 기여했습니다. 핀다 앱 사용성을 해치지 않기 위해 5회이상 빠르게 연타 할 때에만 웹 콘솔이 뜰 수 있도록 적용했습니다. 기존의 stage, devstage 오류 발견 - 로컬 환경 설정 - 로컬에서 모바일 테스트 단계에서, 바로 stage, devstage에서 오류 발견 및 테스트를 할 수 있도록 테스트 과정을 축소시켰습니다. [상세 코드]
  • v1 레거시를 v2로 변경하는 작업을 통해 데이터 로딩 속도 개선 및 최신 문법으로 코드 베이스를 업데이트했습니다. 기존 Class component의 v1 코드를 Functional Component로 개선하여 v2 프로젝트로 이전하였습니다. 또한, 레거시 API 속도가 느리다는 단점을 보완하기 위해 자주 찾는 페이지들에 SSG(Static Side Generation)를 적용하였습니다. 그 결과 4초 이상 걸리던 API 요청이 0.5초로 개선 되었습니다.
  • Jest 및 Cypress로 자주 사용되는 대출 상품 hook 테스트 코드를 작성하였습니다. 대출 상품 정렬 필터 hook, pagination hook, 대출 상품 form hook 등 사용자들이 자주 호출하는 hook등이 잘 작동하는지 확인할 수 있는 테스트 코드를 작성했습니다. 프로덕션 배포 전에 코드 에러가 있는지 테스트 할 수 있었고, 개발자가 직접 하나씩 테스트하는 시간을 줄일 수 있었습니다.
  • 피플팀과 협업하여 채용 페이지 디자인 개선 및 그리팅 링크 추가 작업을 진행했습니다. 피플팀과의 커뮤니케이션 시간을 줄이기 위해, 피플팀이 직접 Google Spread Sheet로 채용 공고를 변경할 수 있도록 설계를 개선했습니다. 예외 상황에 대비하여, 실제 데이터 적용 시간은 revalidate 60*60을 주어 한 시간 후 적용될 수 있도록 작업했습니다.
  • 기존 Bitbucket에서 사용하던 모놀리식 레포를, Github에 이전하며 모노레포 구조로 변경하는 작업을 진행했습니다. 핀다 웹 페이지를 담당하여 모노레포 이전작업을 진행했습니다.


스타트업 플랫폼 1등 개발사, 인썸니아


Period 2020.05 ~ 2022.04


Position 개발 2팀 팀장(책임), 개발 1팀 팀원(프리랜서) / Full-Stack Developer


Projects 프랜차이즈 관리 웹 서비스, 다이어트 관리 웹앱, 인플루언서 매칭 서비스, 중고 거래 웹앱, 패션 SNS 쇼핑몰 등 10개의 초기 스타트업 서비스


Tech React, Next.js, Typescript, Recoil, React-Query, Tailwind, AWS (S3, EC2, Amplify, RDS, Cognito) / Ruby, Ruby on Rails, Framework7


개발 2팀 팀장(책임)

Software Engineer

2021.04-2022.04

Description.

책임 프론트엔드 개발자로서 5개의 초기 스타트업 웹/웹앱 서비스 개발했습니다. 제품 초기 세팅부터 기능 개발, 리팩토링, 퍼블리싱, 유지보수를 맡았습니다. 고객사와 실시간으로 소통하며 애자일한 프로세스를 경험할 수 있었습니다.

React, Next.js, Typescript, Recoil, React-Query, Tailwind, AWS (S3, EC2, Amplify, RDS, Cognito)를 이용해 개발했습니다.

What I did.

  • Rails(BE)와 React(FE)를 이용한 5개의 초기 스타트업 웹 서비스를 개발 및 유지보수 했습니다. Next.js/ Node.js/ Prisma를 이용해 프론트엔드 개발을 고도화했습니다. 여러가지 기술과 포지션을 맡아 개발에 대한 폭넓은 이해를 할 수 있었고, Frontend / Backend / 퍼블리싱 / Devops 등 다양한 경험을 할 수 있었습니다.
  • React 활용한 인썸니아 내부 빌더를 제작에 참여했습니다. 프로젝트 초기 세팅 시 기본적으로 들어가는 기능들을(좋아요, 상품 리스트, 게시판, 로그인/회원가입, 장바구니 등) 함께 개발하였고, 다른 개발자 분들의 초기 프로젝트 세팅 개발 시간을 줄일 수 있었습니다. (약 80시간 단축)
  • AWS 서비스를 이용한 사용자 관리(Cognito) 및 배포 (ec2, s3)를 작업했습니다. 기존 MVP 서비스를 더욱 안정성 있는 AWS 서비스로 이전함으로써 서비스의 보안과 확장성을 고려한 설계를 하였습니다.
  • 약 20개의 사내 기술 도큐를 작성하여 개발자들에게 문제 해결 과정을 공유하였습니다. 혼자서만 기술을 배우고 끝내는 것이 아니라, 모두에게 과정 및 결과를 공유함으로써 함께 성장하는 개발 문화 정착에 기여했습니다. [예시 1], [예시 2], [예시 3]

개발 1팀 팀원 (프리랜서)

Software Engineer

2020.05-2021.03

Description.

Ruby on Rails 풀스택 개발자로 5가지의 초기 스타트업 웹/웹앱 서비스를 개발, 유지보수를 진행했습니다. 고객사와 실시간으로 소통하며 우선순위에 맞게 MVP 기능을 개발하는 중요성을 배웠습니다.

Ruby, Ruby on Rails, Framework7를 이용해 개발했습니다.

What I did.

2020.05-2021.03

  • Rails와 framework7을 이용한 다섯 가지의 웹 서비스 개발 및 유지보수를 작업했습니다. DB 설계부터 프로젝트 초기 세팅, 상세 기능 개발, 어드민 개발, QA, 그리고 유지 보수까지 MVP 서비스를 처음부터 끝까지 주도하여 개발해보는 경험을 할 수 있었습니다.
  • 디자이너가 전달해준 디자인 피그마를 참고하여 퍼블리싱 작업을 하였습니다. BEM(Block, Element, Modifier) 방식으로 커스텀 클래스를 만들어 CSS를 적용했습니다. 클래스 구조를 먼저 설계한 후, 비슷한 요소들끼리 묶어서 Block, Element, Modifier를 하나씩 추가하며 작업하여 코드를 더 간결하고 체계적이게 개선할 수 있었습니다.
  • 사용자의 입장에서 UI가 편리한지, 뒤로가기 플로우는 자연스러운지, 모호한 버튼 및 워딩이 없는지 섬세하게 체크하며 수정이 필요한 부분은 고객사와 직접 논의하여 반영하였습니다.

Projects.

핀다 앱

회사 프로젝트

2022.05 ~

Description.

핀다 앱의 웹뷰를 담당하여 개발하였습니다. 대출 상품 페이지의 레거시 코드 리팩토링 작업을 하였고, 핀다 앱 내에서 대출 상품 및 약정을 비교하고 대출을 받을 수 있게하는 인앱약정 상품을 개발했습니다. 또한, 기존에 앱으로 구성되어있던 한도조회 리스트/상세/부결/미승인 페이지를 웹뷰로 리뉴얼 & 이전하는 대출 의사결정 개선 프로젝트를 주도하여 개발했습니다.

Tech Stack.

React, Next.js, Redux, Typescript, Tailwindcss

What I did.
  • 대출 상품 검색 페이지의 기존 레거시 API 요청이 4초 이상 걸린다는 고질적인 문제가 있었습니다. 따라서,getStaticProps로 자주 찾는 100개 페이지 데이터를 미리 SSG를 방식으로 가져올 수 있도록 작업하였습니다. 그 결과 4초 이상 걸리던 렌더링 속도가 0.5초 이내로 개선되었습니다.
  • 기존 Class component의 v1 코드를 Functional Component로 개선하여 v2 프로젝트로 이전하였습니다.
  • 인앱약정 상품의 주소 검색을 위해서 Intersection Observer를 이용한 무한 스크롤 도입을 작업했습니다. 한번에 수백가지의 주소를 모두 가져오지 않고, 20개씩 끊어서 데이터를 가져올 수 있게 하여 사용자 경험을 개선하고 성능을 최적화했습니다.
  • 금융사 리스트를 가져오는 데 딜레이 시간동안 Skeleton을 띄워 사용성을 개선하였습니다. Skeleton을 사용 용도에 따라 (Grid / List) 재사용가능한 컴포넌트로 만들어 코드 반복을 줄였습니다.
  • 여러가지 상황에 대한 테스트를 위해 msw(Mocking Service Worker)를 적용하여 Mocking API를 이용해 개발했습니다.
  • 앱으로 구성되어있던 한도조회 리스트/상세/부결/미승인 페이지를 웹뷰로 리뉴얼 & 이전하는 대출 의사결정 개선 프로젝트를 주도하여 개발했습니다. 웹뷰 성능 개선을 위해 lighthouse로 웹뷰 페이지를 분석하였고, 속도 및 성능을 개선하는 작업을 진행했습니다.
finda app

핀다 웹사이트

회사 프로젝트

2022.05 ~

Description.

핀다 웹사이트를 개발, 유지보수하는 작업을 맡았습니다. 회사 소개 페이지와 채용 페이지를 효율적으로 개선 하였고, 디자인 시스템 구축을 위해 기존 핀다의 레거시 컴포넌트를 최신화하여 Storybook에 배포하였습니다. Web팀의 더욱 효율적인 디버깅을 위해 웹 콘솔을 도입하거나, 마케팅 팀의 요청에 대응하여 여러가지 이벤트 페이지 및 IE 브라우저 대응을 맡았습니다.

Tech Stack

React, Next.js, Redux, Typescript, Tailwindcss, Jest, Emotion, Storybook

What I did.
  • 채용 페이지 데이터를 구글 스프레드 시트와 연동하는 작업으로 개발 요청 및 협업 시간을 200% 단축했습니다. 필요한 데이터를 구글 스프레드 시트에서 직접 변경할 수 있도록 시트의 ID, API Key, 셀 범위 등을 정의하고 웹사이트와 연동하였습니다.getStaticPropsrevalidate 60*60을 적용하여 데이터를 변경하면 한시간 후 자동 적용될 수 있도록하였습니다.
  • 디자인팀과 협업하여 디자인 시스템을 구축하고 있습니다. 기존 핀다 컴포넌트를 최신화하고, 모든 컴포넌트를 Storybook에 올려 개발자 및 디자이너가 컴포넌트를 효율적으로 활용할 수 있도록 기여했습니다.
  • stage, devstage에서 효율적인 디버깅을 할 수 있도록 모바일 웹 콘솔 vconsole을 도입했습니다. 웹 사용성을 해치지 않기 위해 두 손가락으로 5회이상 빠르게 연타 할 때에만 웹 콘솔이 뜰 수 있도록 적용했습니다. web 팀 개발자 분들에게 디버깅할 때 과정이 더욱 빠르고 편리해졌다는 긍정적인 피드백을 들었습니다.
  • 마케팅팀의 요청으로 IE 브라우저에서는 핀다 웹페이지 대신, 경고 페이지로 리다이렉트 되도록 작업했습니다. 브라우저의 user-agent 값으로 IE 브라우저인지 확인하였고, IE 브라우저 접근 시 Next.js의redirects를 사용해 경고 페이지로 리다이렉트를 시켰습니다. 그 결과, IE 브라우저에서 나타나는 화면 깨짐 현상을 해결하였고, 마케팅 광고 검수 승인을 받을 수 있었습니다. [참고 링크]
finda web

채찍단

회사 프로젝트

2021.11 → 2022.02

Description.

다이어트 관리 및 채팅 서비스 채찍단을 주도하여 개발했습니다. 메인 개발자로 프로젝트를 리드하였고 고객사, 개발자 2명, 기획자 1명과 협업하였습니다.

고객사와 지속적으로 미팅을 하며 새로운 기능을 추가 & 수정하였고, O2O 다이어트 앱 도메인의 이해도를 함께 높일 수 있었습니다. 애자일한 협업 프로세스를 경험하며 비즈니스와 관련된 지속적인 대화를 중요시하게 되었습니다.

Tech Stack.

React, Next.js, Recoil, Typescript, Node.js, Prisma, AWS (S3, cognito), Firestore, Vercel

What I did.
  • 채팅 기능을 리팩토링 하며 기존 polling 방식에서 firestore를 활용하여 실시간 채팅 기능을 구현했습니다. 기존 설계에서 버벅 거리거나 2초 이상 지연되던 성능 문제를 해결하였고, 채팅의 사용성을 개선하였습니다. 사내 첫 Firestore 도입이었기 때문에, Firestore 관련해서 리서치를 하였고, 기술 도큐를 작성해 공유하였습니다. [참고 링크]
  • 다이어트 회원들에게 시각화된 몸무게 차트를 그래프로 확인할 수 있는 페이지 개발을 진행하였으며, react-calendar를 커스터마이징 하여 다이어트 캘린더를 구현했습니다. [참고 링크]
  • Next.js의 API Routes와 prisma를 활용해 요청 Method에 따라 데이터를 추가/수정/삭제/요청하는 작업을 진행했습니다. 백엔드 없이 프론트엔드를 고도화시켜 하나의 서비스를 처음부터 끝까지 개발하였습니다.
  • 고객사 요청으로 기존에 사용하던 웹페이지 도메인에서 서브 도메인을 생성하여 웹앱 url을 연결하는 작업을 진행했습니다.
sagn

글로리어스

회사 프로젝트

2021.08 → 2022.02

Description.

인플루언서 캠페인 매칭 서비스 글로리어스를 주도하여 개발했습니다. 메인 개발자로 프로젝트를 리드하였고, 고객사, 개발자 2명, 기획자 1명, 디자이너 1명과 협업하였습니다.

사용자의 타입(관리자 / 유저 / 브랜드)과 언어(영어 / 일본어 / 한국어)에 따라 보여지는 화면이 달라서 복잡한 사용자 상태 관리 해결에 집중하여 개발하였습니다.

Tech Stack.

Ruby on Rails, Ruby, React, Next.js, Recoil, React-Query, Typescript, AWS (S3, ec2, Amplify)

What I did.
  • 브랜드 유저 및 관리자가 버튼을 누르면, 자동으로 본인 상품의 주문 내역을 일별로 나눠서 csv로 추출할 수 있도록 csv 다운로드 기능을 구현했습니다. react-query로 주문 데이터를 객체 형식의 배열로 받아와, react-csv 라이브러리를 활용해 csv로 추출하였습니다. [참고 링크]
  • 사용자 언어별로 페이지가 다르게 보일 수 있도록 설계하였습니다. Next.js의 i18n 을 적용하여 사용자의 언어(영어/ 한국어 / 일본어)에 맞는 페이지를 보여주는 다국어 기능을 개발했습니다.
  • React-Query와 Recoil을 이용하여 사용자 정보를 가져오고, 복잡한 전역 상태 관리를 진행했습니다. 특히, Recoil을 활용해 사용자의 현재 상태를 저장하고, 사용자 타입에 따라 다른 화면 (유저 / 관리자 / 브랜드)를 보여줄 수 있도록 설계했습니다.
  • 프로젝트 확장에 대비해 더욱 안정성 있는 AWS 서비스로 이전 작업을 진행했습니다. AWS cdk를 활용하여 배포 작업을 진행하였으며, AWS cognito를 이용한 회원 관리를 구현하였습니다.
  • AWS 배포 중 빌드 파일이 AWS Lambda 배포 패키지 할당량을 초과해서 배포가 되지 않는 문제가 있었습니다.webpack-bundle-analyzer로 빌드 파일 크기를 분석하였고, 번들 사이즈가 큰 모듈 위주로 tree shaking을 진행했습니다. 또한, 불필요한 파일들을 삭제하고 과도하게 분리된 페이지들을 합쳐 빌드 크기를 5/6으로 줄일 수 있었고 배포에 성공하였습니다. [참고 링크]
gloryus picture

모두다

회사 프로젝트

2021.02 → 2021.08

Description.

사업자를 위한 중고거래 서비스 모두다를 서브 개발자로 개발하였습니다. 고객사, 2명의 개발자와 협업하였으며, 프로젝트의 30% 이상 기여했습니다.

해당 프로젝트를 통해 리액트가 서버로부터 데이터를 받는 과정, 데이터를 받아서 서버 상태를 관리하는 방법 (react-query)과 상태 관리(recoil) 등 리액트의 전반적인 흐름을 배울 수 있었습니다. 또한, tosspayment 외부 결제 api를 적용하여 프론트에서 결제 처리를 해주는 과정을 경험했습니다.

Tech Stack.

postgres, AWS (S3, ec2)

개발 언어 및 라이브러리

Ruby on Rails, Ruby, React, React-Query, Recoil, Typescript

What I did.
  • React와 Ruby on Rails를 사용하여 중고거래 O2O 서비스를 구현했습니다. 상품 찜하기부터 장바구니 담기, 간편 결제, 바로구매, 환불, 주문내역 확인 및 수정 기능을 구현하며 전체적인 구매 프로세스 개발을 경험할 수 있었습니다.
  • API 호출 성능 최적화를 위해 React-Query캐싱을 적절히 활용하였습니다. API 호출 데이터의 기본 만료시간이 지나기 전까지는 동일한 데이터의 api 재호출을 방지하도록 캐시를 적용하였고, 특정 상품을 수정했을 경우에만 캐시를 강제로 무효화(invalidate)하여 목록을 새로고침 해주었습니다.
  • 외부 결제 api인 토스 페이먼츠(tosspayments) 를 적용해 프론트와 백엔드에서 결제 처리를 해주었습니다. 프론트에서는 tosspayments/sdk 패키지를 사용해 결제액, 주문명, success url 등 결제 요청 정보를 토스에 요청하였으며, 주문의 완료 여부를 전달받고 백으로 넘겨주었습니다. 백에서는 결제 완료 (혹은 실패)된 주문 정보를 받아 사용자의 주문 데이터를 업데이트 해주었습니다.
modooda picture

Toy Projects.

bloggy

2023.03 ~

개인 토이 프로젝트

Description.
  • Open AI의 text-davinci-003를 이용한 개인 토이 프로젝트 (1인개발)
  • 기여도 100%
Tech Stack.
  • Frontend: React.js, Next.js, Typescript, Tailwindcss
  • Backend: Prisma, Supabase, Next.js API Routes
  • Deployment: Vercel
What I did.
  • Open AI의 text-davinci-003를 이용해 블로그 글 자동 생성 서비스를 작업했습니다. (링크) 또한, 해당 API를 사용하여 실시간 채팅 앱을 구현했습니다. (링크)
  • Next.js 프로젝트의 확장성을 위해 Next/auth를 도입하였습니다. Next/auth를 이용한 인증 및 회원가입을 구현하며 인증 프로세스를 개발했습니다.
  • Prisma ORM을 활용한 재사용 가능한 네 가지 컴포넌트를 개발하여, 관리자 페이지를 구현했습니다. (링크)
findaoverflow

2022.10 ~

개인 토이 프로젝트

Description.
  • 개인 토이 프로젝트 (본인 포함 2명의 개발자)
  • 기여도 50%
Tech Stack.
  • React 18, Next.js, Typescript, Firestore(firebase), React-query, recoil, tailwindcss, Jodit Editor, next/auth
What I did.
  • 백엔드 없이 Next.js의 API Router와 Firestore를 이용한 데이터 생성/수정/삭제 기능을 구현했습니다. Firestore의 구조와 원리에 대한 이해를 높였습니다. [상세 링크]
  • 초기 Firebase Auth를 이용한 회원가입을 적용했으나, Next.js 프로젝트의 확장성을 위해 Next/auth를 도입하였습니다. Next/auth를 이용한 인증 및 회원가입을 구현하며 인증 프로세스를 경험했습니다.
  • react-hook-form을 이용한 게시글 폼 작업을 진행하였으며, Jodit Editor를 추가하여 에디터로 포스트 작성을 할 수 있게 개선하였습니다.
구글 캘린더 클론

2022.03

개인 토이 프로젝트

Description.
  • 개인 토이 프로젝트 (구글 캘린더 클론 프로젝트)
  • 기여도 100%
Tech Stack.
  • React(create-react-app), Redux-Toolkit, typescript, tailwindcss
What I did.
  • Redux-Toolkit를 이용해 복잡한 캘린더의 상태를 관리했습니다. 기존 Redux의 boilerplate를 축소한 Redux-Toolkit의 유용함을 경험했습니다.
  • 캘린더, 이벤트, 모달 세 가지의 store를 생성하여 기능별로 상태 관리를 분리하여 Redux를 설계했습니다.
VanillaJS 타이핑 게임

2022.03

개인 토이 프로젝트

Description.
  • 개인 토이 프로젝트 (VanillaJS로 만든 타이핑 게임 프로젝트)
  • 기여도 100%
Tech Stack.
  • vanillaJS, webpack, jest, json-server
What I did.
  • VanillaJS만으로 타이핑 게임 서비스를 설계하고, 상세 기능들을 구현했습니다. VanillaJS의 history API를 이용해 직접 라우팅 상태를 관리했습니다.
  • Json-server를 사용해 mock 데이터 서버를 띄운 뒤, async / await 함수로 주어진 API URL을 fetch 하도록 설정하였습니다.
  • 자주 사용되는 유틸 함수와 게임 화면을 Jest로 단위 테스트 코드를 작성했습니다. 중요한 함수 위주로 코드에 잘못된 점은 없는지 보완할 수 있었습니다.
O2O 학원 매칭 서비스

2020.12 ~ 2021.11

인썸니아 프로젝트

Description.
  • Insomenia 사내 외주 프로젝트 (서브개발)
  • 학원 수강 신청 / 관리 웹앱
  • 기여도 40%
Tech Stack.
  • ruby on rails, javascript, jquery, ubuntu, framework7
What I did.
  • Ruby on rails를 활용하여 학원 거리순 정렬 기능을 개발했습니다.
  • ajax와 자바스크립트의 location Web API를 활용해서 주변 지역별로 가까운 학원 보여주기 기능을 작업했습니다.
  • Framework7을 이용해 학부모/학생을 위한 학원 및 강의 신청 앱을 개발했습니다. ActiveAdmin 라이브러리를 활용하여 관리자/선생님을 위한 수강 관리 페이지를 개발했습니다.
  • 디자인(피그마)에 맞게 퍼블리싱 작업을 주도적으로 진행했습니다.
Asianalyse

2019.10 ~ 2020.03

개인 외주 프로젝트

Description.
  • 개인 프로젝트로 진행한 학술지 크롤링 웹 사이트.
  • 기여도 100%
Tech Stack.
  • postgres, AWS, EC2, ruby on rails, javascript, 헤로쿠, 카페24 (ubuntu), postgres
What I did.
  • Ruby on Rails의 i18n을 적용하여 프랑스 및 영어로 사이트를 볼 수 있도록 다국어 설정을 구현했습니다.
  • 기존에 수기로 학회 공지사항을 입력하던 구조에서, 자동화를 할 수 있도록 프로젝트 설계를 보완했습니다. 자동화를 위해 Selenium으로 주요 학회 사이트 공지사항을 크롤링하여 가져오도록 하였고, cron job을 설정해 매주 정해진 시간마다 자동으로 크롤링이 작동하도록 서비스를 개선하였습니다.
  • Rails의 impressionist gem을 활용하여 사용자 방문 횟수를 추적하였고, Google Analytics를 추가해 전체적인 사이트 유입 현황을 분석했습니다.

Other Experience.

Open Source

  • React 18 공식 도큐의 Hooks API Reference 페이지를 일부 번역하였습니다. [PR 링크]
  • React 18 공식 도큐의 React 최상위 API 페이지를 일부 번역하였습니다. [PR 링크]
  • Toast UI Editor의 react-editor wrapper가 react 18 과 의존성 문제가 있다는 것을 확인하여, 이슈를 생성, react-editor wrapper의 리액트 관련 dependencies를 최신 버전으로 업그레이드했습니다. [PR 링크], [Issue 링크]

Presentation

  • 사내 세미나를 열어 디자인팀 & 테크팀에게 디자인 시스템 개념 및 Storybook 사용 방법을 발표했습니다. [참고 링크]
  • Zerobase의 프론트엔드 개발 용어집 강의를 진행했습니다. [강의 링크]
  • 사내 프론트팀 세미나에서 useEffect 완벽 가이드를 요약하여 발표했습니다. [참고 링크]
  • 대학 연합 IT 동아리 멋쟁이사자처럼에서 비전공생들을 대상으로 2년동안 교육을 진행하였고, DjangoReact 강의를 제공했습니다. [Django 강의 링크]

Skill.

1. Programming Language

  • Javascript, Typescript, Ruby, Python

2. Framework / Library

  • Next.js, Ruby on Rails
  • React

3. Frontend Library

  • Redux, Recoil, React-Query
  • TailwindCSS, Styled-Components

4. Tools

  • Yarn, Yarn Berry, Babel, Webpack
  • Git / Github, Bitbucket

Education.

2018 - 2020 전국 코딩동아리 멋쟁이사자처럼 (6기 수료/ 7,8기 운영진)

2016 - 2021 연세대학교 국제학부 창의기술경영학과 (졸업)