[Typescript] Chrome Extension에서 중단 없이 Interval 사용하기 (manifest v3)

서론 본 포스팅에선 필자가 크롬 확장프로그램을 개발하면서 겪었던 Interval 사용 문제에 대해 다뤄볼까 한다. TL;DR Chrome Extension manifest v3 서비스워커의 실행시간은 최대 5분으로 제한되므로 Interval을 사용하기 위해 setInterval을 사용하는 것보단 chrome.alrams의 create()와 onAlram.addListener()의 사용을 권장한다. chrome.alrams.create()로 생성된 Alram 객체는 단순히 알람의 이름과 시간간격만을 지정할 수 있기 때문에 setInterval처럼 callback 함수를 파라미터로 넘겨줄 수 없다. 그래서 Alram 별로 ID나 태그 등의 serialize가 가능한 인자를 넘겨주고 싶다면, 알람의 이름을 "..

• format_list_bulleted SW/Typescript
• · 2022. 10. 24.
• textsms

[Typescript] 유틸리티 타입 - 2

1. 서론 Typescript는 타입선언 시 활용할 수 있는 여러가지 유틸리티 타입이라는 것을 제공한다. 유틸리티 타입은 어떤 임의의 타입을 제네릭으로 받아 여러가지 형태로 쉽게 변형할 수 있도록 만들어졌고 전역에서 사용 가능하다. 덕분에 간결한 코드로 타입 안정성이 보장된 인터페이스 설계가 가능하다. Typescript는 현재(2022.10.11 기준)까지 22가지 유틸리티 타입을 제공한다. 종류가 많기 때문에 여러 포스트으로 나누어 작성하려고 한다. 본 포스트는 이전 포스트에서 다루지 않은 나머지 유틸리티 타입들에 대해 다뤘다. 이전 포스트 바로가기 [Typescript] 유틸리티 타입 - 1 1. 서론 Typescript는 타입선언 시 활용할 수 있는 여러가지 유틸리티 타입이라는 것을 제공한다. 유..

• format_list_bulleted SW/Typescript
• · 2022. 10. 12.
• textsms

[Typescript] 유틸리티 타입 - 1

1. 서론 Typescript는 타입선언 시 활용할 수 있는 여러가지 유틸리티 타입이라는 것을 제공한다. 유틸리티 타입은 어떤 임의의 타입을 제네릭으로 받아 여러가지 형태로 쉽게 변형할 수 있도록 만들어졌고 전역에서 사용 가능하다. 덕분에 간결한 코드로 타입 안정성이 보장된 인터페이스 설계가 가능하다. Typescript는 현재(2022.10.11 기준)까지 22가지 유틸리티 타입을 제공한다. 종류가 많기 때문에 여러 포스트으로 나누어 작성하려고 한다. 본 포스트는 Typescript 공식 레퍼런스를 참고하여 작성됐다. Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 2. ..

• format_list_bulleted SW/Typescript
• · 2022. 10. 11.
• textsms

[DevOps] Netlify에 CloudFlare DNS 연동하기

1. 서론 이번 포스팅에서는 Netlify에 올린 서비스에 CloudFlare 네임서버로 연결된 자신의 도메인을 등록하고 CloudFlare에서 TLS 인증서를 생성해 Netlify에 등록하는 방법까지 소개한다. Netlify는 자체적으로 네임서버를 제공하면서 DNS관리를 할 수 있도록 기능을 제공하지만, CloudFlare의 부가적인 기능들을 활용하기 위해서는 Netlify에 CloudFlare 네임서버를 등록한 도메인을 연결하여 사용할 필요가 있다. 2. 자신의 도메인에 CloudFlare 연결 도메인을 구매한 사이트마다 도메인의 네임서버를 변경할 수 있는 대시보드를 제공한다. 이 설정 메뉴를 통해 도메인의 네임서버를 CloudFlare의 네임서버인 {임의의 문자열}.ns.cloudflare.com으..

• format_list_bulleted SW/DevOps
• · 2022. 10. 9.
• textsms

[Typescript] Svelte로 Chrome Extension 개발하기

1. 서론 이번 포스트에서는 Svelte를 이용해 크롬 확장프로그램을 개발하기 위한 준비 방법을 소개한다. (필자의 모든 JS/Node 생태계 관련 포스트는 Typescript를 기준으로 설명한다. Typescript를 생활화하자.) 2. 크롬 확장프로그램 기본 구조 이 부분은 필자가 이전에 올린 포스트를 참고하길 바란다. 크롬 확장프로그램과 Typescript 활용 방법에 관한 내용이다. [Typescript] Chrome Extension manifest v3 1. 서론 이번 포스트에서는 크롬 확장프로그램 manifest v3와 Typescript 활용 방법에 대해 소개한다. 크롬 확장프로그램은 크게 Popup과 Background로 이루어져있다. 이 둘은 웹서비스로 비유하자면 Frontend blo..

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

[Typescript] Chrome Extension manifest v3

1. 서론 이번 포스트에서는 크롬 확장프로그램 manifest v3와 Typescript 활용 방법에 대해 소개한다. 크롬 확장프로그램은 크게 Popup과 Background로 이루어져있다. 이 둘은 웹서비스로 비유하자면 Frontend와 Backend같은 역할을 하며 확장프로그램을 이룬다. Chrome browser API를 통해 Popup과 Background가 서로 통신하며 API에서 제공하는 기능들을 이용해 사용자의 편의성을 향상시킬 수 있는 확장 프로그램을 개발할 수 있다. (필자의 모든 JS/Node 생태계 관련 포스트는 Typescript를 기준으로 설명한다. Typescript를 생활화하자.) 2. manifest v2 vs manifest v3 manifest는 크롬 확장프로그램의 jso..

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