애니보는데 넷플릭스는 저 '끝내지 않는 Netflix'가 있어서 자동으로 넘어가지는데, 웨이브는 안되는게 귀찮아서 만들었다.티빙으로는 애니를 잘 안봐서.. 나중에 티빙도 쓰게된다면 티빙버전도 만들어야겠다.  { // 사용자가 특정 웹페이지를 열 때 사용할 JavaScript 또는 CSS 파일을 지정 "content_scripts": [ { "matches": ["*://www.wavve.com/*"], // 확장 프로그램을 실행할 웹사이트 "js": ["content.js"] // 실행할 js파일 } ], // 확장 프로그램의 설명란에 표시되는 설명 "description": "Wavve에서 오프닝 건너뛰기랑 다음회차를 자동으로 재생해주는 크롬 확장 프로그램이에요!"..

index.js:21 [MSW] The currently registered Service Worker has been generated by a different version of MSW (2.4.1) and may not be fully compatible with the installed version. It's recommended you update your worker script by running this command: • npx msw init You can also automate this process and make the worker script update automatically upon the library installations. Read more: https://ms..

정렬을 하고있는데 TypeError: Cannot assign to read only property '0' of object '[object Array]' in typescript 이런 오류가 나타났다. 오류내용은 읽기 전용 속성을 사용할 수 없다는 내용 이었다. const filteredList = list console.log( filteredList.sort((a, b) => { if (a.patName b.patName) { return 1 } return 0 }) ) list가 Redux store에서 가져온 속성이었기 때문에 오류가 나는거였다. useSelecter훅은 Redux store의 상태를 읽기 위해 사용되..

로딩 중 화면을 만드는데, 갑자기 애니메이션을 추가하고싶었다. (해도 됨) 이미지는 css animation이 있으니까 그걸로 하면되고, 문구는 어떻게하지.. 하다가 문구는 Javascript로 했다. 현재 프로젝트가 프리마커 템플릿에 제이쿼리를 사용중이라 제이쿼리를 사용해서 추가해줬땅. css는 하면 할수록 어려운데 재밌다. @keyframes rotate-loading { 100%{ transform: rotate(360deg); } } .loading-popup-wrap .pop-img { animation: rotate-loading 3s linear infinite; transform-origin: 50% 50%; } 리액트만 하다가 처음에 회사 추가개발때문에 제이쿼리 쳐다볼때는 아찔했는데, 스..

RTK만 쓰다가 사내 스터디를 하게돼서 Zustand랑 TanStack Query 자료를 준비하게되었다. 회사에서 시연용으로는 포켓몬 API (무료 API중 제일 재밌 ㅇ_ㅇㅋㅋ)를 준비해서 가져갔다. 아래는 설명용으로 만든거! 블로그에도 쪄놔야지 히히 React + Zustand + Tanstack Query Zustand? Redux, Recoil 등과 함께 전역 상태를 관리할 수 있는 라이브러리. Redux와 개념적으로 비슷(Flux패턴을 채택)하기 때문에 Redux, RTK사용자가 학습하기 쉽다. Flux Pattern? 2014년 facebood F8컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기위해 사용하는 디자인 패턴 사용자 입력을 기반으로 Action을 만들고..