STORAGE/JavaScript|TypeScript24 createBrowserRouter type error import { createBrowserRouter } from 'react-router-dom';type Router = ReturnType; // 👈const routes: Router = createBrowserRouter([ { path: '/', element: , errorElement: , },]); createBrowserRouter 함수의 반환값 routes 객체의 타입이 주어지지 않아 발생하는 에러가 있다. type Router를 ReturnType으로 직접 선언하여 제공할 것.출처: [Bug]: Router type doesn't exist · remix-run/react-router · Discussion #9915 (github.com) 2024. 4. 26. 스트롱, 위크 타입 보호되어 있는 글 입니다. 2024. 4. 4. dragAndDrop API Drag Event `$ele.addEventListener('dragover', dragOverHandler)`: 드래그 요소가 드롭 가능 영역에 있을 때 발생 `$ele.addEventListener('dragleave', dragLeaveHandler)`: 드래그 요소가 드롭 가능한 영역을 벗어났을 때 발생. 드래그 요소를 원래 자리로 돌리는 폴백 기능. 드래그 중 취소 또는 드롭 후 실행 취소시에도 폴백을 위해 사용 `$ele.addEventListener('drop', dropHandler)`: 드롭시 발생. 데이터 업데이트 및 UI 업데이트 interface Draggable { // 드래그 가능 속성: 드래그 시작, 종료 리스너 생성 dragStartHandler(e: DragEvent): .. 2024. 4. 2. 싱글톤 패턴 싱글톤 패턴 객체지향 프로그래밍에서 사용되는 디자인 패턴 중 하나. 한 클래스로 하나의 인스턴스만 생성하는 패턴이다. 하나의 객체만을 위한 클래스를 작성할 때 사용한다. TS 구현 방법 1. constructor를 private으로 만들어 인스턴스를 직접 생성하지 못하도록 한다. 이제 내부 변수인 인스턴스는 클래스 내에서만 접근할 수 있게 된다. 2. 정적 메서드인 getInstance로 클래스의 인스턴스가 존재하는지 확인하고, 없다면 새로운 인스턴스를 반환하도록 한다. 예시 코드 아래 코드에서는 MyRoom이라는 클래스에 싱글톤 패턴을 적용하여 하나의 방(인스턴스)만 생성할 수 있도록 하였다. 초기 룸넘버는 123으로 고정하고, room1을 생성한다. 세터로 룸넘버를 333으로 변경한 후 room2를 .. 2024. 4. 1. this의 동적 바인딩👆 this 바인딩 JS의 this 키워드는 실행 컨텍스트를 참조해 여러가지 값을 가질 수 있다. 이는 this를 호출하는 함수의 환경에 따라 달라진다. 케이스별로 this 값의 변화를 알아보자. 전역 / 함수 스코프의 this: 전역 객체를 가리킴(window, global) console.log(this); // 전역: window | global function someFunc() { console.log(this); // 일반 함수: window | global } someFunc(); 화살표 함수의 this: 함수 자체의 this 바인딩은 없음. 함수를 둘러싼 가장 가까운 this의 값, 또는 전역 객체를 참조함(렉시컬 this) const obj = { name: 'wavy', outerFunc.. 2024. 3. 31. 이전 1 2 3 4 5 다음