"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "소개", "hProperties": { "id": "소개" } }, "depth": 2, "value": "소개" }, { "data": { "id": "rest-api-멀리하기", "hProperties": { "id": "rest-api-멀리하기" } }, "depth": 2, "value": "REST API 멀리하기" }, { "data": { "id": "상태-유지되지-않는-세션의-필요성", "hProperties": { "id": "상태-유지되지-않는-세션의-필요성" } }, "depth": 2, "value": "상태 유지되지 않는 세션의 필요성" }, { "data": { "id": "기본-세션-구현", "hProperties": { "id": "기본-세션-구현" } }, "depth": 2, "value": "기본 세션 구현" }, { "data": { "id": "세션-라이브러리-작성하기", "hProperties": { "id": "세션-라이브러리-작성하기" } }, "depth": 3, "value": "세션 라이브러리 작성하기" }, { "data": { "id": "다가오는-두-개의-server-actions-추가", "hProperties": { "id": "다가오는-두-개의-server-actions-추가" } }, "depth": 3, "value": "다가오는: 두 개의 Server Actions 추가" }, { "data": { "id": "페이지-작성하기", "hProperties": { "id": "페이지-작성하기" } }, "depth": 2, "value": "페이지 작성하기" }, { "data": { "id": "암호화-구현하기", "hProperties": { "id": "암호화-구현하기" } }, "depth": 2, "value": "암호화 구현하기" }, { "data": { "id": "결론", "hProperties": { "id": "결론" } }, "depth": 2, "value": "결론" }]; const readingTime = { "minutes": 2, "words": 472, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "소개", children: ["소개", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#소개", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " 가 공개된 이후, Next.js 는 또 다른 기능인 ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions", children: "Server Actions" }), " 를 도입했습니다. 이 새로운 기능은 서버 측 데이터 처리, 클라이언트 측 JavaScript 의 의존 감소, 그리고 폼을 점진적으로 향상시키는 작업을 가능하게 합니다. 또한, 전통적인 REST API 없이 JavaScript 와 React 를 사용하여 견고한 웹 애플리케이션을 만드는 데 도움을 줍니다."] }), "\n", _jsx(_components.p, { children: "이 글에서는 이 혁신에서 제공되는 다양한 장점을 살펴보고, 실제로 이 기능을 사용하여 Next.js 의 쿠키 기반 상태 유지되지 않는 세션을 구현합니다. 이 글은 App Router 를 사용하여 데모 프로젝트를 만드는 모든 단계를 안내하는 단계별 가이드입니다." }), "\n", _jsxs(_components.p, { children: ["우리의 실습 데모는 ", _jsx(_components.a, { href: "https://vercel.com/docs/functions/edge-functions/edge-runtime", children: "Edge Runtime" }), " 을 사용하여 Vercel 에 쉽게 배포할 수 있습니다. 전체 소스 코드는 ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "GitHub" }), " 에서 다운로드할 수 있습니다."] }), "\n", _jsxs(_components.h2, { id: "rest-api-멀리하기", children: ["REST API 멀리하기", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rest-api-멀리하기", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "전통적으로, Next.js 웹 애플리케이션이 백엔드에서 데이터베이스를 쿼리하려면 인증 상태를 확인하고 데이터베이스를 쿼리하는 몇 가지 REST API 를 생성할 수 있습니다. 그런 다음 프론트엔드 React 애플리케이션은 이러한 API 를 호출합니다. 그러나 API 를 공개할 필요가 없고, 이 React 애플리케이션이 유일한 클라이언트인 경우 REST API 를 사용하는 것은 불필요하게 느껴질 수 있습니다." }), "\n", _jsxs(_components.p, { children: ["Server Actions 를 사용하면 React 컴포넌트가 이제 서버 측 코드를 실행할 수 있습니다. 수동으로 API 엔드포인트를 만들 필요가 없고, Server Actions 는 Next.js 가 내부적으로 사용할 엔드포인트를 자동으로 생성합니다. Server Actions 를 호출할 때 Next.js 는 메타데이터와 함께 ", _jsx(_components.code, { children: "POST" }), " 요청을 보내고, 현재 보고 있는 페이지에서 실행할 작업을 선택합니다."] }), "\n", _jsxs(_components.h2, { id: "상태-유지되지-않는-세션의-필요성", children: ["상태 유지되지 않는 세션의 필요성", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#상태-유지되지-않는-세션의-필요성", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "상태 유지되지 않는 애플리케이션을 만드는 데 선호되는 프레임워크인 Next.js 는 서버리스 환경을 의미하며, 이 경우 메모리를 사용하여 세션 데이터를 저장할 수 없습니다. 전통적인 세션은 Redis 나 데이터베이스와 같은 외부 저장소 서비스를 필요로 합니다." }), "\n", _jsx(_components.p, { children: "그러나 세션 데이터가 충분히 작다면, 안전한 암호화 방법과 클라이언트 측에 저장된 쿠키를 사용하여 상태 유지되지 않는 세션을 설계하는 다른 방법이 있습니다. 이 방법은 외부 저장소의 필요성을 피하고 세션 데이터를 비중앙화하여 서버 부하와 전체 애플리케이션 성능에 비약적인 향상을 가져다줍니다." }), "\n", _jsx(_components.p, { children: "따라서 우리의 목표는 클라이언트 측 저장 기능을 활용하면서도 잘 실행된 암호화를 통해 보안을 보장하는 가벼운 효율적인 상태 유지되지 않는 세션을 구현하는 것입니다." }), "\n", _jsxs(_components.h2, { id: "기본-세션-구현", children: ["기본 세션 구현", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#기본-세션-구현", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "먼저, 새 프로젝트를 시작해야 합니다:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: "npx create-next-app@latest\n" }) }), "\n", _jsxs(_components.p, { children: ["설치에 관한 자세한 내용은 ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "공식 가이드" }), " 를 참조하세요."] }), "\n", _jsxs(_components.h3, { id: "세션-라이브러리-작성하기", children: ["세션 라이브러리 작성하기", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#세션-라이브러리-작성하기", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Server Actions 를 더 쉽게 이해하기 위해, 먼저 간단한 세션 버전을 만들어봅니다. 이 버전에서는 JSON 을 사용하여 쿠키에 데이터를 저장합니다." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "session/index.ts" }), " 라는 파일을 만들고 다음 코드를 포함합니다:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { cookies } from 'next/headers';\n\nexport type Session = {\n username: string;\n};\n\nexport const getSession = async (): Promise => {\n const cookieStore = cookies();\n const session = cookieStore.get('session');\n\n if (session?.value) {\n return JSON.parse(session.value) as Session;\n }\n\n return null;\n};\n\nexport const setSession = async (session: Session) => {\n const cookieStore = cookies();\n cookieStore.set('session', JSON.stringify(session));\n};\n\nexport const removeSession = async () => {\n const cookieStore = cookies();\n cookieStore.delete('session');\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["첫 번째 줄 ", _jsx(_components.code, { children: "\"use server\"" }), " 는 이 파일의 함수를 Server Actions 로 표시합니다."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "request" }), " 와 ", _jsx(_components.code, { children: "response" }), " 에 직접 접근할 수 없기 때문에, 우리는 ", _jsx(_components.code, { children: "next/headers" }), " 를 사용하여 쿠키를 읽고 씁니다. 이는 Server Actions 에서만 사용할 수 있습니다."] }), "\n", _jsxs(_components.h3, { id: "다가오는-두-개의-server-actions-추가", children: ["다가오는: 두 개의 Server Actions 추가", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#다가오는-두-개의-server-actions-추가", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "세션 라이브러리가 준비되었으므로, 이제 세션의 유용성을 보여주기 위해 로그인 및 로그아웃 기능을 구현할 차례입니다." }), "\n", _jsxs(_components.p, { children: ["다음 코드를 ", _jsx(_components.code, { children: "user/index.ts" }), " 에 포함하세요:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { removeSession, setSession } from '@/session';\n\nexport const signIn = async (username: string) => {\n await setSession({ username });\n};\n\nexport const signOut = async () => {\n await removeSession();\n};\n" }) }), "\n", _jsx(_components.p, { children: "여기에서 우리는 단순히 사용자 이름만 입력하는 '가상의' 로그인 절차를 사용하고 있습니다." }), "\n", _jsxs(_components.h2, { id: "페이지-작성하기", children: ["페이지 작성하기", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#페이지-작성하기", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["App Router 에서 페이지는 일반적으로 비동기 컴포넌트이며, Server Actions 는 이러한 컴포넌트에서 직접 호출할 수 없습니다. ", _jsx(_components.code, { children: "\"use client\"" }), " 를 사용하여 컴포넌트를 만들어야 합니다:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "components/sign-in.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { signIn } from '@/user';\nimport { useState } from 'react';\n\nconst SignIn = () => {\n const [username, setUsername] = useState('');\n\n return (\n

\n {\n setUsername(event.target.value);\n }}\n />\n {\n signIn(username);\n }}\n >\n 로그인하기\n \n

\n );\n};\n\nexport default SignIn;\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "components/sign-out.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { signOut } from '@/user';\n\nconst SignOut = () => {\n return (\n {\n signOut();\n }}\n >\n 로그아웃\n \n );\n};\n\nexport default SignOut;\n" }) }), "\n", _jsxs(_components.p, { children: ["마지막으로 ", _jsx(_components.code, { children: "app/page.tsx" }), " 를 작성해 봅시다"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getSession } from '@/session';\nimport styles from './page.module.css';\nimport SignIn from '../components/sign-in';\nimport SignOut from '@/components/sign-out';\n\nexport default async function Home() {\n const session = await getSession();\n\n return (\n

\n {session ? (\n

로그인된 사용자: {session.username}

\n \n

\n ) : (\n \n )}\n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "암호화-구현하기", children: ["암호화 구현하기", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#암호화-구현하기", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Server Actions 의 작업이 끝났습니다. 이제 마지막 부분은 ", _jsx(_components.code, { children: "crypto" }), " 를 통해 암호화를 구현하는 것입니다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// session/encrypt.ts\nimport { createCipheriv, createDecipheriv } from 'crypto';\n\n// 사용자 정의 키와 iv 로 교체하세요\n// crypto.randomBytes(32) 와 crypto.randomBytes(16) 으로 생성할 수 있습니다\nconst key = Buffer.from('17204a84b538359abe8ba74807efa12a068c20a7c7f224b35198acf832cea57b', 'hex');\nconst iv = Buffer.from('da1cdcd9fe4199c835bd5f1d56446aff', 'hex');\nconst algorithm = 'aes-256-cbc';\n\nexport const encrypt = (text: string) => {\n const cipher = createCipheriv(algorithm, key, iv);\n const encrypted = cipher.update(text, 'utf8', 'base64');\n return `${encrypted}${cipher.final('base64')}`;\n};\n\nexport const decrypt = (encrypted: string) => {\n const decipher = createDecipheriv(algorithm, key, iv);\n const decrypted = decipher.update(encrypted, 'base64', 'utf8');\n return `${decrypted}${decipher.final('utf8')}`;\n};\n" }) }), "\n", _jsx(_components.p, { children: "다음으로 세션 라이브러리를 수정하여 다음을 구현하세요:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { cookies } from 'next/headers';\nimport { decrypt, encrypt } from './encrypt';\n\nexport type Session = {\n username: string;\n};\n\nexport const getSession = async (): Promise => {\n const cookieStore = cookies();\n const session = cookieStore.get('session');\n\n if (session?.value) {\n try {\n const decrypted = decrypt(session.value);\n return JSON.parse(decrypted) as Session;\n } catch {\n // 무효한 세션 무시\n }\n }\n\n return null;\n};\n\nexport const setSession = async (session: Session) => {\n const cookieStore = cookies();\n const encrypted = encrypt(JSON.stringify(session));\n cookieStore.set('session', encrypted);\n};\n\nexport const removeSession = async () => {\n const cookieStore = cookies();\n cookieStore.delete('session');\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "결론", children: ["결론", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#결론", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["축하합니다! Next.js 를 위한 상태 유지되지 않는 세션을 성공적으로 구현했습니다. Vercel 에서 온라인 ", _jsx(_components.a, { href: "https://nextjs-stateless-session.vercel.app/", children: "미리보기" }), " 를 확인할 수 있으며, 전체 소스 코드는 ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "여기" }), " 에서 다운로드할 수 있습니다. 이 가이드가 Server Actions 에 대한 이해를 돕기를 바랍니다."] }), "\n", _jsx(_components.p, { children: "다음에는 Server Actions 를 사용하여 Next.js 에 Logto 를 통합하는 방법을 탐구해 보겠습니다. 계속 지켜봐 주세요!" }), "\n", _jsx(LogtoCloudButton, { children: "Logto 에 관심이 있습니까? 오늘 Logto 를 사용해보세요." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }