Suwoni블로그

Firebase Realtime Database의 경우 개발자가 흔하게 접할수 있는 SQL 데이터베이스와는 확연히 다릅니다. JSON형태의 NoSQL 데이터베이스이며 실시간 동기화라는 특별한 기능 덕분에 강력한 기능을 앱상에서 구현할 수 있지만, 그로 인해 형태는 같은 NoSQL 이지만 일반적인 NoSQL 데이터베이스와도 다르게 신경써야하는 부분들이 있습니다. 앞서 Realtime Database챕터와 예제 챕터들을 거치면서 많이 다루어보았지만, 조금 더 익숙해지기 위해 간단한 예시들로 다양한 상황들을 연습해보겠습니다. 1) SQL to Firebase 흔하게 사용하는 SQL쿼리를 Firebase 메소드로 변형해보겠습니다. 예제를 시작하기전에 아래의 링크의 파일을 받습니다. 앞서 예제를 하면서 git에서..

여기까지 따라오시느라 수고하셨습니다. 코드는 완성되었습니다. 앞서도 언급되었지만, Firebase Realtime Database특성상 권한 설정은 무척 중요합니다. 특히나 웹의 경우는 서버의 주요 로직들이 클라이언트에서 드러나기 때문입니다. Realtime Database의 기본 권한은 Authentication 인증 받았을 때 읽기와 쓰기 허용입니다. database.rules.json 파일에 Realtime Database 권한이 입력되어 있습니다. 해당 파일을 배포함으로써 권한 정보를 업데이트할 수 있습니다. Firebase console 창을 통해서도 권한 룰을 변경할 수 있습니다. Firebase console 화면에서 Database항목 에서 규칙 탭으로 들어가면 권한을 변경할 수 있고, 시..

