Cloud Computing On Demand

개발자의 컴퓨터는 항상 좋은 퍼포먼스를 내는 장비여야 합니다. 개발 도구도 나날이 무거워지고 언어나 런타임시에 사용하는 가상환경도 많은 리소스를 요구하기 때문입니다. 다만 좋은 장비를 새로 지급받거나 구매해서 쓰게되면 손에 착착~ 감기게 맞추어둔 개발 환경을 동일하게 맞추는 스트레스가 발생하기 마련입니다.

제가 주력 개발도구로 사용하고 있는 것은 비주얼 스튜디오 코드 Visual Studio Code 입니다. 상용 개발도구가 아닌 부문에서는 이미 압도적인 사용 점유율을 보이고 있는데요, 워낙 이사람, 저사람, 이 글, 저 글을 통해 얻은 정보들로 환경을 셋업해둔 탓에 새로 받은 장비에 설치하기가 겁나더군요.

하지만, 우리의 사랑 마이크로소프트는 비주얼 스튜디오 코드의 개발 환경을 동일하게 맞추어주는 도구를 내장해 두었습니다. 이름하여 <Setting Sync> 기능입니다. 이 기능은 원격지에 비주얼 스튜디오 코드의 환경 정보를 저장하고, 동일한 계정으로 로그인하는 비주얼 스튜디오 코드들에 대하여 환경 정보를 동기화 하도록 합니다.

1단계 - 원본 컴퓨터에서의 작업

당연하겠지만 우리가 제일 먼저 해야 할일은 원본 컴퓨터 혹은 환경 셋업이 되어 있는 컴퓨터에서 개발 환경 정보를 <Setting Sync> 기능을 통해 원격지에 저장하는 것입니다. 비주얼 스튜디오 코드를 실행하고 아래의 단계를 따라하면 손쉽게 설정할 수 있습니다. 

<Settings Sync> 기능 활성화하기

우선 <Settings Sync> 기능을 활성화 해보겠습니다. 비주얼 스튜디오 코드의 좌측 하단의 프로필 이미지를 누르면 <Turn on Settings Sync...> 메뉴가 있습니다. 선택해보겠습니다.

잘 동작하는 기능입니다만 아직 프리뷰 Preview 단계이기 때문에 간단한 동의 절차를 거쳐야 합니다. 문서를 읽어 보시거나 <Turn On> 버튼을 눌러 동기화 기능을 활성화 합니다. 

<Turn On> 을 누르면 <Settings Sync> 커맨드 팝업이 뜹니다. 동기화할 항목을 선택할 수 있으며 저는 완전히 동일한 환경을 만들기 위해 모든 항목을 선택된 상태 그대로 두었습니다. 로그인 되어 있지 않기 때문에 <Sign in & Turn on>를 눌러 로그인을 하고 동기화 기능을 활성화 하겠습니다. 

사용할 수 있는 로그인 방법은 두가지 입니다. 마이크로소프트 계정이나 깃헙 계정을 이용할 수 있습니다. 개발자라면 깃헙 계정을 대부분 가지고 계실테니 저도 깃헙 계정으로 해보겠습니다. 깃헙에서 종종 보셨을 권한 승인 절차를 거치면 연동이 완료됩니다. 

승인 절차가 완료되면 비주얼 스튜디오 코드는 선택된 환경 설정에 대한 동기화 작업을 시작합니다. 동기화가 완료되면 비주얼 스튜디오 코드 우측 하단에 알림이 표시되며 <Show log> 링크를 눌러 상세한 동기화 내용을 확인할 수 있습니다. 

최초 한번은 이렇게 동기화가 되고 이후 동기화에 대한 설정을 하려면 Mac 기준으로 <shift>+<command>+<p>를 눌러 커맨드 팔레트를 열어 <Settings Sync> 기능을 열어야 합니다. 아래 화면에서 <Show Settings>를 눌러보겠습니다. 

사이드바가 열리며 현재 동기화 된 설정의 내용을 확인할 수 있습니다. 이제 원래의 컴퓨터에서 해야 하는 작업은 마무리가 되었습니다. 항상 동기화가 되기 때문에 언제든 원래 컴퓨터에서 환경 설정을 바꾸면 원격지에 동기화되어 다른 컴퓨터에도 변경된 내용이 반영되게 됩니다. 

