프로젝트

dong.log

개발하며 배운 것을 기록하는 블로그. 개인 프로젝트입니다.

(2022.12 ~ 2023.02)

Link

Github https://github.com/DoHi0512/DoHi0512.github.io

Service https://dohi0512.github.io/

Skills

Gatsby Tailwind GraphQL Github Actions Google Analytics

검색 엔진 최적화

• 페이지 색인 생성을 위한 sitemap.xml 생성
  • gatsby-plugin-sitemap를 이용해 sitemap.xml 생성 자동화.
  • Google Search Console에 sitemap을 제출해 페이지 색인 생성.
• Lighthouse SEO 점수 향상
  • react-helmet 를 이용해 페이지별 meta tag 적용.
  • Gatsby SSR과 meta tag 적용 결과 SEO 점수 82 → 100 향상.

성능 최적화

• 페이지 로딩 속도 향상
  • 기존 img태그에서 GatsbyImage 태그로 변경.
  • 이미지 로딩 속도 기존 4ms ~ 9ms 에서 2ms ~ 5ms로 약 100% 향상.

CI/CD

• 빌드 및 배포 자동화
  • Github Actions를 이용해 빌드부터 배포까지의 과정 자동화.
• Github Issue를 활용해 댓글 시스템 구현
  • Utterances를 사용해 댓글 Issue 생성.
  • Github Actions를 이용해 Issue close 자동화.

Inkspire

온라인 독후감 사이트. 프론트엔드 개발을 담당했습니다.

(2024.08 ~ 2024.10)

Link

Github https://github.com/In-k-spire/FE

Service https://ink-spire.netlify.app

Skills

Next.js 14 Tailwind React Query Netlify

Frontend

• 로그인 후 새로고침 전까지 사용자 인증이 되지 않는 현상 발생
  • cookies-next 사용시 쿠키가 동기화 되지 않는 문제 발생.
  • middleware 를 이용한 사용자 권한 부여 및 인증을 통해 해결.

성능 최적화

• 무한 스크롤을 이용한 페이지 로딩 속도 향상
  • IntersectionObserver와 React Query의 useInfiniteQuery 적용.
  • 초기 페이지 로딩 속도 약 10% 단축, 데이터가 많아질수록 효율 증가.
• Image Placeholder 도입
  • 페이지 로딩 시 빈 화면 대신 placeholder가 나오도록 하여 Layout Shift 방지 및 사용자 경험 향상.