# 관련링크 - [재생목록](https://www.youtube.com/playlist?list=PLE0hRBClSk5LxuQKrrR8R-3kLVQFQUq_k) - [몰입코딩 - 스프링부트, Next.js 연동 - slog.gg/p/13958](https://slog.gg/p/13958#f) # 1강 - [25 01 17, p 13999, 1강, slog 13958 수업의 58강 소스코드를 복사해서 프로젝트에 적용](https://youtu.be/bw9c1xf5VQo) - [몰입코딩 - 스프링부트, Next.js 연동 - slog.gg/p/13958#58강](https://slog.gg/p/13958#58강) ## 프로젝트 폴더 복사 - 기존 프로젝트 폴더 : ~/IdeaProjects/spring-next-js-2025-01-10 - 새 프로젝트 폴더 : ~/IdeaProjects/spring-next-js-auth-2025-01-17 ```bash cd ~/IdeaProjects cp -r spring-next-js-2025-01-10 spring-next-js-auth-2025-01-17 du -sh spring-next-js-auth-2025-01-17 # 용량확인 ``` # 2강 - [25 01 17, p 13999, 2강, 백, 어플리케이션의 이름과 일부 패키지를 새 프로젝트명에 맞게 변경](https://youtu.be/Liqo9f0bMRo) # 3강 - [25 01 17, p 13999, 3강, 백, GIT PUSH](https://youtu.be/0wfBzh2oqyw) - [GITHUB - 저장소 생성 - https://github.com/new](https://github.com/new) - [GITHUB - 저장소 - https://github.com/jhs512/next-js-auth-2025-01-17](https://github.com/jhs512/next-js-auth-2025-01-17) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/e57e6eb) # 4강 - [25 01 17, p 13999, 4강, 백, 엑세스 토큰 만료기간 5초로 변경, 현재 브라우저의 쿠키에서 엑세스 토큰이 만료되어도 자동으로 갱신되지 않는 버그 발생](https://youtu.be/EyQGqcC23RA) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/848f4a4) ## 설명 - 엑세스 토큰 만료기간 5초로 변경 - 현재 브라우저의 쿠키에서 엑세스 토큰이 만료되어도 자동으로 갱신되지 않는 버그 발생 - 이게 오직 브라우저에서만 버그가 발생함 - POSTMAN으로 실험했을 때는 문제가 있음 - 현재 Next.js에서 모든 조회(GET) 통신을 Next.js 서버 컴포넌트를 경유하여 수행한다. # 5강 - [25 01 17, p 13999, 5강, 프, Next.js의 서버 컴포넌트에서 수행된 백엔드 API 호출은 당연하게도 브라우저의 쿠키에 영향을 주지 않는다.](https://youtu.be/YmzTjRxxjOg) ## POSTMAN 에서 잘 작동한 이유 - POSTMAN은 중간 경유지 없이 바로 백엔드 API 서버와 소통한다. $$uml participant POSTMAN as B participant "백엔드\nAPI 서버" as S B -> S : GET 내 정보\n(:8080/api/v1/members/me) activate S S -> S : accessToken\n만료사실 확인\n키 갱신 후\nSet-Cookie 헤더 반환 S --> B : HTTP Response with\nSet-Cookie Header deactivate S note right of B POSTMAN이 Set-Cookie 헤더를 받아서 쿠키를 저장 end note $$ ## 브라우저에서 쿠키갱신이 안되는 이유 $$uml participant 브라우저 as B participant "Next.js\n서버 컴포넌트" as N participant "백엔드\nAPI 서버" as S B -> N : GET 내 정보 페이지\n(:3000/member/me) activate N N -> N : 브라우저에서\n받은 쿠키를\n백엔드 API\n client에 세팅 N -> S : GET 내 정보\n(:8080/api/v1/members/me) activate S S -> S : accessToken\n만료사실 확인\n키 갱신 후\nSet-Cookie 헤더 반환 S --> N : HTTP Response with\nSet-Cookie Header deactivate S N -> N : 백엔드\nAPI 서버에서\n받은 Set-Cookie 헤더가\n버려짐 N --> B : HTML Response without\nSet-Cookie Header deactivate N note right of B 브라우저가 Set-Cookie 헤더를 받지 못해서 쿠키갱신이 안됨 end note $$ ## 우리가 바라는 이상적인 작동방식 $$uml participant 브라우저 as B participant "Next.js\n서버 컴포넌트" as N participant "백엔드\nAPI 서버" as S B -> N : GET 내 정보 페이지\n(:3000/member/me) activate N N -> N : 브라우저에서\n받은 쿠키를\n백엔드 API\n client에 세팅 N -> S : GET 내 정보\n(:8080/api/v1/members/me) activate S S -> S : accessToken\n만료사실 확인\n키 갱신 후\nSet-Cookie 헤더 반환 S --> N : HTTP Response with\nSet-Cookie Header deactivate S N -> N : 백엔드\nAPI 서버에서\n받은\nSet-Cookie 헤더를\n쿠키 저장소에 반영 N --> B : HTML Response with\nSet-Cookie Header deactivate N note right of B 브라우저가 Set-Cookie 헤더를 받아서 쿠키를 저장 end note $$ ## 설명 - 현재 브라우저의 쿠키에서 엑세스 토큰이 만료되어도 자동으로 갱신되지 않는 버그 발생한다. - 예를들어 http://localhost:3000/member/me 접속시 유발되는 GET http://localhost:8080/api/v1/members/me 요청에 의해서 브라우저 쿠키(accessToken)가 갱신될 법하지만 되지 않는다. - 그 이유는 GET http://localhost:8080/api/v1/members/me 요청을 브라우저가 아닌 Next.js 서버에서 수행하기 때문이다. - 서버 컴포넌트는 서버(Next.js 서버)에서만 수행된다. - Next.js의 서버 컴포넌트에서 수행된 백엔드 API 호출은 당연하게도 브라우저의 쿠키에 영향을 주지 않는다. - 이를 해결하기 위해서는 브라우저에서 수행되는 클라이언트 컴포넌트에서 API 호출을 하거나 - 서버 컴포넌트에서 API 호출 결과에서 Set-Cookie 헤더가 있다면 그것을 그대로 브라우저에게 전달해야 한다. # 6강 - [25 01 17, p 13999, 6강, 프, Next.js의 서버 컴포넌트에서는 응답 헤더를 절대로 수정할 수 없다. middleware.ts 를 이용해서 문제를 해결해야 한다.](https://youtu.be/-OAzXhmXCgQ) ## src/app/member/me/page.tsx ```tsx import client from "@/lib/backend/client"; import { cookies } from "next/headers"; import ClientPage from "./ClientPage"; export default async function Page() { const response = await client.GET("/api/v1/members/me", { headers: { cookie: (await cookies()).toString(), }, }); // 아래에서 출력이 된다는 것은 백엔드 API 서버는 잘못이 없다는 것을 증명한다. // 하지만 여기(서버 컴포넌트)에서 이 쿠키정보를 응답 헤더에 추가할 수 있는 방법은 없다. const setCookie = response.response.headers.get("Set-Cookie"); // 여기서 쿠키를 받아온다. console.log(`setCookie : ${setCookie}`); // 쿠키를 출력 if (response.error) { return <>{response.error.msg}; } const me = response.data; return ; } ``` # 7강 - [25 01 17, p 13999, 7강, 프, middleware.ts 에서 내 정보 API를 호출하여 응답으로 SetCookie 를 받는다음 브라우저에게 토스](https://youtu.be/KK04E0NdPYU) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/13f4c42) ## 설명 - middleware.ts 에서 내 정보 API를 호출하여 응답으로 SetCookie 를 받는다음 브라우저에게 토스 - 이렇게 하면 실제로 엑세스 토큰이 만료되었을 때 백엔드 API가 우리에게 준 새로운 엑세스 토큰을 브라우저가 쿠키에 저장할 수 있다. - middleware는 Next.js 서버가 받은 거의 모든 요청마다 실행된다. - 즉 현재는 백엔드의 내 정보 API 호출이 Next.js 에서의 모든 페이지 이동마다 실행된다.(이 부분은 추후 개선할 계획) - 그리고 현재는 백엔드 API 에게 받은 쿠키의 보안정보설정을 그대로 브라우저에게 전달하고 있지는 않다. ## src/middleware.ts ```ts import { NextResponse } from "next/server"; import type { NextRequest } from "next/server"; import { cookies } from "next/headers"; import client from "./lib/backend/client"; export async function middleware(req: NextRequest) { const meResponse = await client.GET("/api/v1/members/me", { headers: { cookie: (await cookies()).toString(), }, }); console.log(`meResponse: ${meResponse}`); if (meResponse.response.headers.get("Set-Cookie")) { const cookieValue = meResponse.response.headers.get("Set-Cookie")!; console.log(`cookieValue: ${cookieValue}`); // 아래 코드는 이 middleware 에서 fetch를 날려서 갱신된 accessToken 쿠키를 받아왔을 때 다음과 같은 역할을 한다. // 역할 : Next.js 에서 이번 요청에 대해서 응답을 완료했을 때 브라우저에게 새 accessToken 쿠키를 반영하도록 한다. (await cookies()).set({ name: cookieValue.split("=")[0], value: cookieValue.split("=")[1].split(";")[0], }); } return NextResponse.next({ headers: { // 아래 코드는 이 middleware 에서 fetch를 날려서 갱신된 accessToken 쿠키를 받아왔을 때 다음과 같은 역할을 한다. // 역할 : 이 미들웨어 이후에 수행되는 fetch(src/app/layout.tsx, src/app/member/me/page.tsx) 에서 새 accessToken 쿠키가 반영된다. cookie: (await cookies()).toString(), }, }); } export const config = { // 아래 2가지 경우에는 middleware를 실행하지 않도록 세팅 // api 로 시작하거나 하는 요청 : /api/~~~ // 정적 파일 요청 : /~~~.jpg, /~~~.png, /~~~.css, /~~~.js // PS. 여기서 말하는 api 로 시작하는 요청은 백엔드 API 서버로의 요청이 아니라 Next.js 고유의 API 서버로의 요청이다. // PS. 우리는 현재 이 기능을 사용하고 있지 않다. matcher: "/((?!.*\\.|api\\/).*)", }; ``` ## 우리가 바라는 이상적인 작동방식 $$uml participant 브라우저 as B participant "Next.js\n서버 컴포넌트" as N participant "백엔드\nAPI 서버" as S B -> N : GET 내 정보 페이지\n(:3000/member/me) activate N N -> N : 브라우저에서\n받은 쿠키를\n백엔드 API\n client에 세팅 N -> S : GET 내 정보\n(:8080/api/v1/members/me) activate S S -> S : accessToken\n만료사실 확인\n키 갱신 후\nSet-Cookie 헤더 반환 S --> N : HTTP Response with\nSet-Cookie Header deactivate S N -> N : 백엔드\nAPI 서버에서\n받은\nSet-Cookie 헤더를\n쿠키 저장소에 반영 N --> B : HTML Response with\nSet-Cookie Header deactivate N note right of B 브라우저가 Set-Cookie 헤더를 받아서 쿠키를 저장 end note $$ ## 서버 컴포넌트에서 응답헤더수정이 안되기 때문에 선택한 차선책 middleware.ts 이용방식 $$uml participant 브라우저 as B participant "Next.js\n미들웨어" as M participant "Next.js\n서버 컴포넌트" as N participant "백엔드\nAPI 서버" as S B -> M : GET 내 정보 페이지\n(:3000/member/me) activate M M -> M : 브라우저에서\n받은 쿠키를\n백엔드 API\n client에 세팅 M -> S : GET 내 정보\n(:8080/api/v1/members/me) activate S S --> M : HTTP Response with\nSet-Cookie Header deactivate S M -> M : 백엔드\nAPI 서버에서\n받은\nSet-Cookie 헤더를\n쿠키 저장소에 반영 M -> N : 미들웨어가 전처리를 마치고\n서버 컴포넌트가 실행됨 N -> N : 브라우저에서 받은 후\n미들웨어에서\n한번 더 조작한\n쿠키를\n백엔드 API\n client에 세팅 N -> S : GET 내 정보\n(:8080/api/v1/members/me) activate S S -> S : accessToken\n만료사실 확인\n키 갱신 후\nSet-Cookie 헤더 반환\n현실적으로 여기서\n키 갱신이\n일어날 가능성 : 0% S --> N : HTTP Response with out\nSet-Cookie Header deactivate S N --> M : 서버 컴포넌트가 종료되고\n미들웨어가로 제어권이 돌아옴 deactivate N M --> B : HTML Response with\nSet-Cookie Header deactivate M note right of B 브라우저가 Set-Cookie 헤더를 받아서 쿠키를 저장 end note $$ # 8강 - [25 01 17, p 13999, 8강, 프, 브라우저에게 쿠키를 토스할 때 보안설정정보도 그대로 유지되도록, apiKey, accessToken 쿠키만 승계하도록](https://youtu.be/eWmQKIDsnEM) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/73e3ae8) ## 설명 - 백엔드 API 서버는 Set-Cookie 헤더를 여러개 넘기거나 - 그래서 쿠키를 파싱할 때는 조심해야 한다. - Set-Cookie 헤더 하나에 `,`를 구분자로 여러개의 쿠키를 넘길 수 있다. ## src/middleware.ts ```ts // 생략 export async function middleware(req: NextRequest) { // 생략 if (meResponse.response.headers.get("Set-Cookie")) { const meResponseCookies = meResponse.response.headers .get("Set-Cookie") ?.split(","); if (meResponseCookies) { for (const cookieStr of meResponseCookies) { // 쿠키 문자열을 각 속성으로 파싱 const parts = cookieStr.split(";").map((p) => p.trim()); const [name, value] = parts[0].split("="); // accessToken 또는 apiKey 쿠키만 처리 if (name !== "accessToken" && name !== "apiKey") continue; const options: Partial = {}; for (const part of parts.slice(1)) { if (part.toLowerCase() === "httponly") options.httpOnly = true; else if (part.toLowerCase() === "secure") options.secure = true; else { const [key, val] = part.split("="); const keyLower = key.toLowerCase(); if (keyLower === "domain") options.domain = val; else if (keyLower === "path") options.path = val; else if (keyLower === "max-age") options.maxAge = parseInt(val); else if (keyLower === "expires") options.expires = new Date(val).getTime(); else if (keyLower === "samesite") options.sameSite = val.toLowerCase() as "lax" | "strict" | "none"; } } (await cookies()).set(name, value, options); } } } // 생략 } // 생략 ``` # 9강 - [25 01 17, p 13999, 9강, 프, middleware를 통해서 선언적인 인증/인가 처리](https://youtu.be/aAL4JKl5F5E) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/f386377) ## 설명 - middleware를 통해서 선언적인 인증/인가 처리를 수행했습니다. - 이제 로그인하지 않으면 글쓰기, 글수정페이지에 접근할 수 없습니다. - 억지로 접근한다고 하더라도 401 에러를 받습니다. ## src/middleware.ts ```ts // 생략 export async function middleware(req: NextRequest) { // 생략 const isLogin = meResponse.data !== undefined; if ( (req.nextUrl.pathname.startsWith("/post/write") || req.nextUrl.pathname.match(/^\/post\/\d+\/edit$/)) && !isLogin ) { return new NextResponse("로그인이 필요합니다.", { status: 401, headers: { "Content-Type": "text/html; charset=utf-8", }, }); } return NextResponse.next(); } // 생략 ``` # 10강 - [25 01 17, p 13999, 10강, 프, accessToken이 만료되었는지 확인하는 로직을 추가](https://youtu.be/D6KKq-rUKRg) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/18e5e3b) ## 설명 - accessToken이 만료되었는지 확인하는 로직을 추가 - 이제 accessToken이 만료되었을 때만 middleware에서 브라우저 쿠키갱신작업을 수행할 준비가 되었습니다. ## middleware.ts ```ts // 생략 export async function middleware(req: NextRequest) { const accessToken = (await cookies()).get("accessToken")?.value; let isExpired = true; if (accessToken) { try { const tokenParts = accessToken.split("."); const payload = JSON.parse( Buffer.from(tokenParts[1], "base64").toString() ); const expTimestamp = payload.exp * 1000; // exp는 초 단위이므로 밀리초로 변환 isExpired = Date.now() > expTimestamp; } catch (e) { console.error("토큰 파싱 중 오류 발생:", e); } } console.log(`isExpired: ${isExpired}`); // 생략 } // 생략 ``` # 11강 - [25 01 17, p 13999, 11강, 프, 만료되었을 때만 middleware에서 fetch 후 accessToken을 브라우저로 넘기는 작업 수행](https://youtu.be/d9kDKmti1W4) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/11562c7) ## src/middleware.ts ```ts // 생략 export async function middleware(req: NextRequest) { const accessToken = (await cookies()).get("accessToken")?.value; let isAccessTokenExpired = true; let accessTokenPayload = null; if (accessToken) { try { const tokenParts = accessToken.split("."); accessTokenPayload = JSON.parse( Buffer.from(tokenParts[1], "base64").toString() ); const expTimestamp = accessTokenPayload.exp * 1000; // exp는 초 단위이므로 밀리초로 변환 isAccessTokenExpired = Date.now() > expTimestamp; } catch (e) { console.error("토큰 파싱 중 오류 발생:", e); } } const isLogin = typeof accessTokenPayload === "object" && accessTokenPayload !== null; if (accessTokenPayload != null && isAccessTokenExpired) { const meResponse = await client.GET("/api/v1/members/me", { headers: { cookie: (await cookies()).toString(), }, }); if (meResponse.response.headers.get("Set-Cookie")) { const meResponseCookies = meResponse.response.headers .get("Set-Cookie") ?.split(","); if (meResponseCookies) { for (const cookieStr of meResponseCookies) { // 쿠키 문자열을 각 속성으로 파싱 const parts = cookieStr.split(";").map((p) => p.trim()); const [name, value] = parts[0].split("="); // accessToken 또는 apiKey 쿠키만 처리 if (name !== "accessToken" && name !== "apiKey") continue; const options: Partial = {}; for (const part of parts.slice(1)) { if (part.toLowerCase() === "httponly") options.httpOnly = true; else if (part.toLowerCase() === "secure") options.secure = true; else { const [key, val] = part.split("="); const keyLower = key.toLowerCase(); if (keyLower === "domain") options.domain = val; else if (keyLower === "path") options.path = val; else if (keyLower === "max-age") options.maxAge = parseInt(val); else if (keyLower === "expires") options.expires = new Date(val).getTime(); else if (keyLower === "samesite") options.sameSite = val.toLowerCase() as | "lax" | "strict" | "none"; } } (await cookies()).set(name, value, options); } } } } // 생략 } // 생략 ``` ## 설명 - 만료되었을 때만 middleware에서 fetch 후 accessToken을 브라우저로 넘기는 작업 수행 - 이제 매 페이지 이동마다 middleware에서 내 정보 조회 API가 발생하는 비효율 구조를 제거 - 그리고 로그인이 되었는지 아닌지를 accessToken의 유무로 판단하기로 결정(충분히 그래도 됩니다.) # 12강 - [25 01 17, p 13999, 12강, 프, middleware 리팩토링](https://youtu.be/E5rVkb3lJ30) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/199b598) ## middleware.ts ```ts import { NextResponse } from "next/server"; import type { NextRequest } from "next/server"; import { cookies } from "next/headers"; import client from "./lib/backend/client"; import { ResponseCookie } from "next/dist/compiled/@edge-runtime/cookies"; import { ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies"; export async function middleware(req: NextRequest) { const cookieStore = await cookies(); const accessToken = cookieStore.get("accessToken")?.value; const { isLogin, isAccessTokenExpired, accessTokenPayload } = parseAccessToken(accessToken); if (isLogin && isAccessTokenExpired) { await refreshTokens(cookieStore); } if (isProtectedRoute(req.nextUrl.pathname) && !isLogin) { return createUnauthorizedResponse(); } return NextResponse.next({ headers: { cookie: cookieStore.toString(), }, }); } function parseAccessToken(accessToken: string | undefined) { let isAccessTokenExpired = true; let accessTokenPayload = null; if (accessToken) { try { const tokenParts = accessToken.split("."); accessTokenPayload = JSON.parse( Buffer.from(tokenParts[1], "base64").toString() ); const expTimestamp = accessTokenPayload.exp * 1000; isAccessTokenExpired = Date.now() > expTimestamp; } catch (e) { console.error("토큰 파싱 중 오류 발생:", e); } } const isLogin = typeof accessTokenPayload === "object" && accessTokenPayload !== null; return { isLogin, isAccessTokenExpired, accessTokenPayload }; } async function refreshTokens(cookieStore: ReadonlyRequestCookies) { const meResponse = await client.GET("/api/v1/members/me", { headers: { cookie: cookieStore.toString(), }, }); const setCookieHeader = meResponse.response.headers.get("Set-Cookie"); if (setCookieHeader) { const cookies = setCookieHeader.split(","); for (const cookieStr of cookies) { const cookieData = parseCookie(cookieStr); if (cookieData) { const { name, value, options } = cookieData; if (name !== "accessToken" && name !== "apiKey") return null; cookieStore.set(name, value, options); } } } } function parseCookie(cookieStr: string) { const parts = cookieStr.split(";").map((p) => p.trim()); const [name, value] = parts[0].split("="); const options: Partial = {}; for (const part of parts.slice(1)) { if (part.toLowerCase() === "httponly") options.httpOnly = true; else if (part.toLowerCase() === "secure") options.secure = true; else { const [key, val] = part.split("="); const keyLower = key.toLowerCase(); if (keyLower === "domain") options.domain = val; else if (keyLower === "path") options.path = val; else if (keyLower === "max-age") options.maxAge = parseInt(val); else if (keyLower === "expires") options.expires = new Date(val).getTime(); else if (keyLower === "samesite") options.sameSite = val.toLowerCase() as "lax" | "strict" | "none"; } } return { name, value, options }; } function isProtectedRoute(pathname: string): boolean { return ( pathname.startsWith("/post/write") || pathname.match(/^\/post\/\d+\/edit$/) !== null ); } function createUnauthorizedResponse(): NextResponse { return new NextResponse("로그인이 필요합니다.", { status: 401, headers: { "Content-Type": "text/html; charset=utf-8", }, }); } // 생략 ``` # 13강 - [25 01 17, p 13999, 13강, 프, :3000/member/me 에서 리로드하면 fetch 가 3번 수행되지만 실제 백엔드로의 요청은 1번이다. fetch memoization](https://youtu.be/QzIg1vYU8SY) ## 설명 - 엑세스 토큰이 만료되지 않았다는 가정하에 - :3000/member/me 에서 리로드하면 fetch 가 3번 수행되지만 실제 백엔드로의 요청은 1번이다. - src/middleware.ts - src/app/layout.tsx - src/app/member/me/page.tsx - [https://nextjs.org/docs/app/building-your-application/caching#request-memoization](https://nextjs.org/docs/app/building-your-application/caching#request-memoization) - Next.js 의 request-memoization 은 서버 컴포넌트에서 fetch 할때만 적용된다. - 그리고 오직 GET 요청이고 요청에 사용한 URL과 헤더가 동일해야 데이터를 재활용한다. - ![img](https://i.postimg.cc/wvcKMMRK/image.png) - 이 특성 때문에 각 하나의 요청에서 수행되는 서버 컴포넌트들 사이에서 데이터 공유가 필요없고 부담없이 fetch를 사용하면 된다. - ![img](https://i.postimg.cc/RZNzdvyf/image.png) - 메모이제이션은 in memory 를 활용하고 캐시는 별도의 저장소를 사용한다. 둘은 다르다. - 참고로 우리가 사용하는 것은 메모이제이션이다.d - 서버 컴포넌트에서 fetch GET 을 하면 일단 바로 fetch를 수행하지 않고 먼저 메모이제이션 데이터를 확인한다. - 메모이제이션 데이터가 있으면 바로 그 데이터를 반환한다. - 메모이제이션 데이터가 없으면 캐시 저장소를 확인한다.(물론 우리가 cache 옵션을 주었을 때만 이렇게 작동한다.) - 캐시 저장소에 데이터가 있으면 바로 그 데이터를 반환한다. - 캐시 저장소에 데이터가 없으면 실제로 fetch를 수행하고 그 결과를 메모한다. # 14강 - [25 01 20, p 13999, 14강, 백, accessToken에 id, username 뿐 아니라 nickname 도 추가하자. 쓸데없는 Member 엔티티의 posts 필드 제거](https://youtu.be/GYMSSd58Oxs) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/7049da7) ## 설명 - accessToken에 id, username 뿐 아니라 nickname 도 추가하자. - accessToken의 내용을 풍성하게 하면 Next.js 의 서버 컴포넌트에서 현재 로그인한 회원의 정보를 - :8080/api/v1/members/me 에서 조회할 필요가 없어진다. - 쓸데없는 Member 엔티티의 posts 필드 제거 - 이 코드는 올바르지 않은 코드라서 제거를 했다. # 15강 - [25 01 20, p 13999, 15강, 백, 이제 글쓰기, 내 정보 조회에서 SELECT 가 아예 발생하지 않도록 개선](https://youtu.be/Tt72-J7sH6I) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/f4a648a) ## 설명 - 이제 글쓰기, 내 정보 조회에서 SELECT 가 아예 발생하지 않도록 개선 - 왜냐하면 이미 현재 로그인한 회원의 정보가 accessToken 에 포함되어 있기 때문이다. - 물론 해당 회원의 가입날짜, 수정날짜는 없다. - 하지만 그 정보는 딱히 필요하지 않아서 accessToken 에 포함시키지 않았다. - 필요하다면 나중에 넣을 수 도 있다. - 참고로 accessToken 안의 정보는 주기적으로 갱신된다. - 그래서 DB에서 회원의 이름이 변경되었더라도 바로 반영되지는 않는다. # 16강 - [25 01 20, p 13999, 16강, 프, 이제 layout.tsx, me/page.tsx 에서 백엔드의 내 정보 조회를 하지 않고 accessToken 에서 정보를 얻도록 구조 개선](https://youtu.be/yntgP8pUubY) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/e6f87ba) # PS - custom.accesssToken.expirationSeconds 가 현재는 5초 이다. - 추후 다시 20분으로 변경해야 한다. ## 설명 - 이제 layout.tsx, me/page.tsx 에서 백엔드의 내 정보 조회를 하지 않고 accessToken 에서 정보를 얻도록 구조 개선 - 왜냐하면 이미 현재 로그인한 회원의 정보가 accessToken 에 포함되어 있기 때문이다. - 물론 해당 회원의 가입날짜, 수정날짜는 없다. - 그래서 me/ClientPage.tsx 에서 해당 필드의 노출을 삭제했다. - 필요하다면 나중에 넣을 수 도 있다. - 참고로 accessToken 안의 정보는 주기적으로 갱신된다. - 그래서 DB에서 회원의 이름이 변경되었더라도 바로 반영되지는 않는다. # 17강 - [25 01 20, p 13999, 17강, 프, src/lib/auth/tokens.ts 에 parseAccessToken 함수 정의하여 중복제거](https://youtu.be/OPkskJMU3Bw) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/2d72dee) ## 설명 - 이제 layout.tsx, me/page.tsx 에서 백엔드의 내 정보 조회를 하지 않고 accessToken 에서 정보를 얻도록 구조 개선 - 왜냐하면 이미 현재 로그인한 회원의 정보가 accessToken 에 포함되어 있기 때문이다. - 물론 해당 회원의 가입날짜, 수정날짜는 없다. - 그래서 me/ClientPage.tsx 에서 해당 필드의 노출을 삭제했다. - 필요하다면 나중에 넣을 수 도 있다. - 참고로 accessToken 안의 정보는 주기적으로 갱신된다. - 그래서 DB에서 회원의 이름이 변경되었더라도 바로 반영되지는 않는다. # 18강 - [25 01 20, p 13999, 18강, 백, accessToken 만들 때 프론트를 위해서 거기에 권한들 정보도 추가](https://youtu.be/MGvawoZov5E) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/43c9944) ## 설명 - accessToken 만들 때 프론트를 위해서 거기에 권한들 정보도 추가 - 이제 프론트에서도 해당 accessToken 을 통해서 해당 회원이 관리자인지 아닌지 구분할 수 있다. # 19강 - [25 01 20, p 13999, 19강, 프, 관리자만 접속 할 수 있는 페이지(회원 리스트) 추가](https://youtu.be/fgvb12Ls9SA) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/359ae6b) ## 설명 - accessToken 에 권한들 정보가 추가되었으니 - 그걸 바탕으로 `isAdmin` 상수를 정의 - 이제 관리자만 접속 할 수 있는 페이지(회원 리스트) 추가하고 - `isAdmin` 이 `true` 일 때만 접속 할 수 있도록 # 20강 - [25 01 20, p 13999, 20강, 백, 관리자만 조회할 수 있는 회원 리스트 API 구현](https://youtu.be/nMh4tYkztrE) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/663ce71) ## 설명 - 관리자만 조회할 수 있는 회원 리스트 API 구현 - ApiV1MemberController 에 추가 - 만약에 관리자용 컨트롤러가 필요할 만큼 많아진다면 관리자용 컨트롤러를 따로 모아서 관리하는 것이 좋다. - ApiV1AdmMemberController 추가하고 `/api/v1/adm/members` 경로로 접속 할 수 있도록 구현 # 21강 - [25 01 20, p 13999, 21강, 백, 회원 리스트 API에 검색기능 추가](https://youtu.be/-h3_W24p0EQ) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/082c54d) ## com.ll.standard.search.MemberSearchKeywordTypeV1 추가 ```java package com.ll.standard.search; import lombok.AllArgsConstructor; @AllArgsConstructor public enum MemberSearchKeywordTypeV1 { username("username"), nickname("nickname"); private final String value; } ``` # 22강 - [25 01 20, p 13999, 22강, 프, 관리자 페이지에서 회원 목록/검색기능 구현](https://youtu.be/rTjsNTwvtrw) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/c51038b) # 23강 - [25 01 20, p 13999, 23강, 백, 회원 다건조회에서 username 도 노출하도록](https://youtu.be/zc-txbtRbNc) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/1687a84) ## 설명 - 회원 다건조회에서 username도 노출하도록 처리 - 해당 API는 관리자가 사용하는 API이다. - 그래서 username을 노출해도 괜찮다. # 24강 - [25 01 20, p 13999, 24강, 프, 회원목록에서 username도 노출하도록 처리](https://youtu.be/oF-YuZWxNKI) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/19c0824) # 25강 - [25 01 20, p 13999, 25강, 백, 회원 단건조회, ApiV1AdmMemberController 도입](https://youtu.be/AWcx4WuyihQ) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/091a1a4) ## 설명 - ApiV1AdmMemberController 도입 한 이유 - 기존에는 ApiV1MemberController에 회원의 일반적인 기능과 관리자만을 위한기능이 혼재되어 있었다. - 이렇게 계속 진행되면 코드가 복잡해지고 유지보수가 어려워진다. - 그래서 관리자만을 위한 기능을 따로 모아서 관리하는 것이 좋다. - 그래서 ApiV1AdmMemberController 를 도입했다. # 26강 - [25 01 20, p 13999, 26강, 프, 관리자 페이지에서 회원 단건조회 기능 구현](https://youtu.be/G7Vp_H-inco) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/790b79c) # 27강 - [25 01 20, p 13999, 27강, 프, 내 글 페이지 구현](https://youtu.be/ObWv2I_tr_U) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/5b768dd) # 28강 - [25 01 20, p 13999, 28강, 백, 내 정보 수정 API 구현](https://youtu.be/jUKunn6F684) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/0b91150) # 29강 - [25 01 20, p 13999, 29강, 프, 내 정보 수정 폼 구현](https://youtu.be/E68aHzTPNpo) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/076ca06) # 30강 - [25 01 20, p 13999, 30강, 프, 내 정보 수정 폼 처리](https://youtu.be/nm7sZV_-Wqg) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/1c36083) ## 설명 - 바뀐 내 정보가 바로 UI에 반영되지는 않는다. - 그 이유는 내 정보를 accessToken 에서 가져오고 있기 때문이다. - 백엔드에서 내 정보가 수정되면 accessToken 쿠키를 갱신해줘야 한다. - 수정이 완료되면 `window.location.replace("/member/me");` 를 통해서 페이지 이동을 했다. - 그 이유는 layout 에 있는 회원 별명도 갱신되어야 하기 때문이다. # 31강 - [25 01 20, p 13999, 31강, 백, 내 정보 수정 후, 바뀐 정보를 기반으로한 새 accessToken 쿠키 생성](https://youtu.be/RNrCiJM0JjQ) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/9170d96) ## 설명 - 내 정보 수정 후, 바뀐 정보를 기반으로한 새 accessToken 쿠키 생성 - 이제 UI에 바뀐 별명이 바로 보여집니다. # 32강 - [25 01 20, p 13999, 32강, 백, 관리자 페이지인지 여부에 따라서 레이아웃을 분기](https://youtu.be/ngAYxQI0nGo) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/48d553f) ## 설명 - 관리자 페이지이면 관리자 레이아웃을 보여주고 - 관리자 페이지가 아니면 일반 레이아웃을 보여준다. # 33강 - [25 01 20, p 13999, 33강, 백, 이제 다시 accessToken 만료시간을 20분으로 변경](https://youtu.be/0OeqMFFrQeE) - [커밋](https://github.com/jhs512/next-js-auth-2025-01-17/commit/55299e3) ## 설명 - 이제 다시 accessToken 만료시간을 20분으로 변경 - 이제 20분 이상 지나야 토큰이 갱신된다.

Next.js 인증/인가