useEffect는 컴포넌트가 3가지 상태일때 동작된다.Mount : 화면에서 생성될때Upadate : 화면에서 업데이트 될때UnMount : 화면에서 사라질때useEffect는 기본적으로 인자로 callback 함수를 인자로 받는다.useEffect 의 형태첫번째, useEffect의 인자로 callback 함수만 받는 경우useEffect(() => { // code.});해당경우는 component가 처음 렌더링될때 , 그리고 화면 다시 리렌더링 될 때 실행된다.두번째, useEffect의 인자로 callback 함수와 배열을 받는 경우 (dependency array)useEffect(() => { // code.} , [value] );component가 처음 렌더링될때 , 그리고 depen..

기존에는 Claude 3 Haiku ,Claude 3 Sonnet, Claude 3 Opus이 존재했다.현재  Claude 3.5 Sonnet 가 새로 나왔는데 코스트는 줄고 속도는 향상된 모델로 나왔다. Claude 3 Opus 는 2024 연말에 나올예정이라고 한다. 성능Chat GPT 와의 비교점 : Chat GPT 보다 성능은 더 좋다고 한다.이후 실제로 사용해봐야겠지만 지금 까지는 하루에 10개 정도는 무료로 질문 검색이 가능하다고 한다.Claude 3.5 의 장점들아티팩트를 지원한다.설정에서 Feature Preview 에서 아티팩트를 on 시키면 아래와 같은 기능을 볼 수 있다.Preview 를 통해 html , css , javascript 로 실행되는 간단한 코드들은 볼 수 있다.but,..

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