프론트엔드 신입 개발자

정재호

저는 리팩토링과 성능 최적화에 관심이 많고, 지속적인 성장을 추구하는 TypeScript와 React 기반의 프론트엔드 신입 개발자 정재호입니다.

성실함

책임감

협업 지향

효율적

커뮤니케이션

정보처리기사

정재호_포트폴리오.pdf

정보처리기사 자격증 사본.pdf

포트폴리오

Github repository

Blog

<ul><li>팀 구성 : 백엔드 3, 프론트 3</li><li>기술 스택 : React, TypeScript, SCSS Module, Fetch API, Zustand, React Query, Storybook</li><li>GitHub: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Plan-You/PlanU-FE">https://github.com/Plan-You/PlanU-FE</a></li><li>프론트엔드 팀장을 도맡아 프로젝트의 폴더 구조를 설계하고 지속적으로 팀원들의 코드를 리뷰함으로써 전체적인 코드 품질과 일관성 향상</li><li>공통 컴포넌트 및 알림, 달력, 위치 공유, 위치 선택, 그룹 관련 페이지 개발</li><li>UI 컴포넌트 개발을 위한 도구인 Storybook을 사용하여 개별 및 공통 컴포넌트의 기능과 상태를 팀원 모두와 테스트하고, 문서화하여 관리</li><li>알림 페이지에서 SSE(Server-Sent-Events)를 연동하여 실시간으로 받아온 알림 데이터를 React Query와 Context API를 활용하여 관리</li><li>위치 공유 페이지에서 SockJS로 WebSocket을 연동하여 그룹 참여자들 간 실시간 위치 공유 기능 개발</li><li>성능 최적화를 위한 React.memo를 활용한 컴포넌트 메모이제이션, React.lazy를 활용한 코드 스플리팅 적용<ul><li>성능 최적화 적용 전 : FCP - 9.5s / LCP - 1.3s / 번들 gzip 크기 - 3.69MB</li><li>성능 최적화 적용 후 : FCP - 2.2s / LCP - 0.7s / 번들 gzip 크기 - 433KB(약 88% 감소)</li><li>성능 최적화로 인해 초기 로딩 속도 개선 및 사용자의 TTI를 단축</li></ul></li><li>기존의 alert로 사용자에게 보여주던 알림창을 react-hot-toast 라이브러리의 toast 알림창을 사용하여 api 응답 로딩, 성공, 에러에 관한 알림창을 시각적으로 보기 좋게 리팩토링</li></ul>

PlanU - 약속 잡기 / 모임 관리 서비스

<ul><li>팀 구성 : 백엔드 2, 프론트 2, 디자이너 1, 기획자 1</li><li>기술 스택 : Next.js, TypeScript, TailwindCSS, Zustand, React Query</li><li>웹사이트 링크 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://vsgg.co.kr">https://vsgg.co.kr</a></li><li>zustand persist를 이용한 로그인 여부, 토큰 관리</li><li>fetch API를 사용할 때 편리하고 효율적으로 사용할 수 있도록 custom fetch 구현</li><li>React Query의 useInfinityQuery Hooks를 사용한 무한 스크롤 구현</li><li>react quill 라이브러리를 사용한 게시글 작성 페이지 개발</li><li>동적 사이트맵, 메타 데이터, 오픈 그래프를 활용한 seo 최적화<ul><li>seo 점수 : 70점에서 92점으로 향상</li></ul></li><li>기존 웹뷰 기반의 페이지를 반응형 웹으로 개선하여 모바일에서도 최적화된 UI 제공</li><li>테스트/배포 서버 환경 구축 및 운영</li><li>Github : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/vsgg12/VSGG-FE/tree/main">https://github.com/vsgg12/VSGG-FE/tree/main</a></li></ul>

VSGG - 리그오브레전드(LOL) 과실 판결 커뮤니티

