🎀 프로젝트/인사이트아웃

[인사이트아웃] Next.js의 parallel route를 이용하여 페이지 성능 개선하기

배경 매우 느리던 자기소개서 페이지의 로딩 속도를 개선한 사례를 소개하고자 한다. Next.js의 parallel route를 사용하여 페이지 로딩 속도를 약 94% 개선한 내용을 공유한다. 인사이트아웃은 사용자 경험을 위해 자기소개서 작성 페이지를 접속하면 가장 최근에 작성했던 자기소개서를 보여준다. 이 페이지를 접속하기까지는 약 10초가 걸리는 치명적인 문제점이 있었다. 원인 문제의 원인은 자기소개서 작성 라우팅 방식때문이었다. 자기소개서 작성하기 메뉴를 클릭하면 /resumes/${questionId}로 이동한다. questionId는 가장 최근에 작성했던 자기소개서로, 자기소개서 목록 조회 API 조회 후 가장 첫번째 자기소개서 질문 항목이 questionId이다. 자기소개서 레이아웃은 아래와 같..

[인사이트아웃] React-Query 무한스크롤 적용기

TL;DR - 무한스크롤 - Intersection Observer API - React-Query와 Intersection Observer API를 사용해 무한스크롤 구현하기 - 실제 서비스에 적용하기 배경 인사이트아웃에서는 내가 가진 경험을 정리하고 이를 '경험 카드'로 저장할 수 있다. 이 경험카드는 본격적으로 자기소개서를 작성할 때 참고하여 작성할 수 있다. 이 때, 한 페이지에서 내가 가진 경험카드의 내용을 확인하고 이를 토대로 자기소개서를 작성을 빠르게 할 수 있도록 기획하였다. 무한스크롤 무한스크롤은 사용자가 스크롤을 아래로 내리면 새로운 콘텐츠가 자동으로 로드되어 보여주는 방식이다. 사용자가 페이지를 이동하지 않아도 계속해서 새로운 콘텐츠를 볼 수 있어 편리한 사용자 경험을 제공할 수 있다..