nextjs5 [tailwindcss] cookie darkmode with nextjs nextjs에서 cookie를 활용해서 darkmode를 적용 했다. 브라우저에서 먼가를 저장할수 있는 곳은 localstorage, sessionstorage, cookie, history를 활용 할 수 있다. 이중 쿠키를 사용한 이유는 다음과 같다. * localstorage를 사용할 경우 SSR에서는 localstorage에 접근 할 수 없다. client side로딩 시점에 localstorage를 로드해서 theme를 적용하면 로딩 딜레이가 있기 때문에, 화면이 깜빡이는 현상이 발생하게 된다. 화면이 깜빡임 없이 theme를 적용하기 위해 cookie는 좋은 방안이다. nextjs SSR에서 cookie에 접근이 가능하기 때문이다. import { cookies } from 'next/heade.. 2023. 1. 6. [next.js] version 13, head.js twitter card, 또는 sns에 웹페이지를 공유 할때 미리보기 기능이 제공된다. 이것을지원 하기 위해서는 CSR에서는 방법을 찾지 못하였다. 플랫폼에서 자바스크립트 로딩을 지원하지 않기 때문이다. nextjs 13에서는 head를 사용 하는 방법이 변경 되었다. head에서 데이터를 로드해 필요한 내용을 출력할수 있다. In the pages directory, the next/head React component is used to manage ) } After: app/head.tsx export default function Head() { return ( My Page Title ) } 2023. 1. 6. react 상세 페이지 이동 후 이전 목록으로 돌아가기 item 목록에서 , 상세 페이지로 이동후에 뒤로 가기를 하면 이전 목록이 유지되어야 한다 * item 리스트가 그대로 있어야 한다. * 스크롤이 이전 진입 시점 이어야 한다. * 빠르게 로딩이 되어야 한다. 위 기능을 어떻게 구현할까? 개발자가 아니라면 당연히 되어야 할거 같은게 당연히 지원되지 않는다. 서버사이드 렌더링 페이지 라면, 더욱이 까다로울 수 있다. 현재 delog.io는 nextjs 를 사용해 서버사이드 페이지가 기본으로 동작하고 있다. 내가 구현한방법은 history 객체를 사용 하였다. history 객체는 새로 고침을 하기 전까지 상태 유지가 된다. 페이지 이동이 필요할때 사용하기에 적합하다. 1. 목록을 로드한다. * 목록을 히스토리에 저장한다. 2. 아이템을 선택시에 스크롤위치를.. 2023. 1. 4. [next.js] version 13, head.js In the pages directory, the next/head React component is used to manage ) } After: app/head.tsx export default function Head() { return ( My Page Title ) } 2023. 1. 2. 이전 1 2 다음
