프론트엔드 개발자

양혜빈

안녕하세요. 프론트엔드 개발자 양혜빈입니다. 스타트업 현장에서 서비스 페이지 신규 개발부터 기존 서비스의 UI/UX 리뉴얼, 데스크톱 앱 개발까지 다양한 프로젝트를 수행하며 성장해 왔습니다. 이 과정에서 사용자 요구사항을 파악해 인터페이스로 구현하는 역량을 키울 수 있었고, 다양한 직군의 팀원들과 함께 빠르게 변화하는 요구에 대응하며 협업하는 법도 익혔습니다. 

새로운 기술을 배우고 실무에 적용하는 것을 즐기며, 문서를 탐독하고 실험하며 얻은 지식을 팀원들과 공유해 함께 성장할 때 보람을 느낍니다. 항상 성장하고자 하는 주니어 개발자로서 앞으로도 작은 개선이라도 서비스의 가치를 높일 수 있다면 주저하지 않고 도전하며, 배움과 협력을 통해 한층 더 발전해 나가고 싶습니다.

책임감

협업 지향

꼼꼼함

고객 중심

적응력

정보처리기사

Github

<h2>프로젝트 소개</h2><ul><li>OI Market 서비스의 프론트엔드 개발 및 유지보수</li><li>URL: <a target="_blank" rel="noopener noreferrer nofollow" href="https://oimarket.kr/">https://oimarket.kr/</a></li></ul><h2>개발 내용</h2><ul><li>인증이 필요한 페이지에 <code>AuthGuard</code> HOC 적용</li><li>OI 어시스턴트 챗봇 UI 개발<ul><li>OI 어시스턴트 챗봇 실시간 답변시 리렌더링 횟수 최소화</li><li>채팅창 UI 디바이스(Desktop, Android, IOS)에 따른 대화 리스트 레이아웃 적용</li></ul></li><li><code>Header</code> 컴포넌트 렌더링 최적화</li><li>콘텐츠 페이지, 콘텐츠 어드민 페이지 개발</li><li>Next Image에서 <code>sizes</code> props를 활용해 <code>viewport</code>에 따른 적절한 이미지 크기 불러오도록 적용</li></ul><h2>사용 기술</h2><ul><li>Next.js:<ul><li>페이지별 적절한 렌더링 방식을 적용하기위해 사용했습니다.</li><li>페이지 진입시 렌더링 이전에 서버사이드에서 처리하면 좋을 로직들을 분리시키기 위해 사용했습니다.</li></ul></li><li>Typescript:<ul><li>타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.</li><li>개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.</li></ul></li><li>Emotion:<ul><li>Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.</li><li>props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.</li></ul></li></ul>

OI Market 서비스 개발 및 유지보수

<h2>프로젝트 소개</h2><ul><li>기존 NU Angels 서비스를 alti로 리브랜딩 작업을 하면서 전체적인 페이지의 UI/UX 개편, 기존 기능 수정, 기능 추가를 진행했습니다.</li></ul><h2>개발 내용</h2><ul><li>기존 NU Angels 서비스의 전체적인 페이지에 대한 개편 작업</li><li>불필요한 중복 data fetching API 요청을 제거하기위해 <code>Tanstack Query</code>를 사용해 data fetching API에 대한 캐싱을 적용</li><li>파편화된 중복 form validation 코드 모듈화 작업</li><li>정적인 데이터만 들어가는 페이지를 SSG, ISR로 렌더링 방식 수정</li></ul><h2>사용 기술</h2><ul><li>Next.js:<ul><li>페이지별 적절한 렌더링 방식을 적용하기위해 사용했습니다.</li><li>페이지 진입시 렌더링 이전에 서버사이드에서 처리하면 좋을 로직들을 분리시키기 위해 사용했습니다.</li></ul></li><li>Typescript:<ul><li>타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.</li><li>개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.</li></ul></li><li>Tanstack Query<ul><li>서버 state 와 클라이언트 state를 분리하기위해 사용했습니다.</li><li>비동기 API 호출을 선언적으로 관리하기위해 사용했습니다.</li><li>API 캐시를 적용하기 위해 사용했습니다.</li></ul></li><li>Emotion:<ul><li>Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.</li><li>props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.</li></ul></li></ul>

NU Angels 서비스 리브랜딩

