const{Fragment:e,jsx:n,jsxs:t}=arguments[0];function _createMdxContent(r){const a={a:"a",blockquote:"blockquote",code:"code",hr:"hr",p:"p",pre:"pre",...r.components},{Heading:i}=a;return i||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Heading",!0),t(e,{children:[n(i,{type:"h2",children:"1. SERVER COMPONENT에서 pathname 접근 법"}),"\n",n(a.p,{children:"Next가 13버전 이상부터 server component와 client component 차이가 명확해짐\n작업하다보면 pathname이 필요할 때가 많다."}),"\n",n(a.pre,{children:n(a.code,{className:"language-tsx",children:'import { usePathname } from "next/navigation";\n\nexport default function Page() {\n const pathname = usePathname();\n return

RootPage

;\n}\n'})}),"\n",n(a.p,{children:"usePathname이 있지만 이건 client component에서만 사용 가능하다.\n그래서 위 코드처럼 쓰면 안됨"}),"\n",n(i,{type:"h3",children:"해결법: middleware"}),"\n",n(a.p,{children:"middleware를 사용하면 서버컴포넌트에서 pathname을 내려 받을 수 있다."}),"\n",t(a.blockquote,{children:["\n",t(a.p,{children:["참고: ",n(a.a,{href:"https://nextjs.org/docs/app/building-your-application/routing/middleware",children:"NEXT 공식문서"})]}),"\n"]}),"\n",n(a.p,{children:"app 폴더와 같은 레벨의 directory에 middleware.ts 를 만들어야함"}),"\n",n(a.pre,{children:n(a.code,{className:"language-ts",children:'//middleware.ts\nimport { NextRequest, NextResponse } from "next/server";\n\nexport function middleware(request: NextRequest) {\n const requestHeaders = new Headers(request.headers);\n requestHeaders.set("x-pathname", request.nextUrl.pathname);\n\n return NextResponse.next({\n request: {\n headers: requestHeaders,\n },\n });\n}\n'})}),"\n",n(a.p,{children:"이렇게 해놓으면 page route요청시 header에서 pathname을 추출할 수 있다."}),"\n",n(a.p,{children:"코드를 까보면"}),"\n",n(a.pre,{children:n(a.code,{className:"language-ts",children:'const requestHeaders = new Headers(request.headers);\nrequestHeaders.set("x-pathname", request.nextUrl.pathname);\n'})}),"\n",n(a.p,{children:"x-pathname이라는 이름으로 pathname을 지정하고"}),"\n",n(a.pre,{children:n(a.code,{className:"language-ts",children:"return NextResponse.next({\n request: {\n headers: requestHeaders,\n },\n});\n"})}),"\n",n(a.p,{children:"응답으로 보내줄 수 있다."}),"\n",n(a.hr,{}),"\n",t(a.blockquote,{children:["\n",n(a.p,{children:"2024.08 이전하면서 추가..\n응답 보내는 것만 쓰고 어떻게 받는지를 안썼다...멍청이..."}),"\n"]}),"\n",n(a.p,{children:"아래 코드는 admin CMS 레이아웃 컴포넌트에서 관리자 권한이 없는 사용자가 admin에 들어올 경우 홈화면으로 리다이렉트 시키고 로그인 안하고 진입하려는 유저는 로그인 화면으로 보내버리는 코드다."}),"\n",n(a.pre,{children:n(a.code,{className:"language-tsx",children:'//app/admin/layout.tsx\nimport { getServerSession } from "next-auth";\nimport { headers } from "next/headers";\nimport { redirect } from "next/navigation";\nimport { authOptions } from "../api/auth/[...nextauth]/route";\n\nexport default async function AdminRootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n const session = await getServerSession(authOptions);\n\n if (session && session.user.role !== "ROLE_ADMIN") {\n redirect("/");\n } else if (!session) {\n redirect("/auth/signIn");\n }\n\n const headersList = headers();\n const headerPathname = headersList.get("x-pathname") || "";\n if (headerPathname === "/admin") {\n redirect("/admin/members");\n }\n\n return <>{children};\n}\n'})}),"\n",n(a.p,{children:"여기서"}),"\n",n(a.pre,{children:n(a.code,{className:"language-tsx",children:'const headersList = headers();\nconst headerPathname = headersList.get("x-pathname") || "";\nif (headerPathname === "/admin") {\n redirect("/admin/members");\n}\n'})}),"\n",n(a.p,{children:"이 부분이 관리자가 admin 경로로 들어온 것을 확인하고 root로 접근 시 member 관리 페이지로 리다이렉트 시키는 부분이다."}),"\n",n(a.hr,{}),"\n",n(i,{type:"h2",children:"2.페이지네이션 코드 Refactoring"}),"\n",n(a.p,{children:"기존 만들어봤던 페이지네이션 코드"}),"\n",n(a.pre,{children:n(a.code,{className:"language-tsx",children:'import React, { useEffect, useState } from "react";\nimport ArrowLeftIcon from "@/components/common/ui/icons/ArrowLeftIcon";\nimport ArrowRightIcon from "@/components/common/ui/icons/ArrowRightIcon";\n\ntype Props = {\n total: number;\n page: number;\n onChange: (page: number) => void;\n};\n\nexport default function Pagination({ total = 0, page = 1, onChange }: Props) {\n const limit = 5;\n const numPages = Math.ceil(total / 10);\n\n const [currentPageArray, setCurrentPageArray] = useState([]);\n const [totalPageArray, setTotalPageArray] = useState([]);\n useEffect(() => {\n if (page % limit === 1) {\n setCurrentPageArray(totalPageArray[Math.floor(page / limit)]);\n } else if (page % limit === 0) {\n setCurrentPageArray(totalPageArray[Math.floor(page / limit) - 1]);\n }\n }, [page, totalPageArray]);\n useEffect(() => {\n const slicedPageArray = sliceArrayByLimit(numPages, limit);\n setTotalPageArray(slicedPageArray);\n setCurrentPageArray(slicedPageArray[0]);\n }, [numPages]);\n\n const sliceArrayByLimit = (numPages: number, limit: number) => {\n const totalPageArray = Array(numPages)\n .fill(0)\n .map((_, i) => i);\n return Array(Math.ceil(numPages / limit))\n .fill(0)\n .map(() => totalPageArray.splice(0, limit));\n };\n\n useEffect(() => {\n if (page % limit === 1) {\n setCurrentPageArray(totalPageArray[Math.floor(page / limit)]);\n } else if (page % limit === 0) {\n setCurrentPageArray(totalPageArray[Math.floor(page / limit) - 1]);\n } else {\n setCurrentPageArray(totalPageArray[Math.floor(page / limit)]);\n }\n }, [page, totalPageArray]);\n\n return (\n

