본문 바로가기

개발 코딩 정보 공유/플루터 Flutter

Flutter 플러터 처음 설치 부터 다시 시작하자

소개

안녕하세요.과공입니다.

새롭게 코딩관련 글을 올리려고 계획중입니다. 

하나의 코드 베이스로 멀티 플랫폼개발이 가능하다?

오늘은 구글에서 내세우고 있는 플러터, 설치 부터 시작해 보겠습니다.

설치가 일반 설치 처럼 몇번 하면 되는게 아니라서 다소 집중력을 발휘 해야 합니다.

특히 터미널 등 커맨드 라인 도구 사용이 익숙치 않은 분들은 조금 어려울수도 있겠습니다.

제가 작성한 이전글 도 참고 되시기 바랍니다.

2020.06.14 - [개발 코딩 정보 공유/플루터 Flutter] - flutter (플러터) 배우기 - 개념과 기초구현

 

Flutter 는 구글에서 2017년 출시한 오픈 소스 크로스 플랫폼으로써 하나의 코딩으로 여러개 플랫폼에 배포가 가능합니다.

말은 간단하지만 실제 사용해보면 여러가지 복잡한 설정이 필요합니다.

그래도 간단한 코딩으로 유려한 UI 등을 구현할수 있고, 

성능이 네이티브 급으로 빠르다는 장점이 있습니다.

 

* Flutter 설치후 xcode 에서 띄워주는것 까지 해보도록 하겠습니다.

 

설치

https://flutter.dev

 

Flutter - Build apps for any screen

Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

flutter.dev

 

위 경로로 이동합니다. 그리고 get started로 들어가겠습니다.

저는 맥 OS를 선택하였습니다. 자신의 OS 에 맞게 선택하시면 됩니다.

 

flutter get started

  • Operating Systems: macOS
  • Disk Space: 2.8 GB (does not include disk space for IDE/tools).
  • Tools: Flutter uses git for installation and upgrade. We recommend installing Xcode, which includes git, but you can also install git separately.

2.8기가 정도의 여유 용량과 git tool 을 사용해서 작업한다고 합니다.

* git 은 여기서 설명하지 않겠습니다.

 

intel apple silicon mac

저는 실리콘 맥이므로 해당 메뉴를 클릭하겠습니다. 

실리콘 맥인지 모르겠으면 확인이 필요하다.

 

혹시 자신의 맥이 어떤 맥인지 모르겠다 하시면... 해당 링크에서 확인하길 바랍니다.

https://support.apple.com/en-us/HT211814

 

Mac computers with Apple silicon

Starting with certain models introduced in late 2020, Apple began the transition from Intel processors to Apple silicon in Mac computers.

support.apple.com

 

다운로드가 완료되면 작업 할 경로에 압출을 풀어줍니다. 아래와 같이 압축이 해제되며 flutter sdk와 예저 들이 생성됩니다.

 

압축을 해제한 모습

그리고 PATH를 지정해줍니다. 저는 zsh 쉘을 사용하므로...

유저 root의 .zprofile을 수정해주겠습니다. 해당 파일 혹은 배쉬 프로파일을 열어서 아래의 경로를 추가합니다.

 

profile 에 패스를 설정한다.

저같은경우 이런식이 되겠네요.

export PATH=$PATH:/Users/kmacbookpro/workspace_local/flutter/bin/

 

저장후 터미널을 열어줍니다. 그리고 echo PATH 라고 입력후 제대로 path가 잡혔는지 확인 합니다.

잘 잡혔다면 flutter doctor 라고 입력해서 테스트 합니다. flutter doctor는 해당 sdk 및 개발 환경이 잘 잡혀있는지 체크해줍니다.

 

flutter doctor 통해 문제를 확인한다.

잘 잡혔습니다. 우선은 XCODE로 테스트 하기 위해서 Android 오류는 차후에 잡아주겠습니다.

Xcode 셋팅을 위해 아래의 명령어를 입력 해주겠습니다. 

 

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

open simulator

시뮬레이터를 띄워줍니다. (xcode에서 잘 사용하던)

터미널 창에 이어서 입력 하면 됩니다.

create app

샘플앱 생성을 위해 create 해주겠습니다. 해당 명령을 터미널에 입력합니다.

cd my_app

유저 루트경로에서 해당 명령으로 생성된 폴더로 이동합니다.

flutter run

 

실행해주겠습니다. 혹시 여기서 xcodebuild 문제 발생시 xcode에서 설정을 확인 합니다.

setting - location 으로 이동
xcodebuild 를 설정한다

이곳에서 커맨드 라인 툴을 선택해 주시면 됩니다.

그리고 다시 터미널에 flutter run 을 입력합니다.

 

앱이 잘 실행되었다.

 

 

끝으로

flutter 플루터 설치에 대해서 간단하게 알아보았습니다.

xcode와 시뮬레이터를 사용해보았는데 다음글에서는 

안드로이드를 통해 작업해보겠습니다.