2단계 - 새로운 컴퓨터에서의 작업

새로운 컴퓨터에서의 작업도 크게 다르지 않습니다. 비주얼 스튜디오 코드를 실행하고 깃헙 계정으로 로그인하여 동기화된 환경 설정을 가져오도록 해보겠습니다. 원본 컴퓨터에서 했던 작업과 마찬가지로 프로필 이미지를 눌러 <Turn on Settings Sync...> 메뉴를 실행합니다.

꼼꼼하고 친절한 마이크로소프트는 이번에도 기능이 프리뷰라는 것을 알려주고 정말로 켤 것인지를 한 번 더 확인하게 합니다. 우리는 과감하게 <Turn On>을 눌러 동기화 작업을 하겠습니다. 네, 모든 것이 완전히 동일하니 따로 설명하지 않고 스크린 샷으로 대치하겠습니다. 

계정으로 로그인 하고 동기화가 완료되면 원본 컴퓨터에서와 마찬가지로 <shift>+<command>+<p>를 눌러 <Settings Sync> 기능을 열어봅니다. 재미있는 것은 커맨드 팔레트에서 사용했던 히스토리까지 넘어와 있는게 보입니다. 바로 설치한 비주얼 스튜디오 코드인데도 말이죠!

<Settings Sync> 내용을 보면 각 항목이 여러개 나와 있는 것이 보입니다. 같은 항목에 대하여 여러번 동기화가 된 경우 히스토리 성으로 그 내역이 동기화 되고 리스트화 되어 보이는 것으로 추정됩니다 -_-;; (네, 프리뷰입니다 여러분! 오류일수도 있지만 저는 마이크로소프트를 믿습니다!!) 

왼쪽 하단의 <Synced Machines> 목록을 보면 원래의 컴퓨터와 새로운 컴퓨터가 목록에 보입니다. 알아보기 힘드니 눈에 익숙하도록 이름을 바꾸어 두었습니다. 

이렇게 새로운 장비에 비주얼 스튜디오 코드를 설치하고 기존의 개발 환경을 그대로 옮겨와 봤습니다. 생각보다 쉬운 절차이고 앞으로도 유용하게 사용할 수 있을 것 같은 느낌입니다. 어렵게 한 땀, 한 땀 환경 설정을 옮기지 마시고 쉽게 동기화해서 셋업 시간을 아껴보시기 바랍니다! 보다 자세한 내용은 아래의 공식 문서를 참고하세요!

code.visualstudio.com/docs/editor/settings-sync

지난 포스팅에서 우리는 Firestore 를 Flutter 프로젝트에서 사용하기 위하여 패키지를 추가하는 방법을 살펴보았습니다. Firestore 로부터 데이터를 받아오기 위하여 StreamBuilder 위젯을 통해 Firestore 의 스냅샷을 전달받는 코드를 추가했습니다. 전달된 데이터를 ListTile 위젯에 넣기 위해 DocumentSnapshot 타입을 이용했습니다.

Firestore 를 연동하여 UI 에 저장된 데이터를 표현하는 코드를 모두 추가했으니 이제 실제로 데이터를 넣고 빼는 과정에 필요한 코드를 만들어 보겠습니다. To-Do 앱이기 때문에 1) 할 일 추가, 2) 한 일 삭제, 3) 한 일로 기록 정도의 세가지 동작이 필요할 것 같습니다. 각각 _addTodo, _deleteTodo, _toggleTodo 메서드로 정의하여 _TodoListPageState 클래스에 넣어보겠습니다. (이 예제는 모두 <오준석의 플러터 생존코딩> 에 수록된 예제를 기반으로 합니다)

추가 메서드 만들기

