Next Auth(1) 이어서…user 정보 가져오기 & 로그아웃user 정보 가져오고 로그아웃하기 위해서는 ****next-auth/react 에서 signOut, useSession를 불러와야 된다. useSession()useSession()는 data, status 두 값을 포함하는 객체를 반환한다.data는 session / undefined / null 3가지 값을 가진다.status는 loading / authenticated / unauthenticated 3가지 값을 가진다. 사용 예시import { useSession } from "next-auth/react"export default function Component() { const { data: session, status } ..

Next.js 기반으로 관리자 페이지, 관제 시스템 등 권한이 필요한 프로젝트 진행 시 Next-Auth 라는 npm 을 자주 사용하였다. 여러 프로젝트 진행하면서 고려해야 했던 포인트소수 계정일 경우session 기간권한 여부에 대한 스타일, 페이지 차이비 로그인 시 홈 접근 방지 / 로그인 상태 일시 로그인 페이지 접근 방지user 정보 가져오기 & 로그아웃 Next-Auth npm  next-authAuthentication for Next.js. Latest version: 4.24.7, last published: 6 months ago. Start using next-auth in your project by running `npm i next-auth`. There are 324 other ..

현재 개인 블로그를 만들면서 다크모드를 next-themes 라는 라이브러리를 사용해서 적용해보았다.개인 블로그 css를 tailwind로 적용했기 때문에 tailwind 방식으로 진행했다.tailwind.config.js 수정config중 darkMode를 ”class” 로 바꾼다.“class”로 수정해야 수동으로 어두운 모드 전환할 수 있다.기본형은 “media” 로 운영 체제 기본 설정에 의존한다.import type { Config } from "tailwindcss";const config: Config = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", ..

next/image 에서 제공하는 property인 placeholder=’blur’와 blurDataURL={ … } 을 사용한다면, 빈 화면이 뜨는 동안 블러처리 된 이미지가 화면에 보이게 이미지가 렌더링 될 때까지 효율적으로 제어할 수 있습니다. ux적으로도 사용자에게 이미지가 로딩 중임을 알려주고, 원본 이미지를 추측할 수 있도록 도와준다.  정적으로 이미지를 불러오는 상황 // placeholder='blur' 만 추가해도 자동으로 채워준다import Image from 'next/image' export default function Page() { return ( )} 동적으로 이미지를 불러오는 상황blurDataURL 를 추가적으로 더하면 되는데 blurImg 는 base64로 ..

Notion Api notion API를 사용하던 중 이미지를 가지고 올 때 크기 값을 보내주지 않는 것을 알고 이미지 크기를 유동적으로 가져오고 싶어서 원본 이미지 크기 값을 가져오는 방법에 대해 알아보았다.개발자 도구에서 img 태그에 있는 srcset에 있는 이미지 주소에 마우스를 올리면 아래와 같은 이미지가 나온다 rendered size : 렌더링 되는 이미지 크기intrinsic (본질적인) size : 불러오는 이미지의 원본 크기여기서 naturalWidth, naturalHeight 활용하면 이미지의 원본 크기를 알아 낼 수 있다.   기본 html 태그 폭은 100, 높이는 200 인 A.jpg 라는 이미지가 있을 경우 width, height 값이 있으면 해당 크기로 naturalWi..

Next.js 에서 새로 고침 하면 아래와 같은 오류가 발생했다.Hydration failed because the initial UI does not match what was rendered on the server Next.js 공식 문서에 따르면 오류가 발생한 이유로는“ 텍스트 내용이 서버에서 렌더링 된 HTML과 일치하지 않습니다. "렌더 시점에 대한 이유로 발생한 거 같다. 여러 해결 방법 중 useEffect를 활용해서 해결했다. import { useState, useEffect } from 'react' export default function App() { const [mounted, setMounted] = useState(false) useEffect(() => { se..