FCM [2] Web Push 알림 발송

Maven 의존성 주입FCM 엔진을 이용해 Web Push 알림을 발송하기에 앞서, Maven 의존성 주입을 작성해줘야한다. 필자는 9.3.0 버전을 사용했지만, 읽는 이들은 쓰고 싶은 버전 쓰면 될 것 같다. 물론 그에 따른 method 지원 양상에 대해서는... 알아서들 JAVA DOC 읽어보면서 파악하자. 사실 필자도 더 오래전 버전을 쓰다가, 알고보니 해당 버전대에서 알림을 발송하는 method 일부가 더이상 제공되지 않는 것을 뒤늦게 확인한 바가 있다. 항상 JAVA DOC 잘 읽자... com.google.firebase firebase-admin 9.3.0  FCM Web Push 발송 순서시작하기에 앞서 FCM 엔진을 이용한 Web Push 발송 순서를 간략하게 설명하겠다...

• format_list_bulleted Java/FCM (Back-end)
• · 2024. 10. 29.
• textsms

FCM [1] Device Token 발급

FCM 엔진을 이용한 알림 처리에 있어 첫 단추는, 알림을 받고자 하는 사용자의 기기 토큰을 발급받는 것이다. 필자는 Spring Framework 기반의 작업 환경에서 처리하였지만, 레퍼런스를 찾아보면서 짐작하기로 '대부분의 프로젝트에서 동일하게 통용될 것' 을 전제로 구성되는 것 같기에. 이 글을 읽는 여러분의 환경에서도 충분히 FCM 엔진을 이용할 수 있으리라 예상한다.  1) Firebase Config사전 작업으로 생성했던 FCM Console 내 프로젝트를 기억하는가? 해당 프로젝트에서 다음과 같이 접근하도록 하자.추가한 앱을 클릭하면 톱니바퀴 모양의 설정 아이콘이 보이게 된다. 해당 아이콘을 클릭하여 프로젝트 설정으로 빠르게 이동할 수 있다. 정확히는 프로젝트 설정 내 해당 앱의 속성 정보로..

• format_list_bulleted JavaScript/FCM (Front-end)
• · 2024. 10. 25.
• textsms

FCM [0] FCM Console

FCM 엔진은 Google 사에서 제공하는 서비스이다. 사용하기에 앞서 FCM Console 내 프로젝트를 등록하는 과정이 필요하다. 개발 중에는 localhost 도메인으로 충분히 사용이 가능하며, 웹 사이트 오픈 후에는 SSL 인증이 적용된 도메인으로 수정이 가능하니 걱정하지 말도록 하자. 여담으로 로컬 테스트를 진행하며 127.0.0.1 로는 작업이 안되었던 것 같으며, 포트 번호 역시 80이 아닌 번호는 접근이 막혔던 것으로 기억한다...  1. Firebase Console 접근해당 URL(https://console.firebase.google.com/) 링크를 통해 Firebase Console 화면에 접근할 수 있다. 다음과 같은 화면이 나올 것이다.  2. 프로젝트 생성이후는 '프로젝트 ..

• format_list_bulleted JavaScript/FCM (Front-end)
• · 2024. 10. 25.
• textsms

FCM 개요

FCMFCM(Firebase Cloud Messaging)이란, Google 사에서 제공하는 메시지를 안정적으로 무료 전송할 수 있는 크로스 플랫폼 메시징 솔루션이다. FCM을 사용하면 새 이메일이나 기타 데이터를 동기화할 수 있음을 클라이언트 앱에 알릴 수 있다. 이렇게 알림 메시지를 전송하여 사용자를 유지하고 재참여를 유도할 수 있다. 채팅 메시지와 같은 사용 사례에서는 메시지로 최대 4,000바이트의 페이로드를 클라이언트 앱에 전송할 수 있다.  필자는 FCM 엔진을 이용하여 다음과 같은 프로세스를 처리하고자 한다.사용자가 화면에서 특정 웹 사이트의 알림을 신청한다.서버에서는 해당 사용자의 기기 토큰 값을 DB 내 저장한다.알림을 신청한 사용자들의 기기에 알림을 발송한다. 이러한 일련의 과정을 앞으..

• format_list_bulleted Java/FCM (Back-end)
• · 2024. 10. 25.
• textsms

CSS 적용 방식

InlineInline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법이다. 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. Inline 스타일 방식이라고 부른다. 내용   InternalInternal은 문서에  위의 코드로 모든 에 같은 스타일을 줄 수 있다. 하지만 이것도 한계가 있다. 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 한다. 페이지가 많고 스타일 규칙 내용이 많아지면 결코 쉬운 일은 아니다.  ExternalExternal은 외부 스타일 시트 파일을 이용한 방법이다. 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식이다. 외부 파일은 확장자가 .css가..

• format_list_bulleted CSS/Default
• · 2024. 9. 30.
• textsms

요소 숨김 처리

CSS로 대체 텍스트를 화면에서 숨기는 방법은 여러가지가 있다. 몇가지 방법들을 살펴보고 사용하지 말아야 할 속성들과 주의해야할 점들을 알아보도록 하겠다. 대체 텍스트는 그 의미가 잘 전달이 되도록 시멘틱하게 마크업 해야 하고, 화면에서 보이지 않도록 CSS로 숨긴다. 이때 중요한 것은 스크린 리더기가 읽을 수 있도록 처리해야 한다는 점이다.  요소를 화면에서 숨기는 방법  (1) 좋지 않은 수준스크린 리더가 인식하지 못하기 때문에, 다음 중 어느 속성이라도 사용하지 말아야 한다./* 투명도를 0으로 주는 것과 동일하게 화면에서 사라지지만, 스크린 리더 인식 안함 */visibility: hidden;/* 요소가 아예 없는 것으로 인식 */display: none;/* 요소의 사이즈를 0으로 만들면 스크..

• format_list_bulleted WEB/웹 접근성
• · 2024. 9. 27.
• textsms