개발해도유

본문 바로가기

인기 글

최신 글

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) : 앱이 사용자와의 상호 작용이 없는 상태로 홈 버튼을 누르거나 다른 앱으로 전환한 상태 구현한 기능 포그라운드 사용자가 앱을 사용하고 있을 때, 푸쉬 알림이 뜸 알림 메시지에는 제목, 내용, 앱 아이콘, 필요한 경우 이미지까지 포함 앱을 클릭할 시, ..
2312~ NGO 웹사이트 리뉴얼 nx 기반 모노레포 구축기 (1) 프로젝트 구조 모노레포 도입 계기 문제 상황 웹 리뉴얼 프로젝트를 시작하면서 기존 웹 서비스를 분석하는 작업에 들어갔다. 특히 많은 팀원들이 공감했던 부분은 사용자 경험이 다방면에서 굉장히 좋지 않다는 것이었다. 특히 디자인적인 부분만 서술해보자면 아래와 같이 일관적이지 못한 사용자 경험과 Voice & Tone, 파악할 수 없는 디자인 원칙과 패턴이 있었고, 더 큰 문제점은 디자인 유지보수를 위한 문서화가 되어 있지 않다는 문제가 있었다. figma 파일이나 디자인 관련 기획 내용은 찾아보기 힘들었기 때문에 현상황에서 할 수 있는 것은 실제 서비스되고 있는 화면을 캡쳐하여 분석하는 방법밖에 없었다. 그 전에 해당 홈페이지를 개발 하셨던 분은 이미 수 년 전 기관을 떠나셨고 잠깐 한국에 체류하셨던 외국 분이셨기 때문에..
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로..

📌 Project

🎊 Toy Project

⬆︎

728x90

티스토리툴바