MacOS 에서만 가능 (WinOS 에서는 그래픽 가속 꺼도 WebGL 기능 사용 가능) WebGL 1.0 렌더링 컨텍스트 만족시키는지 확인하는 코드function isWebGLSupported() { try { const canvas = document.createElement("canvas"); // window.WebGL2RenderingContext 를 아래에서 똑같이 사용하면 WebGL 2.0 확인 가능 return !!( window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) ); } catch (err) { retu..

📚 책 정보 - 우아한 타입스크립트 with 리액트 (2023) - 우아한 형제들 웹프론트개발그룹 지음 📝 목차 - 값vs타입 - 원시 타입 📍값vs타입 값 공간과 타입 공간의 이름은 서로 충돌하지 않음 - 타입과 변수를 같은 이름으로 정의할 수 있음 (타입스크립트 type 문법은 컴파일 시 제거되기 때문) type Developer = { isWorking: true }; const Developer = { isTyping: true }; // OK ES6의 class 문법은 값과 타입으로서 동시에 사용됨 - 타입스크립트에서는 클래스를 타입 어노테이션으로 사용 가능 - 자바스크립트에서는 런타임에서 객체로 변환되어 자바스크립트의 값으로 사용됨 class Developer { name: string; do..

📚 책 정보 - 우아한 타입스크립트 with 리액트 (2023) - 우아한 형제들 웹프론트개발그룹 지음 📝 목차 - 구조적 타이핑 - 구조적 서브 타이핑 📍구조적 타이핑 아래 코드에서는 비슷하면서 서로 다른 타입이 호환된다. 타입스크립트는 구조로 타입을 구분하기 때문. (다른 언어였으면 타입 이름이 다르면 호환 불가) interface Dog { age: number; } interface Man { age: number; } let sundance = { age: 10 }; let kim = { age: 30 }; sundance = kim; // ok kim = sundance; // ok 📍구조적 서브타이핑 타입스크립트에서 타입은 집합의 개념이기 때문에, 특정 값이 string or number 타..

📍Barrel 여러 모듈의 export 를 하나의 모듈(주로 index.ts)에서 import로 받아 다시 export 해주는 파일 예를 들어 아래와 같은 3개의 모듈이 각각 존재할 때 // src/lib/foo.ts export class Foo {} // src/lib/bar.ts export class Bar {} // src/lib/baz.ts export class Baz {} barrel이 없으면 3개 라인의 import가 필요함 // src/pages/page.ts import { Foo } from '../lib/foo'; import { Bar } from '../lib/bar'; import { Baz } from '../lib/baz'; barrel 파일(lib/index.ts) 을 ..

목표드래그로 엘리먼트 이동시키기 결과물https://codesandbox.io/s/drag-and-drop-ykyxgd?file=/src/Moving.tsx   조건1. pointer event 사용- mouse event 와 기능은 거의 동일하나, 모바일 디바이스에서 touch를 지원- 따라서 mouse event의 상위 호환 2. 마우스 커서의 속도에 맞춰서 따라와야 함- PointerEvent의 movementX, movementY 프로퍼티로 타겟 엘리먼트를 translate시키는 방식은 속도가 느려서 마우스 커서가 쉽게 엘리먼트 바깥으로 나가버리고, 드래그가 끊겨버림.. 그런데onMouseMove, onPoinerMove 는 onDragStart에 비해 속도가 느리다...참고)https://sta..

📍참고 https://www.react-hook-form.com/get-started 📍예시 코드 1 import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, watch, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); console.log(watch("example")); // input 밸류 이름을 watch 함수에 전달하여 값 확인 return ( /* handleSubmit은 onSubmit을 호출하기 전에 입력 유효성 검증 실행 */ {/* register함수를 호출하..