미리보기

• 반려동물 용품을 더 저렴하게 공동구매할 수 있는 이커머스 사이트입니다.

• 참여 인원: 프론트엔드 5명 / 백엔드 2명 / 디자이너 1명

• 기술 스택: React, TypeScript, NEXT.js, SCSS, React-Query

• 관련 링크: 배포 링크 / GitHub / 기록 노션 / 회고

• 주문 상세 페이지의 레이아웃 시프트를 해결하기 위해 컴포넌트의 세로 고정값을 지정해 CLS를 0.259에서 0.014로 94.6% 개선, 안정적인 레이아웃과 향상된 UX 구현

• 카카오와 구글 OAuth 인증 구현, 쿠키에 access token을 저장하고, Axios Interceptor를 통해 refresh token 자동 갱신해 자동 로그인 기능을 추가해 사용자 편의성 강화

• 클라이언트가 AWS S3 버킷에 직접 이미지를 업로드하는 presignedUrl 방식을 도입해 서버 자원 절약과 업로드 속도 향상, 보안 강화

• React-Query 쿼리 키와 로직을 분리하여 데이터 패치를 효율적으로 관리하고, DX와 코드 생산성 향상

• 리액트 개발 스터디 리드로 진행한 1인 개발 이커머스 사이트입니다.

• 기술 스택: React, TypeScript, Tailwind, React-Query, Redux-toolkit

• 관련 링크: 배포 링크 / GitHub / 기록 노션 / 회고

• Redux를 도입해 장바구니 상태 값을 localStorage에 저장하고, 장바구니 상품 상태를 전역으로 관리, UI에서 상품 수량과 가격을 실시간으로 업데이트해 사용자 경험 개선

• 변경이 거의 없는 특정 상품 목록을 React-Query로 캐싱해 동일 데이터 반복 요청을 최소화하고, UI 업데이트 속도를 향상시켜 UX 개선

• Tailwind.config 파일을 활용해 화면 별 사이즈 지정 후 일관성있는 반응형 UI 구현, UX 개선

• JavaScript, React, TypeScript, Next.js, Git 등 프론트엔드 직무 역량 강화

• 실무와 유사한 팀 프로젝트 3개 진행과 1개 팀 리드, 사용자 중심 설계와 팀워크 중요성 체득

• 프론트엔드로서 백엔드 개발자와 원활한 소통 위해 백엔드 지식 이해도 향상 필요성 인식

• 이웅모 강사의 'JavaScript 직강'에서 JavaScript 기초 수업 자료를 검토하고, 피드백 진행

• 직강 수강생의 출결과 과제 제출 현황을 관리하고, 수업 분위기 조성과 전달사항 공유

담당: 사회부, 경제부 기자

취재처: 인천시경제자유구역청, 인천관광공사, 인천시청, 인천교통공사, 한국철도공사

성과: 청년 사업 진흥 관련 감사패 수상

프론트엔드 개발자로 직무 전환한 이유

• 3년 간 기자를 하며 더 나은 사회를 위한 문제 상황을 개선했고, 사회 문제 해결 적성 발견

• 프론트엔드 기술로 사회 문제를 해결하고, 사람과 세상을 이롭게 하는 가치를 프론트엔드 기술로 구현하기 위해 직무 전환 희망