본문 바로가기

분류 전체보기185

4. 익스텐션 그 너머 - PWA: Progressive Web Application 2/2 지난 포스팅에서 PWA의 구조에 대해 살펴보았고 PWA의 기반이 되는 전통적인 웹 애플리케이션을 작성해보았다. 전통적인 웹 애플리케이션 구조에서는 웹 서버가 멈추면 더 이상 웹 애플리케이션을 이용할 수 없게 된다. 하지만 PWA 구조에서는 웹 서버가 멈추더라도 전체 기능까지는 아니더라도 사전에 정의한 수준까지 웹 서비스를 제공하게 할 수 있다. 이는 PWA에 포함되어 있는 서비스 워커가 웹 서버의 대리인(proxy) 역할을 함으로서 가능하다. 이전 포스팅 '익스텐션 그 너머 - PWA 1/2'에서 전통적인 웹 애플리케이션에 해당하는 아래 내용까지 작성하였다. 여기서 sw.js 파일이 서비스 워커 스크립트지만 그 내용을 작성하지는 않았었다. 이 sw.js 파일을 작성해보자. const CACHE_NAME .. 2024. 3. 27.
4. 익스텐션 그 너머 - PWA: Progressive Web Application 1/2 총 3부에 걸쳐 크롬 익스텐션의 구조와 제작 방법에 대해 살펴보았다. 마지막으로 Progressive Web Application(PWA) 개념에 대해 살펴보고 브라우저 익스텐션에 대한 포스팅의 대단원(?)의 막을 내리려 한다. 웹 서비스는 서비스를 제공하는 서버에 연결(connect)되어 있을 때에만 서비스를 제공받을 수 있다. 이에 반해 PWA는 서버와 연결되어 있지 않은 상태에서도 최소한의 서비스를 제공받을 수 있도록 만들어진 웹 어플리케이션이다. 여기에 더해 웹 브라우저가 웹 표준을 준수하는 어떠한 문서나 서비스라도 플랫폼(Windows, Linux, MacOS 등)에 관계없이 실행해 주는 것과 마찬가지로 PWA도 웹 브라우저를 가상 실행환경으로 삼기 때문에 하나의 코드로 모든 플랫폼에서 실행되는.. 2024. 3. 25.
3.2. 크롬 익스텐션 만들어보기 Part II - Chrome API 사용하기 이전 포스팅, '3.1.크롬 익스텐션 - 서비스 워커 심화'에서 서비스 워커가 크롬 익스텐션의 다른 구성 요소인 content 스크립트 그리고 웹 브라우저의 주소창(=omnibox)과 어떤 관계에 있고 어떻게 상호작용 하는지 다루어보았다(아래 그림 참조). 이번 포스팅에서는 익스텐션의 UI, 그리고 크롬 웹 브라우저가 제공하는 API에 집중해보려 한다. 서비스 워커, content 스크립트 없이 익스텐션의 UI와 크롬 API를 가지고 크롬 브라우저를 컨트롤 할 수 있다. 아래 그림은 이번 포스팅에서 다룰 익스텐션의 구조를 보여준다. popup.js 그리고 웹 브라우저의 상호작용을 눈여겨 보기바란다. 익스텐션을 작성하기 위해 가장 먼저 해야할 일은 익스텐션이 제공할 기능을 정의하고, 이 기능들을 제공하기 .. 2024. 3. 18.
진로 Jinro 와인 시음기 와인을 좋아한다. 마트에 갈 때 마다 어떤 와인들이 할인하고 있는지 꼭 살펴보는 편이다. 지금도 판매되고 있는지 잘 모르겠지만 마주앙Majuang 이라는 와인이 있었다. 마주앙은 결코 아무렇게나 만든 와인이 아니다. 독일에서 기술을 전수받아 국내에서 제조된 와인인 것으로 알고있다. 미사주로도 쓰이고 평도 좋다. 마트에 가니 빨간색 라벨의 진로 와인이 눈에 띈다. 가격은 2만원 초반대로 싸구려 와인은 아니다. 수십만원을 호가하는 와인이 아니면 와인 축에 못 낀다고 생각하는 분들도 있겠지만, 외국에서 와인은 우리의 막걸리처럼 국민술이다. 돈 있는 사람들만 마시는 그런 술은 절대 아니라는 뜻이다. 그렇기에 만원 아래 가격의 와인들도 훌륭한 것들도 많다. 마트에서 진로 와인을 할인하기에 망설이지 않고 데려왔다... 2024. 3. 10.