Storybook 8에서 9로 마이그레이션 하는겸 react 버전도 같이 올림 (18 → 19)기본적으로 크게 달라진건 @storybook/blocks 제거 → 이젠 @storybook/addon-docs/blocks 를 사용해야함. @storybook/blocks가

https://github.com/toss/es-toolkit/pull/1362type CamelCase를 보면 snake_case만 고려가 되어 있고 PascalCase는 고려가 되어 있지 않는 걸 확인할 수 있다. PascalCase를 고려하도록 함. in

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 테스트 유틸리티이다. 사용자 상호 작용을 시뮬레이션하고 해당