먼저 UI 로 입력받은 할 일을 Firestore 에 등록하는 추가 메서드를 살펴보겠습니다. 삭제나 토글 메서드는 Firestore 에 이미 등록된 데이터를 다루는 메서드이고 추가 메서드는 새로운 데이터를 등록하는 메서드이기 때문에 메서드의 파라메터가 조금 다릅니다. (라고 적지만 그냥 나누어 봤습니다)

  void _addTodo(Todo todo) {
    // setState(() {
    //   _items.add(todo);
    //   _todoController.text = '';
    // });
    Firestore.instance
        .collection('todo')
        .add({'title': todo.title, 'isDone': todo.isDone});
    _todoController.text = '';
  }
  

Firestore 를 이용할 때와 이용하지 않고 State 만 이용할 때의 차이를 보기 위해 setState 를 호출하는 코드를 주석처리만 해보았습니다. 이미 선언한 Firestore 전역 객체가 있기 때문에 코드에서 보이는 것처럼 데이터를 쓸 콜렉션과 필드 값을 지정하는 것이 코드의 전부입니다. UI 의 위젯에 입력한 title 과 isDone 값을 할당하는 것으로 충분합니다. 

삭제, 토글 메서드 만들기

삭제와 토글 메서드는 추가 메서드와는 달리 메서드의 입력 파라메터로 앞서 이야기 되었던 DocumentSnapshot 타입을 받게 됩니다. 삭제하거나 토글해야 하는 데이터가 Firestore 의 데이터이기 때문입니다. 실제 삭제하거나 업데이트(토글) 할 데이터의 고유한 ID 를 알아야 합니다. Firestore 는 NoSQL DB 이기 때문에 데이터 Row 를 Document 라고 부릅니다. 흔히 NoSQL 을 도큐먼트 DB 라고도 부르는 것을 아마 들어보셨을 겁니다. 

  void _deleteTodo(DocumentSnapshot doc) {
    // setState(() {
    //   _items.remove(todo);
    // });
    Firestore.instance.collection('todo').document(doc.documentID).delete();
  }

  void _toggleTodo(DocumentSnapshot doc) {
    // Parameter : 'todo' variable of 'Todo' type
    // setState(() {
    //   todo.isDone = !todo.isDone;
    // });
    Firestore.instance
        .collection('todo')
        .document(doc.documentID)
        .updateData({'isDone': !doc['isDone']});
  }

이번에도 Firestore 객체가 제공하는 delete(), updateData() 메서드를 이용했습니다. 코드 자체는 무척 간단하죠? 주의해야 할 것은 Firestore 는 이러한 트랜잭션 하나하나를 카운트하고 무료 구간을 넘어가면 과금이 시작됩니다. 큰 규모의 데이터를 가지고 코드를 만들어 보고 있다면 트랜잭션 수가 얼마나 카운트 되었는지 중간중간 체크해 보시는 것이 좋습니다. 

시뮬레이터를 이용하여
실제 앱으로 확인해보기

이제 코드가 준비되었습니다. Xcode 가 제공하는 시뮬레이터를 이용하여 지금까지 만든 코드를 실행해보고 실제로 Firestore 에 데이터가 잘 적재되는지를 살펴보겠습니다. VS Code 에서 F5 를 누르고 <Start iOS Simulator> 를 선택하여 코드를 실행하면 됩니다. 참 쉽죠? 

시뮬레이터의 구동은 늘 시간이 걸리죠. 하지만 무사히 구동이 되었고 미리 등록해 둔 4개의 도큐먼트를 잘 가지고 와서 화면에 리스트로 출력을 해주었습니다. 가만히 보니 버튼 이름에 오타가 들어갔군요? 오타를 코드에서 수정하고 저장하면 Hot Reload 되어 수정된 내용이 바로 반영이 됩니다. Vue 로 Frontend 개발하는 느낌이라 무척 편리하네요!

이번에는 할일을 추가하고 Firestore 에 업데이트가 잘 되는지 확인을 해볼까요? 

UI 에서 입력한 새로운 데이터가 문제 없이 Firestore 에도 업데이트 된 것을 확인할 수 있었습니다. 이렇게 세번의 포스팅을 통해 Mac 환경에서 VS Code 를 이용하여 iOS 시뮬레이터에 배포하여 시험해보는 과정까지를 살펴보았습니다. 이유는 잘 모르겠지만 Flutter 와 관련된 책들이 대부분 안드로이드 환경에 대한 이야기가 중심이 되어 있어 iOS 로 배포해보고싶다는 생각에서 작업을 진행해 보았습니다.

