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

JavaScript 'console' 객체 제어하기

필자는 웹 개발자다. 대부분 Chrome 브라우저를 사용하며, 동시에 개발자 도구를 띄워놓는다.종종 우리네의 실수가 아님에도, 혹은 데이터 확인 용도로 출력하는 console 내역들이 많을 수 있다.너무 보기 싫었다. 그래서 작성한다.   console 객체 자체가 전역으로 선언되어있기에, 해당 함수 또한 전역으로 사용할 수 있다.console 객체 내 신규로 넣어준 함수의 설명은 다음과 같다.console.off()document loading 완료 시, 기본적으로 실행된다.console 객체 내 함수들을 비어있는 함수 function() {} 로 선언해버려 작동을 방지한다.console.on()console 로그를 보고 싶을 때, 개별적으로 선언해줘야 한다.console 객체 내 함수들을 원복시켜 작..

• format_list_bulleted JavaScript/Default
• · 2024. 7. 15.
• textsms

XSS(Cross Site Scripting) 특수 문자열 변환(parsing)

XSS(Cross Site Scripting)XSS(Cross Site Scripting) 사이트 간 스크립팅이라고 불리는 공격에 대해서는 다른 블로거들이 정리를 잘 해놓았으니, 검색해서 알아보자. 필자는 DataBase 내 정상적으로 적재된 특수 문자열을 XSS 방어를 위해 별도 변환(parsing)을 한다. 마침 변환에 필요한 자료를 잘 정리하신 블로거 분이 계시니, 참고 바라며(최하단 출처에 기재). 하단에 기술된 내용은 필자가 사용하기 위해 별도 가공한 결과물을 공유하는 바이다.  XSS escape Object필자는 javascript를 통하여 미리 선언한 함수로 특수문자의 안전한 XSS excape를 시켜준다. 지역 변수로 해당 과정에 필요한 값들을 Object 형태로 담아두는데, 아래와 같다..

• format_list_bulleted JavaScript/Default
• · 2023. 3. 15.
• textsms

JavaScript Array 관련 내장 함수

JavaScript Array 내장 함수JavaScript 내 array 형태의 변수를 컨트롤 할 수 있는 내장 함수들에 대해 살펴보겠다.값 확인값 추가 // push(Object obj)값 제거(가장 마지막에 할당된) // pop()값 제거(가장 처음에 할당된) // shift()값 제거(인덱스를 이용한) // splice(int param), splice(int param, int param)값 추가(인덱스를 이용한) // splice(int param, int param, Object obj ... ...)  Array 값 확인테스트 목적으로 Array 변수를 다음과 같이 선언하였다.test: () => { // 테스트 array 선언 let testAry = ["오이", "피클"]; debugg..

• format_list_bulleted JavaScript/Default
• · 2022. 6. 15.
• textsms

Kendo UI [5] Toolbar

Toolbar 예제 jQuery 기반의 환경에서 구성할 수 있는 Kendo UI 중 Toolbar에 대해 알아보도록 하겠다. telerik 사에서 제공하는 기본 예제들은 다음의 URL을 통해 확인할 수 있다. https://demos.telerik.com/kendo-ui/toolbar/index Toolbar 예제 거의 왠만한 사용법은 공식 홈페이지의 demo, 그리고 공식 docs를 번역하여 확인하면 능숙하게 사용할 수 있다. telerik 사에서 다른 것은 몰라도 예제 만큼은 정말 풍부하게 잘 구현해놓았기 때문이다. 그렇기에 필자는 그 중에서도, 특히나 자주 사용될 것 같은 예제들에 대한 key point 만을 테스트하며 작성해보도록 하겠다. 1. Toolbar 영역 생성 다음과 같이 Kendo UI..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 31.
• textsms

Kendo UI [4] DropDownList API

Kendo UI DropDownList API Kendo UI를 이용한 dropDownList를 control 할 수 있는 API 기능에 대해 알아보도록 하겠다. 필자가 느끼기에 API 라기에는 조금 애매한 듯 한데... telerik의 공식 docs에서 API라고 설명하니 그렇다고 하자. 1. API Function (상태 변경 : 읽기 전용, 비활성화, 활성화) 이번 게시물은 Kendo UI [3] DropDownList 게시물의 연장선으로 보면 되는 게시물이다. 그러므로 Kendo UI [3] DropDownList 게시물에서 사용한 소스코드를 재활용하도록 하겠다. 기존의 소스를 다음과 같이 수정하도록 하자. API Functions 읽기전용 비활성화 활성화 Example Kendo UI를 통하여 ..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 31.
• textsms

Kendo UI [3] DropDownList

DropDownList 예제 jQuery 기반의 환경에서 구성할 수 있는 Kendo UI 중 DropDownList에 대해 알아보도록 하겠다. telerik 사에서 제공하는 기본 예제들은 다음의 URL을 통해 확인할 수 있다. https://demos.telerik.com/kendo-ui/dropdownlist/index DropDownList Custom 예제 거의 왠만한 사용법은 공식 홈페이지의 demo, 그리고 공식 docs를 번역하여 확인하면 능숙하게 사용할 수 있다. telerik 사에서 다른 것은 몰라도 예제 만큼은 정말 풍부하게 잘 구현해놓았기 때문이다. 그렇기에 필자는 그 중에서도, 특히나 자주 사용될 것 같은 예제들에 대한 key point 만을 테스트하며 작성해보도록 하겠다. 1. Te..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 31.
• textsms

JavaScript 변수 선언 방식(var, let, const)

JavaScript에서의 변수 선언 java에서는 변수를 선언함에 있어, 해당 변수에 대하여 형태를 지정해줘야했다. 예를 들자면 다음과 같이 말이다. 문자열 / String test = "test"; 정수형 / int test = 0; 실수형 / double test = 0.2; boolean형 / boolean test = true; 그러나 기존의 JavaScript에서는 [ var ] -라는 형식으로, 혹은 생략함으로써 변수를 선언할 수 있었다. 다음과 같이 말이다. var test = "test"; var test = 0; var test = 0.2; var test = true; JavaScript의 ES 버전이란? JavaScript에서의 변수 선언 방식을 확인하기 전, JavaScript의 E..

• format_list_bulleted JavaScript/Default
• · 2021. 8. 31.
• textsms

Kendo UI [2] Grid

Grid 예제 jQuery 기반의 환경에서 구성할 수 있는 Kendo UI 중 Grid에 대해 알아보도록 하겠다. telerik 사에서 제공하는 기본 예제들은 다음의 URL을 통해 확인할 수 있다. https://demos.telerik.com/kendo-ui/grid/index Grid Custom 예제 거의 왠만한 사용법은 공식 홈페이지의 demo, 그리고 공식 docs를 번역하여 확인하면 능숙하게 사용할 수 있다. telerik 사에서 다른 것은 몰라도 예제 만큼은 정말 풍부하게 잘 구현해놓았기 때문이다. 그렇기에 필자는 그 중에서도, 특히나 자주 사용될 것 같은 예제들에 대한 key point 만을 테스트하며 작성해보도록 하겠다. 1. Test Data 및 Grid 영역 생성 grid에 들어가게될..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 24.
• textsms