Frontend Developer

황혜빈

안녕하세요 프론트엔드 개발자 황혜빈입니다.

저는 학교 수업에서 처음 개발 수업을 접한 후 개발에 흥미가 생겨서 개발 공부를 시작했습니다. 부트 캠프를 다니지 않고 독학으로 진행했으며, 여러 부트 캠프의 커리 큘럼을 확인하고 해당 순서대로 프론트엔드 공부를 진행했습니다. 혼자 및 여러 사람들과 프로젝트를 진행했으며 프론트엔드만 국한된게 아니라 백엔드 및 디자인, 기획까지 전반적으로 참여했습니다

코드를 작성할 때 "왜"에 대해서 항상 고민하며, 읽기 좋은 코드에 관심이 많습니다. 또한 개발자의 가장 중요한 역량은 코드를 만 줄, 천 줄 작성하는 것이 아니라 비즈니스 문제를 해결하고 유저에게 가치를 전달하는 것이라고 생각합니다. 커리어 목표는 사이드 프로젝트를 진행하면서 프론트만 경험하는 것이 아니라 다양한 경험을 하는 것에 성취감 및 재미를 느껴서 CTO가 되는 것이 목표입니다.

성실함

책임감

유연함

목표 지향적

긍정적

반려견과의 소중한 산책 기록 및 근처 동네의 펫시터 연결 및 활동을 할 수 있는 웹뷰 기반 모바일 애플리케이션입니다. 풀스택 2명이서 진행했으며 전반적인 기술 선정부터 기획까지 A부터 Z까지 전부 참여했습니다.<h5>기술스택 </h5><ul><li>Frontend: React-Native, NextJS, Tanstak Query, Typescript, TailwindsCSS, Recoil </li><li>Backend: Bun, ElysiaJS, Prisma, Postgre SQL</li></ul><h5>링크</h5><ul><li>소개: <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="/55f8212e920c411da5c3a993bbb6445b?pvs=25">퍼피랑 소개 페이지</a></li><li>IOS 애플리케이션: <a target="_blank" rel="noopener noreferrer nofollow" href="https://apps.apple.com/kr/app/%ED%8D%BC%ED%94%BC%EB%9E%91/id6504149377">앱스토어 퍼피랑</a></li><li>Web: <a target="_blank" rel="noopener noreferrer nofollow" href="https://puppylang.netlify.app">https://puppylang.netlify.app</a></li><li>Github: <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://github.com/puppylang">github/puppylang</a></li></ul><h5>담당 </h5>Frontend <ul><li>SEO 및 FCP 단축 및 UX 향상을 위해 Server Side Rendering 추가</li><li>소셜 로그인(애플, 카카오, 네이버) 개발</li><li>React Native 셋팅 및 웹뷰 통신 로직 개발</li><li>웹소켓을 이용한 채팅 플로우 및 화면 개발 및 Server Sent Event를 통해 채팅 알림 개발</li><li>Sentry의 에러 데이터 커스텀을 통한 에러 모니터링 셋팅 및 개발</li><li>카카오 로컬 API를 통해 지역 검색 플로우 및 화면 개발</li><li>유저 신고 및 차단, 개인 정보 동의서 플로우 및 화면 개발</li></ul>Backend<ul><li>JWT토큰, 소셜로그인을 이용한 유저 CRUD 개발</li><li>Bun 서버 셋팅 및 Koyeb에 서버 및 DB 호스팅</li><li>공공데이터 / 카카오 Local API 를 이용해 지역 검색 로직 CRUD 개발</li><li>유저 신고, 차단 CRUD 개발</li><li>펫 CRUD 개발</li><li>AWS S3 이미지 업로드 개발</li><li>Socket를 이용해 채팅 로직 및 CRUD 개발</li></ul>

퍼피랑