이제 Flutter 를 이용해서 실제로 써먹을만한 앱을 기획해서 마켓에 배포해 볼 시간입니다. 100세 시대, 지속적으로 벌이를 할 수 있는 방법이 필요한 시대입니다! 강력 추천해 드리는 <오준석의 플러터 생존 코딩>은 아래의 링크를 참고하시기 바랍니다! 그 사이에 에이콘에서 번역서가 한 권 더 나온거 같으니 한 번 읽어봐야겠습니다!

본 포스팅은 제휴마케팅을 통해 소정의 수수료를 지급받을 수 있습니다

먹고 살기 바쁘다 보니 첫 포스팅을 올리고 두달여만에 후속 포스팅을 올립니다. 그 사이에 생성해 둔 Firebase 의 Firestore 가 보안 정책 만료가 되었네요. 스스로 적어둔 지난번 포스팅을 다시 참고해 가면서 Firebase 에 Firestore NoSQL DB 를 사용 가능하도록 변경하고 글을 시작하도록 하겠습니다. 지난번 글은 아래의 링크입니다! (블로그가 역시 이렇게 좋습니다 ㅎㅎ)

Firestore 정책 업데이트 하기 

Firebase 의 Firestore 는 최초 생성시 30일간 인증 없이 접근할 수 있는 Rule을 제공합니다. Firestore 콘솔의 <Rules> 탭에서 확인할 수 있습니다. 아마도 8월 14일에 DB 를 생성했고 그 시점으로부터 +1m 시점이 만료 시점으로 잡힌 것 같네요. 불필요한 비용 발생을 막기 위해서 들어가는 코드라고 생각하면 괜찮다는 생각이 듭니다.

물론 실제로 상용 서비스에서 Firestore 를 사용하는 경우에는 날짜 단위의 정책이 아니라 인증을 받은 경우 액세스가 가능하도록 변경하는 것이 좋을 것 같습니다. 자세한 내용은 Firestore 의 Rule 관련한 가이드를 살펴보시기 바랍니다! (이 글이 Firestore 를 위한 글은 아니라서라고 변명해 봅니다)

Firestore 사용을 위한 패키지 Import

지난 포스팅을 잘 따라오셨다면 Firestore 사용을 위한 준비가 끝났습니다. main.dart 파일을 열어서 추가한 Firestore 패키지를 코드에서 사용할 수 있도록 해보겠습니다. dart_todo 앱의 전체 코드 구조는 아래와 같습니다. 

2행에 추가된 것처럼 cloud_firestore.dart 를 import 해주셔야 합니다. 간단한 프로젝트이기 때문에 코드의 구조도 간단합니다. Firestore 를 다루는 코드는 당연히 가장 마지막에 있는 _TodoListPageState 클래스에 기술되어 있습니다. 8행에서 시작되는 Todo 클래스는 Firestore 에 저장할 객체를 들고 있을 코드상의 객체를 위한 클래스 입니다. Firestore 에 생성한 컬럼과 동일한 구조, 자료타입으로 만들어 두었습니다. 

StatelessWidget 으로 선언된 MyApp 은 기본 스캐폴딩을 통해 생성된 코드로 타이틀의 설정, 진입점을 TodoListPage 클래스로 지정해 준 정도의 변경사항만 가지고 있습니다. 코드는 아래와 같습니다

class Todo {
  bool isDone = false;
  String title;

  Todo(this.title, {this.isDone = false});
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '할 일 관리',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: TodoListPage(),
    );
  }
}

_TodoListPageState 클래스 살펴보기

Todo 앱은 ListTile 위젯으로 할일 하나하나를 표현하고 ListTile 은 ListView 의 Child 가 됩니다. ListView 는 다시 Expanded 위젯으로 감싸여 화면에 보여지게 됩니다. Expanded 위젯은 다시 StreamBuilder 위젯으로 감싸 스트림으로 Firestore 의 변경사항과 UI 의 변경이 이루어지도록 코드를 만들었습니다 (네, 제가 한건 아니고 <오준석의 플러터 생존코딩> 책의 내용입니다!)

