미리보기
기본 정보
안녕하세요. 프론트엔드 개발자 김경원입니다. E-commerce 웹사이트 개발 및 운영 경험이 있으며, 소규모 팀에서 웹 서비스 개발을 주도한 경험이 있습니다. 비즈니스 성장에 기여하는 개발을 추구하며, 사용자 경험 개선에 집중합니다.
자기소개
무언가 만드는 일을 좋아합니다. 다음과 같은 원칙을 지향합니다.
효율적인 개발 프로세스: 요구사항을 신속히 분석하고 개발에 반영합니다.
협업 및 커뮤니케이션: 팀원 및 사용자와의 소통을 통해 서비스를 지속적으로 개선합니다.
문제 해결 능력: 복잡한 문제를 체계적으로 해결하는 것을 즐깁니다.
업무 최적화: 효율적인 CMS 구축 등을 통해 반복적인 업무를 자동화하고 개선합니다.
기술 스택
JavaScript, HTML/CSS, React, Next.js, react-query, swr, redux-toolkit
프로젝트
FauxPainting ArtSchool
주식회사 샤뜨
2023.10. ~ 2024.01.
포페인팅 표현을 위한 온라인 강의 서비스
React, Tanstack Query, Firebase, TailwindCSS
데이터 캐싱 및 관리
React Query를 활용한 커스텀 훅으로 데이터 페칭 및 서버 상태 관리 로직 구현
Context API를 이용한 중앙 집중식 클라이언트 상태 관리
사용자 경험 개선
모바일 대응 반응형 레이아웃 구축
User Agent에 따른 조건부 컴포넌트 렌더링으로 크로스 브라우징 이슈 해결
메인화면 Lighthouse CLS 점수 0.11에서 0으로 개선
이미지 최적화
PNG to WebP 변환 유틸리티 코드 작성으로 성능 최적화
Cloudinary 업로드 시 이미지 변환 자동화 기능 구현
지연 로딩 및 크기 최적화로 조건별 이미지 크기 렌더링
메인화면 Lighthouse LCP 점수 10.4초에서 1.3초로 약 87% 단축
CI/CD 파이프라인 구축
GitHub Actions를 활용한 브랜치별 자동 배포 설정으로 개발 서버와 라이브 서버 분리
Firebase Hosting을 활용한 빌드 프로세스 최적화
Syatt
주식회사 샤뜨
2023.12. ~ 2024.02.
포페인팅을 위한 도구, 페인트 판매 및 오프라인 교육 서비스
NextJS, SWR, Redux-toolkit, Sanity, TailwindCSS, TypeScript
데이터 캐싱 및 관리
SWR을 이용한 데이터 캐싱 및 서버 상태 관리
Redux-toolkit으로 Flux 패턴 아키텍처 구축
Headless CMS 관리
GROQ(Sanity Query)를 사용하여 Sanity에 최적화된 쿼리로 데이터 fetch 로직 작성
Sanity 제품, 유저, 주문, 배송 스키마 설계
배송조회 기능 구현
택배사ID 및 송장번호를 통한 배송조회 기능 담당
GraphQL 쿼리로 데이터 정의
Server Action을 이용한 토큰 발급 및 재발급 처리
