역사

실시간 데이터베이스는 4년 전 Firebase용으로 츨시한 첫 번째 기능입니다. 그 당시에는 클라우드에서 호스트되는 JSON 데이터베이스가 다소 생소한 개념이어서 즉시 세간의 주목을 받았습니다. Firebase 데이터베이스가 다른 것들과 차별화되는 점은, 단 하나의 사용하기 쉬운 API로 서로 다른 클라이언트 사이에 즉각적으로 데이터를 동기화할 수 았는 기능이었습니다.

실시간 데이터베이스는 애플리케이션 개발의 복잡한 작업 중 하나를 일관된 프로그래밍 인터페이스 뒤에 숨겨줍니다. 실시간 협업 애플리케이션을 손쉽게 만들 수 있도록 해주었습니다.

실시간 데이터베이스란?

실시간 데이터베이스는 사실상 실시간으로 관리하는 하나의 커다란 JSON 객체입니다. 즉, 실제로는 수많은 값들로 구성된 하나의 트리입니다.
따라서 단순하고 유연한 데이터 모델링이 가능합니다. 이 데이터베이스에는 스키마가 없습니다. 즉, 고정된 구조를 최초에 결정해 고정 할 필요가 없습니다. 데이터 유효성 검사가 걱정된다면, 데이터베이스에 입력되는 각 데이터의 구조에 대한 유효성 검사를 할 수 있게 해주는, 서버 측 규칙 언어를 사용할 수 있습니다.

Firebase 데이터베이스의 독특한 특징은 실시간 동기화 기능입니다. 종래의 데이터베이스에서는 대부분 요청/응답 모델로 작업하게 되어 있습니다. 쿼리를 작성한 다음 데이터베이스에게 그 쿼리의 결과를 달라고 요청하는 식이죠. 결과가 다시 필요하거나 그 결과에 대한 업데이트 정보가 있는지 확인하고 싶을 경우에는 쿼리를 다시 실행해야 합니다.

그러나 Firebase 데이터베이스는 다릅니다. 변경 사항이 발생하면 데이터베이스가 그 사실을 알려줍니다. 여러분은 데이터베이스에게 '트리의 이 위치에서 뭔가 변경되면 알려주세요'라고 하면 됩니다. 그러므로 변경 사항을 간단히 모니터링하고 모든 사용자들이 그 변경된 내용을 동기화된 상태로 유지할 수 있습니다.

실시간 이벤트

Firebase 데이터베이스는 하나의 API로 데이터의 현재 값과 해당 데이터에 대한 업데이트를 모두 앱에 제공합니다.

iOS

refHandle = postRef.observeEventType(FIRDataEventType.Value, withBlock: { (snapshot) in
  let postDict = snapshot.value as! [String : AnyObject]
  // …
})

Web

firebase.database().ref('posts/' + postId).on('value', function(snapshot) {
    var post = snapshot.val();
    // …
});

Android

mPostReference.addValueEventListener(new ValueEventListener() {
    @Override
    public void onDataChange(DataSnapshot dataSnapshot) {
        // Get Post object and use the values to update the UI
        Post post = dataSnapshot.getValue(Post.class);
        // …
    }
    @Override
    public void onCancelled(DatabaseError databaseError) {
        // Getting Post failed, log a message
        Log.w(TAG, "loadPost:onCancelled", databaseError.toException());
        // …
    }
});

이 후, 사용자 인터페이스에 데이터를 표시하고, 사용자가 그 데이터를 변경 할 수 있도록 할 수도 있습니다. 간단하죠.

오프라인 상태에서 일어나는 일

네트워크 연결이 끊기는 순간 반응하지 않는 앱을 사용해 보셨나요? 대부분의 개발자들은 네트워크 상태에 상관없이 앱이 작동하도록 만들고 싶어 합니다. 그래서 Firebase 데이터베이스는 앱에 표시되는 모든 데이터의 내부 캐시를 유지합니다. 네트워크 연결이 일시적으로 끊어지더라도 앱은 캐시에서 데이터를 읽어올 수 있습니다. 연결이 끊긴 상태에서, Firebase 데이터 클라이언트는 로컬 쓰기 작업의 큐를 유지합니다. 앱은 계속 작동하고, 이를 위해 따로 추가 코드를 쓸 필요가 없습니다.

Firebase 플랫폼의 힘은 모든 기능들을 통합하는 데서 나옵니다. 저희는 더 많은 통합을 추가하고 있지만, 개발자가 이미 사용할 수 있도록 준비된 통합의 예가 몇 가지 있습니다. 사용자들이 앱에 로그인할 수 있도록 허용한 다음, 자신의 ID를 바탕으로 자신의 데이터에 접근하도록 보장하세요. 사용자의 파일을 Firebase 저장소에 저장한 다음, 실시간 데이터베이스를 사용해서 다른 모든 앱 사용자들에 대해 상태와 가용성을 동기화하세요. Firebase Analytics로 어떤 파일들이 가장 인기 있는지 추적하고 해당 파일에 대한 협업을 위해 다른 사용자들을 초대하세요.

Firebase를 사용해 쉽게 다양한 사용자 경험을 제공할 수 있습니다.

일반적으로 Chrome 확장 프로그램을 만드는 것은 다른 웹 앱을 만드는 것과 매우 유사합니다. 여러분은 HTML, JavaScript 및 CSS를 사용하고 계실 겁니다. 다만, 몇 가지 차이점이 있습니다. 특히, Firebase와 같은 별도의 호스팅 라이브러리와 서비스를 활성화하고 사용하려면 특별한 설정이 필요합니다. 또한, chrome.identity API와 같은 특수 API가 Chrome 확장 프로그램에 사용될 수 있으며, 이를 잘 활용하면 보다 나은 사용자 경험을 제공할 수 있습니다. 그럼 어떻게, Chrome 확장 프로그램에서 Firebase를 활성화할 수 있는지 단계별로 살펴보겠습니다.