위젯을 빌드하는 코드를 살펴보겠습니다. 위젯을 또 위젯이 감싸고 또 감싸고... 하는 연속이다 보니 복잡해 보이네요. UI 코드 보다는 StreamBuilder 위젯의 내용을 중점적으로 보시면 됩니다. 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('남은 할 일'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: TextField(controller: _todoController),
                ),
                RaisedButton(
                  child: Text('추 가'),
                  onPressed: () => _addTodo(Todo(_todoController.text)),
                ),
              ],
            ),
            StreamBuilder<QuerySnapshot>(
              stream: Firestore.instance.collection('todo').snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return CircularProgressIndicator();
                }

                final documents = snapshot.data.documents;
                return Expanded(
                  child: ListView(
                    children: documents
                        .map((todo) => _buildItemWidget(todo))
                        .toList(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

StreamBuilder 위젯의 가장 안쪽 코드에 _buildItemWidget 위젯은 할 일 하나하나를 ListTile 위젯으로 리턴하는게 목표인 위젯입니다. 유의할 점은 Firestore 에서 가져온 NoSQL Document 는 DocumentSnapshot 타입을 이용해야 한다는 점입니다. 코드 한번 보시고 가겠습니다. 

  Widget _buildItemWidget(DocumentSnapshot doc) {
    final todo = Todo(doc['title'], isDone: doc['isDone']);
    return ListTile(
      onTap: () => _toggleTodo(doc),
      title: Text(
        todo.title,
        style: todo.isDone
            ? TextStyle(
                decoration: TextDecoration.lineThrough,
                fontStyle: FontStyle.italic,
              )
            : null,
      ),
      trailing: IconButton(
          icon: Icon(Icons.delete_forever), onPressed: () => _deleteTodo(doc)),
    );
  }

네, 이렇게 UI 에서 Firestore 에 있는 정보를 연동할 준비가 되었습니다. 중간 중간에 보이는 _addTodo(doc), _deleteTodo(doc) 그리고 _toggleTodo(doc) 가 실제 비즈니스로직(?)이 들어간 메서드들이 되겠습니다. 절단 신공을 이용하여 이 세가지 메서드는 다음 포스팅에서 확인해 보도록 하겠습니다!

본 포스팅은 제휴마케팅을 통해 소정의 수수료를 지급 받을 수 있습니다

Flutter 를 이용하면서 Firebase 를 이용하는 방법을 살펴보겠습니다. 둘 다 구글에서 만든 것이라 그런지 연동하는 것이 어렵지 않습니다. 다만 손이 좀 가게되고 처음 다루는 경우에 조금 헤멜 수 있습니다. 참고로, iOS 용으로 프로젝트를 구성하는 방법을 다루고 있습니다. Android OS 는 별도로 설명해 보도록 하겠습니다. 순서는 아래와 같습니다. 

• Firebase / Firebase 에 새로운 Project 등록하기
• Project Code / Firebase SDK 를 개발중인 Project Code 에 추가하기
• Firebase / Cloud Firestore 에 새로운 Database 생성
• Project Code / Cloud Firestore 의존성을 Project Code 에 추가하기 

Firebase 에 새로운 Project 등록하기

Firebase 는 구글이 제공하는 PaaS 플랫폼입니다. 모바일 앱이나 웹 어플리케이션 등을 개발할 때 필요한 다양한 구성요소와 분석도구를 플랫폼으로 제공하고 있어 별도의 환경을 구성하는 어려움과 번거로움을 줄여주기 때문에 (돈만 잘 내면) 무척 편리합니다.  http://firebase.google.com/로 접근하여 구글 계정으로 로그인한 후 <Create a project> 로 새로운 프로젝트를 생성해 보겠습니다. 

Firebase 는 Project 를 만드는 것에서 부터 시작됩니다. Project 별로 서비스 구성요소나 분석도구 등을 사용할지 결정하고 이용하는 구조입니다. 간단하게 식별할 수 있는 Project 이름과 Project ID 를 취향껏 지정하도록 하겠습니다. 

구글 애널리틱스는 사용자들의 행동 정보를 수집하는데 무척 유용한 도구입니다. 요즘은 웹 어플리케이션 뿐만 아니라 모바일 앱에서도 구글 애널리틱스를 이용하여 사용자 정보를 수집하는 경우가 많습니다. 이 포스팅은 Firebase 를 사용하기 위한 기본적인 설정 방법과 Cloud Firestore 의 셋업에 촛점을 맞추고 있으니 Enable 하지 않고 프로젝트를 생성해 보겠습니다. 

어이쿠! 클릭 몇 번하고 키보드로 몇 가지를 입력하니 금방 프로젝트가 생성되었습니다. 

Firebase SDK 를 개발중인 Project Code 에 추가하기

프로젝트가 생성되고 <Continue> 버튼을 누르면 프로젝트의 첫 화면으로 이동하게 됩니다. 이제 우리가 할 일은 Firebase 공통 SDK 의 설치를 통해 앱 또는 웹 어플리케이션이 Firebase 를 사용할 수 있는 기본 환경을 갖도록 하는 것입니다. 이후 어떤 기능, 제품을 쓰느냐에 따라 라이브러리 의존성 등 필요한 셋팅을 해주면 됩니다. 이 포스팅에서는 <iOS> 환경에 대해 이야기 하고 있기 떄문에 화면의 동그란 아이콘들 중 <iOS> 라고 적힌 버튼을 눌러보도록 하겠습니다. 

앱에서 Firebase 를 사용하기 위한 첫번째 절차는 사용할 앱의 정보를 등록하는 것입니다. iOS Bundle ID 와 닉네임, 앱스토어 ID 등의 정보를 입력해야 합니다. VS Code 를 이용해서 Flutter 를 사용하는 중인데요 VS Code 의 Explorer 에서 Shift + Command + F 를 눌러 PRODUCT_BUNDLE_IDENTIFIER 를 검색하면 Flutter 가 미리 만들어 준 iOS Bundle ID 를 찾을 수 있습니다. ID 값을 복사하여 Firebase 의 등록 화면에 입력해 줍니다. 

Bundle ID 를 넣고 나면 이제 Firebase SDK Config 파일을 다운로드 받을 수 있는 화면으로 이동합니다. Download 버튼을 눌러 GoogleService-Info.plist 파일을 다운로드 받아 Project Code 에 추가해 주어야 합니다. 추가 작업을 위해서는 Xcode 가 필요하니 잠시 Xcode 를 실행해서 VS Code 에서 만들고 있는 Flutter 프로젝트를 열도록 하겠습니다.

Xcode 에서 Runner/Runner 위치에 GoogleService-Info.plist 파일을 추가해 줍니다. 이유는 확인해 보지 못했습니다만 VS Code 에서 해당 파일을 Runner 하위에 넣어주었을 때는 프로젝트 빌드후 실행시 앱이 실행되지 못하고 크래시 되는 문제가 발생했습니다.

Xcode 에서 파일을 추가해 준 경우 동일한 위치에 파일이 생성되긴 하는데... 혹시 이유를 아시는 분은 댓글 부탁드립니다! 여튼, Xcode 에서 파일을 잘 추가했다면 저장후 종료하고 VS Code 로 돌아오면 되겠습니다. 

Firebase 를 위한 환경 설정 파일을 추가했으니 SDK 가 잘 설치되도록 하기 위한 CocoaPod 관련한 확인을 해봐야합니다. Firebase 는 CocoaPod 를 이용해서 의존성 관리를 하고 있기 때문에 CocoaPod 가 잘 동작하고 있어야 합니다. VS Code 에서 Flutter 프로젝트를 생성한 경우 이미 .xcworkspace 파일이 추가되어 있습니다. 따라서 아래 내용은 참고만 하셔도 무방합니다. 

아래의 내용은 Swift 나 Ojective-C 를 이용하는 경우 Firebase 를 초기화 하는 코드의 예제입니다. 우리는 Flutter 를 쓰고 있기 때문에 아래의 코드 역시 무시하고 넘어가셔도 무방합니다. Next 버튼 고고씽!

마지막으로 iOS 에서 Firebase 를 사용하기 위한 가이드 문서 안내가 나옵니다. 시간이 되시는 분들은 한번 문서를 열람해 보셔도 좋습니다. 추후 필요할 때 내용을 찾아보는 정도로 충분하니, 가이드가 존재하는 구나 정도를 인지하고 넘어가도 좋습니다. 

Cloud Firestore 에 새로운 Database 생성

이제 Firebase 사용을 위한 기본적인 준비가 끝났습니다. 이 포스팅에서는 Firebase 가 제공하는 Cloud Firestore 를 쓰기 위해 해주어야 하는 작업을 이야기하고 있기 때문에 Firestore 에 Database 를 생성하는 과정도 살펴보도록 하겠습니다. 앱의 기본적인 설정이 끝났다면 아래와 같은 화면에 도착했을겁니다. 우측의 오렌지색 <Cloud Firestore> 이미지를 눌러 DB 생성을 해보겠습니다.

네, 거침 없이 <Create database> 버튼을 누르겠습니다. 이제 거의 고지에 도달했으니 조금만 더 힘내서 가보겠습니다. 영차, 영차!

Cloud Firestore 는 Production 과 Test 모드를 제공합니다. 연습을 해볼때는 Test 모드로도 충분하겠습니다만 실전에서는 Production 모드를 이용해야겠죠? Test 모드를 선택하고 Next 버튼을 누릅니다. 

Firebase 도 여느 클라우드 서비스와 마찬가지로 여러 리전 Region 을 운영하고 있습니다. 실제 서비스에서는 응답 속도를 감안해야 하기 때문에 주요 사용자가 있는 국가, 장소를 감안하여 리전을 선택해야 하지만 지금은 어떤 것을 선택해도 크게 문제는 없으니... 임의로 선택하시고 Done 버튼을 누르겠습니다. 

Cloud Firestore 는 NoSQL DB 입니다. 다양한 형태의 문서 Document 들의 집합을 취급하게 되고 각각의 Document 집합은 Collection 이라 부르고 있습니다. Collection 을 하나 만들고 샘플 데이터를 넣어보도록 하겠습니다. 

Collection 의 이름을 임의로 지정하고 Next 버튼을 누릅니다. Unique Key 로 사용할 Document ID 는 자동으로 생성할 수 있습니다. Auto-ID 버튼을 활용하시기 바랍니다. NoSQL 이기 때문에 정해진 Scheme 이 없습니다. 원하는 필드를 정의하고 샘플 데이터를 자유롭게 넣어보시기 바랍니다. 

Cloud Firestore 의존성을 Project Code 에 추가하기 

이제 대장정의 끝에 <거의> 도달했습니다. 우리는 지금까지 Firebase 사용을 위한 설정 파일을 생성, 프로젝트 코드에 추가했고 Cloud Firestore DB 를 생성해 보았습니다. Firestore 를 사용하기 위해서 Flutter 프로젝트의 pubspec.yaml 파일에 의존성 정보를 추가해 주어야 합니다. 

Firebase 는 개별 제품, 기능 별로 별도의 패키지를 사용합니다. Cloud Firestore 는 cloud_firestore 라는 이름의 패키지를 추가해야 합니다. Flutter 프로젝트 루트의 pubspec.yaml 에서 dependencies 노드를 찾아 cloud_firestore 를 추가하면 이제 작업 끝입니다. 

다음 포스팅에서는 이렇게 추가된 Cloud Firestore 를 이용하는 방법을 정리해 보도록 하겠습니다. 참고로 다음 포스팅에서 사용할 코드는 오준석님이 쓰신 <오준석의 플러터 생존코딩> 의 Todo 앱 입니다. 해당 책에서는 Android OS 에서 연동 방법만 나와 있어서 조금 아쉬웠는데 이렇게 포스팅으로 정리해 보니 그렇게 어렵지 않다는 느낌입니다 :-) 플러터 입문자를 위한 훌륭한 기본서이니 한번 구매해서 읽어보시죠!

본 포스팅은 제휴마케팅을 통해 소정의 수수료를 지급받을 수 있습니다