[Typescript] chrome.runtime.onInstalled가 크롬 확장프로그램 최초 설치 1회만 실행되지 않는 문제

뭔가 크롬 확장프로그램은 파면 팔수록 뭔가 요상한듯하다... 이번엔 chrome.runtime.onInstalled에 addListener로 추가된 핸들러가 실행되는 시점이 문제가 되었다. 필자가 처음에 이해한 onInstalled는 크롬 확장프로그램이 크롬 웹스토어로부터 설치가 되었을때 최초 1번만 실행이 되는것이었다. 하지만 실제 사용해보니, onInstalled는 최초 1회 뿐만 아니라 확장프로그램 새로고침이나, 윈도우 컴에서 재부팅 후 크롬을 실행했을때에도 핸들러를 실행시켰다. (근데 MacOS에선 재부팅을 하고 크롬을 실행시켜도 onInstalled 핸들러가 실행되지 않았다...) 아무튼 필자가 원하는 동작는 크롬 웹스토어에서 확장 프로그램이 설치되었을때 1회만 핸들러를 실행하는 것이었다보니 별..

• format_list_bulleted SW/Typescript
• · 2023. 10. 10.
• textsms

[Typescript] Chrome Extension "scripting.executeScript"의 optional argument

Uncaught (in promise) TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Error at property 'args': Error at index 2: Value is unserializable 크롬 익스텐션에서 타겟 탭 내에 스크립트를 실행하기 위해 chrome.scripting.excuteScript()를 사용하다 위와 같은 오류를 맞닥뜨렸다. 타켓 탭에 실행시킬 함수 인자에 serialize할 수 없는 값들이 들어있어 오류가 발생했다는 메시지인데... 필자는..

• format_list_bulleted SW/Typescript
• · 2023. 10. 7.
• textsms

[Typescript] Tailwind CSS 자동완성, 언제 어디서나 당당하게 사용하기(Taillwnd CSS 자동완성 위치 정규식 작성법)

서론 Tailwind CSS(이하 tailwind)를 사용하다보면 컴포넌트의 className prop 외에도 tailwind 스타일을 작성해야할 상황을 자주 마주친다. 하지만 VSCode의 Tailwind CSS IntelliSense 는 기본적으론 className prop만 자동완성을 제공하기 때문에 변수 등에 문자열로 tailwind 스타일을 작성할때 자동완성을 이용할 수 없어 매우 불편하다. 하지만 이러한 문제는 Tailwind CSS IntelliSense가 제공하는 설정에 정규식을 작성해주면 내가 원하는 곳에서 tailwind 자동완성을 사용할 수 있도록 지정할 수 있어서 해결이 가능하다. 이번 포스팅에선 tailwind 자동완성의 위치를 지정하는 정규식과 설정법을 소개하고자 한다. 요구사항..

• format_list_bulleted SW/Typescript
• · 2023. 8. 12.
• textsms

[Typescript] 전역상태관리 라이브러리(Redux, Recoil, MobX...) 없이 react-query로 전역상태 관리하기

서론필자는 원래 SWR를 주로 즐겨 사용해왔다. 그러다가 최근에 react-query에 관심을 가지게 되어 공부를 하던 중, 기존에 필자가 SWR로 전역상태를 관리했던 것처럼 react-query에서도 똑같이 사용할 수 있지 않을까 라는 생각이 들게되어 이번 포스팅을 작성하였다. 아직 SWR로 전역상태를 관리하는 방법을 모르거나 궁금한 사람은 아래 글을 참고하길 바란다. [Typescript] SWR로 React에서 전역상태관리 라이브러리 걷어내기서론 이번 포스팅에선 흔히 프론트엔드에서 사용되는 전역상태관리 라이브러리(Redux, MobX, Zustand, Recoil 등등...)들을 사용하지 않고 SWR만으로 전역상태를 관리하는 방법에 대해 소개해볼까 한다. blog.betaman.kr그래서 어캐 만듦..

• format_list_bulleted SW/Typescript
• · 2023. 7. 6.
• textsms

[Typescript] Next.js에서 Tailwind CSS와 Chakra UI를 함께 사용했을 때 생기는 CSS Overriding 문제 해결(feat. Emotion cache)

서론 Next.js에서 TailwindCSS와 Chakra UI(혹은 emotion 기반의 다른 UI 라이브러리)를 함께 사용하면 UI 라이브러리의 컴포넌트가 정상적으로 표시되지 않는 문제가 생긴다. 이번 포스팅에선 이 문제를 해결하는 법에 대해 소개하도록 하겠다. 해결법 위 이미지를 보면 알겠지만, Chakra UI의 Button 컴포넌트가 CSS 적용이 정상적이지 못해서 화면에 표시되지 못하는 문제가 생겼다. 결론부터 말하자면, 이 문제의 원인은 ChakraProvider에 의해 삽입된 emotion cache의 위치때문이었다. tailwind는 전역 css 파일에 "@tailwind base" 구문을 넣어 프론트 프로젝트에 tailwind preflight css를 삽입한다. 그런데 문제는, 그 p..

• format_list_bulleted SW/Typescript
• · 2023. 5. 21.
• textsms

[Typescript] SWR로 React에서 전역상태관리 라이브러리 걷어내기

서론 이번 포스팅에선 흔히 프론트엔드에서 사용되는 전역상태관리 라이브러리(Redux, MobX, Zustand, Recoil 등등...)들을 사용하지 않고 SWR만으로 전역상태를 관리하는 방법에 대해 소개해볼까 한다. What is SWR? SWR은 효율적인 데이터를 패칭을 위한 React용 라이브러리이다. SWR을 통해 서버로 요청을 보내고 응답을 받을 수 있으며, 응답을 key에 대응되도록 캐시해준다. 이때, 이전 요청을 통해 받은 응답을 캐시해두기 때문에 key를 통해 바로 접근이 가능하다. 그래서 항상 사용자에게 빠른 응답성을 제공해줄 수 있고, 사용자가 key를 통해 캐시에 들어있는 값을 사용하는 동안 백그라운드에서 해당 요청의 응답을 최신화시켜준 뒤 사용자에게 반영해줄 수 있다. 데이터 가져오..

• format_list_bulleted SW/Typescript
• · 2023. 5. 18.
• textsms