NextJS (5) 썸네일형 리스트형 2024.3.15 기록 (glitch와 vercel을 이용한 배포) 글리치(glitch) 와 버셀 (vercel)을 이용하여 배포를 하는 과정은 두 가지 과정이 존재한다. 1. 환경변수 설정 기존에 Json-server 를 이용한 라우터를 주소로 잡았다면, 글리치의 배포주소로 변경해주어야 한다. 2. 버셀 배포 과정 vercel로 배포를 진행한다. 만약 환경변수를 사용했다면, 배포 전에 환경변수를 입력하는 과정을 거쳐준다. 3. 라우트 핸들러 만약 라우트 핸들러를 이용했다면, 추후 배포된 도메인으로 환경변수 내의 주소를 변경해준다. 최종적으로, 글리치의 배포주소와, 버셀의 배포주소로 localhost주소를 변경해주면 깔끔하게 완성된다. 2024.3.14 기록 (streaming SSR) 서스펜스(Suspense)를 이용하여 기존에 페이지가 로딩되는 부분을 대처하는 방법을 배운 적이 있다. try/ catch를 이용한 에러 상태를 대신하여 처리하는 방식이다. 서버 사이드 랜더링(SSR)에서도 이 서스펜스를 통해 비동기 렌더링을 진행할 수 있다. 사용법은 간단하다, 기존에 서스펜스를 사용하며, 서버컴포넌트를 사이에 두면 된다 이렇게 되면 비동기 통신이 가능해지기때문에 서버와 프라우저간의 간극이 굉장히 많이 줄어들게 된다. 이렇게 되면 UX가 향상되게 된다 Streaming Server-Side Rendering Generate HTML to be rendered on the server in response to a user request www.patterns.dev 2024.3.13 기록 (NextJS에서 useRouter를 사용해보자) 2. Router와 useRouter의 차이 nextjs에서는 next/router라는 자체 패키지에 둘 모두를 제공 Router는 항상 최신 상태를 가지고 useRouter는 리액트의 라이프 사이클에 따라 상태를 업데이트한다. Router는 클래스형, 함수형 컴포넌트에서 모두 사용 가능 Router를 추가 할 경우 두 개의 Router를 추천해주는데 각각 클래스형, 함수형임 useRouter는 함수형 컴포넌트의 라이프사이클(life cycle)에 따라서 사용한다. 그렇기 때문에 nextJS에서는 useRouter를 권장한다. state와 hook에 맞춰서 동작을 에측하기 쉬워지기 때문임. 실제로 useRouter와 Router의 형태는 동일하다. 언제 씀? Router는 전역 객체이기 때문에 리액트 외.. 2024.3.12 기록 (nextJS에서 외부 이미지 링크를 사용 할 때) 외부 이미지를 사용 할 경우 발생하는 에러인데 외부링크의 도메인을 가져와야 하기 때문이다. 해결법은 생각보다 간단하다. next.config.mjs 파일 내부에 nextConfig 객체 내부에 images 객체를 생성, 도메인과 reactStrictMode를 true로 해준다. 배열 내부에는 hostname을 문자열로 입력해준다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: ["img.freepik.com"], }, reactStrictMode: true, }; export default nextConfig; 이렇게 작성하여 해결 할 수 있었다. 2024.3.11 기록 (Next.JS의 렌더링) NEXT JS 렌더링 방식에는 SSG, ISR, SSR, CSR 네 가지를 지원한다. 이 방식을 정확히 익혀두어 필요에 맞는 렌더링 방식을 채택할 수 있다. 1. SSG( Static site Generation ) : 빌드 시점에서 받아온 데이터를 적용시킨다. * 별도의 세팅이 없다면 기본값이다! 2. ISR( Incremental Static Regeneration ): fetch 한 데이터의 만료시기를 지정한다. 단위는 초(s) 3. SSR ( Server Side Rendering ) : 데이터를 캐싱하지 않는다. 즉, 매번 새로운 데이터를 받아온다. 4. CSR( Client Side Rendering ) : 'use client' 를 사용해 기존의 리액트 방식의 랜더링을 지원한다. 이전 1 다음