Firebase 초기화

개발 가이드를 살펴보시면, Firebase SDK를 개발자의 main.html 파일로 가져와서 사용하도록 안내합니다. 그러나 Chrome 확장 프로그램에서는 콘텐츠 보안 정책 때문에 인라인 스크립트를 피하는 것이 최선입니다. 결과적으로, 여러분은 HTML 대신에 JS 파일에 Firebase SDK 초기화 코드를 추가해야 합니다. 다음과 같은 코드를 확장 프로그램의 JS 파일에 추가합니다.

// Initialize Firebase
var config = {
  apiKey: "<qwertyuiopasdfghjklzxcvbnm>",
  databaseURL: "https://<my-app-id>.firebaseio.com",
  storageBucket: "<my-app-id>.appspot.com"
};
firebase.initializeApp(config);

전문가 팁: authDomain 줄은 Firebase SDK의 팝업 및 리디렉션 인증 방법에만 유용하며, 이 기능을 사용하지 않을 것이므로 제거했습니다.

그 후, 다음과 같이 HTML 파일 내에서 firebase.js를 로드해야 합니다.

<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

또한, 스크립트가 호스팅되는 도메인(즉, www.gstatic.com)은 허용 목록에 추가해야 합니다. 또한, 실시간 데이터베이스 및 Firebase 저장소에 의해 사용되는 *.firebaseio.com 및 www.googleapis.com도 허용 목록에 추가해야 합니다. 이들 도메인에 대한 액세스를 허용하려면 manifest.json에 다음 스크립트를 추가합니다.

"Content_security_policy": "script-src 'self' https://www.gstatic.com/ 
https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"

사용자 인증

Firebase 비밀번호 인증 및 익명 인증은 Chrome 확장 프로그램에서 작동할 것으로 예상되지만, Google 로그인의 경우 다음 두 가지 주요 사항으로 구성되는 추가적인 설정이 필요합니다.

클라이언트 ID 구성

Chrome 확장 프로그램에서 사용하도록 설정된 Google 클라이언트 ID를 만들고 이 ID를 Firebase 프로젝트의 허용 목록에 추가해야 합니다. 다음 단계를 따라 하세요.

• 새 OAuth Client ID를 프로젝트의 Developers Console에서 만들고, Chrome App을 선택하고 자신의 Chrome 확장 프로그램/Chrome 앱 ID를 입력합니다.

• 프로젝트의 Firebase 콘솔에서 Auth 섹션 > SIGN IN METHOD 탭의 Google 인증 방법을 활성화합니다.

• 방금 만든 Client ID를 Whitelist client IDs from external projects (optional)를 사용하여 허용 목록에 추가하고 SAVE를 클릭합니다.

이제 Chrome 확장 프로그램에 사용되도록 클라이언트 ID가 설정되고 이 ID가 Firebase 프로젝트에 사용되도록 허용 목록에 추가됩니다.

Chrome.identity API를 사용하여 Firebase 인증

https://developer.chrome.com/apps/app_identity에 설명된 대로, chrome.identity API를 사용하여 사용자를 인증합니다. 이 경우 지침이 약간 변경되어, email 및 profile 범위에 대한 액세스를 요청해야 하므로 여러분의 manifest.json에 다음 코드가 필요합니다.

"permissions": [
  "identity"
],
"oauth2": {
  // Use your Client ID Below.
  "client_id": "1234567890-abcdefjhijk.apps.googleusercontent.com",
  "scopes": [
    "https://www.googleapis.com/auth/userinfo.email",
    "https://www.googleapis.com/auth/userinfo.profile"
  ]
},

Chrome Identity API의 좋은 점은 여러분의 사용자가 “네이티브”와 유사한 로그인 환경을 가진다는 것이며, 이 사용자는 자신의 Chrome 브라우저로 로그인한 계정을 가지고 인증할 수 있습니다.

사용자가 인증되면 Google OAuth 토큰을 받습니다. Auth.signInWithCredential()을 사용하여 Firebase를 인증하려면 이 토큰을 사용합니다.

var credential = firebase.auth.GoogleAuthProvider.credential(null, token);
firebase.auth().signInWithCredential(credential);

다 되었습니다! 이제 Firebase SDK의 기능(예: Firebase 실시간 데이터베이스 및 Firebase 저장소)을 사용할 준비가 되셨습니다.

샘플 확장 프로그램

저희는 Google 로그인으로 Chrome 확장 프로그램에서 Firebase를 사용하는 방법을 보여주는 간단한 Chrome 확장 프로그램을 게시했습니다. 편안하게 둘러보시고 시작해 보세요. https://github.com/firebase/quickstart-js/tree/master/auth/chromextension

또한, Chrome 확장 프로그램을 직접 사용해 볼 수도 있습니다. https://chrome.google.com/webstore/detail/lpgchdfbjddonaolofeijjackhnhnlla

ID 팀은, 사용자가 자신의 구글 계정을 이용해, 다양한 애플리케이션에 쉽고 안전하게 로그인하고, 그리고 달력 또는 연락처 등의 정보를 다른 앱과 공유할 수 있도록 노력하고 있습니다.

이러한 상호 작용은 OAuth 요청을 통해 이루어지며, 구글은 개발자가 구글과 자신의 서비스 사이에 OAuth 흐름을 구현할 수 있는 다양한 방법들을 수년간 지원해왔습니다. 저희는 더 나은 보안과 사용성을 염두에 두고서 이런 방법 중 하나를 곧 종료할 예정입니다. 향후 몇 개월 내에 저희는 “웹 뷰”라고 하는 임베디드 브라우저에서 구글에 대한 OAuth 요청을 더 이상 허용하지 않을 것입니다.(예: 안드로이드의 웹뷰 UI 요소, iOS의 UIWebView/WKWebView, Windows 및 OS X의 해당 요소).

