키모스토리

db collection에서 posts 데이터를 최신 등록 순으로 조회해서 표시 PostCard 를 컴포넌트로 분리해서 구현 /src/app/page.jsximport PostCard from "@/components/PostCard";import { getCollection } from "@/lib/db";export default async function Home() { const postsCollection = await getCollection("posts"); const posts = await postsCollection?.find().sort({ $natural: -1 }).toArray(); if(posts){ return ( { post..

로그인 여부에 따른 Navigation 수정 (글작성) - /posts/createimport getAuthUser from "@/lib/getAuthUser";import NavLink from "./NavLink"import { logout } from "@/actions/auth";export default async function Navigation() { const authUser = await getAuthUser(); console.log("authUser=", authUser); return ( {authUser ? ( Logout ..

로그인 세션을 이용한 조건부 Links 구현 1. 유효한 로그인 유저인지 검증/src/lib/getAuthUser.jsheader -> cookies -> session 정보를 읽어서 jwt 복호화 한 후 올바른 세션값인지 확인 후 로그인 정보 리턴import { cookies } from "next/headers";import { decrypt } from "./session";export default async function getAuthUser() { // Get Cookies const coookieStore = await cookies(); const session = coookieStore.get("session")?.value; // console.log("session=", se..

회원가입 절차와 거의 동일함. 1.  Navigation 컴포넌트에 로그인 링크 추가/src/components/Navigation.jsx"use client"import NavLink from "./NavLink"export default function Navigation() { return ( )} 2. login 페이지 추가/src/app/(auth)/login/page.jsx"use client"import { useActionState } from "react";import { login } from "@/actions/auth"; // 해당 action페이지에 login 처리 부분 추가예정import..

1. 기존 layout.jsx 파일에 현재 url을 체크하여 스타일지정"use client"import "./globals.css";import {Poppins} from "next/font/google";import { usePathname } from "next/navigation";import Link from "next/link";const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "700"], style: ["normal", "italic"], variable: "--font-poppins",});export default function RootLayout({ children }) { const pathname =..

Server-only Code첫 번째 서버 컴포넌트 패턴에서는 서버 전용 코드를 분리하는 방법에 대해 이야기해보겠습니다.Next.js 애플리케이션을 구축할 때, 일부 코드는 서버에서만 실행되어야 합니다.예를 들어, 여러 라이브러리를 사용하거나 환경 변수를 활용하고, 데이터베이스에 직접 접근하거나 기밀 정보를 처리하는 모듈이나 함수들이 이에 해당됩니다.자바스크립트 모듈은 서버와 클라이언트 컴포넌트 모두에서 공유될 수 있기 때문에, 서버 전용 코드가 의도치 않게 클라이언트에 포함될 수 있습니다.서버 코드가 클라이언트 측 자바스크립트에 포함되면 번들 크기가 커질 뿐만 아니라, 비밀 키, 데이터베이스 쿼리, 민감한 비즈니스 로직 등이 노출될 수 있습니다.따라서 애플리케이션의 보안과 무결성을 지키기 위해 서버 전..