Next.js입문 6일 차 @개인 과제 100%+최적화

오늘은 무사히 과제 필수 요건을 완수하고 최적화를 어느 정도 진행했다. 

 

다만 한 가지 아쉬웠던 것은 item 상세페이지를 구성할 때, API 요청 시 특정 아이템만 지정하는 방법을 끝내 찾지 못해서 item을 다 불러온 후에 filter를 돌려야 했던 것이다. 하지만 Next.js의 리퀘스트 메모이제이션(같은 요청은 통합)과 데이터 캐시 기능(응답 데이터 캐싱)을 통해서 자동으로 최적화가 되었으리라고 믿는다. 

 

최적화로는 필수 요건을 충족하면서 사용한 next/image의 Image 컴포넌트, loading.tsx, error.tsx, suspense를 일단 사용해보았다.

 

Image컴포넌트는 이름 그대로 img를 최적화하는 것으로 보이는 것을 먼저 가져오는 뷰포트(혹은 lazy)기능과 이미지 크기를 자동으로 맞춰주는 기능, 이미지를 캐싱하는 기능 등을 가지고 있다. 다만 vercel에서 이 컴포넌트를 1000개 이상 사용한 상태로 배포하면 요금이 발생한다고 하니 실용성은 없다고 생각하는 게 좋을 것 같다.

 

loading.tsx는 페이지 이동 시 화면이 그려지는 것에 대한 최적화이다. 아직 화면이 다 그려지지 않았다면 loading.tsx에서 구성한 대기화면을 띄워서 사용자 경험을 개선하는 것이다. 이를 사용하는 장점은 페이지 이동 자체가 빠르다는 것에 있는데, 지금까지는 페이지 이동을 누르면 화면이 그려진 다음에 이동이 가능했는데, 이 기능을 사용하면 먼저 페이지를 이동한 다음에 화면이 그려지는 것을 좀 더 기다릴 수 있게 되었다. 기다리는 시간 자체는 크게 달라지지 않았을 지 몰라도 먼저 페이지가 이동하는 것 자체를 기다리는 것과 페이지 이동을 한 다음에 화면이 그려지기를 기다리는 것은 다른 경험이기 때문에 이러한 기능이 있는 게 좋다고 생각한다. 

 

또 loading.tsx는 suspense-fallback에서도 사용할 수 있는데, 페이지 자체는 그려졌어도 페이지 내의 각 컴포넌트가 그려지는 데에는 또 시간이 걸릴 수 있는 일이라 suspense를 통해서 컴포넌트 로딩 또한 표기할 수 있다. 

 

다음은 error.tsx이다. 에러가 발생할 때 표시되는 화면으로 평범한 error표기는 사용자가 리딩하기 힘들고, dark모드 등의 환경에서 문자가 보이지 않는 등의 문제가 발생할 수 있으니 에러화면을 커스텀하여 사용자에게 보여주는 것이다. 또한 reset 등의 기능으로 페이지 로드를 재시도하여 단순한 오류라면 해결될 수 있도록 안내할 수도 있다. 물론 에러가 안 나는 것이 가장 좋겠지만 말이다. 

 

일단 이렇게 최적화를 해보았는데, 사실 suspense에 대한 이해가 아직 부족해서 최적화가 잘 되고 있는 것인지는 잘 모르겠다. 다만 UX 자체는 확실히 이러한 기능을 사용하기 전보다 좋아진 것 같으니 최적화는 일단 여기까지 하고 다음부터는 다크모드/라이트모드 구현에 힘 써볼 생각이다. 최근에 느낀 건데 난 디자인에 영 재능이 없는지라 기능 구현 자체뿐만 아니라 디자인에서도 약간 난관이 있을 것 같다. 그래도 처음 구현하는 기능인 만큼 재미있을 것 같아서 기대된다.