금일 정기배포 이후 www.creatrip~ 에서 요청하는 js chunk 파일에 대한 CORS 에러가 발생했다. 이 얼마 만에 보는 CORS 에러란 말인가...! 우리 회사에서는 nextjs 빌드 후 생성된 정적 파일은 s3 - cloudfront를 통해서 캐싱 후 제공하고 있는데, 배포 전 후로 설정을 바꾼 부분은 없는 상황이었다. 일단 cdn에서 제공하는 정적 파일에 대한 응답 헤더에 정책을 생성하고, 해당 정책에서 www가 붙은 도메인, 붙지 않은 도메인에 대해 모두 오리진을 추가해서 대응해 주었다. 빠르게 대응은 했는데, 대체 왜 갑자기 문제가 생긴 것인지 파악을 하기가 여간 쉽지 않았다. 처음에는 해당 이슈가 배포 직후에 발생한 문제인지에 대한 확신도 서지 않았고, SSG 등으로 생성된 정적..

특정 페이지 진입시 무한루프 도는 현상 발생 SWR 에러 아님 Request 결과도 정상 local dev 환경에서는 무한루프 발생하지 않음. build 후 production 에서만 발생 원인 : 채널톡 객체 참조 불가 (채널톡 객체 검증 예외처리 미흡) 기존 채널톡 스크립트 로드를 전역 script에서 특정 페이지 내부로 옮기면서 문제 발생. -> 예외처리 미흡. 공통 Page 컴포넌트에는 예외처리 되어있었으나, 해당 페이지는 Page컴포넌트를 사용하지 않고 독자적으로 로직 구현되어 있었음. 그로 인해 런타임 환경에서 에러 발생 (스크린샷은 local dev 환경) GitHub Next.js Issue : _error 페이지가 렌더되지 않고 무한루프에 빠진 케이스 Endless loop when _e..

이미지 최적화와 웹 사이트 속도는 떼려야 뗄 수 없는 관계이다. 이미지의 용량을 압축과 최적화를 통해 줄일 만큼 줄였다면, 이제 페이지 로딩 시간을 향상하기 위한 지연 로딩(Lazy Loading)을 적용해보자. 지연 로딩이 적용된 이미지는, 사용자의 눈에 충분히 노출되기 전에는 데이터 요청이 일어나지 않게 할 수 있다. 그러므로 이를 통해 페이지의 초기 로딩 속도를 비약적으로 향상시킬 수 있다. React와 TypeScript를 사용한 이미지 컴포넌트 코드는 다음과 같다. Image.tsx import React, { useEffect, useRef, useState } from "react"; //* polyfill 2개. 아래에 설명있음*// import "intersection-observer";..