FCM 수신은 앱이 구동되고 있을 때 수신하는 포그라운드로 수신하는 방법과 앱이 구동되고있지 않을 때 백그라운드로 수신하는 방법이 있습니다. 접속하지 않은 유저들에게만 푸시를 보내려고 하기 때문에 백그라운드만 작성할 계획입니다. 포그라운드로 수신하는 방법도 잠시 소개합니다. 아래는 포그라운드로 수신하는 코드입니다. Firebase Messaging을 설정할때 권한을 획득하면서 requestPermission 메소드를 실행했는데, 이 메소드 이후에 적당한 위치에서 실행하면 됩니다. firebase.messaging().onMessage(function(payload) { var options = { body : payload.notification.body , icon : payload.notificati..

FCM 발송 작업을 클라이언트 코드에서도 할 수 있으나, Firebase Messaging Server API Key가 클라이언트 코드에 포함되는 것은 보안상 좋은 방법이 아니므로 서버를 사용해야합니다. 여기서 처음으로 Firebase Functions 를 이용해볼 것입니다. Functions 는 Firebase 서비스들이 동작하면서 발생하는 이벤트를 받아 서버에서 Firebase Admin을 통하여 Firebase 서비스들을 구동시키는 코드를 수행합니다. Functions가 받는 이벤트는 아래와 같습니다. Reatime Database 트리거 - onWrite() - 실시간 데이터베이스에서 데이터가 생성, 폐기 또는 변경될 때 발생 - onCreate() - 실시간 데이터베이스에서 새 데이터가 생성 시..

요즘 웹브라우저에서는 안드로이드 또는 IOS에서 볼 수 있는 푸시 기능을 지원하는 브라우저가 있습니다. 요즘 Youtube나 Facebook을 이용하시고, Chrome 또는 Firefox 브라우저를 사용하신다면 아래와 같은 푸시를 받아보셨을 것입니다. 이는 서비스 워커라는 브라우저에서 백그라운드로 실행되는 자바스크립트 기반의 워커를 통해서 메세지를 수신하고 노티피케이션을 구동하게 됩니다. 일반적인 웹 워커는 웹앱 내에서 자바스크립트로 멀티쓰레드 처리를 위해 사용됩니다. 서비스워커도 비슷하지만 차이점이 있습니다. 웹워커는 웹앱이 실행되는 동안만 유지되고 실행되지만 서비스워커의 경우 웹앱을 벗어나더라도 브라우저가 실행이 되어 있으면 지속적으로 이벤트를 받고 처리를 수행합니다. 이러한 서비스워커를 지원하는 브..

단순 채팅메세지를 넘어 파일을 서로 주고 받을 수 있는 기능을 구현해보겠습니다. Firebase Storage를 활용하게 됩니다 클립버튼을 누르면 파일을 선택을 할 수 있고, 파일을 선택하면, 팝업 모달 창이 뜨면서 파일 전송 현황을 볼 수 있는 프로그레스바가 움직이며, 최종적으로 파일을 다운로드 받을 수 있는 링크정보가 메세지로 전달 됩니다. 코드를 시작하기 전 Firebase console 로 들어가서 Storage 메뉴로 들어갑니다. 처음 들어가면 아래와 같은 화면이 나옵니다. 시작하기 버튼을 눌러 주세요. 시작하기 버튼을 눌러야 기본적인 권한이 생성이 되고 Bucket이 생성이 되며 Storage를 사용할 수 있는 상태가 됩니다. 이제 코드를 작성해보겠습니다. 아래의 코드를 추가해주십시오. 위 코..

Realtime Database 에는 사용자의 접속상태가 바뀔 때마다 데이터가 변경이 되는 특수한 위치가 있습니다. '/.info/connected' 위치입니다. 해당 위치를 활용하여 접속이 되면 유저리스트 화면에서 접속하였음을 표시해주는 기능을 구현해 보겠습니다. 접속을 하거나 접속을 끊게 되면 UsersConnection 위치에 데이터를 입력하는 코드를 작성하겠습니다. 아래의 코드를 작성해 주세요. 로그인 후 checkOnline 메소드가 실행됩니다. 접속을 하게 되면 앞서 언급한 '/.info/connected' 위치에 true 값이 입력됩니다. 아래의 코드는 '/.info/connected' 위치의 데이터 변화를 감지하여, true 값이 들어왔는지 확인한 후 UsersConnection 아래 자신..

이제 1대 1대화 뿐만 아니라 여러명이 한꺼번에 채팅을 나눌 수있는 채팅방 초대 기능을 만들어 보겠습니다. 우선 채팅방 우측 상단에 '+' 모양의 버튼이 있습니다. 해당 버튼을 누르면 초대할 수 있는 인원들이 보여지는 팝업 모달 창을 띄우도록 하겠습니다. 현재 상태에서도 초대버튼을 누르면 팝업 모달창이 뜨게 됩니다. Git을 통해 소스를 다운 받으시면 맨처음에 초대 버튼을 누르면 모달창이 뜨는 코드가 포함되어 있는 상태입니다. 이제는 모달 창을 채울 유저리스트를 모달창으로 가지고 오겠습니다. 유저리스트는 앱 첫화면 유저리스트의 Dom을 그대로 가지고 와서 채팅방 안에 속한 인원을 제외 시키고, 숨겨두었던 체크버튼을 보이도록 하겠습니다. openChatRoom메소드에 setAddUserList 메소드를 실..

채팅방 리스팅 화면입니다. 아래와 같이 두번째탭에 자신이 속해있는 채팅방 목록이 나오는 화면 입니다. 메세지를 저장할 때 UserRooms위치에도 데이터를 저장했는데 이 위치에 저장된 데이터를 채팅방 리스팅 화면에 활용하게 됩니다. 채팅방 리스트 화면을 만들기 위해 다음 코드를 추가해주십시오. 채팅방 목록을 불러오는 코드입니다. 로그인 인증이 완료된 후 수행되는 setLogin 메소드 안에서 loadRoomList메소드를 호출합니다. loadRoomList메소드를 확인을 해보면 유저리스트와 는 다르게 메세지를 받을 때마다 목록을 갱신시켜 주기위해 once메소드가 아닌 on메소드를 사용하였습니다. getRoomList메소드는 loadRoomList에서 채팅방 목록을 데이터를 받을 때마다 화면을 만드는 메소..

이번에는 채팅메세지 전송기능을 구현해보겠습니다. 채팅방화면에서 아래쪽 메세지 입력란에서 입력한 후 엔터키를 누르거나 삼각형 모양의 전송버튼을 누르면 메세지가 전송이 되는 기능을 구현해보겠습니다. 위 코드는 입력란에서 엔터키를 누르거나 전송버튼을 클릭했을 시 saveMessages 메소드가 실행이 되는 코드 입니다. saveMessages 여러 위치에 저장을 하게 되는데 하나씩 살펴보겠습니다.var multiUpdates = {};this.database.ref().update(multiUpdates); // 권한 때문에 먼저 저장해야함 multiUpdates 객체를 선언하고 저장할 위치와 값을 객체에 입력한 뒤 update 메소드로 저장하게됩니다. update 메소드는 이렇게 여러 위치에 한번에 저장할 ..

카카오톡을 보면 유저리스트 화면을 터치하면 프로필 화면이 나오고 1:1 채팅 버튼을 눌러야 채팅방 화면이 나옵니다만, 예제에서는 곧바로 1:1 채팅 화면으로 진입하는 코드를 작성하겠습니다. 일단 먼저 유저리스트 화면에서 유저를 클릭하면 채팅방을 오픈하는 코드를 작성하겠습니다. 아래의 코드를 추가 또는 수정해주세요. 유저리스트 데이터를 받아 화면을 그리는 getUserList 메소드에서 화면을 그리고 난 뒤 유저별로 클릭 이벤트를 바인딩 하는 코드를 입력하였습니다. 그리고 클릭시 수행되는 코드는 onUserListClick 메소드 입니다. onUserListClick 메소드는 아직까지는 단순하게 숨겨져있던 백버튼과 친구 초대버튼을 보이게 하고 openChatRoom메소드를 통해서 채팅방 화면을 보이게 하는..

이제 저장된 유저 데이터를 읽어와 아래와 같은 사용자 목록화면을 완성해 보겠습니다. 이제 아래의 코드를 추가합니다. 위 코드는 로그인 인증이 완료되고 수행되는 setLogin메소드 안에서 Realtime Databse 에서 Users Reference를 불러오는 loadUserList 메소드가 수행됩니다. loadUserList 메소드를 살펴보면 Users 위치를 once메소드를 통해 한번 만 불러오도록 되어 있고, userName 순으로 정렬하여 데이터를 가지고 옵니다. off 메소드는 여러 메소드가 수행하는 과정에서 미리 할당된 이벤트가 있으면 이벤트를 제거한 후 다시 이벤트를 붙여서 중복으로 이벤트가 할당되는 것을 막기 위함입니다. getUserList 메소드는 데이터를 받고 최종적으로 화면을 그리..

새로 가입한 유저 데이터를 저장할때는 몇 가지 고민해야 할 부분이 있습니다. 첫번째는 유저데이터를 저장하는 시점입니다. Realtime Database의 특성상 권한이 부여된 후 저장이 되는 것이 바람직합니다. 가입 메소드에서 수행하면 아직 미인증 상태이므로 기본을 설정된 데이터베이스 권한으로는 저장할 수 없습니다. 그러므로 저장 위치는 onAuthChange 메소드에서 저장해야할 것입니다. 두번째는 onAuthChange메소드 위치에 두면 로그인할때마다 프로세스를 수행하게 됩니다. 그리고 새로 가입한 유저데이터를 저장하는 프로세스를 로그인할 때마다 저장하는 것은 Realtime Database 특성상, 만약에 Users 위치를 클라이언트에서 변화 감지해서 데이터를 받아오는 코드가 작성되어 있다면 불필요..

1) Realtime Database 특징 Firebase Realtime Database 는 JSON형태의 NoSQL 데이터베이스입니다. 그리고 연결된 모든 클라이언트에 실시간 동기화되는 특징이 있습니다. 이로 인하여 일반적인 SQL 데이터베이스로 구현하는 웹개발과는 다른 특징을 가집니다. NoSQL의 특징을 가지고 있는 데이터베이스로서 데이터베이스 구조를 미리 정의 하지 않습니다. (미리 테이블이나 칼럼을 생성할 필요가 없습니다.) NoSQL 데이터베이스지만 실시간 동기화되는 특성으로 인하여, 저장할 데이터 구조는 최대한 중첩을 배제해야합니다.(JSON Object 값에 다시 JSON Object가 중첩이 되는 형태를 말합니다.) Firebase Realtime Database와 Node.js를 함께..

1) Authentication 콘솔 설정 Firebase Authentication을 사용하여 가입 및 로그인 처리를 해보겠습니다. Authentication 을 사용하기 위하여 Firebase Console화면으로 진입한 후 좌측 Authentication 메뉴에 들어가고, 그 다음 로그인 방법 탭으로 들어갑니다. 로그인 방법 탭 항목 중 이번 예제에서는 '이메일/비밀번호', 'Google', 'Facebook' 항목을 이용하겠습니다. '이메일/비밀번호' 라인을 클릭해봅니다. 그러면 아래와 같은 팝업창이 뜹니다. 사용설정 스위치버튼을 눌러 사용설정을 해줍니다. 'Google'도 마찬가지로 사용설정을 해줍니다. Facebook 설정은 Facebook 로그인과 Firebase Authentication을..

1) 예제 시작 소스 다운로드 받기 프로젝트를 시작하기 위해서 미리 구조를 잡아둔 예제 시작파일을 다운로드 받습니다. 예제 시작 파일을 받기위하여 https://github.com/cionman/firebase-tutorial-chat/ 아래 링크로 진입하여 commit 히스토리를 볼 수 있는 부분을 클릭합니다. commit 히스토리 중 맨 아래 쪽 '1. 예제 시작 파일' 부분 우측에 '' 버튼을 클릭 합니다. 나중에 예제를 글 단위별로 커밋을 해두었으니 따라하시면서 commit 히스토리를 참조하시면 됩니다. '1. 예제 시작 파일' 커밋 화면으로 진입한 후 아래의 스크린샷 부분을 클릭하면 예제 시작 파일을 다운로드 받을 수 있습니다. 다운로드 받은 파일을 프로젝트를 구성할 위치에 압축을 풀어줍니다. ..

