Next.js (app router + 14v)

JWT 다루기 with Next.js app router + auth.js

👩🏻‍💻 로직로그인 -> 프론트엔드 서버 -> 백엔드 서버 요청 -> 프론트엔드 서버로 쿠키담은 response 날려줌 -> 문자열로 된 토큰을 객체로 만들어주는 쿠키 굽기 -> 브라우저에 쿠키 심기  ** 프론트 서버는 공용서버이기 때문에 쿠키를 심으면 안된다. 무조건 브라우저에 심어야한다.- next-auth는 auth.js로 이름이 바꼈다. v.4 버전- Auth.js가 해주는 일쿠키 로그인의 가장 큰 보안 위협인 CSRF를 알아서 막아준다.1. auth.js 설치yarn add next-auth@beta @auth-core공식 홈페이지를 들어가보면 아직은 v.5의 beta버전으로 사용할 수 있는 것을 확인할 수 있다. 그런데 이게 Next.js의 app router와 맞다. 2. auth.t..

Next.js useSelectedLayoutSegment | 현재 있는 페이지의 주소를 알고 싶은 경우

next의 공식문서에 따르면, " useSelectedLayoutSegment 는 클라이언트 컴포넌트 훅으로 이 것이 불러와진 레이아웃의 한 단계 아래의 경로 segment를 알 수 있다. 이 훅은 nav UI (특히, tab과 같이 그 주소 segment에 따라서 스타일이 바뀌는경우) 에 유용하다." 만일 내가 '/home' 에 있다면, 아래 코드를 작성했을 때 home이 불러와진다. import { useSelectedLayoutSegment } from "next/navigation"; ------------- const segment = useSelectedLayoutSegment(); console.log(segment); //home 한단계 더 밑의 경로까지 알고 싶다면, ex) /home/a..

useSearchParams | Next.js 13 app router (간단함)

제로초 강의를 듣다가 정확히 이해가 되지않아서 next의 공식문서를 찾아본 결과이다. 'useSearchParams'는 클라이언트 사이드 훅인데, 현재 url의 쿼리 스트링을 알 수 있게 해준다. 아래의 예시가 참 잘 되어있다. - 문법은 get(' ')을 반드시 사용해야한다. 'use client' import { useSearchParams } from 'next/navigation' export default function SearchBar() { const searchParams = useSearchParams() const search = searchParams.get('search') // URL -> `/dashboard?search=my-project` // `search` -> 'my-..

Next 14 | 주소창에 뜨지 않는 폴더구조 3가지

제로초의 이번 next 신강의를 들으면서 몇달전에 나온 따끈따끈한 next 14에 대해 알아가고 있다. 프로젝트 겸, 강의 참고 겸으로 next공식문서를 자주 드나들고 있는데, 이때까지 본 공식문서 중 가장 가독성이 좋고 깔끔한 것 같다. 행복하다.. 1. (afterLogin) : 그룹 폴더 - 레이아웃용 [공식문서] Routing: Route Groups | Next.js Route Groups can be used to partition your Next.js application into different sections. nextjs.org 2. @modal : 패럴럴 라우트 - 한 화면에 동시에 두 개의 페이지를 보여주는 용도 ex)모달 [공식문서] Routing: Parallel Routes..