임베디드 웹 뷰 대신에 OAuth 요청을 위해 기기 브라우저를 사용할 경우, 앱의 사용성이 상당히 개선됩니다. 사용자는 기기당 한 번만 구글에 로그인하면 됩니다. 여러분의 앱의 로그인 전환율이 개선됩니다. 일부 운영 체제에서 사용 가능한 최신 “인앱 브라우저 탭” 패턴(예: 안드로이드의 크롬 커스텀 탭, iOS의 SFSafariViewController)을 활용하면, 보다 자연스러운 UX 환경을 제공할 수 있습니다.

이와 반대로, OAuth를 위해 임베디드 브라우저를 사용하는 방법은 사용자가 기존의 로그인된 세션을 사용하는 대신, 매번 구글에 로그인해야 합니다. 또한, 웹뷰를 사용할 때와는 달리, 개별 앱은 기기 브라우저에 표시되는 컨텐츠의 내용을 분석하거나 변경할 수 없음으로 보안이 향상됩니다.

여러분의 마이그레이션을 돕기 위해, 저희는 여러분이 이용할 수 있는 다음과 같은 라이브러리와 샘플을 제공합니다.

• 구글 계정으로 로그인 및 OAuth를 위해 저희가 권장하는 SDK인 안드로이드 및 iOS용 Google Sign-In.
• 구글 및 기타 OAuth 공급자와 함께 사용될 수 있는 오픈 소스 OAuth 클라이언트 라이브러리인 안드로이드, iOS 및 OS X용 AppAuth. 저희는 Objective-C용 Google API 클라이언트 라이브러리와 GTM Session Fetcher 프로젝트에 대한 AppAuth 지원을 활성화하는 라이브러리인 GTMAppAuth(iOS 및 OS X용)도 제공합니다.
• Windows용 구글 로그인 및 OAuth 예제. 이 예제에서는 UWP(Universal Windows Platform), 콘솔, 데스크톱 앱과 같은 다양한 Windows 환경에서 브라우저를 사용하여 구글 사용자를 인증하는 방법을 보여줍니다.

또한, 네이티브 앱을 지원하는 저희의 표준 기반 지원에 대해서는 프로토콜 수준 설명서와 이 주제에 관한 IETF 최신 모범 사례 초안을 읽어보실 수 있습니다.

iOS에서 구글 로그인의 버전이 3.0 이전인 경우에는 인앱 브라우저 탭의 최신 모범 사례를 지원하지 않으며, 따라서 지원이 중단되었습니다. 구글 로그인을 사용하는 경우, 보안 및 사용성에 관련된 모든 최신 정보를 얻으려면 최신 버전으로 업데이트하세요. 현재 이 정책에서 iOS 8 상에서 웹뷰 지원을 제거하는 것은 아니지만, 보안을 더욱 강화하기 위해 사용자가 자신의 기기를 업그레이드하도록 알려주는 알림을 저희가 표시할 수도 있습니다.

구글에 대한 OAuth 요청 시에 웹 뷰의 지원 중단을 위한 출시 일정은 다음과 같습니다. 2016년 10월 20일부터 가능한 대안이 있는 플랫폼 상에서 새 OAuth 클라이언트가 웹 뷰를 사용하지 못하게 차단할 것이며, 기존 OAuth 클라이언트의 경우는 사용자에게 직접 노출되는 알림을 단계적으로 표시할 것입니다.

2017년 4월 20일에 저희는 가능한 대안이 존재하는 플랫폼 상에서 모든 OAuth 클라이언트에 대해 웹 뷰를 사용하는 OAuth 요청을 차단하기 시작할 것입니다.

마이그레이션에 대한 질문이 있으신 경우, “google-oauth”라는 태그가 붙은 Stack Overflow에 게시물을 올려주세요.

게시자: William Denniss, 제품 관리자, ID 및 인증

2016년 8월 23일부터 일부 넥서스 기기를 대상으로 안드로이드 7.0 누가 OTA가 사용자에게 배포되기 시작했습니다. 이와 동시에 저희는 안드로이드 7.0 소스 코드를 AOSP(Android Open Source Project)에 푸시하는 중이며, 이 최신 버전의 안드로이드를 더 많은 사용자분들이 사용할 수 있도록 노력하고 있습니다.

저희는 지난 몇 달 동안 여러분과 협력하여 이번 릴리스에 대한 개발자 여러분의 다양한 피드백을 받았습니다. 또한, 안드로이드 7.0 기기에서 여러분의 앱이 잘 동작할 수 있도록 준비할 수 있도록, 5번에 걸쳐 개발자 프리뷰 버전을 공개했습니다.

지난 Google I/O 2016 에서 발표된 내용 중 파이어베이스 관련 2개의 세션을 한글 자막과 함께 제공해 드립니다. 아직 Google I/O 2016 세션을 보지 못하신 분들이나, 다시 한번 확인하고 싶은 분들께서는 한글 자막과 함께 시청해 보시기 바랍니다.

Firebase Overview 

아일랜드 더블린 소재의 StoryToys는 아이들을 위한 인터렉션북 및 게임 출판업체입니다. 대부분의 아동용 앱 개발업체들과 마찬가지로, 이 회사도 알맞은 대상 사용자들이 자사의 콘텐츠를 찾아내도록 하기 위해 고심하고 있었습니다. Google Play에 '가족' 섹션이 생긴 이래 StoryToys는 놀랍게 성장하여 수익이 270%, 다운로드 횟수가 1,300%나 증가했습니다.

이 회사의 최고 제품 책임자 Hear Emmet O’Neill 씨와 총괄 영업 책임자 Gavin Barrett 씨가 '키즈' 섹션이 새 콘텐츠를 찾는 가족들에게 얼마나 신뢰할 수 있고 창조적인 공간을 제공하고 있는지 말해줍니다. 또한 베타 테스트, 각 지역 실정에 맞춰 책정한 가격 등을 이용해, StoryToy의 대표적인 앱인 My Very Hungry Caterpillar (내 굶주린 애벌레)가 사용자 수와 수익을 현저히 늘리는 데 어떻게 도움이 되었는지도 들어보세요.
Designed for Families에 대해 더 자세히 알아보고 Playbook for Developers 앱을 설치하여 항상 더욱 다양한 기능을 접하고 Google Play에서 성공적으로 비즈니스를 성장시키는 데 도움이 될 모범 사례를 살펴보세요.