<h2>프로젝트 소개</h2><ul><li>2주 동안의 스프린트를 진행하면서 NU Angels (현 alti) 서비스의 전체적인 프론트엔드 개발 및 유지보수를 진행했습니다.</li><li>URL: <a target="_blank" rel="noopener noreferrer nofollow" href="https://alti.kr/">https://alti.kr/</a></li></ul><h2>개발 내용</h2><ul><li>빌드 속도 개선<ul><li>변경사항이 적음에도 불구하고 동일한 빌드 속도가 문제있다고 판단하여 개인적으로 개선이 필요하다고 생각해서 시작한 작업</li><li><code>buildkit</code>&nbsp;엔진을 지원하는 <code>docker/build-push-action</code>&nbsp;으로 변경</li><li><code>.next/cache</code>를 캐싱함으로써 Next.js 빌드 시간 단축</li><li>약 1분 30초 단축 (5분 30초 &gt; 3분 50초)</li></ul></li><li>Docker image 경량화<ul><li>기존의 docker image 크기가 서비스 규모에 비해 너무 크다고 생각했고, 경량화 작업이 필요하다고 생각해 시작한 작업</li><li><code>node alpine 버전</code>, <code>Multi staging build</code>, <code>Next.js standalone</code> 적용</li><li>약 87% 개선 (1280MB &gt; 159MB)</li></ul></li><li>GA에서 유저 트래킹 이벤트 집계안되는 백로그 이슈 수정<ul><li>유저들의 패턴을 GA에서 분석하고 싶다는 팀의 니즈가 생겨서 시작한 작업</li><li>사내에서 사용하고 있었던 패키지에서 GA 연동이 안되는 문제를 발견했고, 이후에 GA의 연동을 끊고, 다른 트래킹 툴과의 연동시 한 곳에서 관리하는게 좋을거 같아서 GTM(Google Tag Manager)을 연동시킴</li></ul></li><li>디자인 파편화 문제 개선을 위한 UI component 고도화 작업<ul><li>디자인 수정 및 추가 과정에서 개발자, 디자이너 사이의 비효율적인 커뮤니케이션을 해결하기위해 시작한 작업</li><li><code>Figma</code>에 설정한 디자인에 의존하도록 수정</li><li><code>Storybook</code>을 사용해 컴포넌트 단위 테스트 적용, 문서화된 story를 디자이너에게 공유</li></ul></li></ul><h2>사용 기술</h2><ul><li>Next.js:<ul><li>페이지별 적절한 렌더링 방식을 적용하기위해 사용했습니다.</li><li>페이지 진입시 렌더링 이전에 서버사이드에서 처리하면 좋을 로직들을 분리시키기 위해 사용했습니다.</li></ul></li><li>Typescript:<ul><li>타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.</li><li>개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.</li></ul></li><li>Tanstack Query<ul><li>서버 state 와 클라이언트 state를 분리하기위해 사용했습니다.</li><li>비동기 API 호출을 선언적으로 관리하기위해 사용했습니다.</li><li>API 캐시를 적용하기 위해 사용했습니다.</li></ul></li><li>Emotion:<ul><li>Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.</li><li>props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.</li></ul></li></ul>

NU Angels 서비스 개발 및 유지보수

<h2>프로젝트 소개</h2><ul><li>서비스 초기 기획 단계부터 참여, 프론트엔드 전체적인 개발 및 유지보수를 진행했습니다.</li><li>URL: <a target="_blank" rel="noopener noreferrer nofollow" href="https://biz.ymyd.co.kr/">https://biz.ymyd.co.kr/</a></li></ul><h2>개발 내용</h2><ul><li>Tanstack Query를 사용해 서버의 데이터와 클라이언트 데이터 분리</li><li>HOC, axios interceptors를 활용해 페이지 진입, 요청 전에 공통적인 인증 로직 관리</li></ul><h2>사용 기술</h2><ul><li>Next.js:<ul><li>페이지별 적절한 렌더링 방식을 적용하기위해 사용했습니다.</li><li>페이지 진입시 렌더링 이전에 서버사이드에서 처리하면 좋을 로직들을 분리시키기 위해 사용했습니다.</li></ul></li><li>Typescript:<ul><li>타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.</li><li>개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.</li></ul></li><li>Tanstack Query<ul><li>서버 state 와 클라이언트 state를 분리하기위해 사용했습니다.</li><li>비동기 API 호출을 선언적으로 관리하기위해 사용했습니다.</li><li>API 캐시를 적용하기 위해 사용했습니다.</li></ul></li><li>Styled-components:<ul><li>Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.</li><li>props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.</li></ul></li></ul>

기업용 약사 채용 서비스 개발

<h2>프로젝트 소개</h2><ul><li>약문약답 앱 회원만을 위한 약국 구인구직 서비스입니다.</li><li>기존 서비스의 UI/UX 개선 했습니다.</li></ul><h2>개발 내용</h2><ul><li>기존 구인구직 기능 관련 레거시 코드 개선</li><li>레거시에 존재한 any 타입들 전부 엄격한 type 적용</li><li>중복 UI 공통 컴포넌트로 모듈화</li><li>무한스크롤 성능 문제 개선</li><li>클라이언트에서 발생하는 에러로그 수집</li></ul><h2>사용 기술</h2><ul><li>React<ul><li>UI를 Component 단위로 선언적으로 관리하기위해 사용했습니다.</li><li>변경해야하는 UI만 변경시키기위해 사용했습니다.</li></ul></li><li>Typescript:<ul><li>타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.</li><li>개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.</li></ul></li><li>Styled-components:<ul><li>Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.</li><li>props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.</li></ul></li></ul>

약문약답 앱 구인구직 서비스 UI/UX 개선

<ul><li>OI Market 서비스 개발 및 유지보수</li><li>alti 서비스 개발 및 유지보수</li></ul>

<ul><li>기업용 약사 채용 서비스 개발 및 유지보수</li><li>구인구직 서비스 UI/UX 리뉴얼 및 유지보수</li><li>약국하이패스 Desktop App 개발 및 유지보수 </li></ul>