TwentyTwentyOne

https://fontawesome.com/docs/web/use-with/react-native

1. install

npm i --save @fortawesome/react-native-fontawesome @fortawesome/fontawesome-svg-core react-native-svg

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

cd ios && pod install

https://reactnavigation.org/docs/getting-started/

npm install --save @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

1. NavigationContainer 로 감싸기

2. createNativeStackNavigator

3. Stack.Navigator + name +  component

4.Stack.Navigator + initialRouteName + Stack.Screen

5. options={{ title: '타이틀이름' }}

6. 이동 : {navigation} + onPress={() => navigation.navigate('name')}

첫 stateless 위젯

flutter 에서 위젯은 크게 stateless 와 stateful 로 구별한다. 이외의 위젯도 있지만, 우선 이둘만 알면 충반하다는듯

stateless 위젯은 StatelessWidget 을 상속받아 사용한다.

import 'package:flutter/material.dart';

void main() {
  return runApp(MaterialApp(
      title: "Hello World",
      home: Scaffold(
          appBar: AppBar(title: Text('Widget')),
          body: _TestStatelessWidget())));
}

class _TestStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Test");
  }
}

dart에서 private class를 만들려면 _를 맨앞에 붙인다.

상속은 extends 키워드를 사용한다.

@override 키워드는 똑같다.

Stateless는 화면을 표시하는 위젯으로 상태의 변경이 불가능하다.

build 함수를 Override해야한다. 

build 함수의 returnType은 Widget이다. 

그럼 또 StatelessWidget 을 상속받는 class를 사용할 수 있을듯? 나중에 해봐야지.

react 가 hooks를 이용하는 함수형 components가 주로 사용되면서 클래스형으로 구성하는 방법을 많이 잊어버렸는데 

react 클래스형 components구성과 비슷한듯 한다.

Flutter를 공부하기 위해서 책을 볼까하고 고민하던중에 서울도서관에서 '(처음 배우는) 플러터'라는 책을 보게 되어 전자책으로 대출을 받아 공식문서와 함께 참고하면서 공부를 해보려고 한다.

이것저것 앞부분은 설치에 관한 것이라 건너 뛰고 flutter project 를 create 하면 생기는 main.dart 와는 별개로 simple_main.dart를 만들어보고 위젯 개념에 대한 설명을 읽고 기록해보려고 한다.

1. main()

dart의 모든 함수는 void main() 함수에서 시작한다고한다. dart언어를 사용하는 flutter 도 main() 함수를 가지고있는 main.dart 파일에서 실행을 하면 시뮬레이터에 해당 앱이 실행되게 된다. main.dart와 다른 이름을 가지는 파일을 만들어서 main함수를 정의 하면 똑같이 실행 시킬수 있고 해당 main함수로 실행되는 앱이 나타나게 된다. main함수가있어야 한다는건 java나 c언어와 똑같은거같다. 주로 파이썬이나 JS를 다루고 있는데 이런점에서는 다른부분인듯?

2.simple_main.dart

책에서는 simple_main.dart 파일에 main-> runApp -> materialApp -> scatfold-> AppBar + Text 로 정의된 코드를 설명해준다.

main() 가 필요하다는 것은 알았고, 이 중에 빠지는 것이 있다면 어떻게 되는지 궁금했다.

void main(){
}

만 정의하고 실행하면 어떻게 될까?

앱은 실행되지만, 아무것도 없는 흰바탕으로 나온다.

main() 함수는 runApp() 을 return 해야하는데 그냥 아무것도 return 하지 않아도 같은 상황이 된다. 

그럼 runApp에 아무 arguments 도 입력하지 않는다면??

우선 vscode 에서도 에러를 표시해주지만, 무시하고 실행하면

arguments 가 1개 필요하다고 나온다.

에러 로그의 문장들은 python이랑 비슷한듯하다.

runApp()를 보면

Type: void Function(Widget)

package:flutter/src/widgets/binding.dart

returnType이 void 인 함수로 parmeterType이 Widget이다 optional parameter가 아닌걸로보아 Type 이 Widget인 객체를 argument로 입력해 주면 될거 같다. 

그럼 MaterialApp은 Widget이라는 소리인데 Text widget을 넣으면 어떻게 될까

import 'package:flutter/material.dart';

void main() {
return runApp(Text('Hello Flutter'));
}

-- console

No Directianlity widget found 라는 Exception이 발생한다.

이게 무엇인지는  나중에 확인해 보기로하고 바로 Text() widget을 우선은 넣으면 안되는 것은 확인했다 (방법이있겠지?)

MateriaApp을 입력하고 title 만 값을 줬다.

정상 실행은 되지만, 아까와는 다르게 검은 화면으로 화면이 나타났다. 왜지? ㄴㅇㄱ

home parameter에 Text widget을 입력해보았다.

빨간 색상과 노랑 밑줄이 default 인가?

import 'package:flutter/material.dart';

void main() {
  return runApp(MaterialApp(
      title: "Hello World",
      home: Scaffold(
        appBar: AppBar(title: Text('Widget')),
      )));
}

Scaffold class 를 입력해주고 appBar에는 AppBar class 를 입력해 주니 처음 main.dart를 실행했을때와 비슷한 모양의 화면으로 출력되었다.

Scaffold class 와 각 parameter가 무엇을 하는지는 따로 글을 작성해 주어야 겠다. 

우선은 이러한 느낌으로 화면을 구성해 나간다는 아주아주 기초적인 부분을 이해하는데 도움이 되었다. 

https://docs.flutter.dev/get-started/install/macos

Flutter 앱/웹/데스크톱 크로스 플랫폼 GUI SDK이다.

웹 페이지를 주로 리액트로 개발하던 중 요즘들어 부쩍 Flutter에 대한 글이나 동영상이 많이 보이는것 같아 관심을 가지게 되었다.

회사에서 개발/배포 중인 앱도 React Native에서 Flutter로 옮긴듯 했다. (테스트를 진행하기 위해 받은 apk가 flutter 로고였다.)

이래저래 관심을 가지고 있던중 본격적으로 스터디를 해보면 어떨까하다 글을 기록하기로 했다.

먼저 설치를 해야겠지?

Flutter 공식 사이트에서 제공하는 Document를 참고하여 MacOS 에 설치를 진행해보고자 한다.

Apple silicon Mac dms Rosetta가 필요하다고 한다.

아래 코드로 설치해 주자

Flutter SDK를 zip 파일로 받아 사용할수도 있지만, git 에서 clone으로 받아 사용해 보기로 했다.

Mac Documents로이동해서 git clone을 해본다.

cd Documents
git clone https://github.com/flutter/flutter.git -b stable

환경 변수를 등록해 주자 

zsh 쉘을 사용하고 있다.

sudo vi ~/.zshrc
export PATH="$PATH:/Users/<계정이름>/Documents/flutter/bin"
source ~/.zshrc

flutter doctor를 입력주자.

building flutter tool... 부분에서 permission 오류가 생겼다.

sudo chown -R <dir> flutter 로 소유자를 변경해 주자

다시 flutter doctor를 실행하면

안드로이드만 이슈가 있네요

어차피 Xcode로 ios 시뮬레이터를 사용할거라 넘어갑니다.

vscode를 사용할거기 때문에 extention 을 설치해줍니다.

f1 으로 프로젝트를 새로 만들어 주고

open -a Simulator

커맨드로 시뮬레이터를 실행하고

main.dart에서 run을 하면

시뮬레이터로 잘 실행이 되네요