게시자: Lily Sheringham, Google Play 팀

지난 Google I/O 2016 에서 발표된 내용 중 웹과 관련된 주요 세션을 골라 한글 자막과 함께 제공해 드립니다. 아직 Google I/O 2016 세션을 보지 못하신 분들이나, 다시 한번 확인하고 싶은 분들께서는 한글 자막과 함께 시청해 보시기 바랍니다.

The Mobile Web: State of the Union

Google I/O에서 모바일 웹 세계의 현황과 AMP(Accelerated Mobile Pages) 및 PWA(Progressive Web Apps) 같은 새로운 기술을 활용하여 최고의 모바일 환경을 제공하는 방법에 대해 소개하였습니다. 블로그를 참고해 영상을 시청해 보세요.

High performance web user interfaces

이번 세션에서는 몇몇 UI 컴퍼넌트를 자세히 들여다 보고,어떻게 사용자가 만족할만한 고성능 사용자 인터페이스를 만들 수 있는지 그  방법에 대해 알아봅니다.

Angular2 and Progressive Web Apps

앵귤러 팀은 항상 앵귤러를 최고의 모바일 앱 개발용 프레임워크가 되도록 노력하고 있습니다. 이번 세션에서는 완벽하게 변신한 앵귤러2 프레임웍과 프로그레시브 웹 앱을 쉽게 개발할 수 있는 새로운 방법을 소개합니다.

지난 Google I/O 2016 에서 발표된 내용 중 안드로이드와 관련된 주요 세션을 골라 한글 자막과 함께 제공해 드립니다. 아직 Google I/O 2016 세션을 보지 못하신 분들이나, 다시 한번 확인하고 싶은 분들께서는 한글 자막과 함께 시청해 보시기 바랍니다.

Android 의 새로운 기능

다른 설명이 필요할까요? 안드로이드의 새로운 기능과 변경사항, 업데이트된 안드로이드 스튜디오 등 모든 것에 대한 이야기가 담겨 있습니다. 관련 포스팅도 함께 확인해 보세요.

안드로이드 앱을 크롬북으로 가져오기

지난 7월을 기점으로 크롬 브라우저가 전 세계 PC의 절반 이상에서 사용되고 있습니다. 계속 성장하고 있고, 무한한 가능성을 가진 크롬북과 안드로이드와의 만남을 포스팅과 함께 확인해 보세요.

안드로이드 스튜디오 2.2. 프리뷰 살펴보기

Google I/O 2016 에서 안드로이드 스튜디오 2.2. 프리뷰 버전이 공개되었습니다. I/O 이후 여러번에 걸쳐 프리뷰가 업데이트 되었지만, 핵심 기능은 I/O 버전과 크게 다르지 않습니다. 약 25분 동안의 라이브 데모와 주요 기능들에 대한 자세한 설명이 포함되어있습니다. 포스팅과 함께 다시 한번 확인해 보시기 바랍니다.

안드로이드 ‘인스턴트 앱’을 소개합니다

많은 개발자분들이 관심갖고 계신 내용이죠? Google I/O 2016 에서는 사용자가 안드로이드 앱을 설치하지 않아도 즉시 실행될 수 있는 안드로이드 인스턴트 앱을 발표했습니다. 안드로이드 앱 경험을 바꿀 수 있는 이 프로젝트에 대해 짧은 영상과 포스팅을 통해 확인해 보세요.

Google Cast & 안드로이드 TV

Google Cast와 안드로이드 TV는 사용자들이 좋아하는 예능, 영화 그리고 스포츠 등의 엔터테인먼트 컨텐츠를 우리집의 가장 큰 화면과 가장 좋은 스피커를 통해 경험할 수 있도록 도와줍니다. 자세한 내용을 영상으로 확인해 보세요.

Google Developers 팀에서는 구글 제품을 사용한 다양한 프로젝트를 전시하고 체험해볼 수 있는 Google HackFair 를 일년에 한번씩 개최해오고 있습니다. 2015년에도 많은 지원팀 중 총 25개의 팀이 최종 선발되어 구글의 다양한 기술들을 활용한 독창적인 프로젝트들을 선보인 바 있습니다.

올 늦여름으로 예정된 안드로이드 7.0 누가 출시가 얼마 남지 않았습니다. 그리고 마침내, 개발자 프리뷰의 마지막 중요 이정표인 개발자 프리뷰 5가 공개되었습니다. 지난6월의 개발자 프리뷰에는 7.0을 위한 확정된 최종 API들이 포함되었습니다. 이번 버전에는 프리뷰를 지원하는 모든 기기들을 위해 최종버전과 매우 유사한 시스템 업데이트를 제공합니다. 개발자 여러분은 앱 사용자들을 위해 앱을 충분히 테스트해볼 수 있습니다.

누가의 최종 개발자 프리뷰에 포함된 것들을 간단히 소개하면 다음과 같습니다.

• 넥서스 및 기타 프리뷰 기기를 위한 시스템 이미지
• 앱이 준비가 갖추어졌는지 확인하는 최종 테스트에 사용할 수 있는 에뮬레이터
• 최종 N API(API 레벨 24) 및 최신 시스템 동작과 UI
• 버그 수정과 시스템 전반 및 미리 설치된 앱의 최적화

이 최신 개발자 프리뷰를 기반으로 여러분의 앱이 이동 중 절전 모드, 백그라운드 최적화, 화면 확대/축소, 권한 변경 등, 안드로이드 N에서의 시스템 동작 변경에 영향을 받지 않는지 확인해야 합니다. 그 외에도, 멀티 윈도우 지원, 직접 회신 및 기타 알림 기능 향상, 다이렉트 부트, 새 이모티콘 등, 안드로이드 N의 새로운 개발자 기능을 활용할 수 있습니다.

