React / Next.js 보안 취약점 관련 내용으로 글을 포스팅합니다.개요지난 11월 29일, 보안 연구원 Lachlan Davidson에 의해 React 생태계, 특히 최신 버전인 React 19와 Next.js를 관통하는 치명적인 보안 취약점이 발견되었습니다. 이 문제는 Meta 측에 즉시 보고되었으며, 현재 전 세계 프론트엔드/풀스택 개발자들 사이에서 가장 시급한 이슈로 떠오르고 있습니다.이번 취약점은 단순한 정보 노출이 아닌, 원격 코드 실행(RCE, Remote Code Execution) 이 가능하다는 점에서 매우 위험합니다. 이에 따라 다음과 같은 CVE 번호와 심각도 점수가 부여되었습니다.관련 CVE:CVE-2025-55182 (React)CVE-2025-66478 (Next.js)CV..

최근에 알게된 VSCode의 extension인데 Nextjs를 사용한다면 무조건 사용하는걸 추천한다.Nextjs Snippets는 Next.js에서 자주 만드는 것을 예약어로 만들어 놓은 모음한 익스텐션이다.가장 많이 사용할거 같은 snippets들naf: 화살표함수 기반 함수형 컴포넌트 생성nafe: export default 기반 화살표 함수형 컴포넌트 생성napage : 기본 함수형 컴포넌트 생성하기natemplate: 자식요소 포함한 함수형 컴포넌트 생성하기사용법snippet “nafe” 입력하고 enter바로 페이지 컴포넌트가 생성된다.💡아래내용은 설명에 있는 부분은 typescript 만남기고 다 삭제한 것이다. 만약 javascript 홀로 존재했으면 남겨놨다. App Directory ..

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