JSX render won't allow webkitdirectory and directory to be used.React v18input의 속성인 webkitdirectory를 사용할 수 없는 현상=> React내에서 typescript를 사용시 발생하는 현상. D

Detected multiple Jotai instances. It may cause unexpected behavior with the default store. context가 중첩되면 나오는 에러. Provider 파일 내부에 사용자 정보를 불러오는 로직을 추가

오늘 할 일 폴더 구조 표시 방법 생각해보기 (path를 이용해서 트리구조를 만들기) (내일) 로그아웃 기능 만들기 (완료) 로그인 후 유저 정보 불러오기 (완료) 파일 업로드시 hidden 파일은 불러오지 않도록(전송되지 않도록) 로직 작성하기 (완료) 배운점

파일 업로드 drag n drop (~ing)drag n drop 으로 파일 및 폴더를 업로드시 webkitGetAsEntry 메소드를 이용해야한다.이걸로 만든 directoryReader(entry.createReader)는 비동기처리를 해줘야해서 Promise로 감

파일 관리 시스템 요구사항 읽어보기 (완료)초기 세팅 (frontend-boilerplate 확인) (완료)파일 업로드 UI 간단하게 구현input의 webkitdirectory 속성을 사용하여 폴더를 업로드 할 수 있다.근데 react에서 사용하려고하면 에러 발생.u

mouse:down은 fabric canvas instancemousedown은 fabric object instance자세하게 말하자면canvas에서 이벤트 핸들을 하려면 mouse:down형식으로 작성합니다. fabric의 object에서 이벤트 핸들을 하려면 mo

fabricjs 공부? (어느정도…)요즘 우아한 개발 스터디 (완료)좋은 문화가 뭔지 다시 한 번 생각해보는 계기가 되었다.fabricjs의 event중 mouse:down과 mousedown 의 차이가 뭔지 알게 되었다.https://www.notion.so

리액트는 하위 컴포넌트의 모든 코드와 모든 데이터가 출력되기 전까지 fallback을 표시한다. lazy를 이용한 지연 로딩 컴포넌트 코드데이터 패칭Effect나 이벤트 핸들러 내부에서 페칭하는 경우는 감지하지 않음.처음 List 컴포넌트가 렌더링 완료 후 SubLis

상태 업데이트할 때 우선순위를 정하는데 도움을 준다. 리액트팀은 상태 업데이트 대상을 두 가지로 분류를 했다. Urgent updates: 버튼 클릭, 키보드 입력과 같이 직관적으로 보았을 때 업데이트가 즉각적으로 일어나는 것을 기대하는 상태 값들.Transition

사용자가 직접 만드는 EventtypeArg이벤트 이름을 나타내는 문자options다음 속성을 포함하는 객체입니다."detail": 이 이벤트 내에 포함할, 이벤트의 세부 정보를 나타내는 값입니다. 기본 값은 null입니다. 처리기에서 \[CustomEvent.deta

프로젝트를 하면서 chakra-ui를 사용하며 storybook을 사용함. UI 스타일이 적용 안되는것을 확인... 찾아보니 addon이 따로 필요하다더라. storybook >6.4 일 경우에 필요하다. 아래와 같은 라이브러리가 필요하다.설치 후 .storybook/

사용자 또는 Caret의 위치에 따라 선택된 텍스트의 범위를 나타내는 Selection 객체를 반환한다. window.getSelection().toString()을 호출하면 선택된 text를 반환한다. 내가 사용 한 곳 : 글자를 드래그 했을땐 접고/펼치기 기능이 동

pages 폴더에 추가해야함.\_app.js는 애플리케이션 셸이다. HTML 문서의 body 섹션 속 루트 컴포넌트 라고 생각하면 된다. \_document.js는 HTML문서 전체를 커스터마이징 할 수 있다.클래스 컴포넌트인 이유⇒ Next.js가 제공하는 일부 구

scrollIntoView() 메서드는 scrollIntoView()가 호출된 요소(element)가 사용자에게 보여지도록 element의 조상 컨테이너를 스크롤한다. alignToTop (Optional) boolean이며 true일 경우 해당 스크롤 영역의 볼 수

window resize 이벤트 같은 경우엔 윈도우 창(현재 창)에 대해서만 이벤트가 발생함.resize 이벤트 자체가 window 객체에서만 발생한다. 그 외의 element에 이벤트를 달아놔도 발생 안함. 반면 ResizeObserver 같은 경우엔 지정한 elem

페이지 소스 코드를 확인하면 출력한 데이터를 찾아 볼 수 없다. 즉, <div id=”root”> 태그만 존재한다. 여기에 대한 단점은 사용자들은 해당 데이터가 완전히 호출될 때 까지 페이지를 볼 수 없다. 검색 엔진 최적화. 빈 페이지(컨텐츠가 없는 페이지)를

NextJS는 pages 라는 폴더를 만들고 그 안에 파일을 넣게 되면 파일 이름에 따른 라우팅이 가능하다. /pagesㄴ index.jsㄴ about.jsㄴ /productsㄴ index.jsㄴ id.jspages 폴더를 확인하고 우리가 지원하고자 하는 라우터 몇개를

자바스크립트 테스트 프레임워크이다. 자바스크립트 또는 타입스크립트 환경에서 테스트를 진행할 수 있게 해준다. React 구성 요소(component 등)을 테스트하기 위해 만들어진 제작된 JavaScript 테스트 유틸리티이다. 사용자 상호 작용을 시뮬레이션하고 해당

좌표를 구해서 엘리먼트를 구하는 함수이다.나같은 경우는 touchmove 이벤트에서 현재 터치 위치의 element를 확인하고싶을때 사용했다. 크게 어려운건 아니고 mouseover 이벤트 실행시 e.target과 elementFromPoint를 통해 얻은 elemen

기존에 정의되어 있던 타입을 새로운 타입으로 변환시켜주는 문법을 의미한다.