분류 전체보기

기존에는 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..

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