전체 글

결론부터 말하면 못쓴다. 개발자 도구에서 확인해보니 문제 없었지만 직접 폰으로 테스트해보니 navigator.vibrate 함수를 찾지 못해서 알게되었다. Vibration API 호환성 표를 보면 IOS Safari 에서 못쓴다 되어있어 Chrome을 다운받고 실험해봤으나 똑같이 안됐다. 이유를 찾아보니 IOS에는 브라우저 엔진이 하나 뿐이고 Chrome 및 다른 브라우저 앱은 그저 같은 엔진을 쓸 뿐이라고 한다. 따라서 표에도 Chrome for IOS가 따로 적혀있지 않았던 것! 참고로 안드로이드는 각 브라우저마다 엔진이 다르다고 한다. 참고 https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API https://forum.freecodecam..

`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..

const jsonElement = { "String\\nKey": 'string"Value', Int: 10, Array: ["string\\nValue", 20], EmptyArray: [], }; // 아래의 string 으로 출력하기 { 'String Key': 'string"Value', 'Int': 10, 'Array': [ 'string Value', 20 ], 'EmptyArray': [ empty array ], } 언뜻 보기엔 쉬워보이지만 하나하나 생각하자니 어려웠다… 처음 접근을 `Object.entries(jsonElement)` 의 배열을 받아 `reduce` 메소드로 string 값으로 치환하면서 정규식에 따라 replace하려고 했는데 parsing 할수록 복잡해지고 결과마다 ..

크롬 익스텐션을 스토어에 업로드 하려는데 문제가 생겼다. 로컬에서는 잘 되던 앱이 ZIP 파일로 만들어 업로드하니 위와 같은 에러가 생김... `manifest.json` 을 잘못 작성했나? 속성을 하나하나 다 찾아보고, 루트 디렉토리에 image 파일이 없어야 하나? 옮기고 사소한 것 하나하나 전부 정리했지만 해결되지 않았다. 결론은 zip 확장자 문제였다.. mac에서 기본 압축은 우리가 흔히 쓰던 압축 확장자가 아니라 크롬 페이지에서 zip 파일이 잘못됐다고 한 것! 무료로 이용할 수 있는 압축 프로그램 keka을 이용하면 정상적으로 업로드 된다!

Recoil 과 상태 관리 라이브러리 Recoil은 Facebook에서 만든 상태 관리 라이브러리다. 이거 하나 만으로 믿음이 생기겠지만, React 만든 곳이 아닌 다른 팀에서 만든 라이브러리고 최근 IT시장이 안좋아지자 Facebook도 구조조정에 영향이 갔는지 Recoil은 없데이트하고 있다. redux, zotai, zustand 등 다른 상태관리 라이브러리를 각자 장단점이 있으나 이 글의 주제인 recoil은 이 정도 장단점을 가지고 있다는 것만 알아보면 React만 위한 라이브러리 (친화적) React Suspense 쉽게 사용 Redux 다음으로 커뮤니티(정보)가 큼 단점으로는 프로덕션 환경에서 사용할 때 실험 버전이라 신중해야 할 필요가 있다. (이게 제일 큼) 버그 수정 같은 업데이트 밖..

Local Storage ? 사이트를 나가거나 이동을 해도 데이터가 유지될 필요가 있는 데이터들이 있다. 예를 들면, 다크 모드나 뒤로 가기 시 이전 페이지의 스크롤 위치를 기억한다던가 현재 탭을 명시적으로 보여주기 위한 상태 등등 위의 것들은 Redux, Zotai 등 전역 상태 관리 라이브러리를 이용해도 되지만 브라우저를 종료하면 전부 사라지기에 다음에도 기억하려면 네트워크 통신이 필요하다. 쓸데없이 통신할 필요가 없기에 그냥 Local Storage에 넣어 사용자가 임의로 쿠키 및 데이터를 제거하지 않는 이상, 정해진 크기를 초과하지 않는 이상 계속 저장하고 기억해서 사용할 수 있다. Chrome Extension 크롬 익스텐션 환경에서만 사용할 수 있는 Chrome Stroage가 있다. 크롬 익..

궁금한 이유 프로젝트를 만드는데 이용자가 한국인이 아닐 수도 있잖아?라는 생각이 들었다. 다크모드를 지원하는 것처럼 다양한 언어를 지원하는 방법에 대해 궁금해져서 알아보게 되었다. 다양한 언어를 지원하는 웹 사이트 우선. 텍스트에는 다양한 종류가 있는데 글 제목, 컨텐츠 내용, 나무위키나 신문 같은 긴 아티클, 예나 아니오 또는 특정 선택 버튼 등등이 있겠다. 번역할 텍스트에는 종류를 가리지 않으니 이건 넘어가고 이미지도 결국엔 이미지 경로만 바꾸면 되는 것이니 크게 어렵지 않다 생각이 들었다. 다만, 이미지 때문에 다양한 언어를 지원할수록 크기가 배로 늘 수밖에 없어서 여기에 대한 해결책은 없을까 생각해 봤는데.. 이미지가 늘어나는 건 어쩔 수 없고 최대한 이미지를 줄이거나 대표 격인 영어로 통일하는 ..

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..