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

CSS, SASS, SCSS

CSSCascading Style Sheets(종속형 스타일 시트)브라우저에서 웹페이지의 외형을 결정하는 선언형 언어브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현하나의 스타일 선언은 웹 페이지의 모양을 결정하는 속성과 그 값으로 이루어짐CSS는 HTML, JavaScript와 함께 웹의 3대 핵심 기술보통 HTML 요소의 스타일을 결정하지만, SVG와 XML 등 다른 마크업 언어에도 사용할 수 있음 Sass / SCSSSass : Syntactically Awesome Style SheetsSCSS : Sassy CSSCSS의 단점을 보완하기 위해 만든 CSS 전처리기Sass는 CSS로 컴파일된 스타일시트 언어변수, 중첩 규칙, 믹스인, 함수 등을 완전히 CSS와 호환되는 구문..

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

Animation

Animation이란?Animation은 CSS 스타일과 키프레임(keyframes)으로 구성되며, Transition 보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다. 적용될 대상은 @keyframes 규칙이 반드시 필요하며, Transition과 다르게 방아쇠(Trigger) 없이도 실행 가능하다. Animation 지원범위Animation은 IE브라우저에서 10이상부터 지원한다.  Animation 9가지 속성  (1) animation-name@keyframes에서 설정한 애니메이션의 이름animation-name: name;/* 키프레임 이름 = 애니메이션 이름 */@keyframes name { /* from(0%), to(100%)..

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

Transition

Transition이란?Transition의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있다. CSS 속성인 Transition은 한 상태에서 다른 상태로 변형될 때 일정 시간 동안 변화는 과정을 말한다. 적용될 대상은 초기/종료 상태의 스타일과 Transition 속성 정의가 필요하며,  애니메이션 발생을 위한 가상 선택자(:hover 등) 또는 js 방아쇠(Trigger)가 필요하다.  Transition 지원범위Transition은 IE브라우저에서 10이상부터 지원한다.  Transition 5가지 속성  (1) transition-propertyCSS 속성을 지정함기본값 :  all (모든 속성에 적용)transition-property: none | all | property | initi..

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

애니메이션의 이해

웹 애니메이션을 제작할 때 여러 가지 방법이 있다. CSS 애니메이션 교육에 앞서 실무에서 자주 사용하는 웹 애니메이션 종류에 대해 알아보고 장단점을 비교해보겠다.  GIF최대 256 색상을 지원하며 비 손실 압축 포맷으로 구현이 간편함압축률이 낮아 이미지 용량이 크고, 브라우저 성능(fps) 저하 발생 MP4손실 압축 포맷으로 용량이 적고 스트리밍 재생이 가능함알파 채널이 지원되지 않아 배경색을 포함한 콘텐츠를 제작해야 함 CSS & JS인터렉션 UI 애니메이션에 적합하고, 부드러운 애니메이션 제공복잡하고 현란한 애니메이션 제작 어려움 LOTTIESVG 벡터 기반으로 선명하고 현란한 애니메이션 제작이 가능After Effects 도구 사용으로 진입 장벽이 높음  애니메이션 장단점 비교      [ 출처..

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