Google Play에서 알파나 베타 또는 프로덕션 채널에 앱 게시

개발자 프리뷰 5로 앱을 테스트한 후에는 Google Play에 업데이트된 버전을 올릴 수 있습니다. API 24을 타겟으로 혹은 선택적으로 API 24를 대상으로 컴파일한 다음 Google Play 개발자 콘솔에서 알파나 베타, 또는 프로덕션 채널에 앱을 올릴 수 있습니다. 생각치 못한 문제점이 발견될 수 있으니, Google Play의 베타 테스트 기능을 사용해서 개발자 프리뷰 사용자를 포함하는 소규모의 사용자 그룹으로부터 일찍 피드백을 받은 다음, 업데이트된 앱을 모든 사용자에게 릴리스하는 것을 추천합니다.

개발자 프리뷰 5를 설치하는 방법

이미 안드로이드 베타 프로그램에 등록하셨다면, 기기에 개발자 프리뷰 5 업데이트를 즉시 받을 수 있습니다. 아직 안드로이드 베타에 등록하지 않은 경우,  android.com/beta를 방문하여 프리뷰를 지원하는 안드로이드 스마트폰이나 태블릿을 선택하여 등록할 수 있습니다. 그러면 곧 최신 프리뷰 업데이트를 무선으로 받을 수 있습니다. 언제나처럼, 업데이트를 다운로드한 후 수동으로 플래시할 수도 있습니다. 누가 개발자 프리뷰는 넥서스 6, 넥서스 5X, 넥서스 6P, 넥서스 9, 픽셀 C 기기는 물론이고, 안드로이드 원 기기에서도 사용할 수 있습니다.

지금까지 보내주신 모든 피드백에 대해 진심으로 감사드립니다. 저희는 올 늦여름에 소비자 릴리스를 목표로 작업하고 있으므로, 계속해서 N 개발자 프리뷰 이슈 추적기, N 개발자 프리뷰 커뮤니티 또는 안드로이드 베타 커뮤니티에서 피드백이나 요청 사항을 공유해주시기 바랍니다. 안드로이드 누가가 곧 나옵니다!

게시자: Dave Burke, 엔지니어링 부사장

Firebase는 열렬히 React를 지지합니다. Firebase로 애플리케이션 상태를 동기화하고, React로 상태 변경을 바탕으로 애플리케이션 UI를 다시 그립니다. 아주 이상적인 조합이죠.

그리고 React Native를 사용하면서 JavaScript 개발자들의 앱 개발이 한결 더 쉬워졌습니다. React Native를 사용하면 JavaScript만으로 진정한 네이티브 앱을 빌드할 수 있습니다. 정말 대단하지 않나요? 우리는 미래에 살고 있습니다. 그럼 시작해봅시다.

설정

곧장 코드를 들여다보고 싶다면 최종 GitHub 리포지토리를 보세요. 그렇지 않은 분들을 위해 단계별로 살펴보도록 하겠습니다. React Native는 꽤나 쉽게 시작할 수 있지만, 반드시 알아두어야 할 점이 몇 가지 있습니다. React Native을 이미 설정했다면 이 섹션을 건너뛰어도 됩니다.

먼저 Homebrew가 필요한데, 쉽게 설치할 수 있습니다. 또한, Node.js 4.0 이상이 필요합니다. React Native 팀에서는 nvm을 사용하여 노드 버전을 관리할 것을 권장하며, 저도 마찬가지입니다.

이 도구들이 설치되고 나면 다음 명령을 실행하세요.

brew install watchman
npm install -g react-native-cli

그러면 드디어 CLI 명령으로 프로젝트를 시작할 수 있습니다.

react-native init GroceryApp # or whatever you want

즐겨 쓰는 편집기에서 메인 폴더를 여세요.

atom GroceryApp # if you’re into Atom

빌드와 실행

React Native 프로젝트를 빌드하려면 다음 명령을 실행하세요.

react-native run-ios

그러면 시뮬레이터가 시작되고 상용구가 표시된 화면이 나타날 것입니다.

Firebase 설정

React Native는 npm을 통해 종속성을 관리합니다. Firebase를 설치하려면 프로젝트의 루트에서 다음 명령을 실행하세요.

npm install firebase --save

index.ios.js를 열어 맨 위에 다음 행을 추가하세요.

import * as firebase from 'firebase';

그 다음, 구성 요소 바로 위에서 Firebase를 자신의 구성 값으로 초기화하세요.

