전체 글

Front-End의 기본 공부틀들웹의 동작원리 : (HTTP(s), DNS, IP 주소, 요청, 응답, DOM 렌더트리, CORS, CSR/SSR )HTML, CSS : (dom 문법 , sass, meta tag, bootstrap..)Javascript : (프로토타입체인, 문법, 호이스팅, 버블링, 캡쳐링, 비동기 방법 …)Git 사용법 : (버전 관리의 개념, clone , pull, push, branch, reabse, merge …)패키지 & 빌드 관리법 (npm, nvm, package.json, webpack, babel, vite …)프레임워크 & 라이브러리 사용 (react, redux, recoil, angular, vue)HTML CanvasThree.js컴퓨터 그래픽스란?현대 그..

❗️Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.오류발생원인components 의 이름과 코드 경로가 잘못됬을경우 발생export default 작성하지 않을때도 발생본인은 뒤에 export default 작성하지 않아서 오류가 발생실수코드 예시'use client';import SideBar from '@/components/SideBar/SideBar';import ThumbnailEditor from '@/components/ThumbnailEditor/ThumbnailEditor';impor..

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