모의 주식 페이지로 주식을 구매 판매 할 수 있고 다음 날의 가격 변동에 대한 힌트를 통해 가격 변동을 예측하고 투자할 수 있습니다.기술스택<ul><li>React, Typescript, ChartJS, Redux-toolkit, Firebase, Firebase RealtimeDatabase</li></ul>링크<ul><li>소개: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/Stock-game-113a61c213b64dee9618ff22713163e3?pvs=21">모의 주식 게임 소개</a></li><li>Web: <a target="_blank" rel="noopener noreferrer nofollow" href="https://hyebin26.github.io/react_stockgame/">https://hyebin26.github.io/react_stockgame/</a></li><li>Github: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/hyebin26/react_stockgame">github/react_stockgame</a></li></ul>개발 내용<ul><li>Firebase를 이용한 소셜 로그인 개발</li><li>ChartJS를 이용해 주식 가격 변동 및 유저 소유 주식 시각화</li><li>랜덤 주식 변동 로직 및 가격 변동 폭에 맞는 힌트 로직 구현</li><li>Redux-tookit을 이용한 전역 상태 관리</li><li>gh-pages를 이용한 페이지 배포</li><li>Firebase RealtimeDatabase에 힌트 및 유저 주식 정보 저장</li></ul>

모의주식게임

13개의 스크롤 애니메이션을 쉽게 사용할 수 있는 라이브러리입니다. 총 5일동안 진행한 해커톤으로, 시니어 프론트엔드가 기획하는 프로젝트에 참여하여 제작했습니다.기술스택<ul><li>React, Javascript, SASS</li></ul>링크<ul><li>소개: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/Scroll-Animations-js-af298a3662514206b1965e59f5eac003?pvs=21">스크롤 애니메이션 소개</a></li><li>Web: <a target="_blank" rel="noopener noreferrer nofollow" href="https://scroll-animations-js-web.vercel.app/">scoll-animation-js-web</a></li><li>NPM: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/Scroll-Animations-js-c7b26dd270f1467f9ad8f079f3076ff2?pvs=21">NPM/scroll-animation-js</a></li></ul>개발내용<ul><li>페어 프로그래밍을 이용해 라이브러리 개발</li><li>해당 라이브러리에서 사용하는 스크롤 애니메이션을 SASS를 이용해서 구현</li><li>공식 홈페이지에 반응형, 버튼 애니메이션, usage 디자인 등 디자인를 추가</li><li>사용자가 간편하게 스크롤 애니메이션을 적용할 수 있도록 Readme 작성</li></ul>

스크롤 애니메이션 라이브러리

인플루언서 커머스 회사로 여러 인플루언서와의 협업 및 약 10개의 브랜드 운영, 130억 시리즈 A 투자<h5>운영 효율화</h5>기존에 소유하고 있던 8개의 브랜드 및 셀러 페이지가 각각 다른 코드로 관리되고 있었고, 새로운 브랜드 및 셀러를 인수할 계획이지만 카페24 디자인 템플릿 선정 비용 및 소요 기간 과도하게 소요<ul><li>Server Driven UI를 통해 효율적인 커스텀 페이지 제공</li><li>개편 전 월 대비 구매건 수 56%상승, 순방문자 대비 구매율 47% 상승</li><li>카페24 디자인 템플릿 선정 소요기간 60% 단축 및 비용 대규모 단축</li><li>각각 다른 코드로 개발되었던 약 20개의 몰 페이지를 하나의 코드로 관리하면서 개발 효율성 증가</li></ul><h5>다양한 컨텐츠 제공</h5>약 20개의 몰을 하나의 코드로 관리하기 때문에, 컨텐츠가 다양성 저하<ul><li>매거진/포스트 페이지 개발을 통해, 각 브랜드&amp;셀러 몰마다 다양한 컨텐츠 제공</li><li>페이지를 간단하게 만들 수 있는 툴을 선정하고, 각 몰에 해당 페이지를 바로 적용할 수 있는 백오피스 제공</li><li>댓글/대댓글 개발을 통해, 셀러/브랜드와의 유대감 형성 유도</li></ul><h5>이 외의 활동</h5><ul><li>충성 고객들을 위해 저렴한 가격에 상품을 판매하는 페이지 제공</li><li>백오피스 개발을 통해 카페24를 통해 관리하는 부분을 점진적 마이그레이션 및 수동으로 관리되어 발생하던 휴면 이슈 감소 및 관리자 효율성 증대</li><li>프론트엔드 팀 VITE, PWA 세미나 개최(이후 백오피스 SPA -&gt; VITE로 변경)</li></ul>