20230330

#1.0 React + Firebase Setup (09:12)

강의는 firebase 구버전을 기준으로 되어있다고 한다.

compat이 뭔지는 모르겠지만, 호환 버전 사용을 권장한다고...

 

npx create-react-app nwitter

근데 아마 react 버전도 안맞을것 같은데

 

firebase가 설치가 안되어서 어려움을 겪고 있었는데, 아무래도 c드라이브에서 실행해야 하는 것이였던 모양이다.

C드라이브에서 하니까 진행이 되네?

원래는 아래 같은 오류가 떳었다.

~ Let's make sure your Firebase CLI is ready...
undefined:1


SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at ChildProcess.<anonymous> (C:\snapshot\firepit\welcome.js:115:27)

########################################################################################################################

     Welcome to...
   ######## #### ########  ######## ########     ###     ######  ########  ##
   ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##        ##
   ######    ##  ########  ######   ########  #########  ######  ######    ##
   ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
   ##       #### ##     ## ######## ########  ##     ##  ######  ########  ##


########################################################################################################################

~ Let's make sure your Firebase CLI is ready...
~ Looks like your CLI needs to be set up.

~ This may take a moment
+ Alright, your CLI is set up!

~ Looks like you're not authenticated. Let's log in!
i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=651615477&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

+  Success! Logged in as newchobo00@gmail.com

+ You can now use the 'firebase' or 'npm' commands!
~ For more help see https://firebase.google.com/docs/cli/

 

환경변수 추가하니까 명령어도 먹는것 같다.

flutter pub add firebase_core

위 패키지도 설치해줘야 하는듯.

 

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

// ...

await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
);

위 코드의 이유는 잘 모르겠다. 초기화 목적이라고는 함.

 

import 'dart:ui';

import 'package:flutter/material.dart';

import 'screens/home_frame.dart';

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: const MaterialScrollBehavior().copyWith(
        dragDevices: {
          PointerDeviceKind.mouse,
          PointerDeviceKind.touch,
          PointerDeviceKind.stylus,
          PointerDeviceKind.unknown
        },
      ),
      home: HomeScreen(key: key),
    );
  }
}

main 안에 초기화를 담아두었다.

 

원래는 강의 들으려 했는데, 어찌어찌 플러터에 설치가 되는 것 같아서 진행하는 중이다.

 

추후 참고할 자료 :

https://firebase.google.com/docs/flutter/setup?authuser=2&hl=ko&platform=android 

https://firebase.google.com/docs/auth/flutter/start?hl=ko&authuser=2