플러터 Flutter로 웹툰 앱 만들기 #2 HELLO FLUTTER _ install in Mac MacOs 맥 플러터 설치 환경변수 설정

Flutter로 웹툰 앱 만들기 #2 HELLO FLUTTER

​

안녕하세요 데브런치 입니다.

이번엔 두 번째 장 강좌를 정리해 보았습니다.

중간에 플러터 설치의 경우 강좌에서 간략하게 다루고 있습니다.

이 부분은 따로 정리하며 기록해 보았습니다.​

#2 HELLO FLUTTER

#2.0 Installation (08:17)

Flutter 설치방법을 소개합니다.

설치를 하기 싫다면 온라인 에디터를 소개합니다.

https://flutter.dev/

Flutter - Build apps for any screen

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

Choose your development platform to get started

강좌에선 https://chocolatey.org/install 을 이용하여 설치합니다.

 

 

공식 홈페이지의 설치 문서를 읽으며 설치 진행합니다,

설치를 원하지 않는다면 다음 아래 챕터 요약을 확인합니다.

​

#2.1 Dart Pad (03:04)

컴퓨터에 뭔가 설치하기는 싫은데 개발을 하고 싶다면

https://dartpad.dev/ 에서 진행합니다.​

강의에서 다루지 않는 플러터 설치 과정 기록

1.

공식 홈페이지에서 맥용 Flutter 웹페이지 접속

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

 

macOS install

How to install on macOS.

docs.flutter.dev

2.

애플 실리콘 로제타 설치(기존 설치되어 있을 수 있음) 합니다.

플러터 설치 관련 MacOs 로제타 설치 확인

3.

맥용 플러터 설치용 압축파일 다운로드(웹페이지 내 다운로드 경로 확인) 합니다.

플러터 설치 관련 압축파일 다운로드 및 압축 해제 방법

4.

터미널에서 압축파일 해제합니다.

명령어 >

$ cd Downloads

$ unzip ~/Downloads/flutter_macos_3.10.2-stable.zip

​

*** 20230525 version -> flutter_macos_3.10.2-stable.zip

​

터미널에서 압축파일 해제

 

5.

PATH 설정합니다.

명령어>

$ export PATH="$PATH:`pwd`/flutter/bin"

​

6.

flutter doctor 실행합니다.

flutter doctor 실행

flutter 설치 완료(닥터를 통해 미설치 항목을 설치 또는 확인합니다)

Flutter Doctor 실행 시 오류 해결 -런치의 방법

> Xcode 설치

앱스토어에서 설치 후 한번 실행​

> Android toolchain 설치 :

- develop for Android devices

Unable to locate Android SDK.

Install Android Studio from: https://developer.android.com/studio/index.html

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

안드로이드 스튜디오 more action에서 sdk manager -> sdk tool에서 command line tjfwjd

맥 터미널에서 안드로이드 라이선스 설정

터미널 명령어>

$ flutter doctor --android-licenses

Y 후 닥터 재 실행 후 확인 완료

​​

> cocoapod 설치 :

https://guides.cocoapods.org/using/getting-started.html#installation

CocoaPods Guides

$ sudo gem install cocoapods

// 설치 시 오류 발생.

// brew 설치 상태라면 업데이트 필요 또는 재설치를 해본다. 아래 방법 따르기

// 터미널에서 아래 명령어 실행

$ brew update // 홈브루 업데이트

$ brew install rbenv // ruby 버전 관리 설치

$ rbenv install -l // 설치 가능한 루비 버전 확인

​

$ rbenv install [v] // 원하는 버전 설치 [20230525 설정값은 3.2.2)

$ rbenv global [v] // 원하는 버전 설정

​

$ rbenv install 3.2.2

$ rbenv global 3.2.2

$ rbenv versions // 확인 (아래 결과 두 줄)

>system

>* 3.2.2 (set by /Users/user/.rbenv/version)

​

$ ruby -v // 루비 버전 확인

// 다른 결과의 버전이 나온다면 아래 환경 변수 재설정 실시합니다.

​

// 변경이 안 되어 있다면 vim을 이용하여 환경 변수 재설정합니다.

$ vim ~/.zshrc

// [vim 실행 상태 및 편집 화면에서 i 눌러 insert 모드 설정, 맨 아래 줄에 eval "$(rbenv init - zsh)"를 넣어줌]

// vim 명령어 -> :w //저장

//vim 명령어 -> :q //종료

// 이후 다시 터미널 화면

$ source ~/.zshrc // 명령어 실행하여 환경 변수 재로딩합니다.

$ ruby -v // 루비 버전 확인

> ruby 3.2.2

​

다시 $ sudo gem install cocoapods 명령어 실행하여 설치합니다.

정상 설치 및 Gem update 안내로 업데이트 실시합니다.

$ gem update --system 3.4.13

​

최종 flutter doctor 실행으로 설치 완료 확인합니다.

최종 flutter doctor 실행으로 설치 완료 확인

#2.2 Running Flutter (11:15)

*강의에 없는 내용입니다.

환경 변수에 플러터가 등록이 안되있습니다.

터미널을 열 때마다 아래 환경 변수 설정이 필요합니다.

export PATH="$PATH:Downloads/flutter/bin"

이 경우 터미널 실행 시마다 환경 변수를 설정 안 하도록 환경 변수 기본 등록을 해줍니다.

1. 터미널 실행합니다.

2. $ vim ~/.zshrc

3. 맨 아래에 export PATH="$PATH:Downloads/flutter/bin" 추가합니다.

4. 저장 후 vim 종료합니다.

5. $ source ~/.zshrc

6. 터미널 완전 종료 후 아무 폴더 또는 경로에서

$ which flutter 명령어 실행하여 해당 경로가 출력되는지 확인합니다.

​

*이제 강의대로 진행

>터미널 명령어 수행

$ cd Documents //문서 이동

$ flutter create toonflix //플리터 프로젝트 생성

>VSCODE 실행

extention Dart/Flutter 설치

>vsCode 내 에뮬레이터 iOS로 확인

main.dart 파일에서 상단 바 색상 변경(아래 스크린샷 코드 확인)

상단 바 색상 변경 deepPurple -> red

아래 색상 변경된 ios 시뮬레이터 화면 스크린샷 입니다.

 

퍼플 -> 레드

상단 바의 색상을 디버그를 통해 변경된 것을 확인합니다.

#2.3 Hello World (15:25)

>widgets 사용은 doc 안내를 보고 나중에 활용해 봅니다.

코드 작성합니다.

flutter hello world 코드 작성

main.dart 부분에 코드를 작성하고 디버그 에뮬레이터를 보면 위 스크린샷과 같습니다.

#2.4 Recap (05:48)

위 코드 및 다시 설명

#2.5 Classes Recap (08:40)

위 코드 추가 설명 및 활용 안내