Introduce.

안녕하세요. 사용자 경험과 개발자 경험에 관심을 가지고 정진하는 프론트엔드 개발자 김경원입니다!

사용자 경험 개선을 위해 이미지 최적화와 CLS를 개선한 경험이 있으며, 디자이너와 협업하여 더 나은 사용자 경험을 위해 적극적으로 의견을 표현하여 UI를 개선한 경험이 있습니다.

개발자 경험을 최적화하기 위해 백엔드 - 디자인 - 프론트엔드 레벨에서 데이터가 어떻게 흐르는지 고민하고 스키마를 설계한 경험이 있습니다.

NextJS의 SSG, SSR, ISR, CSR의 차이에 대해 이해하고 있고, 기술적 의사결정에 이 지식을 사용하려고 노력합니다. 실제 프로젝트같이 여러 조건이 있는 상황에서 최대한 적합한 방식을 선택하기 위해 고민합니다.

Contact.

Email. [email protected]

Phone. 010-4920-9722

Channel.

Github. https://github.com/ruddnjs3769

Project.

FauxPainting ArtSchool

Front-end Developer

프론트엔드 개발자 3인

2023.10 ~ 2024.01.(3개월)

리팩토링 : 2024.12

➕ 상세보기

➕ 서비스

포페인팅 표현을 위한 온라인 강의 서비스

React, Tanstack Query, Firebase, TailwindCSS

• 사용자 경험 개선
  • TailwindCSS를 활용한 모바일 대응 반응형 레이아웃 구현
  • User Agent에 따른 조건부 컴포넌트 렌더링으로 크로스 브라우징 이슈 해결
  • 비동기 데이터 렌더링 시 로딩 및 스켈레톤 UI 제공
  • Lighthouse CLS 점수 0.11에서 0.01으로 개선
• 이미지 최적화
  • PNG to WebP 변환 유틸리티 코드 작성
  • Cloudinary 업로드 시 이미지 변환 자동화 기능 구현
  • Lazy Loading 및 크기 최적화로 조건별 이미지 크기 렌더링
• CI/CD 파이프라인 구축
  • GitHub Actions를 활용한 브랜치별 자동 배포 설정으로 개발 서버와 라이브 서버 분리
• 초기 렌더링 시간 단축
  • 유저에게는 필요없는 Admin 페이지 코드 스플리팅 진행을 통해 ****초기 렌더링 시간 단축

Syatt

Front-end Developer

프론트엔드 개발자 3인

2023.12 ~ 2024.02.(2개월)

리팩토링: 2024.12 ~ 2024.01

➕ 상세보기

➕ 서비스

포페인팅을 위한 도구, 페인트 판매 및 오프라인 교육 서비스

NextJS, SWR, Redux-toolkit, Sanity, TailwindCSS, TypeScript

• 데이터 캐싱 및 관리
  • 제품 - 장바구니 - 결제 - 주문조회로 이어지는 데이터 흐름을 Flux 패턴 및 캐싱으로 조율
• Database 및 CMS 관리
  • Sanity 제품, 유저, 주문, 배송 스키마 설계
• 배송조회 기능 구현
  • 택배사ID 및 송장번호를 통한 배송조회 기능 담당
  • Server Action을 이용한 토큰 발급 및 재발급 처리

Skills.

Frontend.

• HTML/CSS
• JavaScript/TypeScript
• React.js, Next.js
• TailwindCSS, SCSS
• Tanstack Query, SWR, Redux Toolkit