1 of 52

React Native를 버리고 Flutter로 갈아타게 된

여정

Incheon/Songdo

2 of 52

윤창현 Changhyeon Yoon

ex)LIKELION NFT Division - Frontend Engineer

Granter - Software Engineer

Microsoft Learn Student Ambassadors

Google Developer Student Clubs - Hanyang Univ. 1st Lead

Next.js Korea User Group - Organizer

AWS Korea User Group - Frontend

3 of 52

Why

React Native?

Incheon/Songdo

3

4 of 52

970

iOS Position

4

5 of 52

1,458

Android Position

5

6 of 52

10,000,000

Android + iOS

6

7 of 52

Return / Investment

Return On Investment (ROI)

7

8 of 52

Cross Platform

8

9 of 52

389

React Native Position

9

10 of 52

19

Flutter Position

10

11 of 52

11

12 of 52

12

13 of 52

rm -rf

react-native-cli

Incheon/Songdo

13

14 of 52

1,065

Warning

npx react-native@latest init AwesomeProject

14

15 of 52

24k

React Native Pork

v0.73.0

15

16 of 52

March 26, 2015

🎂React Native🎂

16

17 of 52

17

18 of 52

18

19 of 52

19

20 of 52

26.5k

Flutter Pork

v3.16.3

20

21 of 52

21

22 of 52

22

23 of 52

23

24 of 52

24

25 of 52

25

26 of 52

26

27 of 52

Hello,

Flutter!

Incheon/Songdo

27

28 of 52

20H

28

29 of 52

5,318

React Native Code

29

30 of 52

4,773

Flutter Code

30

31 of 52

48H

31

32 of 52

32

33 of 52

Now, AI Generation

33

34 of 52

35 of 52

36 of 52

Problems

Incheon/Songdo

36

37 of 52

const handleSignUp = async (formData: any) => {

const { name, email, phoneNumber, password } = formData;

await handleSignUp({

email: email.trim(),

name: name.trim(),

phoneNumber: phoneNumber.trim(),

password,

}).catch((error: any) => {

console.error(error);

});

await handleSignIn({ email, password });

};

handleSignUp(formData) async {

String name = formData['name'];

String phoneNumber = formData['phoneNumber'];

String password = formData['password'];

String email = formData['email'];

try {

await handleSignUp({

'email': email,

'name': name,

'phoneNumber': phoneNumber,

'password': password,

});

} catch (error) {

print('Error: $error');

}

await handleSignIn({'email': email, 'password': password});

}

37

38 of 52

38

39 of 52

39

40 of 52

40

41 of 52

41

42 of 52

42

43 of 52

43

44 of 52

Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update.

When using Remote Config, you create in-app default values that control the behavior and appearance of your app.

Then, you can later use the Firebase console or the Remote Config backend APIs to override in-app default values for all app users or for segments of your user base.

Your app controls when updates are applied, and it can frequently check for updates and apply them with a negligible impact on performance.

44

45 of 52

Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update.

When using Remote Config, you create in-app default values that control the behavior and appearance of your app.

Then, you can later use the Firebase console or the Remote Config backend APIs to override in-app default values for all app users or for segments of your user base.

Your app controls when updates are applied, and it can frequently check for updates and apply them with a negligible impact on performance.

45

46 of 52

46

47 of 52

Roadmap

Incheon/Songdo

47

48 of 52

  • WebView로 작성된 부분 dart로 Migration

48

49 of 52

  • WebView로 작성된 부분 dart로 Migration
  • 기존 Web, Flutter로 Migration

49

50 of 52

  • WebView로 작성된 부분 dart로 Migration
  • 기존 Web, Flutter로 Migration
  • 공동인증서 연동

50

51 of 52

  • WebView로 작성된 부분 dart로 Migration
  • 기존 Web, Flutter로 Migration
  • 공동인증서 연동
  • 최적화 및 리팩토링

51

52 of 52

감사합니다.

52