Context API가 무엇인가?context는 리액트에서 컴포넌트끼리 어떠한 값을 공유하는 기능이다.보통 전역적(global)로 사용되지만, 꼭 전역적으로 사용할 필요는 없다.Context API를 왜 사용하는가?React에서 컴포넌트에서 값을 props로 넘겨주면 생기는 props drill현상이 있다.import React from 'react';// 최상위 컴포넌트function App() { const username = 'johndoe'; // 사용자 이름을 상태로 관리하거나 props로 받을 수 있습니다. return ( Level 1 );}export default App;// 두 번째 컴포넌트function LevelTwo({ username })..
Stack
Next 12의 경우Next.js 12 이전에는 next/head 컴포넌트를 사용하여 메타데이터를 설정.import Head from 'next/head';export default function Page() { return ( My Page Title This is my page );}다음과 같이 메타데이터를 기록 하였다.Next 13 이후의 경우Next.js 13부터는 next/head 컴포넌트 대신 Metadata 라이브러리를 사용하여 메타데이터를 설정. Metadata API는 페이지의 메타데이터를 정의하는 객체를 제공import { Metadata } from 'next';export const metadata: Metadata = { t..
Next Image 사용하는 방법Next.js 에서는 별도의 Image 컴포넌트가 존재한다 .Image 컴포넌트의 장점은 다음과 같다향상된 성능: 최신 이미지 형식을 사용하여 각 디바이스에 대한 올바른 크기의 이미지 제공시각적 안정성: 자동으로 layout shift 방지빠른 페이지 로드: 이미지가 뷰포트에 들어갈 때만 로드되며 placeholder 제공유연성: 원격 서버에 저장된 이미지에 대해서도 온디맨드 이미지 크기 조정Sample Codepage.tsx 파일import Image from "next/image";import styles from "./imagepage.module.css";const ImagePage = () => { return ( );};export ..
📘 Next.js 에 markdown 설치 하기# ✨ Next.js에서 MDX 사용하기## 📦 MDX 관련 패키지 설치yarn add @next/mdx @mdx-js/loader @mdx-js/reactyarn add --dev @types/mdx@next/mdx: Next.js에서 MDX를 지원하기 위한 공식 패키지@mdx-js/loader: MDX 문서를 컴파일하는 Webpack 로더@mdx-js/react: MDX 문서 내에서 React 컴포넌트를 사용하기 위한 기능을 제공합니다.@types/mdx: TypeScript 프로젝트에서 MDX 파일에 대한 타입 지원을 제공합니다.remark-prism: 마크다운 내 코드 블록을 하이라이팅하기 위한 패키지 (선택사항)🔧 next.config.mjs ..
MongoDB Atlas에 아래와 같은 프로젝트들중 하나를 삭제하려한다. This project cannot be deleted if there are active clusters or has enabled Backup Compliance Policy with active snapshots 하지만 삭제를 하려면 위와 같은 문구가 나오면서 삭제를 할 수 가 없다 이렇게 나오는 경우 해당 프로젝트에 가서 Terminate 를 해준다. 이후 클러스터 이름을 입력해 준 다음 프로젝트 목록으로 가서 보면 삭제버튼이 활성화 된다.
MongoDB Atlas1. Project 생성하기2. Project Member 추가하기멤버를 안추가해도 상관 없다.3. Cluster 만들고 요금제 설정 및 기본 세팅해주기Create를 해주면 아래와 같은 화면에 나오는데요금제는 다음과 같은데 연습할용도로 사용하려면 M0 무료 요금제를 사용하자이름을 지정해주고, 아래에 두가지 옵션이 있다.Automate security setup : 처음 기본 설정을 작업을 단순화 시켜준다.Add sample dataset : 샘플 데이터를 생성해준다.만약 sample dataset을 하면 아래와 같은 샘플 데이터가 생성되는데 필요 없으면 옵션을 빼주자4. Security Setting위에서 Automate security setup 옵션을 설정해주면 위에 설정이 빠..
