📌 대외 활동/2311~ Look : AI 기록 서비스 썸네일형 리스트형 📌 대외 활동/2311~ Look : AI 기록 서비스 [PWA] FCM으로 알림 기능 구현하기 (3) : 포그라운드 [단어 정의] Non-persistent notification : a notification without an associated service worker registration. Persistent notification : a notification with an associated service worker registration. 구현 코드 의사 코드 발췌 To create a notification, given a string title, NotificationOptions dictionary options, environment settings object settings, and optionally a ServiceWorkerRegistration object serviceWorkerR.. 📌 대외 활동/2311~ Look : AI 기록 서비스 [PWA] FCM으로 알람 기능 구현하기 (2) : 백그라운드 공식 레퍼런스 아래 링크와 같이 공식 문서를 정말 하염없이 물고 뜯고 맛 보며 많은 시행착오를 거쳤다. 결과적으로, 공식 문서 참조만으로는 원하는 기능을 구현할 수 없었기 때문에 그와 관련된 내용을 정리해보고자 한다. 이때까지 개발한 기능 중 가장 레퍼런스를 오랫동안 찾아 다니고 많은 시도를 해본 것 같다. https://firebase.google.com/docs/cloud-messaging/js/receive?hl=ko 자바스크립트 클라이언트에서 메시지 수신 | Firebase 클라우드 메시징 Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 자바스크립트 클라이언트에서 메시지 수신 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장 fi.. 📌 대외 활동/2311~ Look : AI 기록 서비스 [PWA] FCM으로 알림 기능 구현하기 (1) : Notification API FCM(Firebase Cloud Message) 기반으로 PWA 알림 기능을 구현해보았다. 정석이랄 게 없어서 이것저것 정말 많은 레퍼런스를 찾아보고 시도해보면서 나름대로 의도한 기능을 구현할 수 있었다. 우선 구현한 기능은 아래와 같다. 크게 백그라운드와 포그라운드, 웹 브라우저와 모바일 브라우저(PWA 앱 포함)로 나뉜다. [단어 정의] - 포그라운드(foreground) : 사용자가 해당 앱을 사용하고 있는 상태 - 백그라운드(background) : 앱이 사용자와의 상호 작용이 없는 상태로 홈 버튼을 누르거나 다른 앱으로 전환한 상태 구현한 기능 포그라운드 사용자가 앱을 사용하고 있을 때, 푸쉬 알림이 뜸 알림 메시지에는 제목, 내용, 앱 아이콘, 필요한 경우 이미지까지 포함 앱을 클릭할 시, .. 📌 대외 활동/2311~ Look : AI 기록 서비스 [Nuxt3 / PWA] service worker로 앱 오프라인 캐싱하기 vue에서 내 상황에 적합한 레퍼런스를 찾지 못해 아쉬웠던 기억이 있기에 비슷한 상황일 분들을 위해 글을 작성해둔다. Nuxt3 프레임워크 기반의 프로젝트에서 service-worker로 오프라인 캐싱을 구현해보았다. 서비스 워커란? 서비스 워커는 웹 앱의 동작을 고도화할 수 있는 이벤트 기반 워커로 JavaScript 파일의 형태를 가지고 있다. 즉, 웹 플랫폼이 네이티브의 앱 기능을 구현할 수 있도록 기능을 제공하며 보통은 아래의 상황을 구현할 수 있다. 백그라운드 데이터 동기화 다른 출처에서의 리소스 요청 응답 위치 정보, 자이로 센서 등 계산에 높은 비용이 들어가는 다수의 페이지에서 함께 사용하기 위한 데이터 업데이트 중앙화 특정 URL 패턴에 기반한 사용자 지정 템플릿 제공 성능 향상 (사용자가.. 📌 대외 활동/2311~ Look : AI 기록 서비스 PWA(Progressive Web Application)란? PWA는 한 마디로, 웹 기술 만으로 앱과 같은 기능을 갖춘 웹앱이다. 비교 모바일웹 : PC 웹 페이지를 모바일에 맞게 줄인 것 웹 개발 풀 브라우저 방식 (화면 일부분이 변경될 때 화면 전체 내용을 서버에서 새로 받아옴) 웹 브라우저에서 검색 혹은 URL로 접근해야 하는 불편함 네이티브 앱 : 우리가 일반적으로 알고있는 앱 앱 개발 : 운영체제에 따른 각 네이티브 언어(개발언어)로 개발 네이티브 API 사용 가능 높은 퍼포먼스 업데이트할 때마다 플레이스토어~앱스토어를 통해야 함 (+심사과정) 웹앱 : 모바일에 최적화된 웹 웹 개발 구동 방식이 마치 네이티브와 같음 SPA (최초 한 번 페이지 전체를 받아온 후, 화면 일부분이 변경될 때 해당 부분만 데이터를 바인딩) 웹 브라우저에서 검색 혹은 URL로.. 📌 대외 활동/2311~ Look : AI 기록 서비스 react와 vue 비교 이번에 사이드 프로젝트에서는 vue로 개발을 진행하고 있었기 때문에 react와 vue의 차이점을 경험적으로 익힐 수 있었다. 50% 이상 진행 중이었던 프로젝트의 중간에 들어갔기 때문에 프론트엔드에서는 이미 vue로 개발을 진행하고 있었고, 그렇기 때문에 vue로 개발 경험을 할 수 있었던 좋은 경험이었다. react와 vue 공통점 Web-App (SPA), 모바일 개발에 모두 사용된다. 가상 DOM을 사용하는 아키텍처를 가지고 있어 reflow-repaint를 최소화한다. 즉 DOM의 조작이 많이 발생하는 SPA에서 브라우저 연산의 양을 줄여 성능을 개선시킬 수 있다. 컴포넌트 기반 아키텍쳐로 코드를 재구성하고 재사용할 수 있도록 해준다. 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관.. ⬆︎ 이전 1 다음