// Initialize Firebase
const firebaseConfig = {
  apiKey: "<your-api-key>",
  authDomain: "<your-auth-domain>",
  databaseURL: "<your-database-url>",
  storageBucket: "<your-storage-bucket>",,
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

const란 무엇일까요? const는 값을 다시 할당 할 수 없는 읽기 전용 참조로서, Firebase의 값은 다시  재정의하지 않을 것이므로 const를 사용합니다. Node 4.0 이상을 사용 중이므로 이 키워드를 사용할 수 있습니다. 편집기에 이 점에 대해 무슨 내용이 표시되든, 그것은 거짓말입니다.

또한, 여기서는 React.createClass() 대신 클래스를 사용해 컴포넌트를 정의하겠습니다.

ES2015 (ES6) 컴포넌트

React는 컴포넌트를 기반으로 합니다. 즉, 앱은 루트 컴포넌트를 시작으로 여러개의 컴포넌트로 이루어진 트리 구조를 갖습니다. React 0.14부터 ES2015 클래스를 사용해서 React 컴포넌트를 정의할 수 있습니다.

index.ios.js에서 React.createClass() 대신 클래스를 사용하도록 컴포넌트를 변경하세요.

class GroceryApp extends Component {
  render() {
    return (
      <View style="{styles.container}">

      </View>
    );
  }
}

왜 React.createClass()보다는 ES2015 클래스를 사용하는 걸까요? 이 주제에 대해 상당한 논쟁이 있는데, 결국 취향의 차이로 압축됩니다.

이제 앱의 뼈대가 완성되었습니다. 이제 앱을 보기 좋게, 적어도 절반이라도 그럴듯하게 만들어 보겠습니다.

React Native에서의 스타일링

React Native는 스타일링을 위해 CSS가 아니라 JavaScript를 사용합니다. 좀 이상하게 들릴 수도 있겠지만, 사실은 크게 다르지 않습니다. 스타일 집합을 선언하려면 StyleSheet를 만듭니다.

var styles = StyleSheet.create({
  container: {
    backgroundColor: '#f2f2f2',
    flex: 1,
  },
});

StyleSheet에는 CSS와 같은 스타일을 나타내는 객체 집합이 들어 있습니다. 그 다음 이 스타일들을 React 컴포넌트에 적용합니다.

<View style="{styles.container}">
  I’m a container lol!
</View>

그러니 기껏 익혀놓은 CSS 기술이 무용지물이 될까 염려하지 마세요. 다만, React Native에서 쉽게 스타일링 작업을 하려면 CSS Flexbox를 배워야 합니다.

이제 여러분은 React 스타일링 전문가가 되셨으니 앱의 스타일을 선언해봅시다.

스타일 추가

styles.js라는 이름의 파일을 만들어 이 파일에서 다음 코드를 추가합니다. 이것이 우리가 앱에 사용할 스타일입니다.

여러분은 React Native가 CommonJS 모듈을 사용한다는 것을 알아차릴 것입니다. styles.js의 맨 아래에서 module.exports를 사용해 StyleSheet를 내보냅니다.

그러면 require()를 사용해서 이런 스타일을 가져올 수 있습니다. index.ios.js를 열어 다음 코드를 추가하세요.

const styles = require('./styles.js')

반드시 파일 맨 아래에 있는 styles 변수를 제거하세요.

이제 스타일이 갖춰졌습니다. 그럼, 앱의 구성 요소 구조를 살펴봅시다.

UI를 컴포넌트 계층 구조로 나누기

React의 사용에 관해 제가 읽은 것 중 최고의 조언은, UI를 컴포넌트 기반 계층 구조로 나누는 것부터 시작하라는 것이었습니다. 아래는 앱 구성 요소 계층 구조의 윤곽을 시각적으로 나타낸 것입니다.

1. GroceryApp(주황색): 앱 전체가 들어 있음
2. StatusBar(보라색): 뷰의 제목을 표시함
3. ListView(녹색): 식료품 목록을 표시함
4. ListItem(검은색): 목록에서 각 개별 항목을 표시함
5. ActionButton(파란색): 목록에 항목을 추가함

components라는 이름으로 폴더를 만드세요. 컴포넌트들은 각각 행당 폴더에 저장됩니다. GroceryApp은 index.ios.js에 들어 있으므로 예외입니다.

아래의 컴포넌트들을 각각 하나씩 components 폴더에 추가하세요.

ActionButton.js

'use strict';

import React, {Component} from 'react';
import ReactNative from 'react-native';
const styles = require('../styles.js')
const constants = styles.constants;
const { StyleSheet, Text, View, TouchableHighlight} = ReactNative;

class ActionButton extends Component {
  render() {
    return (
      <View style={styles.action}>
        <TouchableHighlight
          underlayColor={constants.actionColor}
          
          <Text style={styles.actionText}>{this.props.title}</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

module.exports = ActionButton;

ListItem.js

import React, {Component} from 'react';
import ReactNative from 'react-native';
const styles = require('../styles.js')
const { View, TouchableHighlight, Text } = ReactNative;

class ListItem extends Component {
  render() {
    return (
      <TouchableHighlight 
        <View style={styles.li}>
          <Text style={styles.liText}>{this.props.item.title}</Text>
        </View>
      </TouchableHighlight>
    );
  }
}

module.exports = ListItem;

StatusBar.js

'use strict';
import React, {Component} from 'react';
import ReactNative from 'react-native';
const styles = require('../styles.js')
const { StyleSheet, Text, View} = ReactNative;

class StatusBar extends Component {
  render() {
    return (
      <View>
        <View style={styles.statusbar}/>
        <View style={styles.navbar}>
          <Text style={styles.navbarTitle}>{this.props.title}</Text>
        </View>
      </View>
    );
  }
}

module.exports = StatusBar;

컴포넌트가 추가되었으므로, 이제 앱의 정적 버전을 만들어봅시다.

정적 모형

index.ios.js에서 페이지 상단에 다음과 같은 import를 추가하세요.

import React, {Component} from 'react';
import ReactNative from 'react-native';
import * as firebase from 'firebase';
const StatusBar = require('./components/StatusBar');
const ActionButton = require('./components/ActionButton');
const ListItem = require('./components/ListItem');
const styles = require('./styles.js');

이번에는 다음의 코드 조각을 추가하세요.

_renderItem(item) {
    return (
      <ListItem item="{item}"  ==""> {}} />
    );
  }

  render() {
    return (
      <View style="{styles.container}">

        <StatusBar title="Grocery List">

        <ListView datasource="{this.state.dataSource}" renderrow="{this._renderItem.bind(this)}" style="{styles.listview}/">

        <ActionButton title="Add"  ==""> {}} />

      </View>
    );
  }

render() 함수는 앱의 메인 뷰이고, _renderItem()은 목록에 있는 개별 항목을 설정합니다.

다음으로, 루트 구성 요소 GroceryApp을 위한 생성자를 만드세요.

constructor(props) {
  super(props);
  this.state = {
    dataSource: new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    })
  };
}

이 구성 요소에는 state라는 특별한 속성이 있는데, 이 속성이 애플리케이션의 데이터 흐름 전체를 관리합니다. 다음 섹션에서 더 자세히 살펴보겠습니다.

