키모스토리

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

https://www.mongodb.com/ MongoDB: The World’s Leading Modern DatabaseGet your ideas to market faster with a flexible, AI-ready database. MongoDB makes working with data easy.www.mongodb.com 1. 인스톨npm install mongodb 2. connecton string setupmongodb+srv://user_id:@cluster0.y42buoh.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 root / .env.local 파일 작성// db-id, db-password : 몽고디비에 설정된 실재..

https://zod.dev/ GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com Zod는 타입스크립트 우선 스키마 선언 및 검증 라이브러리 입니다. 타입스크립트는 컴파일 시점에서 타입을 검사합니다. 런타임에 동적으로 생성되는 값과 타입스크립트의 타입 간의 불일치가 발생하여 에러가 발생할 수 있는데요, 이를 방지할 수 있는 라이브러리가 바로 Zod입니다.  사용 방법zod는 직관적이고 간단한 API를 제공합니다.아래 예시는 가장 기본적인 zod 라..

useActionState  https://ko.react.dev/reference/react/useActionState useActionState – ReactThe library for web and native user interfacesko.react.dev useActionState는 폼 액션의 결과를 기반으로 State를 업데이트할 수 있도록 제공하는 Hook입니다.const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); useActionState를 컴포넌트의 최상위 레벨에서 호출하여 폼 액션이 실행될 때 업데이트되는 컴포넌트 State를 생성하세요. useActionState는 기존의 폼 액션 함수..

최소 사양 선택으로 프로젝트 생성 npx create-next-app@latest  - globals.css@import "tailwindcss"; - layout.jsx import "./globals.css";export default function RootLayout({ children }) { return ( Nav {children} footer );} - page.jsxexport default function Home() { return ( Home page );} - tailwin..