[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

[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

[Typescript] 소규모 서비스에서의 FaaS(Netlify Functions)와 WebRTC를 통한 Peer간 (서버측면)저비용 통신 서비스 구현 - 1. 방법론

1. 서론 본 포스트는 작은 서비스 규모에서의 각 Peer간의 서버측면 저비용 통신 서비스를 구현하는 것에 목적을 두고 있다. 물론 필자가 소개한 방법보다 더 효율적인 방법이 있을 수는 있다. 이에 대한 의견은 적극 수용하고 있으니 다른 의견이 있다면 댓글로 남겨주기 바란다. 2. 본론 2-1. 문제확인 Peer간 통신을 구현하는 방법으로는 여러방법이 있겠지만, 대표적으로 사용하는 방법으로 socket 통신이 있다. 특히 Web기반의 클라이언트에서는 앞에서 말한던 socket과 비슷한(엄밀이 말해서 둘이 다른 프로토콜이긴 함) WebSocket을 이용할 수 있다. WebSocket 서버를 가운데 두고 각 Peer가 WebSocket 서버에 바인딩이 되면 서버를 통해서 각 Peer가 Private Chan..

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