이제 예제 프로젝트를 수행하기 전 먼저 Firebase를 설정 및 준비를 해보겠습니다. 1. Firebase 프로젝트 추가하기 Firebase를 사용하기 위해서 가장 먼저 할 일은 Firebase Console로 진입하여 Firebase 프로젝트를 생성하는 일입니다. 그러기 위해 다음 URL을 방문하십시오. Firebase 홈페이지 https://firebase.google.com/ Firebase 홈페이지에서 우측 상단 GO TO CONSOLE 을 클릭하여 들어가면 아래와 같은 화면이 나옵니다. 화면을 보시면 이미 생성되어 있는 프로젝트 목록을 볼 수 있고, 프로젝트 추가 버튼이 있습니다. 프로젝트 추가 버튼을 누릅니다. 프로젝트 추가 버튼을 누르면 위와 같은 화면이 나옵니다. 프로젝트에 원하시는 이름..

Firebase 웹용 라이브러리들을 활용하여 아래와 같은 채팅앱을 만들어 보겠습니다. 채팅앱의 모든 기능이 포함되어 있지는 않습니다. 예제를 열심히 만들었지만.. 버그도 있을 수 있습니다. Firebase 의 기능을 한 번씩 활용해본다고 생각해주셨으면 좋겠습니다. Firebase의 여러 기능을 사용하면 카카오톡과 같은 메신저에 포함되어 있는 대부분의 기능이 구현 가능하겠지만, 지금부터 구현할 기능은 다음과 같습니다. 유저 가입 및 로그인 유저데이터 저장 유저 리스팅 화면 채팅메세지 리스팅 화면 채팅 메세지 전송 채팅방 리스팅 화면 채팅방 초대기능 파일 전송 접속 중인 유저 표시기능 파일 전송기능 푸시 기능 위 기능을 구현을 하면 아래와 같은 Realtime Database는 아래와 같은 데이터 구조를 가..

올 연초에 Electron + Firebase 활용하여 Togethers Messesnger라는 이름으로 사내 메신저 프로그램을 만들고 만든 소스를 기반으로 Android에까지 올리는 사이드프로젝트를 진행하였습니다. 그리고 그 경험을 바탕으로 GDG Incheon 행사에서 실력없는 개발자가 라이트닝 토크 시간에 짧게 경험을 공유해보는 시간도 갖어볼 수 있었습니다. 그 발표 때에도 몇 몇 분들께서 제가 만든 사이드프로젝트에 관심을 가져주셨고, 소스를 보고 싶다는 분들도 게셨었지만, 소스를 보여드리기가 부끄러운점도 있었고, 제 스스로도 확실하게 정리가 되지 않아 공개할 수 없었습니다. 그 이후 시간이 흘러서, Firebase에 관련하여 정리를 한 번 해야지 생각만 하고 있던 찰나에, 올 9월 경에 페이스북을..