![]()
Next.js 에서 Three.js 를 구현, 그러나 Three.js의 화면 크기를 변경이 필요하여 변경하는 방법을 기록DOM 요소의 크기를 설정구현할 요소의 크기를 width: '800px', height: '600px' 로 설정하였다.Next.js 에서 render 설정const mountRef = useRef(null);mmountRef를 통해 DOM 요소에 접근하여 width와 height를 아래 코드를 통해 가지고 온다.const width = mountRef.current.clientWidth;const height = mountRef.current.clientHeight;renderer.setSize(width, height);renderer의 사이즈를 가지고온 DOM 요소와 같이 통일시킨다..
프로젝트 도중 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..
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 ..
