미리보기

• 번들 사이즈 감소 및 웹 페이지 성능 최적화를 통해 초기 로딩 시간 32% 단축하여 사용자 경험 개선
  • WHY & HOW
    • 빠른 로딩을 위해 번들 트리쉐이킹 및 페이지 기반 코드 스플리팅
    • 느린 인터넷 환경을 고려한 이미지 레이지 로딩 최적화
    • 빠른 페이지 로딩을 위해 사용자가 사용할 가능성이 있는 리소스를 React Query를 활용하여 백그라운드 prefetch 및 캐싱
  • RESULT
    • 웹 성능 개선을 통해 FCP 0.6초, LCP 1.5초 개선하여 초기 로딩 속도를 단축하고, 이 과정에서 네트워크 요청 시 로딩을 최적화하기 위해 고려해야 할 요소들을 알고, 상황에 따른 적절한 최적화의 중요성을 깨달았습니다.
    • 데이터 로딩 시 사용자 경험이나 데이터의 중요도, 페이지 로딩 시간과 같은 요소들을 고려
• 웹 접근성과 웹 표준을 고려한 마크업
  • WHY & HOW
    • 접근성 향상 및 검색 엔진 최적화를 위해 역할을 명시적으로 드러내는 시맨틱 태그 사용
    • section과 article 태그의 경우 보여지는 제목이 있는 경우 aria-labelledby를, 그렇지 않은 경우 aria-label을 사용해 역할을 명시하고, 테스트 시에도 getByRole을 사용하여 접근성 향상
    • title, description, author, keywords 등의 메타 태그 및 OpenGraph를 활용하여 SEO 최적화
• AWS EC2, S3, ELB, CloudFront로 프론트엔드, 백엔드 배포
• 안정적인 코드를 작성하기 위해 Vitest, RTL, MSW 기반 테스트 작성
  • 무엇을, 어떻게 테스트하는 것이 좋을까?를 고민하여 테스트 작성
• Suspense,ErrorBoundary, Skeleton을 사용한 Concurrent UI pattern 적용
• React Hook Form과 Zod를 사용한 type-safe한 폼 관리
  • React-Hook-Form과 제네릭 사용하기를 통해 리팩터링
• JWT를 활용한 회원가입, 로그인, 로그아웃 구현
• GitHub Actions을 활용한 테스트 및 배포 자동화 CI/CD

배포
저장소
test id: test@gmail.com pw: 123123123

• 빠른 데이터 로딩과 매끄러운 사용자 경험을 위해 React Router와 Prefetching과 React Query의 캐싱을 활용하여 render-as-you-fetch 모델 구현
  • WHY&HOW
    • 빠른 로딩을 위해 페이지 진입 전 loader를 통해 데이터를 prefetch하였는데, render-then-fetch하여 그동안 빈 화면이 보이는 문제 발생
    • 다음 페이지를 빠르게 로딩하기 위해 Promise를 기다리지 않고 Suspense의 fallback 스켈레톤 UI를 표시하는 render-as-you-fetch를 적용
    • 이때 prefetch가 끝나지 않은 경우 useQuery가 refetch를 하지 않는지 고민이 있어 React Query의 fetch 코드가 페이지 진입 전 프로미스가 완료되지 않더라도 불필요한 refetch를 하지 않을 것으로 확인한 후 구현
• 사용자에게 즉각적인 피드백을 주기 위해 React Query의 낙관적 업데이트 활용
• JavaScript를 TypeScript로 마이그레이션
• useTheme 커스텀 훅과 css 변수를 제작하여 다크모드 구현
• API 명세서 작성 및 명세서 기반 Express CRUD API 구현
• 문제 해결 과정 문서화 및 팀원들과 공유해 프로젝트에 성공적으로 적용

시연 영상
저장소
Notion

• React-route-rdom를 통한 페이지 이동 구현
• React-slick을 사용한 가로 무한 스크롤 캐러셀 구현
• 피드 댓글에 대한 대댓글을 재귀로 구현
• 공통 컴포넌트를 활용해 카테고리 상품 신고 댓글 및 리뷰를 관
  리하는 admin 페이지 구현
• TailwindCSS를 통한 스타일링

시연 영상
Notion
저장소 링크

프론트엔드 개발 서적을 읽고 공유하며 프로젝트에 적용하여 개선
GitHub 레포지토리

• 모던 React Deep Dive를 읽고 관련 추가 내용 조사하여 발표
• 해당 내용을 바탕으로 딥다이브 또는 프로젝트에 적용 및 개선
• JavaScript 및 React 핵심 요소와 동작 원리 이해
• 디버깅, 정적 분석, 성능 분석/최적화 기본 지식 습득

VR 사물놀이 리듬 게임 구현

웹 서버와 유니티 연동해 의류 예약 좋아요 시스템 구현

개발자들의 글쓰기 역량을 강화하고, 글을 꾸준히 쓸 수 있도록 돕는 커뮤니티
글 쓰는 또라이가 세상을 바꾼다 - 글또

• 격주로 지속적인 기술 관련 블로그 포스팅하여 프론트엔드 지식 습득 및 공유
• 8회차 블로그 큐레이션 선정(링크)
• 상호 피드백 과정을 통해 논리적 사고력 형성 및 효과적 커뮤니케이션 능력 향상