next.js (5) 썸네일형 리스트형 [Error] Error: NEXT_REDIRECT Error: NEXT_REDIRECT 로그인에 성공하면 메인페이지로 이동하는 코드를 구현했는데 위와 같은 에러가 발생했다. redirect에서 난 오류인 것 같았다. const handleLogin = async () => { ... else if (result.status === 'SUCCESS') { alert('로그인에 성공했습니다.'); redirect('/dashboard'); } } 검색 결과, next/navigation의 redirect를 클라이언트 컴포넌트에서 사용해서 난 에러였다. redirect는 서버 컴포넌트에서만 사용이 가능하다,, 클라이언트 컴포넌트에서 페이지를 이동하고 싶다면, router를 사용해야 한다. import { useRouter } from 'next/navigat.. Headless CMS란? (feat. Sanity) 1. CMS란? CMS는 Content Management System의 약자로, 콘텐츠를 관리하는 시스템을 의미한다. 콘텐츠 관리와 프론트엔드 디스플레이를 결합한 통합 시스템이라 생각하면 된다. 사용자가 콘텐츠를 생성, 편집 및 관리할 수 있는 관리자 인터페이스를 제공하고 이를 데이터 베이스에 저장하는 역할을 한다. 관리자용 인터페이스가 제공되기 때문에 개발자가 아니어도 쉽게 콘텐츠를 관리할 수 있다. 단, 컨텐츠와 프론트엔드 화면이 연결되어 잇기 때문에 콘텐츠를 수정했을 때, 화면에 영향이 갈 수도 있다. 2. HeadlessCMS란? HeadlessCMS는 일반적인 CMS와 달리 콘텐츠 관리와 프론트엔드 디스플레이를 분리한 것을 말한다. 콘텐츠 관리는 특정한 백엔드 시스템에서 이루어지고, 해당 콘텐.. [Web] CSR, SSR의 개념과 차이점 렌더링 방식에는 CSR, SSR, SSG, ISR처럼 다양한 방법이 존재한다. 어떻게 렌더링하냐에 따라 웹 사이트의 성능이 달라지기 때문에 각 사이트에 맞는 렌더링 방식을 사용해야 한다. 따라서 이번엔 각 렌더링 방식의 개념과 차이점에 대해 알아보려 한다. 우선 CSR과 SSR에 대해서 알아보자. 브라우저 엔진은 html 구문을 해석해 DOM tree를 수정하고, CSSOM 스타일링 객체를 구성한다. 그리고 여러 과정을 통해 화면에 코드를 그려낸다. 이때 html 구문을 서버와 클라이언트 중 누가 가져오냐에 따라 CSR과 SSR이 나눠진다. 말 그대로 어느 Side에서 렌더링을 하냐에 따라 나뉜다고 생각하면 된다. 1. CSR CSR은 Client Side Rendering의 약자로, 렌더링의 주체자가 .. [Error] nextjs localStorage is not defined error (feat. window is undefined error) localStorage is not defined sessionStorage is not defined nextjs 에서 localStorage, sessionStorage 를 이용해서 로그인 로그아웃을 구현하려는데 localStorage is not defined error 가 발생했다 페이지라 클라이언트에 로드되지 않았는데, localstorage에 접근했기 때문에 발생한 에러였다. localstorage, sessionStorage는 window 안에 있는 메서드이다. window는 브라우저 전역 객체로 서버에서는 사용할 수가 없다. next.js의 경우 ssr, 즉 서버가 먼저 정의된 후 클라이언트가 정의되기 때문에 에러가 발생한다. typeof window !== 'undefined' 따.. [Next] Next.js 란? SSR, CSR 1. Next.js Next.js 는 리액트(react)로 만드는 서버 사이드 렌더링(SSR, Server Side Rendering) 프레임워크이다. 서버 사이드 렌더링(SSR)은 말 그대로 서버에서 자바스크립트를 렌더링 하는 것을 의미한다. 리액트의 경우 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이기 때문에 자바스크립트를 클라이언트에서 로드한다. 즉, 사용자가 웹사이트를 요청하면 우선 빈 html을 가져오고 스크립트를 로딩한다. 따라서 자바스크립트가 모두 로드될 때까지 기다려야만 웹을 볼 수 있기 때문에 첫 로딩 시간이 오래 걸리고, 검색 엔진 최적화(SEO, Search Engine Optimization)에 취약하다. 반면, 서버 사이드 렌더링(SSR)의 경우 서버.. 이전 1 다음
