coin FE

이번에 마케팅 팀에서.. 또 일거리를 맹글어주셧다..ㅎㅎ 처음 접해보는 백그라운드 알림! 전화가 오면 클라이언트쪽에서 백엔드에서 던져주는 값으로 브라우저에서 알림창,모달창을 띄어주는 일이다! 기존에 있던 소스들에서 유지보수겸으로 추가하는거라서 소스가 지저분해서 꽤나 예를 먹은 .... ㅠ 나중에 리팩토링하거나.. 수정을 좀 해줘야할것같다..

일단 첫작업으로는 파이어베이스 npm 을 설치를 해준다. 

현재 관리자에서는 vue 2 를 사용하여 여기에 맞는 npm 모듈을 설치! 파이어베이스가 말이 좀 많던데 node 13버전에서도 무리없이 돌아가긴한다 ㅎ

파이어베이스 모듈이 필요하다!

npm i@firebase/messaging 

으로 설치 해준다

설치 후 백그라운드 js 를 사용하기 위한 js 파일을 생성 (백그라운드 js 가 궁금하면 구글링하면 자세하게 설명이 나온다~fcm 동작원리도 아주 자세하게 나온다~ 궁금하면 검색!~개발자는 언제나 검색~ㅋㅎ)

public 폴더안에 firebase-messaging-sw.js 파일을 생성해준다.

생성 후에 파이어베이스 필요한 정보 삽입 회사 api 키니깐 ㅎ 가려놓깅(아래에서 자세하게 설명)

자 이렇게 셋팅하고 위에 키는 아래에 파이어베이스 콘솔창에서 따오자

일단 우리회사는 vue2 로 진행중이고.. 노드 버전도 좀 하위버전을 사용중이라서 여러가지 시도했지만 잘안먹혀서 나는아래방식대로 진행하였다

내코드는

importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');

importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

 

firebase.initializeApp({

...파이어베이스 콘솔에서 복사해온값 붙여넣기

})

class CustomPushEvent extends Event {

constructor(data) {

super('push');

Object.assign(this, data);

this.custom = true;

}

}

 

요런식으로 구성을 하였다.

백그라운드에서 사용할 메시징 처리인데 꽤나 애먹었다.. 처음써보는 백그라운드에서 도는 정적 js 에 익숙치 않아서 ㅠ(import 가 불러오질못했다.. 아주 미치는줄...)

 

셋팅도 완료했으니 실질적으로 사용할 곳으로 이동하여 코드 작성해준다.

로그인시 알림요청 권한 처리와 백엔드로 요청을 보내는 코드를 작성했다.

이미 완성이 된 코드에서 유지보수성 처리라서 좀 꽤나 애를 먹었다....

위에 부분도 파이어베이스 공식 사이트에서 대략 흟어보면서.. 감으로 작업을 하였다.

로그인 쪽 뷰에서는 이런식으로 코드를 작성하여 로그인 할때 파이어베이스에서 받은 fcm 토큰을 백엔드에게 전달해준다.

로그인을 하면! 이렇게 허용하라는알림창이 뜬다~

이렇게 백엔드 요청 파라미터값들도 잘들어가있다~

현재 우리 사이트에 적용한 원리는 전화로 해당되는 매장에 전화 시 백쪽에서 받아서 파이어베이스 토큰을 가지고있는 pc 로 값을 전달하여 

클라이언트에서 해당 값을 알림창으로 보여주고 화면이 켜져있는경우에는 연락처로 조회가 되게 하는 화면이다.

일단 우리 회사에 맞게 화면이 켜있으면 모달창이 어디서든 떠야 하기때문에 App.vue와 헤더.vue에 추가적인 소스를 추가하기로했다.

라이프 사이클 마운티드에다가 아래 코드를 작성

이벤트 버스 사용시 beforedestroy 를 사용 안하면 이벤트 가 계속 살아있어서 여러번 호출을 하기 때문에 작성 해준다~.

메서드 안에

요로코롬 작성해준다. 나는 또 이벤트 버스를 사용하여 topNav.vue 에 값을 넘겨줄것이다.!

백에서는 이지콜등 회선을 연결하여 테스트할수있는 휴대기기를 주셧당 이걸로 테스트를 진행할것이다!

관리자에서 미리 셋팅 한 번호로 내 휴대전화기로 전화를 걸면 테스트를 할수있는 상황이다. 하지만 이지콜이랑 무슨 계약건때문에 개발에서 테스트를 진행이 무리가 있어서 포스트맨으로 다시 테스트 진행...

헤더쪽 분리 컴포넌트인 topNav.vue 에서 코드는 아래와 같이 정의를 한다. app.vue 에서 이벤트를 수신을 받으면 동작할수있게 이벤트 버스로 동작하게 한다.

전개발자가 쓰고 있는 템플릿에 맞게 모달창을 띄우고 닫고를 설정해주고 매장관리자가 아닌 권한이 있는사람은 못보도록 막아둔다.

이벤트 버스를 여러군데쓰면 찾기도 힘들고 어렵지만.. 서로다른 곳에 위치한 컴포넌트여서 일단은 대략적으로 사용 이벤트버스는 되도록이면 안쓰는게 가독성도 좋아지고 유지보수성도 향상되지만 나는 일단 어쩔 수 없이 진행! 다음에 전개발자가 만들고간 코드 전체적으로 리팩토링 할때 그때 수정하도록...하겠다. 이렇게 하여 프론트 소스는 완료!

포스트맨을 열어서 테스트를 진행한다.!

포스트맨에서 보낼 바디값을 셋팅한후 보내기를 하면!

포그라운드 상태에서는 예약하기 모달창이 뜨고

백그라운드 상태에서는 알림창이 열린다!

이것으로 코인의 개발일기 끄읏