[Flutter] 개요와 설치방법

플러터가 어떻게 작동하는가?

• 다트는 네이티브 언어가 아니다.
• 네이티브 언어는 안드로이드나 IOS의 네이티브 위젯 세트에 직접 상호작용하며 앱을 구축한다.
• 하지만 플러터는 자체의 고성능 렌더링 엔진을 사용하여 위젯을 렌더한다.

플러터의 작동 순서
앱에 엔진 및 다트코드를 컴파일하여 넣어둔다.
-> 앱을 실행하면 각 기기 OS 별로 최적화된 runner가 엔진을 실행-> 엔진은 컴파일된 코드를 이용하여 렌더링

• 즉, 호스트(ios, android 운영체제)가 직접 소통하며 렌더링하는 것이 아닌 호스트는 러너를 실행시킬 뿐 렌더링은 러너가 실행시킨 엔진(가상 머신)에 의해 이루어 진다고 보면 된다.

플러터와 리액트 네이티브

• 결국 플러터는 게임엔진들과 마찬가지로 OS에게 직접 렌더링에 대한 요청을 하지 않고 자체 엔진을 이용하여 렌더링 함.

차이

• 리액트 네이티브는 자바스크립트를 이용하여 운영체제와 소통을 통해 렌더링을 하기 때문에 같은 코드라도 IOS와 Android에서 다른 모습으로 작동함(네이티브 위젯을 사용)
• 플러터는 각 운영체제의 네이티브와 똑같이 만들고 싶으면 그냥 비슷하게 만드는 수 밖에 없음.

결론

• RN : 크로스플랫폼 앱을 만들면서 네이티브 위젯을 사용하고 싶고 IOS나 Android 앱처럼 보이고 싶을 때
• Flutter : 세밀한 디자인 요구사항이 있거나 커스터마이징이 필요하며 외부 패키지 도움 없이 고수준의 애니메이션을 구현하고 싶을 때

참고 : 플러터 아키텍쳐 개요.
https://docs.flutter.dev/resources/architectural-overview

설치 방법

1. homebrew에서 flutter 검색
2. 터미널에서 brew install --cask flutter 실행

OS 별 setup 설치 방법

Flutter Docs 참고해서 설치하기!

flutter doctor

flutter doctor 명령어를 터미널에 실행시키면 어떤 것들이 설치되지 않았는지 등을 체크해준다.

Unable to find bundled Java version 에러 해결

안드로이드 스튜디오를 설치했는데 위와 같은 에러가 발생했다.

1. finder의 Application에서 안드로이드 스튜디오를 우클릭하여 패키지보기 클릭.
2. jre 파일 생성
3. jbr의 Contents 파일 복사
4. jre 파일에 붙여넣기.
5. 터미널 재실행 후 flutter doctor 하면 해결.
   해결법 링크

• 추가: toolchain 설치

ios 용 Xcode의 경우 필요할 때 설치할 예정.

create flutter app

• CRA와 마찬가지로 터미널로 프로젝트를 만들고 싶은 경로로 가기!
• flutter create [프로젝트명]

VSCODE 익스텐션 설치

flutter를 vscode에서 실행하기 위해 필요함.

1. Dart
2. Flutter
3. lib파일의 main 클릭해보면 하단에 devtools 뜨는 것까지 확인!

에뮬레이터 실행

• 하단 macOS(darwin) 클릭해서 각 기기 에뮬 실행가능.
• 안드로이드 스튜디오에서 에뮬레이터 하나 생성해주고
• 하단에서 에뮬레이터 실행 후 상단 디버깅 모드 스타트해주면
• 에뮬레이터에서 플러터 앱 실행됨.