5. [VS Code]Flutter Test 앱을 만들어 iPhone에 배포하기

Flutter Get started 에 나온 메뉴얼의 내역중 3번 IDE 설치 완료 이후 정상 설치 여부를 확인하기 위한 테스트 해보는 단계입니다.

영어로 해놓으니까 역시 메뉴얼이랑 IDE랑 맵핑해서 보기 편하네요. 한글 메뉴얼이었다면 한글언어로 설정해야겠다는 생각도 듭니다.

flutter로 검색을 하면 아래와 같이 Flutter: New Project 가 나오는데요. 이걸 선택 합니다.

그러면 이제 화면이 아래와 같이 나옵니다.

Application을 선택하면 아래와 같이 프로젝트를 저장할 폴더 선택이 나옵니다.

프로젝트들을 담아 놓을 상위 폴더를 하나 만들어서 선택 하면 됩니다.

그러면 나중에 프로젝트를 생성할때 마다 프로젝트 명으로 폴더가 생성이 됩니다.

저는 아래와 같이 dev_VSCODE 라고 폴더를 만들어서 선택 합니다.

그러면 프로젝트 명을 넣는 단계인데요 아래와 같이 기본 프로젝트명이 생성됩니다.

하지만 저희는 myapp 으로 만들어 보겠습니다. Project Name에 myapp으로 이름을 넣습니다.

아래와 같이 첫번째 테스트 앱이 자동으로 만들어 집니다.

일단 앱을 다 생성했는데요. 아래와 같이 Document에 내역이 있습니다.

Note 부분에 나온 얘기는 컴퍼니 도메인하고 프로젝트 네임 하고 패키지 네임을 동일 하게 만들어라 하는 내용이네요.

com.example 에서 example 부분이 회사 도메인 이니까 그걸 맞추라는 얘기네요.

앱이 배포되고 나면 해당 앱의 패키지 네임을 변경할수 없으니 주의 해야 하고 또한 패키지 네임은 유니크 해야 한다고 합니다.

Warning은 VS Code가 Flutter SDK를 인지 할수 있도록 반드시 재 시동을 하라고 하네요.

Tip에는 앱의 코드는 lib/main.dart에 있다고 하네요.

이제 자동 생성된 테스트 앱을 실행 해보도록 할까요. 메뉴얼은 이렇게 되어 있네요.

바닥의 푸른색 스테이터스 바를 보라네요.

그리고 여기서 디바이스를 선택 하라고 합니다. 일단 저는 시뮬레이터를 아까 안드로이드 테스트 때문에 켜놓아서 인지

이미 자동 인지를 하고 선택이 되어 있네요.

다른 시뮬레이터를 띄워 볼께요. iPhone 13 Pro 를 실행 하여 보겠습니다.

시뮬레이터를 다른걸로 띄우니 VS Code가 자동으로 인식을 합니다.

F5를 눌러서 실행을 하라고 친절하게 안내도 해주네요.

단축키 F5키를 눌러서 실행하거나 Run > Start Debugging 을 선택해도 됩니다.

실행 하니까 이렇게 화면이 나오네요.

실행된 모습입니다. 안드로이드와 똑같네요.

오 ~ 그리고 Status Bar위에 이런 문구도뜨네요. 이런 저런 툴이 많이 있네요. Open 을 눌러 보겠습니다.

VS Code를 사용한 테스트 앱을 실행 하여 보았습니다.

이로써 안드로이드 스튜디오와 VS Code를 모두 사용해서 안드로이드 시뮬레이터 / iPhone 시뮬레이터로 테스트 엡을 모두 실행하는 것을 확인하고 테스트까지 완료 하였습니다.

기본적인 개발 환경은 갖추어졌으니 이제 본격적으로 다트 랭귀지 공부와 함께 실제 토이 프로젝트를 만들어 보면 되겠습니다.

아직까지는 하나의 소스로 여러가지 디바이스와 IDE툴로 개발을 할수 있는건 장점이자 재미 있는거 같습니다.

실제 앱을 만들어 보면 더욱 진가를 볼수 있을꺼 같아서 기대 됩니다.

같이 보면 좋은 글들입니다.

ITS