0회차 세부 과정 목차
1.오티
안녕하세요. saran 입니다.
saran은 제 닉네임 이구요.
flutter 과외를 위해 해당 블로그를 작성하고있습니다.
1강 오티,인스톨
2~9강 본문강의
10강 배포
로 이루어져 있습니다.
저희수업은 수업을 진행하면서 따로 자신이 원하는 앱의 개발을 동시에 들어가야합니다.
그런데 flutter에 관한 아무런 지식이 없기때문에 , 자신이 어떤앱을 만들건지 모습은 어떤지 개인노트나 피그마 또는 ppt 를 이용해서 한번 그려보시기 바랍니다.
그래서 1강때 샘플 프로젝트 오픈하면, 집에가서 복습할때는 자기자신의 프로젝트를 오픈하고,
두째강의대 이미지 넣는방법을 배웟다면 자기 앱에 적용시킬수있는 부분은 하고 아니라면 넘기고 하는식으로해서
9강이 끝나고 배포를 앞둔시점에서 자기의 앱이 완성단계까지 와 있어야합니다. 물론 동시에 딱딱 되진않겟지만
제가 했던 경험상 9강끝나고 2~3주 이후에는 완성이 되어 있을겁니다.
그래서 자신의 아이디어로 만든앱을 바로 두개의 플랫폼에 배포 할겁니다.
저희 목표는 flutter 세팅부터 배포까지 빠르게 한바퀴를 도는것입니다.
처음에 아무것도 모를때는 인강봐도 시간만 낭비할 확률이 높습니다. 어떻게아냐면 저도 그랬기 때문에 대략 짐작하는겁니다.
사람마다 다를수있겟죠.
하지만 과외를 통해 처음에 한바퀴를 돌려두면 뒤에는 인강을 들으면서 좀더 지식의 갭을 채워나갈수 있을겁니다.
인강 잘나온것들 많거든요.
그래서 빨리 한바퀴돌고 배포한다음 인강듣고 실력 키우고 포트폴리오 만들어서 취업할수있도록 합시다.
화이팅~
2.커리 큘럼
0.OT and install
1.create project
2.first my project
3.component
4.Json
5.state management
6.network
7.firebase1 - firestore
5.flutter에서 firestore CRUD 해보기 <Read>
6.flutter에서 firestore CRUD 해보기 <Create>
7.flutter에서 firestore CRUD 해보기 <Update>
8.flutter에서 firestore CRUD 해보기 <Delete>
8.firebase2 - auth, storage
9.distribution
1.안드로이드 앱 패킹
2.IOS 앱 패킹
3.안드로이드 개발자등록
4.IOS 개발자 등록
5.안드로이드 구글플레이 배포
6.IOS 앱스토어 배포
3. mac 세팅
mac 세팅의 경우 m1 기준으로 설명이 됩니다.
다른 cpu칩을 사용하더라도 전체적인 맥락은 동일하니, 안맞는 부분은 각자 상황에 맞게 조율해주세요.
1. 크롬 설치
2. Xcode 설치 - 앱스토어를 열어서 최신 Xcode를 설치해주세요. 꽤 많은 시간이 소요됩니다.
3. 안드로이드 스튜디오 설치 - 많은 IDE들이 있겠지만 기본 코딩 에디터로 안드로디스 스튜디오를 사용할겁니다.
4. Flutter SDK 설치
5. 환경변수 설정
6. 홈브류 설치
7. 코코아팟 설치
8. 로제타
9. 안드로이드 라이센스
10. xcode 에러
11. 샘플 프로젝트 오픈
12. 에뮬레이터 실행
1. 크롬 설치
직접관련은 없긴한데 개발중 검색 또는 앱내에서 인터넷창을 열어야하는 상황이있을때 크롬을 사용할겁니다.
그냥 깔아주세요. 그냥 인터넷에 크롬 쳐서 크롬을 다운받아주시면 됩니다. 젤 간단한거라 1번 과정입니다.
2. Xcode 설치
앱스토어를 열어서 최신 Xcode를 설치해주세요. 꽤 많은 시간이 소요됩니다.
Xcode최신버전을 깔려고하는데 OS가 안맞다고 하면 먼저 OS부터 업데이트 시켜주신후 진행해주세요.
OS업데이트도 시간이 좀걸려서, OS깔고 Xcode 까지 깔면 몇시간 걸릴수 있기때문에 빠른 인터넷 환경에서 실시해주세요. (와이파이 로 하면 엄청느릴수있으니 직접랜선 꼽을수있으면 더 좋음)
저에게 과외를 받기로 하신분이라면, 집에서 랜선꼽고 이거는 설치해주고 와주시면 좋습니다.
설치하신 이후에는 xcode를 한번 실행시켜주셔야 합니다.
3. 안드로이드 스튜디오 설치3. 안드로이드 스튜디오 설치
안드로이드 스튜디오 를 검색창에 쳐서 다운로드 해주세요.
저는 m1칩 이기때문에 두번째꺼 선택해서 설치했습니다.
이것도 용량이 좀 크기때문에 집에서 인터넷환경 좋을때 다운받은뒤 과외에 참석해주세요.
다운받고 설치하고 실행해보면, 라이센스 동의나, SDK설치 , 화면컨셉설정(힌색바탕,검은색바탕) 등등 있는데 대충 오키 하고 진행해주세요.
그러면 이렇게 시간이 좀 걸릴겁니다. 기다려주신뒤 완료되면 finish 눌러주세요.
실행이 되면 More Actions에 SDK Manager에 들어간뒤 SDK Tools 부분의 Android SDK Command-line Tool에 체크한뒤 오키를 눌러준뒤 설치해주세요.
Plugins 부분에 flutter 를 쳐서 다운받아줍니다.
이건 뭐 별건아니고 안드로이드 스튜디오가 flutter에 맞게 코딩세팅할수있도록 해주는 라이브러리 정도이고, 이거깔면 dart 도 같이 깔립니다.
그럼이제 저 첫화면에 new flutter project가 가 추가되는데, 일단 이뒤는 좀있다가 해봅시다.
4. Flutter SDK 설치
인터넷에 Flutter 를 치고 인스톨 부분 들어간다음 SDK를 다운받아주세요.
다운이 완료된후 압축을 풀면 flutter라는 폴더가 만들어집니다.
저는 이 폴더의 위치를 저부분으로 했습니다. 그냥 finder두개 열고 드레그로 옴기면 됩니다.
위치는 /Users/iseonghun 이정도가 되겠네요. iseonghun 은 내가 맥 os세팅할때 지정한 내 계정입니다.
Users의 iseonghun안에 flutter가 폴더가 위치한다는 겁니다.
이 경로를 알고싶으시다면
폴더에 마우스 오른쪽 -> 정보 가져오기 -> 위치 부분을 드래그하여 복사한뒤 어느 그냥 메모장이나 붙여넣기 하시면 영어로된 진짜 주소가 나옵니다.
5. 환경변수 설정
환경변수 설정하는데 이건 왜하는거냐면
우리가 앞으로 터미널 이라는 곳에서 명령어를 쳐서 프로그램을 작동시킬건데
우리가 앞으로 치게될 명령어중에 flutter 명령어들이 당연 많을겁니다.
근데 기본적으로 명령어를 치기위해서는 그 명령어를 작동시킬수있는 프로그램이 있는 위치까지 찾아가서
명령어를 작성해야합니다.
예를들어 flutter 명령어를 치기위해서는 /User/asdf/,,,/,,,/flutter/bin 뭐 이런식으로 경로를 다 찾아간다음 명령어를 쳐야 먹힌다는거죠.
그런데 이게 할때마다 저기 찾아가서한다는게 너무 귀찮기도 하고 그렇잖아요.
그래서 컴퓨터에 경로를 저장한다? 뭐 이런개념으로 생각하면 됩니다. 그래서 저 flutter의 주소를 변수로 저장해둔다해서 환경변수 라고합니다. 그러면 아무대서나 flutter 명령어를 치면 컴퓨터에 환경변수에 등록되어있는 주소들을 다 보고 알아서 하는겁니다.
사실은 환경변수중에 path 라는 변수에 여러값들이 있을건데요. 확인한번 해볼까요?
터미널에 echo $PATH 라고 치면 현재 등록되어 있는 값들이 나옵니다.
아주 많네요. 이 많은 주소들이 : 로 구분되어 있습니다.
그래서 여기에다가 flutter명령어 칠수있게 값을 등록하면 되긴하는데, 여기에 등록을 해버리면 그냥 아에 변수를 고쳐버리는게 되서 좀 부담스럽습니다. 그래서 명령어를 시작할때만 살짝 임시적으로 등록하고, 영구적인 등록은 안하는 방식을 사용하려고 하는데.
그걸위해서 .zshrc 라는 파일을 이용합니다.
저 .zshrc 파일은 zshell 을 이용하는 터미널이 실행될때 먼저 실행되는 파일입니다.
그래서 .zshrc에 내용에 첫줄에 기존 Path 변수에다가 flutter 주소값을 임시적으로 추가해 넣는다~ 이렇게해놓으면 된다는겁니다.
.zshrc 파일은 어떻게 만드냐면 home 디렉터리로 갑니다. 자기 맥계정이 홈입니다.
저같은 경우는 User/iseonghun 이겠죠. 그냥 finder에서 이동 -> 홈 하면 나오는 폴더입니다.
어쨋든 여기에 .zshrc 파일을 만들건데. 사족으로 말씀드리자면 .이 맨앞에 들어간건 숨김처리되는 파일입니다.
이걸 보이게하려면 (shift + commend + . ) 동시에 누르면 됩니다.
저같은 경우는 .zshrc 파일을 만들어나서 보이지만 처음에는 없으니 안보일꺼니가 만들어봅시다.
터미널을 열고 touch ~/.zshrc 라고 해줍니다. 그러면 홈 디렉터리에 저 파일을 만들어라 가 되니까 저렇게 생성되는걸 볼수있습니다.
.zshrc 파일을 열고 echo 하이 라고 적은뒤 저장하고, 터미널 실행해보면 먼저 .zshrc파일이 실행되면서 저렇게 하이 라고 잘나오는걸 볼수있습니다.
근데 우리가 지금 하이 치려고 하는건아니고, 터미널이 실행될때 flutter 명령어칠수있는 걸 path 에 등록하는게 목적이잖습니까
그래서 이렇게 칩니다.
이 뜻은 PATH는 기존 PATH 에다가 : (콜론) 에다가 /Users/iseonghun/flutter/bin 을 추가한다 ~ 뭐 이런뜻입니다.
flutter 명령어 칠수있는곳이 우리가 아까 압축해제해서 나온 flutter 폴더의 bin 폴더 안에 있어서 저렇게 했습니다.
그뒤 저장을한뒤 터미널을 다시켜봅니다. (저장은 command + s 입니다.)
터미널에 현재 PATH변수를 확인해보니, 우리가 추가한게 잘보이고, flutter 명령어를 치니 잘 먹습니다.
이렇게 환경변수 설정이 되었습니다.
6. 홈브류 설치
홈브류를 설치할껀데, 홈브류는 맥OS에서 필요한 프로그램들을 쉽게 명령어 한줄로 다운받게해주는 어떤 프로그램입니다.
gem 이라는것도 있습니다. 기본이죠. 근데 gem으로 설치하는것 보다 홈브류로 설치하는게 더 간편하고 뭐 이점들이 있어서 이걸많이 씁니다.
어쨋든 본질적으로 우리는 홈브류가 필요한게 아니라 코코아팟( cocoapod ) 이라는 프로그램을 설치해줘야합니다.
(코코아팟은 flutter에서 ios용 라이브러리 받을때 사용하는겁니다.)
근데 gem으로 설치 하려고하면 Ruby 라는 언어로 작동하는데 이게 버전이 또안맞고 최신버전을 깔아야되고 이래저래 해서 어쨋든 홈브류라는걸 돌고돌아 깔게 되니까, 그냥 지금은 홈브류를 설치한다음 홈브류를 통해 코코아팟을 설치한다~ 라고생각하시면됩니다.
검색창에 homebrew 쳐서 들어간다음 저 명령어 그대로 복사해서 붙여넣기하고 실행해줍시다.
그러면 Next step 이라고 해서 나옵니다.
(m1 같은 경우는 intel 칩과 좀 달라서 좀 설정을 해줘야하는부분이 있습니다.)
무슨내용인고하니 .zprofile ( .zshrc ) 에 뭐 적으랍니다.
eval "$(/opt/homebrew/bin/brew shellenv)"
대충 이렇게 넣으랍니다.
이것의 의미는 위에 변수추가하는거랑 같은데. eval 이 뒤에 부분을 실행시켜라 ~ 라는 명령어인데 ~~~~ brew shellenv 하면 환경변수에 추가된다 뭐 이런의미입니다.
어찌됫나 보니까 저렇게 딱 추가가 되어있네요.
그니까
(eval "$(/opt/homebrew/bin/brew shellenv)" 요거를 적거나
export PATH=/opt/homebrew/bin:$PATH 이렇게하거나 같은 결과를 얻겠죠? )
어쨋든 이렇게했으면 homebrew 세팅완료입니다.
7. 코코아팟 설치
자 이제 우리가 homebrew를 설치했던 근본적인 이유. 코코아팟을 설치하겠습니다.
brew install cocoapods 이라고 쳐줍니다.
다됫다 생각되시면 잘됫는지 봅시다.
pod --version 치시고 버전 잘나오면 됩니다.
8. 로제타
terminal 을 열어서 flutter doctor 를 쳐봅니다.
얼마나 진행됫는지 , 더해야될건 뭔지 확인하려구요.
해보니 대략 3가지의 문제점이 있는데 하나식 봅시다.
먼저 인텔칩이아니고 m1 이상의 칩을 쓰면 로제타 환경에서 flutter 를 해야된다 뭐 이런게 있는데, 로제타는 뭔지모르겠지만
하라는대로 한번 해봅니다.
sudo softwareupdate --install-rosetta --agree-to-license
저 명령어를 복사해서 그래도 터미널에 쳐줍니다.
오키 됫네요. 일단 첫번째 문제는 해결.
9. 안드로이드 라이센스
마찬가지로 두번째 문제는 flutter doctor --android-licenses 라고 치면 될것 같습니다.
뭐 y,n 나오는거 y 로 다 하면됩니다. 그럼 해결
10. xcode 에러
이것도 저기 나오는데로 명령어를 치면될것같네요.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
이렇게 하니 다 되부럿습니다.
뒷 3개는 거의 공짜였네요.
11. 샘플 프로젝트 오픈
안드로이드 스튜디오에서 new flutter project를 선택하고 flutter부분에서 sdk설정잘한다음
프로젝트이름 올가니제이션(회사이름인데 제가 닉네임이 saran 이라서 저렇게함) 등등 저처럼 세팅한뒤 create를 해주세요.
그러면 샘플 프로젝트가 나오게 됩니다.
12. 에뮬레이터 실행
먼저 IOS 부터 해봅시다,
저기부분에서 Open iOS Simulator 를 누르면 영롱한 에뮬레이터 하나가 뜹니다.
에뮬레이터가 나타나면 저기 플레이버튼을 누르면됩니다.
그럼 이렇게 잘 나타났습니다..
이번엔 안드로이드 에뮬레이터 차례입니다.
저 오른쪽 부분을 누르면 에뮬레이터 모음집이 나오는데 리스트중에 하나 골라서 플레이하면됩니다.
저는 기본적으로 하나가 있네요. 근데 다른걸로 하고싶다 슾으면 Create Device 눌러서 적절하게 기기 선택하고 적잘하게 버전선택해서 하심됩니다.
저기 아래쪽에 나오니까 크기도 작고 불편한데, 저걸 따로 분리할수가 있습니다.
그냥 인터넷창 나누듯이 할수도있구요,
세팅부분에 emulator 의 Launch in a tool window 에 체크해제하시면 이렇게 따로 뺄수도 있습니다.
그럼 이렇게 에뮬레이터 띄우기 까지 완료가 되었습니다.
4. 미완
내용
'코딩생초보를 위한 플러터 빠르게 한바퀴' 카테고리의 다른 글
| 9.distribution (0) | 2023.10.27 |
|---|---|
| 8.firebase2-auth,storage (0) | 2023.10.21 |
| 7.firebase1-firestore (0) | 2023.09.02 |
| 6.network (0) | 2023.08.22 |
| 5.state management (0) | 2023.08.11 |
