[Flutter] 설치하기

---

flutter 설치화면 

 

 

하이브리드의 대세가 왠지 flutter가 될 것 같아서 

진행 중이던 react를 살짝 버리고(?) flutter를 시작해봅니다 ㅋㅋㅋㅋ

 

맥에서 설치해야 안드 아이폰 다돼서, 맥에서 진행할 예정.

 

맥에서 flutter 설치하기

java는 intelliJ, 안드로이드는 android studio, 아이폰은 xcode와 같이 언어와 IDE가 연동돼있는 애들을 보면 그냥 IDE만 깔면 언어를 다로 설치하지 않아도 실행 가능했다. 근데 flutter라는 놈은 언어도 생소하고 전용 툴도 없다. 단지 android stuido나 intelliJ에서 플러그인을 설치해서 사용할 수 있다.

 

일단 flutter sdk를 다운받아야 한다.

flutter-ko.dev/docs/get-started/install/macosflutter-ko.dev/docs/development/tools/sdk/releases?tab=macos

 

 

글을 쓰는 지금 2.0.5 버전을 다운 받을 수 있다. 생각보다 큰 1GB의 용량에 한번 놀라 주자 ㅇ_ㅇ!!!

 

다운로드한 zip 파일 압축을 풀면 그 위치가 flutter의 위치가 되므로 개발 관련 파일을 모아둔곳에 압축을 풀어주자. 아마 맥 사용자라면 zip을 받는 동시에 압축이 풀려서 flutter라는 폴더가 튀어나왔을 것이다. 나는 ~/dev/ 경로에 개발관련 라이브러리를 모아놓기 때문에 이쪽으로 옮겨주었다.

 

 

그다음 환경변수를 등록해주면 된다. 

뭐 특별할 건 없고 bashrc나 bash_profile 혹은. profile에 추가하면 된다. 여러분이 어떤 쉘을 쓰는지에 따라 경로가 다르기 때문에 기존에 쓰던 거에 추가하면 된다. 나는 zsh를 쓰기 때문에 .zshrc에다가 추가했다.

 

PATH에 추가하기

이제 source .zshrd를 하거나 터미널을 껐다 켜면 flutter 명령어 사용이 가능하다.

 

터미널에서 flutter 입력시

 

ios에서 구동하기

ios에서 하려면 xcode가 설치되어 있어야 한다. 아마도 맥을 사용하는 개발자라면 xcode는 항상 최신으로 업데이트해놓고 있을 거라고 생각한다. (안 하면 안 되는 게 몇 개 있어서 ㅎㅎㅎ)

 

일단 ios에서 실행시키려면 시뮬레이터가 있어야 되는데 spotlight에서 "simulator"라고 검색하면 시뮬레이터가 나온다. 실행시키면 아이폰 모양의 가상 머신이 실행된다. 크흐.. 안드로이드에 비해 월등히 빠른 속도.. 앱 등 앱등

 

나는 아이폰 11이 기본으로 설정되어 있다.

 

이제 flutter 기본 앱을 만들어서 실행해보면 된다. 

 

flutter create my_app
cd my_app
flutter run

 

알아서 시뮬레이터에서 실행됨

 

실제 아이폰 디바이스에 배포하는 건 쪼꼼 더 어렵다

 

일단 CocoaPods을 설치해야 한다.

 

cocoapods를 설치하고 pod setup을 해주면 된다.

 

flutter 프로젝트를 만들었을 때 폴더를 보면 ios라는 폴더가 있는데, 그 안에 xcode 프로젝트 파일이 있다. 이 파일을 열면 xcode로 프로젝트를 실행할 수 있다.

 

xcode 프로젝트 실행

 

이제 필요한 건 개발자 계정인데, 옛날에는 애플 개발자 계정이 유료였는데 최근에는 무료로 바뀌었다. 단 앱스토어에 등록하려면 여전히 유료 ㅎ

개발자 계정으로 로그인하고 위에 메뉴에서 Signing & Capabilities 눌러서 계정 설정을 해줘야 실행이 된다.

 

계정 설정해줘야한다.

 

이제 target을 내 아이폰으로 설정하고 실행하면 아이폰에서 정상적으로 flutter앱이 실행된다. 쉽다!!!

 

 

 

android에서 구동하기

ios가 xcode라면 android는 android studio가 있어야 한다.

android studio에서 flutter 앱 설치 경로에 android 폴더를 읽어오면 flutter 앱을 실행할 수 있다. 뭔가... flutter 공식 홈페이지에도 ios는 설명을 잘해놨는데 android는 대충 해놨다 ㅋㅋㅋ flutter 녀석들.. 앱등인가...??

 

 

무난하게 실행된다.

 

 

 

 

intelliJ에서 flutter 프로젝트 만들기

 

일단 ios와 android실행은 알겠는데, 최초에 프로젝트 만들고 코딩은 어디서 해야 하는가.. ㅎㅎ

flutter 공식 홈페이지에서는 android studio를 쓰거나 intelliJ를 쓰거나 visual studio를 쓰라고 제시하고 있다. 물론 각 툴에서 따로 plugin을 설치해줘야 한다. 

 

나는 젯 브레인 빠니까 intelliJ로 하기로 했다. intelliJ를 실행하고 marketplace에서 flutter를 설치해주자.

 

marketplace에서 fultter 다운로드

 

flutter plugin을 설치하고 IDE를 재시작하면 새 프로젝트에서 flutter 프로젝트를 만들 수 있습니다.

 

flutter랑 dart 프로젝트가 추가되었다.

flutter로 프로젝트를 만들면 intelliJ에서 ios, and, web 다 실행시킬 수 있다. 짱짱맨.

 

그리고 flutter는 hot reload라는 기능을 제공하는데, 소스가 수정되면 바로 화면에 반영되는 기능이다. 리액트도 이거 자동으로 됐던 거 같은데 좋은 기능이었나 보다 ㅋㅋㅋ

 

앱이 실행 중일 때 lib/main.dart에서 텍스트를 수정하면 변경된 텍스트가 반영되는 걸 알 수 있다.

 

 

이것으로 설치는 끝났고, 공식 문서에는 이제 간단한 앱을 만드는 방법을 설명한다. 

 

1부 2부로 나뉘어 있는데 간단히 따라 해 보면서 다음 포스팅을 적어야겠다.