📌 대외 활동 썸네일형 리스트형 📌 대외 활동/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로.. 📌 대외 활동/2311~ Look : AI 기록 서비스 react와 vue 비교 이번에 사이드 프로젝트에서는 vue로 개발을 진행하고 있었기 때문에 react와 vue의 차이점을 경험적으로 익힐 수 있었다. 50% 이상 진행 중이었던 프로젝트의 중간에 들어갔기 때문에 프론트엔드에서는 이미 vue로 개발을 진행하고 있었고, 그렇기 때문에 vue로 개발 경험을 할 수 있었던 좋은 경험이었다. react와 vue 공통점 Web-App (SPA), 모바일 개발에 모두 사용된다. 가상 DOM을 사용하는 아키텍처를 가지고 있어 reflow-repaint를 최소화한다. 즉 DOM의 조작이 많이 발생하는 SPA에서 브라우저 연산의 양을 줄여 성능을 개선시킬 수 있다. 컴포넌트 기반 아키텍쳐로 코드를 재구성하고 재사용할 수 있도록 해준다. 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관.. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (4) 최종 + 리팩토링 최종 기능 구현 추가된 기능 성공 / 에러 처리 메시지 정교화 최신 업데이트 시간 추가 데이터 공백 없애는 처리 (공백 포함되면 에러가 났음) MEMBER 등 소문자로 입력해도 대문자로 처리 (소문자로 입력되면 에러가 났음) 문서 작성 문서 작성 구현 화면 1 그룹스 -> 엑셀로 데이터 가져오기 관리하는 그룹이 많았기 때문에 개별 그룹에 해당되는 메일 주소를 groupKey로 설정했다. 데이터 요청이 성공적으로 처리되면 해당 groupKey를 출력하여 어떤 그룹의 데이터를 가져왔는지 확인할 수 있도록 했다. 구현 화면 2 엑셀 -> 그룹스로 데이터 업데이트하기 예외처리 (엑셀에 수정 내용이 없을 때 출력) 구현 화면 3 엑셀 -> 그룹스로 데이터 업데이트하기 신규 등록했을 때 성공 메시지 출력 실패하는 .. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (4) 엑셀 -> 그룹스 동기화시키기 엑셀 시트에서 항목(회원 목록 데이터)이 삭제되거나 새로 추가되거나 기존 항목이 수정 됐을 때, 그룹스 데이터에서도 해당 변경 내용이 동기화되는 기능을 구현했다. util 함수들 바로 이전 포스팅에서 나온 getMyGroup 함수에서 엑셀로 데이터 값 집어넣는 부분이 빠진 것 밖에 달라진 점이 없다. 이번에 나오는 함수들(엑셀 시트 데이터에서 그룹스로 데이터 업데이트)한테 적용시켜야 하는 함수이다. 1. 데이터 환경변수에 저장하기 - 의사 코드 * getMyGroup 과 6, 7번만 빼고 로직은 같다. * 2, 3번은 리팩토링 해서 oauth.gs에 전역으로 빼둔 상태이다. 액세스 토큰 발급 액셀 시트에 작성되어 있는 그룹 대표 이메일 값 추출해오기 (위치는 H1) 이메일 값이 이중 배열로 들어오기 때문.. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (3) 액셀 시트로 데이터 가져오기 getMyGroup 함수를 만들어서 그룹스에 있는 멤버 목록 데이터를 액셀 시트로 가져오는 기능을 구현했다. getMyGroup - 의사 코드 액세스 토큰 발급 액셀 시트에 작성되어 있는 그룹 대표 이메일 값 추출해오기 (위치는 H1) 이메일 값이 이중 배열로 들어오기 때문에 문자열 값으로 바꿔서 groupKey 라는 변수에 넣어주기 groupKey를 params에 넣어서 GET 요청 보내기 받은 response를 JSON.parse 하고 member에 해당되는 데이터(그룹 내 모든 회원 목록) 추출하기 엑셀 시트 내 원하는 위치부터 값 입력시키기 값 입력 완료 후의 칸은 다 빈칸으로 만들기 -> 만약 그 전에 있었던 데이터가 더 많아서, 받아온 데이터가 완전히 덮어지기 전에 입력이 완료됐을 때를 위함 .. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (2) OAuth 2.0 서비스 계정으로 Google API에 액세스 하기 위해서 OAuth 2.0을 구현하여 액세스 토큰을 발급받아야 한다. 아래 링크인 독스에서도 나와있지만 코드를 직접 작성하는 것보다 라이브러리 사용을 추천한다. https://developers.google.com/identity/protocols/oauth2/web-server?hl=ko#authorization-errors-redirect-uri-mismatch 웹 서버 애플리케이션용 OAuth 2.0 사용 | Authorization | Google for Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 웹 서버 애플리케이션용 OAuth 2.0 사용 컬렉션을 사.. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (1) 요즘 NGO에서 웹 개발 봉사활동가로 참여하고 있는데(여건이 되는 한 계속 할 예정), 어느날 아래와 같은 부탁을 받았다. Apps script는 처음 써 봐서 삽질을 많이 했지만, 결국 해결되었고 비슷한 상황에 처한 분들께는 도움이 될 수 있을 것 같아서 흐름도 간단히 정리할 겸 블로그에 작성해본다. 구현 기능 1. 엑셀 스프레드 시트에서 수정한 데이터를 구글 그룹스로 동기화 2. 반대로 구글 그룹스에서 수정된 데이터를 엑셀 스프레드 시트로 동기화 구현 화면 엑셀 시트에 버튼을 만들어서 양방향으로 동기화를 시킬 수 있도록 했다. 그룹스 -> 엑셀 : 그룹스의 회원 목록을 엑셀 시트로 불러오기 엑셀 -> 그룹스 : 엑셀 스프레드 시트에서 신규 회원 추가, 기존 회원 삭제, 기존 회원 정보 수정(역할) 후.. ⬆︎ 이전 1 다음
