밝을희 클태

Binaries:  Node: 22.3.0  npm: 10.8.1  Yarn: 1.22.19  pnpm: 8.14.0Relevant Packages:  next: 14.2.5 // Latest available version is detected (14.2.5).  eslint-config-next: 14.2.3  react: 18.3.1  react-dom: 18.3.1  typescript: 5.4.5 현재 개발 환경에서 테스트를 마치고, 배포 환경에서 프로젝트를 테스트 중인데, 주로 revalidateTag를 사용해서 재검증을 요청하는 방식으로 구현했다. 다른 페이지들은 전부 문제가 없었는데, 메인 페이지(’/’)에서 재검증 요청이 제대로 이루어지지 않는 문제가 발생했다. 검색해보니까 작년부터 나와..

환경Next.js 14 APP RouterAWS SDK for Javascript v3 https://gaebarsaebal.tistory.com/79 [ AWS ] S3 버킷(bucket) 생성, 사용자 추가, 액세스 키 만들기전에 작성한 글이 있는데 너무 대충 설명한 거 같아서 다시 써야겠다.버킷 만들기1. aws에서 s3를 검색해서 들어와 버킷 만들기로 들어간다.2. 버킷 이름을 적는다.3. 나는 현재 계정에서만 사용할gaebarsaebal.tistory.comS3 bucket 설정은 이 전 포스팅에서 다룬다.  나는 S3 이미지 업로드를 서버에서 할 것이다. 클라이언트에서 할 수도 있지만 클라이언트에서 하면 AWS key가 노출될 위험이 있고 Presigned URL을 사용해 key의 노출을 막을..

IntersectionObserver API 는 특정요소가 뷰포트와 교차하는지 비동기적으로 관찰하는 데 사용된다. 이걸로 스크롤 애니메이션을 구현할 수 있다. 코드 : function Item({ children }: { children: React.ReactNode }) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach(({ target, isIntersecting }) => { if (target === ref.current) setVisible(isInt..