키모스토리

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..

1. 빌드 Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행해야 한다. 이때 코드를 변환하는 과정을 '빌드'라고 한다.npm run build명령어를 입력하면 .next/ 폴더에 실행에 필요한 파일들이 생성된다.빌드시 오류 발생이 되면 문제 점 확인 후 수정 2. 실행 npm run start빌드 버전으로 실행하여 테스트 3. 소스코드를  github에 pushgit push origin master 4. 배포 (with vercel)Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 플랫폼으로 빌드와 배포 그리고 호스팅을 해주는 서비스를 제공한다.Vercel 장점자동화된 배포: 코드 변경 사항이 GitHub, GitLab, Bitbucket 등..

Tailwind CSS(opens in a new tab)는 Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.Install Tailwind CSS with Next.js4.0 버전 변경된 방식 (With Next.js)Install Tailwind CSSnpm install tailwindcss @tailwindcss/postcss postcss Configure PostCSS Pluginspostcss.config.mjs 파일을 root에 생성하고 아래 내용 작성postcss.config.mjsconst config = { plugins: { "@tailwindcss/postcss": {}, },};export default config; Import Tailwind C..