![]()
`hello-pangea/dnd`는 `react-beautiful-dnd` 기반으로 만들어져있어 둘 다 공통되는 해결 방법일 수 있다. hello-pangea/dnd 라이브러리 이용 시 에러 Next.js 14 에서 dnd 라이브러리 사용 시 에러 상황이다. development 환경에서 체크했고 데이터들은 mock data, id는 nanoid를 이용했다. 핫 리로드 또는 라우터 이동 시에는 문제가 없는데 페이지를 직접 새로고침 할 때 아래와 같은 에러가 떴다. Unable to find drag handle with id "UqjqGKqFhpsZoX7vZ3kOY" as no handle with a matching id was found A setup problem was encountered.> I..
![]()
크롬 익스텐션을 스토어에 업로드 하려는데 문제가 생겼다. 로컬에서는 잘 되던 앱이 ZIP 파일로 만들어 업로드하니 위와 같은 에러가 생김... `manifest.json` 을 잘못 작성했나? 속성을 하나하나 다 찾아보고, 루트 디렉토리에 image 파일이 없어야 하나? 옮기고 사소한 것 하나하나 전부 정리했지만 해결되지 않았다. 결론은 zip 확장자 문제였다.. mac에서 기본 압축은 우리가 흔히 쓰던 압축 확장자가 아니라 크롬 페이지에서 zip 파일이 잘못됐다고 한 것! 무료로 이용할 수 있는 압축 프로그램 keka을 이용하면 정상적으로 업로드 된다!
![]()
Recoil 과 상태 관리 라이브러리 Recoil은 Facebook에서 만든 상태 관리 라이브러리다. 이거 하나 만으로 믿음이 생기겠지만, React 만든 곳이 아닌 다른 팀에서 만든 라이브러리고 최근 IT시장이 안좋아지자 Facebook도 구조조정에 영향이 갔는지 Recoil은 없데이트하고 있다. redux, zotai, zustand 등 다른 상태관리 라이브러리를 각자 장단점이 있으나 이 글의 주제인 recoil은 이 정도 장단점을 가지고 있다는 것만 알아보면 React만 위한 라이브러리 (친화적) React Suspense 쉽게 사용 Redux 다음으로 커뮤니티(정보)가 큼 단점으로는 프로덕션 환경에서 사용할 때 실험 버전이라 신중해야 할 필요가 있다. (이게 제일 큼) 버그 수정 같은 업데이트 밖..
![]()
NPM Package 올리기 npm login npm whoami // 로그인이 잘 되었는지 확인해보자 package.json 생성 npm init -y // package.json { "name": "just-joke", "version": "0.0.1", // major, minor, patch "main": "index.js", // 실행 진입점 "license": "MIT" } // index.js (commonjs) 아무렇게 만들고 npm publish // 실행하면 npm package 바로 쉽게 생성된다. // 단, 패키지명이 중복이면 안되기 때문에 검색해서 찾아보자. CommonJS? ESModule? CommonJS 가 아닌 ESM 도 적용시켜보자. 우리가 보통 쓰는 import / ex..