<ul><li>팀 구성 : 백엔드 3, 프론트 2</li><li>기술 스택 : React, TypeScript, TailwindCSS, Zustand, React Query</li><li>웹사이트 링크 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.ddrawry.site/">https://www.ddrawry.site/</a></li><li>UI 컴포넌트 개발을 위한 도구인 Storybook을 사용하여 개별 및 공통 컴포넌트의 기능과 상태를 테스트하고, 문서화하여 관리</li><li>프로젝트와 폴더 구조 설계 및 공통 컴포넌트와 MainPage, MyPage, 공유페이지 개발</li><li>사용자가 공유하고싶은 일기를 canvas2html을 사용해 이미지화해서 저장소에 다운로드 또는 공유 페이지 링크로 공유 가능하도록 기능 개발</li><li>성능 최적화를 위해 React.lazy를 활용한 코드 스플리팅, React.memo를 활용한 메모이제이션 적용</li><li>빠른 사용자 경험(UX) 제공을 위한 좋아요 상태 낙관적 업데이트 적용</li><li>기존 Web View 기반 사이트를 Tailwind CSS를 활용해 반응형 웹으로 개편</li><li>GitHub: &nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/DDrawry/ddrawry-FE">https://github.com/DDrawry/ddrawry-FE</a></li></ul>

띠로리(DDrawry) - AI가 그려주는 그림 일기 서비스

<ul><li>팀 구성 : 백엔드 3, 프론트 2, 디자이너 1, 기획자 1</li><li>기술 스택 : Next.js, TypeScript, TailwindCSS, Zustand, React Query</li><li>웹사이트 링크 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.molip.site">https://www.molip.site</a></li><li>프로젝트 폴더링 구조 설계 및 공통 컴포넌트, 게스트 초대 및 수락, 메인, 팀 관련 페이지, 공유 페이지 개발</li><li>초대 링크를 받고 들어와 로그인 완료했을 경우 페이지 리디렉션 구현으로 사용자 경험 개선</li><li>zustand persist를 활용한 로그인 상태와 바텀시트 상태 관리</li><li>로그인 상태 여부에 따른 페이지 리디렉션 구현</li><li>Swiper 라이브러리를 이용한 로그인 튜토리얼 제작으로 사용자 온보딩 최적화</li><li>Github : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Swyp-team10/molip-front/tree/dev">https://github.com/Swyp-team10/molip-front/tree/dev</a></li></ul>

molip - 모두의 입맛을 충족시켜줄 메뉴판을 만들 수 있는 웹 어플리케이션

<ul><li>팀 구성 : 백엔드 3, 프론트 3</li><li>기술 스택 : React, TypeScript, Axios, Zustand, TailwindCSS, React Query</li><li>팀장을 도맡아 일감 분배, 일정 관리, 목표 관리 및 지속적인 코드 리뷰로 코드 실수를 줄이고 팀 내의 지식 공유와 기술적 성장을 도움</li><li>공통 컴포넌트 및 좋아요/저장, 로그인, 메인, 레시피 추천, 재료 추가, 마이페이지 개발</li><li>데이터 로딩 중 사용자 이탈을 줄이기 위해 콘텐츠 레이아웃을 미리 보여줄 수 있는 Skeleton UI를 도입</li><li>zustand persist를 활용해 소셜 로그인으로 인한 토큰 관리</li><li>React Query의 useInfinityQuery Hooks를 사용하여 무한 스크롤을 구현</li><li>API 연동 작업 전 코드 중복성을 제거하고 interceptor 작성을 위한 customAxios를 생성하여 코드 유지보수성을 향상</li><li>Github : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/OZ-Coding-School/oz_02_main-003-FE">https://github.com/OZ-Coding-School/oz_02_main-003-FE</a></li></ul>

냉장고 뚝딱이 - 자취생들을 위한 레시피 공유 웹 어플리케이션

<ul><li>팀 구성: 백엔드 3, 프론트 2, 기획자 2</li><li>기술 스택 : React, CSS3, TypeScript, Zustand, Axios</li><li>공통 컴포넌트 및 결제, 주소 선택, 국내/외 카드 등록, 메인, 주문, 회원가입, 로그인 페이지 개발</li><li>google maps api를 활용한 사용자 주소 검색 및 저장 기능 개발</li><li>lighthouse의 개선 사항을 참고한 성능 개선 작업<ul><li>폰트, 이미지 최적화(LCP)</li><li>불필요한 js, css 코드 삭제(TTI)</li><li>이미지 크기 고정(CLS)</li></ul>→ 페이지 로딩 속도 개선 및 레이아웃 변화 최소화→ 성능 점수 : 61점에서 81점으로 향상</li><li>Github : <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/OZ-Coding-School/oz_02_collabo-005">https://github.com/OZ-Coding-School/oz_02_collabo-005</a></li></ul>