앱의 state는 ListView.DataSource인데, ListView 컴포넌트가 데이터를 효율적으로 처리할 수 있도록 돕습니다. 다음 단계는 이 데이터를 화면에 표시하는 것입니다.

각 컴포넌트마다 생명 주기가 있어서, 중요한 이벤트가 발생할 때 특정 함수가 호출됩니다. 컴포넌트가 처음으로 렌더링될 때는 componentDidMount()가 호출됩니다. 이때 앱의 초기 state를 설정해야 합니다.

componentDidMount() {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows([{ title: 'Pizza' }])
    })
  }

이제 앱을 빌드해서 실행하면 다음과 같은 정적 앱이 보일 것입니다.

State

State란 간단히 말하자면 변경할 수 있는 데이터입니다. 이 데이터가 애플리케이션의 "상태"를 대변하기 때문에 state라고 부릅니다. 이 데이터가 변경되면 애플리케이션이 다르게 보일 수 있고, 따라서 다른 "상태"에 놓이게 됩니다. State는 대개 해야 할 일 목록이나 활성화/비활성화된 버튼과 같은 것들입니다.

루트 컴포넌트가 state의 소유자 역할을 하게 됩니다. State 변경은 루트 컴포넌트에서 시작되는데, 이 루트 컴포넌트가 그 하위 컴포넌트 속성의 업데이트를 책임집니다.

컴포넌트 속성은 불변으로, 수정할 수 없습니다. 속성을 수정할 수 없다면, 도대체 속성은 어떻게 변경되는 걸까요? componentDidMount()에서 본 것처럼, setState()를 호출하여 애플리케이션을 다시 렌더링하면 됩니다.

setState()는 호출될 때마다 앱 전체를 다시 렌더링하려고 하기 때문에 특수한 함수입니다. 이는 만일 하위 속성이 마지막 state와 다를 경우 새 값으로 다시 렌더링된다는 뜻입니다.

이것이 React가 완벽하게 Firebase에 들어맞는 부분입니다. Firebase 데이터베이스는 다수의 기기에 걸쳐 애플리케이션 상태를 동기화하고, React는 애플리케이션 상태 변경을 효율적으로 다시 렌더링하기 때문입니다.

실시간 데이터베이스 리스너

생성자에서 속성으로서 실시간 데이터베이스 참조를 만듭니다.

this.itemsRef = firebaseApp.database().ref();

GroceryApp 구성 요소에 다음 함수를 추가합니다.

listenForItems(itemsRef) {
    itemsRef.on('value', (snap) => {

      // get children as an array
      var items = [];
      snap.forEach((child) => {
        items.push({
          title: child.val().title,
          _key: child.key
        });
      });

      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items)
      });

    });
  }

모든 식료품 품목의 값의 변경을 확인할 수 있는 리스너를 만듭니다. 품목이 추가되거나 변경되거나 제거될 때마다 Firebase SDK로부터 DataSnapshot으로 전체 결과 집합을 다시 받게 됩니다. DataSnapshot을 사용해서 모든 하위 구성 요소들을 반복헤서 배열에 식료품 목록 항목으로 추가하는 forEach(child)를 호출합니다. 이 .forEach 함수에서 _key 속성이 DataSnapshot의 .key() 값으로부터 생성된다는 점에 유의하세요. 이것은 나중에 데이터 작업을 한결 용이하게 할 수 있도록 해줍니다.

배열이 채워지면 dataSource.cloneWithRows(items)를 사용해 state에 대한 dataSource 속성을 업데이트합니다. cloneWithRows() 함수는 앞서 정의한 것과 같은 DataSource를 바탕으로 새 ListView.DataSource를 만들기 위한 편리한 메서드일 뿐입니다.

다음으로, 수신한 데이터를 componentDidMount()에 기록합니다.

componentDidMount() {
    this.listenForItems(this.itemsRef);
  }

앱을 빌드하여 실행하세요. 비어 있는 페이지가 나타나겠지만, Firebase App Dashboard나 아주 훌륭한 데이터 뷰어인 Vulcan을 사용해서 몇 가지 항목을 추가해 보세요. 그러면 실시간으로 업데이트되는 것이 보일 것입니다!

항목 추가

ActionButton을 탭하면 경고 상자가 나타나 사용자에게 항목을 입력하라고 합니다. 이 경고 상자를 만들기 위해 사용하는 것이 바로 AlertIOS API입니다.

_addItem() {
    AlertIOS.prompt(
      'Add New Item',
      null,
      [
        {
          text: 'Add',
          onPress: (text) => {
            this.itemsRef.push({ title: text })
          }
        },
      ],
      'plain-text'
    );
  }

이 AlertIOS API는 사용자에게 표시되는 경고 메시지를 만들 때 사용하기 좋습니다.  처음 두 개의 매개변수는 간단히 경고 상자의 제목과 선택적 메시지일 뿐입니다. 세 번재 매개변수가 이 API에서 가장 중요한 부분입니다. 여기서 사용자들이 이용할 수 있는 버튼을 지정하는 배열을 만듭니다. 각 버튼마다 text, style, onPress 콜백 함수가 있을 수 있습니다. 마지막 매개변수는 입력 유형을 나타내는 것으로, plain-text 또는 secure-text입니다.

항목을 추가하려면 버튼 배열에서 객체를 새로 만듭니다. 이 객체는 onPress 콜백에 항목을 추가할 수 있습니다. 이 콜백은 사용자가 입력한 텍스트를 반환합니다. 이 텍스트를 사용하여 새 하위 항목을 /items 위치로 .push()합니다.

다음으로, ActionButton의 onPress 속성을 할당하기 위해 render()를 업데이트해야 합니다.

<ActionButton title="Add" >
</ActionButton>

코드를 빌드한 후 실행합니다. 추가를 탭하고 항목 제목을 입력하면 목록에서 업데이트되는 것을 볼 수 있을 것입니다.

훌륭하긴 하지만, 항목을 완성할 수 없는 식료품 목록이라면 무슨 소용일까요?

