Flutter 프로젝트 만들고 실행하기 | VSCode

지난번 게시글

Flutter 시작하기 | MacOS에서 VSCode로..

지난번엔 플러터가 무엇이고, 맥 환경에서 VSCode로 어떻게 설정하는지 알아 보았습니다. 

 

 

---

 

 

 

0. 들어가기 전에

이번엔 VSCode를 가지고 어떻게 프로젝트를 만들고 어떻게 에뮬레이터에서 실행할 수 있는지 알아 보겠습니다.

사실 저도 처음이라 몰르지만..ㄷㄷㄷ 일단 고고 해보겠습니다!!

 

 

 

1. 프로젝트 생성하기

1) 맥 상단 바에서 [View] - [Command Palatte...] 를 클릭합니다 
   은근 자주 쓰이는거 같은데 단축키(⇧⌘P)를 한번 외우는 것도 나쁘지 않다고 생각합니다

2) Command Palatte에서 'Flutter: New Project'를 선택합니다

3) 검색바가 바뀌더니 프로젝트 이름을 적으라고 합니다. 

    first_love로 적어보겠습니다 (Flutter야 받아줘~)

4) 프로젝트가 생성될 폴더를 정해 줍니다

5) 잠깐의 로딩을 기다리면 수많은 기본 코드가 생성 됩니다

first_love로 생성된 프로젝트의 main.dart 파일

 

 

 

 

2. 디바이스 선택하기

USB로 연결 되있거나 가동한 Emulator에 연결 할 수 있습니다 

 

1) Command Palette를 실행 

2) 'Flutter: Select Devices' 검색

3) 연결할 기기 선택

하단 우측에 있는 스마일 왼쪽에 있는 메뉴를 통해서도 선택이 가능하다

4) 연결할 기기가 없을 경우엔 Emulator를 만들거나 Emulator를 선택해서 가동시킬 수 있는 창이 뜹니다

 

 

 

3. 앱 실행해 보기

프로젝트 이름만 적었을 뿐인데 수많은 코드들이 자동으로 생성 되었습니다. 

심지어 main.dart 파일에는 예제 소스코드 까지 작성이 되어 있으니 한번 실행을 해서 보겠습니다 

 

1) [Debug] - [Start Debugging] (F5) 을 클릭하면 빌드 과정으로 생성된 앱이 실행되게 됩니다 

2) USB로 연결된 스마트폰에서 확인

안드로이드 스크린샷(왼쪽), 아이폰 스크린샷(오른쪽)

크로스 플랫폼이 아무리 똑같다이 만들어 준다 해도 역시 기본적으로 설정을 해줘야 되나 봅니다

1. 위 사진을 보면 상단 상태바가 안드로이드는 반투명, 아이폰은 투명으로 처리 되어 있습니다.

2. 네비게이션 바의 데모 이름도 안드로이드는 왼쪽 정렬, 아이폰은 가운데 정렬이 되어 있네요

 

어느정도 개발은 쉽지만 세세한 부분에서 같게 해줄려면 정말 힘든 코딩이 기다리고 있을꺼 같은 예감이 듭니다.

사실 각 플렛폼마다 유저도 다르기 때문에 그 플랫폼에서 자주 쓰는 디자인으로 맞춰주는게 좀 더 사용자 적인 디자인이라 생각됩니다.

 

 

 

 

4. 디버깅

기본적인 IDE와는 다르게 무조건 Debug모드로 실행 됩니다. 

안드로이드 기기의 경우 Run을 시키면 구동이 빠르지만, 디버그 모드로 구동하게되면 꾀나 오랜시간이 걸려서 시작하게 되는데, VSCode를 통해 실행한 Flutter는 빠르게 실행이 되면서 디버깅 모드가 켜지는걸 볼 수 있었습니다.

 

바로 디버깅 모드로 되며 코드 라인 왼쪽에 마우스로 클릭하면 브레이킹 포인트인 빨간 점이 생깁니다. 

그 후에 그 코드를 지나갈 수 있게 가동시키면 누리끼리한 초록줄이 생기면서 코드가 멈추게 됩니다.

 

이때 위에 떠있는 디버그 툴을 통해서 컨트롤 할 수 있습니다.

 

 

 

 

5. Dart DevTools 

Dart DevTools는 기본적인 코드 디버깅 뿐만 아니라 인스펙터, 타임라인, 메모리, 퍼포먼스, 로깅 등 다양한 기능을 제공해 줍니다

 

1) F5를 눌러 앱을 실행합니다 

2) Command Palette에서 'Dart: Open DevTools'를 실행합니다

3) 우측 하단에 나타난 팝업창에서 'Activate Dart DevTools' 를 눌러 활성화 합니다

4) 잠시 기다립니다

5) DevTools는 VSCode의 별도의 창이 아닌 웹 브라우져로 실행됩니다. DevTools에선 현재 연결중인 앱의 다양한 상태를 볼 수 있습니다.

DevTools의 Inspector

6) 사실 이런 커맨드를 치지 않고도, 우측 하단에 있는 퀵 버튼으로 실행이 가능합니다.

    우측 하단의 'Dart DevTools' 버튼 클릭 

 

 

 

6. 스크린샷

0) 앱을 실행하여 연결 중인 상태에서만 가능합니다 

1) Command Palette에서 'Flutter: Save SccrenShot'를 실행 합니다

 

 

 

 

 

7.마치며

개발툴이 생각보다 너무 잘 되어 있어서 나중에 개발하는덴 문제 없겠다 싶고.

코드를 직접 구현해 보진 않았지만 두리뭉실하게 걱정 반, 기대 반 이였던 생각이

더 명확하게 걱정 반, 기대 반이 되었습니다 ㅎㅎ.. 

 

걱정 : 각 OS에서 크로스 플랫폼 처리 

기대 : 크로스 플랫폼에서 각 OS 처리 

(????ㅋㅋㅋ)

 

 

---

 

도움이 되셨다면, 좋아요와 댓글 부탁드립니다~