next.js4

• 

  TIL : Next.js localStorage를 활용한 배너, 하루 동안 닫기 구현 Next.js 13.4 환경이다. 문제상황 @headlessui/react 라이브러리를 활용해서 배너 닫기를 구현해놨다. 그래서 클라이언트에 유저가 방문하면 아래 화면처럼 배너가 열린다. 현재는 닫기를 눌러도, 새로고침시 다시 보이게 된다. 닫은 정보가 어딘가에 저장되지 않기 때문이다. const [isShowing, setIsShowing] = useState(true); 그래서 이렇게 구현한 배너를 개선하기로 했다. localStorage를 활용해서, 사용자가 배너 버튼 닫기를 누르면, 하루 동안 배너가 열리지 않기를 바랐다. ==> 즉, 새로고침을 해도 배너가 계속 닫혀있길 바란다. 그래서 useEffect를 활용하여 다음과 같이 코드를 구성했다. "use client"; import { Trans.. 개발 학습일지(TIL) 2023. 6. 8.

• 

  TIL : next.js 커스텀 404 not-found 찾을 수 없는 페이지 구조 재설정 문제 상황 next.js 13.4 환경 페이지를 모바일에서도 맞춰 볼 수 있도록 반응형으로 페이지를 구성했다. 404페이지를 보여주는 app/not-found.js를 커스텀으로 구성하기 위하여 코드를 바꾸었지만 PC에서는 내용이 상관없이 적용되긴하나, 모바일에서는 모바일에 맞추어 반응형으로 페이지가 나타나지 않았다. PC에서 보이듯 보인 것이다. 해결방법 app 폴더 아래 동적 라우팅을 위한 폴더 및 페이지를 만들면 기대하는 대로 정상 작동한다. app/[...not-found]/page.js import {notFound} from "next/navigation" export default function NotFoundCatchAll() { notFound() return null } 참조 https.. 개발 학습일지(TIL) 2023. 5. 31.

• 

  TIL : Next.js 13 Provider 문제 : 다크모드가 안 되는 이유 문제상황 개발환경 Next.js 13.4.2 TailwindCSS next-themes 라이브러리를 활용 다크모드를 구현하려했다. https://github.com/pacocoursey/next-themes GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme wi Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - GitHub - pacocoursey/next-themes: Perfect .. 개발 학습일지(TIL) 2023. 5. 19.

• 

  TIL : Next.js, useState와 useEffect 이용하여 댓글 실시간 업데이트 문제상황 Next.js 환경이다. Next.js는 리액트의 기능을 많이 통합하는 프레임워크로, 리액트 훅에 대한 지식이 있어야 한다. 현재 기능 상황은 댓글 작성시 새로고침을 해야만 댓글 목록이 업데이트 된다. 이 기능을, 댓글 작성시 새로고침 없이 댓글 목록이 최신화 되도록 업그레이드 하려고 한다. 코드는 다음과 같다. 'use client' import { useEffect, useState } from "react"; export default function Comment(props){ let [comment, setComment] = useState('') let [data, setData] = useState([]) useEffect(()=> { fetch('/api/comment/list?i.. 개발 학습일지(TIL) 2023. 5. 12.