항목 완성

사용자는 항목을 탭해서 경고 상자를 열어 항목을 완성할 수 있습니다. "Complete" 옵션을 누르면 목록에서 해당 항목을 삭제할 수 있습니다.

다음과 같이 _renderItem(item)을 수정하여 onPress 콜백이 포함되도록 하세요.

_renderItem(item) {

    const  => {
      AlertIOS.prompt(
        'Complete',
        null,
        [
          {text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove()},
          {text: 'Cancel', onPress: (text) => console.log('Cancel')}
        ],
        'default'
      );
    };

    return (
      <ListItem item="{item}" >
    );
  }

항목을 "완성"하려면 Firebase 데이터베이스에서 해당 항목을 삭제해야 합니다. .child(key)를 사용하면 목록에서 특정 항목을 드릴다운할 수 있습니다. onPress 콜백은 클로저이므로 item 매개변수가 포함된 외부 환경에 접근할 수 있습니다. 이것이 바로 _key 속성이 유용하게 쓰이는 부분입니다.

"Complete" 옵션을 탭하면 item에 _key 속성을 사용해 특정 하위 항목을 찾을 수 있습니다. 그러면 .remove()를 호출하여 Firebase 데이터베이스에서 그 항목을 삭제할 수 있습니다.

다시 한 번 빌드해서 실행하세요. 아무 ListItem이나 탭하고 "Complete"를 탭하면 그 항목이 목록에서 제거되어 있을 것입니다.

코드를 받고 별점을 주세요

Github에서 완성된 앱을 확인해 보세요. 그리고 너그러운 마음으로 높은 별점을 주시면 고맙겠습니다. 주저하지 마시고 이 리포지토리를 복사해서 마음껏 실험해보세요. 원하시면 PR로 보내주셔도 됩니다.

아직도 뭔가 잘 안풀리나요?

문제가 발생하면 기탄없이 Stackoverflow에서 질문하세요. 저희는 Firebase 태그를 면밀히 모니터링합니다. 아니면 저희 커뮤니티 Slack Team에 간단히 질문을 남겨주셔도 됩니다.

여러분의 지속적인 피드백에 힘입어 이제 Firebase JavaScript SDK가  버전 3.1.0으로 업데이트 되었습니다. 이제 React Native를 잘 지원합니다. 그리고 그게 전부가 아닙니다. 새로운 버전에는 인증 없이 Node.js SDK에 접근할 수 있는 기능도 포함되는데, 덕분에, 서비스 계정이 없어도 앱을 초기화할 수 있습니다. 이 모든 것들이 무엇을 의미할까요? 자세히 살펴보도록 하죠.

React Native 지원

Google I/O에서 Firebase 3.x SDK가 릴리스되었을 때, 이 SDK의 인증 부분이 더 이상 React Native와 호환되지 않았습니다. 3.1.0 릴리스는 브라우저별 API의 사용법을 바꾸어 Firebase가 다시 한 번 React Native와 함께 작동할 수 있게 해줍니다. 그 외에도 이 릴리스에서는 앱이 다시 시작되면서 인증 상태가 계속 지속되는 문제를 비롯해, React Native에서 Firebase 사용할 때 발생하는 고질적인 문제점이 수정되었습니다. 따라서 Firebase 프로젝트를 다른 모든 JavaScript 앱에서처럼 초기화 하면 됩니다.

import ReactNative from "react-native";
import firebase from "firebase";
// Initialize Firebase
const firebaseConfig = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  storageBucket: "<YOUR-STORAGE-BUCKET>"
};
firebase.initializeApp(firebaseConfig);

3.1.0 SDK에서 업데이트가 이루어지면서, 이제 거의 모든 JavaScript SDK의 기능이 React Native에서도 원활하게 작동합니다. 그러나 여기에는 두 가지 주의할 점이 있습니다.

• signInWithPopup(), signInWithRedirect(), linkWithPopup(), linkWithRedirect() 등의 "숱한" 인증 방법이 React Native(또는 Cordova)에서는 동작하지 않습니다. 그래도 여전히 signInWithCredential()을 여러분이 선택한 프로바이더의 OAuth 토큰과 함께 사용하여 로그인하거나 페더레이션 프로바이더와 연결할 수 있습니다.
• React Native는 File 및 Blob 유형을 지원하지 않으므로, 이 환경에서는 Firebase 저장소 업로드가 되지 않을 것입니다. 하지만 파일 다운로드는 작동됩니다.

인증 없이 접근

3.1.0 릴리스의 또 한 가지 특징은 인증 없이 Node.js SDK에 접근할 수 있다는 것입니다. 이전에는 Node.js SDK를 사용하려면 서비스 계정이 있어야 했습니다. 따라서 Firebase 콘솔에서 서비스 계정 키를 만들어 서버에 다운로드하고, 코드에서 그 파일을 참조하여 인증해야 했습니다. 토큰을 만들고 확인하는 데는 여전히 서비스 계정이 필요하지만, 모든 Node.js 사용 사례에 필수적인 것은 아닙니다. 최신 SDK의 사용으로 이 요건을 완화했으므로, 이제 데이터베이스 URL만으로 앱을 초기화할 수 있게 되었습니다.

import firebase from "firebase";
firebase.initializeApp({
  databaseURL: "<YOUR-DATABASE-URL>",
});

서비스 계정이 없이는 다른 인증되지 않은 클라이언트와 마찬가지로 실시간 데이터베이스에 대한 접근이 제한됩니다.

여러분의 의견을 들려주십시오

그 동안 기다려 주시고 저희 Slack 팀에서, Google Group에서, 그리고 그 밖의 지원 채널을 통해 의견을 들려주신 모든 분들께 감사드립니다. 새 SDK에서 어떤 문제에 부딪치는 경우에는, 저희에게 연락해주세요. React Native와 Firebase가 정말 기대되나요? 아래에 코멘트를 남겨주세요.