[Flutter] Dart & Flutter 앱개발 <1>

1. 동기

원래는 모바일앱개발에 대하여 아 언젠가는 해보고싶다 정도로 막연하게만 생각했지 실제로 하게 될줄 몰랐는데 올해에 어쩌다 리액트 네이티브 프로젝트에 참여하게 되어서 처음 모바일 개발 경험을 해보았다. 

리액트 네이티브도 리액트 기반에 자바스크립트로 이뤄져있어서 완전 생소하거나 그랬던 것은 아니었지만 한번도 해보지 않은 개발환경에다가 빌드, 배포도 완전 처음 경험해보는 일이었어서 많이 어렵기도 하고 힘들기도 했다. 사실 이 프로젝트 참여하기 전에 할 일이 없을 때 틈틈이 리액트 네이티브로 개발해보지 않았더라면 정말 더욱 더 힘들었을 것이다...

하지만 이런 계기를 덕분에 모바일앱개발에 더욱 적극적인 관심을 갖게 되었고, 내년에 회사에서 신규 앱서비스 개발 계획이 있는데 그때 리액트네이티브 또는 플러터 개발에 참여하게 될 수 있다고 해서 미리 공부해보고자 패스트캠퍼스에서 강의를 찾아 구매했다. 

 

 

2. 개발환경 세팅

리액트 네이티브 개발할 때도 진짜 개발환경 세팅하는데 약간 애먹었었는데 개발환경 세팅할 때마다 느끼는 것이지만 내가 사용하는 pc의 os와 버전에 대한 파악을 잘하고 있어야하는 것 같다. Flutter 개발환경 세팅하는 과정은 다음과 같다.

1) Flutter SDK 설치

우선 Flutter 공홈에 접속해서 내 PC환경에 맞는 sdk 압축파일을 다운로드 받는다. 만약 내가 맥사용자이고 내 맥이 Apple silicon(M1, M2 등)의 환경이라면 다음과 같은 명령어를 terminal을 열어서 실행해주어야한다. 나는 맥 M1 사용자라서 명령어를 실행했다.

sudo softwareupdate --install-rosetta --agree-to-license

 

2) SDK 압축 풀고 환경변수 등록

뭐든지 새로운 언어환경에서 개발할때는 환경변수 등록이 가장 중요한 것같다. 맥에서 Flutter 환경변수 등록은 다음과 같은 순서로 진행하면 된다.

# zshrc 열어서 insert 모드 실행
vi ~/.zshrc

# flutter sdk가 설치된 경로 추가 및 저장종료
export PATH=$PATH:{sdk path 입력}/flutter/bin

# 추가했으니 zshrc 갱신
source ~/.zshrc

# echo $path 명령어로 내가 등록한 환경변수 path들을 확인할 수 있다.
echo $path

# 잘 설치 및 추가되었는지 확인
flutter --version

 

zshrc에 flutter가 설치된 경로를 추가해주고, source 명령어로 갱신해야 적용이된다.

 

3) Android Studio 설치

리액트 네이티브도 환경세팅 할때 Android Studio를 설치했었어야해서 나는 이미 설치되어 있었다.

https://developer.android.com/studio?hl=ko

1. 동의 후 app 다운로드
2. Plugins > Marketplace에서 Flutter plugin 설치
3. dart도 설치
4. New Fluter project 생성 및 path 등록

 

4) Xcode 설치

마찬가지로 앱개발을 하려면 Xcode도 설치되어 있어야하긴해서 이것도 역시 마찬가지로 이미 설치가 되어있었다.
iOS 개발환경 세팅하려면 cocoa pods이 설치 되어있어야하는데 이걸 설치할때 ruby 의존성과 버전을 잘 확인해야한다.

 

5) 검증하기

여기까지 잘 진행했다면 flutter doctor로 개발환경이 잘 구성됐는지 확인해야한다.

flutter doctor

 

이런식으로 수정해야할 사항들을 체크해준다.