Contact
Introduce.
안녕하세요. 지속적인 성장을 추구하는 UI/UX 중심 개발자 홍혜원입니다.
저는 사용자 경험을 우선시하는 인터페이스를 구현하는 것에 매우 관심이 많습니다. 이를 위해 기획 단계에서도 적극적으로 참여하며 코드 한 줄에도 서비스의 가치를 담으려고 노력해왔습니다. 또한, 팀 프로젝트에서도 의견을 자주 어필하여 효율적인 일의 진행을 위해 다양한 직무의 구성원들과 적극적으로 커뮤니케이션하며 협업해왔습니다.
제가 지니고 있는 개발자로서의 가치는 결과를 만들어내기 위한 끈기와 완주력, 그리고 비즈니스 가치를 구현하는 능력입니다. 한 번 시작한 일은 끝까지 완수하는 성격으로, 프로젝트를 성공적으로 완료하기 위해 노력합니다.
이러한 저희 노력으로 인해 부트캠프 과정에서 수강생 대표 중 한 명으로 인터뷰 참여하게 되었으며, 최종 파이널 프로젝트에서는 프로젝트조의 협동성 부분 1등을 달성하며 좋은 성과를 이루었습니다.
Project.
고투게더
시니어 타겟 여행 플랫폼 서비스
2023.03 ~ 2023.04
👉 상세내용보기
배포링크 - https://go-together-6.netlify.app/
개발 환경 - React.js, TypeScript, Redux-toolkit, RTK query
담당 업무
- 타입스크립트를 사용하여 프론트엔드의 런타임 에러를 방지하여 안전한 프론트엔드 어플리케이션 설계
- 일관된 사용자 경험을 위해 셀렉박스 및 상품카드 등을 컴포넌트 커스텀하여 작성
- 서버 데이터 캐싱을 통한 불필요한 api 요청을 방지
- 데이터가 많은 경우 사용자 경험을 향상시키기 위해 페이지네이션 기능을 구현
- React-hook-form 라이브러리를 활용하여 폼의 validation 기준 미충족 시 경고 메시지 등을 추가적으로 구현
- 미디어쿼리를 이용한 반응형/적응형 구현
- 카카오 지도 API를 활용한 POI 탐색
휴매니저
연차, 당직 관리 서비스
2022.12 ~ 2022.12
👉 상세내용보기
배포링크 - https://hue-manager-project.netlify.app/
개발 환경 - React.js, TypeScript, Redux-toolkit, React-query
담당 업무
- 사용자 경험 개선과 코드 유지보수 용이성을 위한 로그인 상태기반 페이지 분기 & 확인에 따른 라우터 및 사이드바 설정
- 사용자의 연차 및 당직 정보가 담긴 JavaScript 객체를 CSV 파일로 변환하여 브라우저에서 파일을 다운로드할 수 있게 구현
- React-big-calendar 라이브러리를 통해 직관적인 UI를 제공하여 연차 및 당직을 신청할 수 있도록 구현
- Firebase 로그인 및 회원가입 등 서버 연동 코드 개발하여 백엔드 대체
론테크
대출상품 쇼핑 및 추천 서비스
2022.12 ~ 2022.12
👉 상세내용보기
배포링크 - https://loantech.netlify.app/
개발 환경 - React.js, TypeScript, Redux-toolkit, React-query
담당 업무
- 프론트엔드에서 로그인 처리를 안전하게 하기 위해 refresh token을 도입
- access token의 유효 기간을 짧게 설정하여 redux를 사용해 상태 관리, refresh token은 secure httpOnly 쿠키에 저장
- 토큰 만료시간 관리 및 토큰 재발급 로직을 구현하여, 만료된 access token에 대해 재발급 처리
- React Router의 Navigate를 사용하여 경로 보호를 구현했고, replace prop을 통해 페이지 이동 기록을 없앴으며, 해당 페이지로의 접근을 차단하고 대신 홈페이지로 이동 구현
- React-hook-form & yup 라이브러리를 사용하여 폼 입력 시 유효성 검사 진행
- 모바일 뷰를 고려해 Tailwind CSS를 활용하여 반응형 디자인을 쉽게 구현
유튜브 클론코딩
동영상 공유 플랫폼
2023.01 ~ 2023.01
👉 상세내용보기
배포링크 - https://fastidious-entremet-53e5ce.netlify.app/
개발 환경 - React.js, React-query
담당 업무
- 유튜브 API 호출을 통해 Youtube 동영상 검색 기능 구현
- 동영상 썸네일 마우스 오버시 동영상 미리 보기 기능을 제공하여 사용자의 편의 증대
- 유튜브 API 호출을 통해 관련 Youtube 동영상 및 댓글, 조회수 등 상세페이지에 필요한 정보 호출
- React Query를 통하여 서버 데이터 관리
- 미디어 쿼리를 사용하여 화면 크기에 따라 헤더와 사이드바의 크기를 동적으로 변경하고, 사이드바에 표시되는 내용물의 양을 제한하는 기능구현