\n {\n onChange(page - 1);\n }}\n disabled={page === 1}\n >\n \n \n

\n {currentPageArray?.map((i) => (\n onChange(i + 1)}\n >\n {i + 1}\n \n ))}\n

\n onChange(page + 1)}\n disabled={page === numPages || numPages === 0}\n >\n \n \n

\n );\n}\n'})}),"\n",t(a.blockquote,{children:["\n",n(a.p,{children:"진짜 코드 왜이렇게 짜냐...\n너무 보기 힘들다고 생각해서 조금 조금씩 리펙토링 일단 중복으로 쓰이는 코드를 줄여봤다.\n나는 useEffect를 너무 많이 쓴다... 줄여보자"}),"\n"]}),"\n",n(a.pre,{children:n(a.code,{className:"language-tsx",children:'import React, { useEffect, useState } from "react";\nimport ArrowLeftIcon from "./icons/ArrowLeftIcon";\nimport ArrowRightIcon from "./icons/ArrowRightIcon";\n\ntype Props = {\n total: number;\n page: number;\n onChange: (page: number) => void;\n};\n\nconst ITEMS_PER_PAGE = 10;\nconst PAGINATION_LIMIT = 5;\n\nexport default function Pagination({ total, page, onChange }: Props) {\n const numPages = Math.ceil(total / ITEMS_PER_PAGE);\n const [currentPageArray, setCurrentPageArray] = useState([]);\n const [totalPageArray, setTotalPageArray] = useState([]);\n\n const sliceArrayByLimit = (numPages: number, limit: number): number[][] => {\n let pages = Array.from({ length: numPages }, (_, i) => i + 1);\n let result = [];\n for (let i = 0; i < pages.length; i += limit) {\n result.push(pages.slice(i, i + limit));\n }\n return result;\n };\n\n useEffect(() => {\n const slicedPageArray = sliceArrayByLimit(numPages, PAGINATION_LIMIT);\n setTotalPageArray(slicedPageArray);\n const pageIndex = Math.floor((page - 1) / PAGINATION_LIMIT);\n setCurrentPageArray(slicedPageArray[pageIndex] || []);\n }, [numPages, page]);\n\n const renderButton = (\n pageNumber: number,\n content: React.ReactNode,\n disabled: boolean\n ) => (\n onChange(pageNumber)}\n disabled={disabled}\n >\n {content}\n \n );\n\n return (\n

\n {renderButton(page - 1, , page === 1)}\n

\n {currentPageArray.map((i) => (\n onChange(i)}\n >\n {i}\n \n ))}\n

\n {renderButton(\n page + 1,\n ,\n page === numPages || numPages === 0\n )}\n

\n );\n}\n'})}),"\n",n(a.p,{children:"줄이고 작동도 되긴하는데 이게 최선인걸까 항상 고민 된다."})]})}return{default:function(e={}){const{wrapper:t}=e.components||{};return t?n(t,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};

Loading...

Posts

2024-03-12 TIL