프로젝트 도중 Resizable 구현이전에 Draggable 을 구현한것 처럼 아래와 같은 코드로 구현을 해보았다.import { RefObject } from 'react';import styles from './resizeButton.module.css';interface ResizeButtonProps { resizableRef: RefObject;}const ResizeButton = ({ resizableRef }: ResizeButtonProps) => { const resize = (pageX: number, pageY: number) => { if (resizableRef.current) { const rect = resizableRef.current.getBounding..

Next.js 에서 Draggable 구현하기개인프로젝트를 만들던 중, 내가 만든 컴포넌트 Draggable 컴포넌트를 직접 구현하였다.import React, { RefObject, useRef } from "react";import styles from "./draggable.module.css";import { getOffset } from "@/app/utils/utils";interface DraggableProps { children: React.ReactNode; refObject?: RefObject;}const Draggable: React.FC = ({ children, refObject }) => { const draggableRef = useRef(null); let shif..

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

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