성능 최적화 뉴스 웹 애플리케이션

프로젝트 소개

• 전체 개발 기간 : 2025.01.04 ~ 2025.01.17

• 본 프로젝트는 웹 성능 최적화 기술을 실제로 적용하고 그 효과를 측정하기 위해 개발된 최신 뉴스 웹 애플리케이션입니다.

• 주요 목표

  • News API를 활용하여 최신 뉴스 데이터를 가져오는 외부 API 사용
  • 다량의 이미지를 포함한 뉴스 콘텐츠 표시
  • 웹 성능 최적화 기술 적용 전후의 성능 비교

• 배포 URL : https://performance-optimization.vercel.app/

팀원 구성

박병근
@Dejong1706

담당 업무 및 스킬

담당 업무	프로젝트 기획, 프로젝트 UI/UX 디자인, 프론트엔드
SKiil	NextJS15, TypeScript, TailwindCSS, React-Query

성능 개선

메인 페이지
카테고리 페이지
개별 페이지
검색 페이지

페이지별 소개

[메인 페이지]

• 프로젝트의 메인 페이지로서 미국 뉴스에 헤드라인 기사들로 이루어져 있는 페이지입니다.
• 각 섹션의 카드뉴스를 클릭하면 개별 뉴스 페이지로 이동하게 됩니다.

최적화 적용 : SSR 개발, Reqct-Query 데이터 프리패칭, 코드 스플리팅, 메모이제이션, img 지연로딩, 조건부 렌더링

1	2	3

[카테고리 페이지]

• 카테고리별 다른 주제의 뉴스 데이터를 보여주는 페이지입니다.
• 메인 페이지와 마찬가지로 카드뉴스 클릭 후 개별 뉴스 페이지로 이동합니다

최적화 적용 : SSR 개발, Suspense를 이용한 코드 분할, 메모이제이션, img 지연로딩

1	2

[개별 페이지]

• 각 페이지에서 카드뉴스를 클릭하면 들어오게 되는 개별 페이지입니다.
• 해당 페이지에 링크를 클릭하게 되면 실제 해당 기사 페이지로 이동하게 됩니다.

최적화 적용 : SSR 개발, img 지연로딩

1	2

[검색 페이지]

• 헤더에 있는 검색바에 원하는 검색어를 입력하면 해당 검색어가 포함된 기사를 보여주는 페이지입니다.

최적화 적용 : SSR 개발, Suspense를 이용한 코드 분할, 메모이제이션, img 지연로딩

1	2

변경사항

기존에 next/img 컴포넌트로 이미지를 자동 최적화 했으나, Vercel 배포 시 next/img 태그의 무료 이미지 최적화 횟수가 1000회로 제한되어 이미지가 제대로 표시되지 않는 에러를 발견했습니다. 문제 해결을 위해 모든 next/image 태그를 일반 img 태그로 교체하고, 지연 로딩과 이미지 비율유지 기능만을 추가 해놨습니다.