전체 글

useRef 알아보기useRef는 다음과 같이 사용된다.const ref = useRef(value);// ref => { current. : value}인자로 넣어준 값이 current에 존재하게된다.const ref = useRef("메가커피"); // ref => { current. : "메가커피"}ref.current = "스타벅스" // ref => { current. : "스타벅스"}언제 어디서든 값이 변경이 가능하다.제일 중요한것!ref 는 unmount 되기 전까지 컴포넌트 전생에 주기에 유지된다.useRef는 언제 사용하는가?첫번째. 저장 공간의 용도state는 값이 변경되면 리렌더링 되어 컴포넌트 내부 변수들이 초기화가 된다. 반면 ref는 값이 변해도 리렌더링 되지 않아 화면의 불..

useState란?component가 상태 가지게 할 수 있다.아래와 같은 코드 형태으로 존재한다.const [state, setState] = useState(초기값);예시 코드로 보기const [time, setTime] = useState(12);// time = 12// setTime(10) 을 할 경우 time 의 값이 10으로 변경된다,React는 setState() 요소를 사용하면 화면을 업데이트 즉 다시 렌더링 시켜준다실제 코드로 살펴 보기'use client';import { useState } from 'react';const Mytime = () => { const [time, setTime] = useState(1); const handleClick = () => { let..

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컴퓨터 그래픽스란?현대 그..