Flutter 설치하기 (Visual Studio Code 설치) + 첫번째 Flutter App 만들어보기
3. Visual Studio Code 설치
마지막으로 Flutter 코드를 edit / debug / build할 Visual Studio Code 설치 작업입니다.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
Visual Studio Code는 Microsoft에서 만든 Text Editor로 개발환경에 최적화되어있습니다.
수많은 개발자들이 개발용 Extention(Visual Studio Code상에서 plug-in으로 실행되는 툴)을 제작/배포하고있고, Programming 언어별로 쉽고 간편하게 edit / debug / build할 수 있는 환경을 제공합니다.
● Visual Studio Code 설치 Tutorial
① 홈페이지에서 최신 버젼의 Visual Studio Code 설치 파일을 다운로드합니다.
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
Windows 버젼을 다운로드해줍니다.
② 설치 가이드에 따라 설치해나가면됩니다. 최종 설치 직전 옵션 설정만 변경해줍니다.
최종 설치 직전 옵션으로 아래 3가지 옵션이 기본 체크되지않은 상태이나,
향후 사용 편의성을 위해 체크해주는 것이 좋습니다.
□ 바탕화면에 바로가기 만들기
→ 바탕화면에 바로가기 아이콘을 설치하는 옵션으로 빠른 실행을 위해 체크(안해도 무방함)
□ "Code(으)로 열기" 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가
→ 탐색기의 context 메뉴(파일 선택 후 우클릭시 메뉴)에 Visual Studio Code로 열기를 추가
□ "Code(으)로 열기" 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴에 추가
→ 탐색기의 context 메뉴(폴더 선택 후 우클릭시 메뉴)에 Visual Studio Code로 열기를 추가
기본적으로 Visual Studio Code는 폴더 단위로 프로그램을 관리하므로,
위 옵션을 켜서 탐색기에서 바로 실행시켜줄 수 있도록하면 편리합니다.
● Visual Studio Code(이후 VS Code) 환경 설정
설치가 완료되면 자동으로 VS Code가 실행됩니다. 실행되지않으면, 바탕화면 아이콘으로 실행할 수 있습니다.
먼저, VS Code의 각 창 명칭을 먼저 보고 넘어갑시다.
- 위 캡쳐에서 좌측의 파란 사각형 안쪽을 Primary Side Bar라고합니다.
Ctrl + B 입력시 확장/축소가 toggle됩니다.
해당 영역의 좌측 아이콘들을 클릭하면 주요 기능들을 실행합니다.
첫번째 아이콘은 Explorer로 현재 작업 중인 코드의 파일들을 탐색기처럼 보여줍니다.
두번째 아이콘은 Search로 검색시 사용합니다.
세번째 아이콘은 Source control입니다. GitHub나 로컬 Git서버 등과 연동하여 Source control할 경우 사용합니다.
네번째 아이콘은 Run & Debug입니다. 작업 중인 프로그램을 실행/디버그시 사용합니다.
다섯번째 아이콘은 Extentions입니다. 다양한 확장 프로그램 설치/삭제가 가능합니다.
- 노란 사각형 안쪽을 Terminal이라고합니다.
Ctrl + `(키보드 esc 아래쪽) 입력시 확장/축소가 toggle됩니다.
프로그램 작업 도중 debug 메세지를 보여주기도하고, 중요한 command를 입력하기도합니다.
- 녹색 사각형 안쪽이 Code를 입력하는 Editor창입니다.
VS Code는 각 Programming 언어에 맞는 Extention을 제공합니다.
Flutter 개발작업을 위한 Extention을 설치해보겠습니다.
앞서 설명한 Primary Side Bar에서 Extentions 아이콘을 클릭해줍니다. (또는 단축키 Ctrl + Shift + x)
아래와 같이 검색창에 flutter를 입력하면 flutter 관련 extention 들이 검색됩니다.
기본적으로는 아래 노란색 표시된 2개 정도만 실행해도 충분합니다.
개인의 취향에 따라 더 편리한 코딩 환경을 위해, 필요한 extention들을 시험해보시는것도 좋을 듯 합니다.
extention 설치는 install 버튼을 누르면 자동 진행됩니다. (dependancy에 따라서 필요한 extention은 자동 설치)
설치 후 화면입니다.
이제 Flutter 설치 과정은 모두 완료되었습니다.
Flutter 설치가 완료되었으니,
첫번째 Flutter App을 만들고 Windows, Web, Android에서 각각 실행해보겠습니다.
우선 Project를 생성할 부모 폴더를 정합니다.
아래의 폴더 구조를 보면, 부모 폴더 아래 Project 폴더가 위치합니다.
flutterProject : 부모 폴더
exam01 : Project 폴더
exam01 폴더는 VS(Visual Studio) code가 자동 생성하게되므로,
원하는 작업용 부모 폴더를 생성해줍니다. 향후 많은 flutter App Project들이 이 폴더안에 생기게 될 겁니다.
저의 경우 부모 폴더의 위치는 다음과 같습니다.
C:\Programming\works\flutterProject\
VS(Visual Studio) code를 실행합니다.
실행방법은 4가지 정도가 있습니다.
① 바탕화면 아이콘을 더블클릭해서 실행
② 윈도우키 입력 후, visual studio를 검색해서 실행
③ 탐색기의 context 메뉴(오른쪽 버튼 메뉴)를 이용해서 실행 - 1
VS code가 열릴 때 작업 폴더가 현재 진입해 있는 폴더(C:\Programming\works\flutterProject)인 상태로 실행됩니다.
④ 탐색기의 context 메뉴(오른쪽 버튼 메뉴)를 이용해서 실행 - 2
VS code가 열릴 때 작업 폴더가 현재 선택한 폴더(C:\Programming\works\flutterProject)인 상태로 실행됩니다.
탐색기에서 오른쪽 버튼 메뉴로 실행시, Windows 11의 경우 "더 많은 옵션 표시" 때문에 2번의 클릭이 필요합니다.
많은 사람들이 불편해하고 있는데요. 아래 참조하시면 이전 버젼의 context 메뉴와 동일하게 변경됩니다.
2022.09.15 - [PC팁] - Windows 11 마우스 우클릭 메뉴 "더 많은 옵션 표시" 제거/원복
VS code에서 첫번째 새로운 flutter project를 생성합니다.
Flutter 설치 과정을 잘 쫓아오셨다면,
Flutter extention이 설치되어있으므로, 관련 support command들도 이미 설치가 되어있을겁니다.
Flutter support command 중에는 새로운 flutter project를 만들어주는 command가 포함되어있습니다.
① VS code의 command palette 창을 열고 flutter를 검색합니다.
② 검색된 flutter support command 중에서 Flutter: New Project를 실행합니다.
③ 우리는 flutter Application을 만들꺼니, Application을 선택합니다.
④ "부모 폴더"의 위치를 물어봅니다. 저의 경우는 c:\Programming\works\flutterProject\ 로 선택했습니다.
⑤ Project명을 입력합니다. 입력된 Project명의 폴더가 앞에서 선택한 부모 폴더 속에 생깁니다.
⑥ 부모 폴더에 처음으로 Project를 생성하는 경우 믿을 수 있는 폴더인지 물어봅니다. 믿어봅니다.
⑦ 새로운 Project 생성이 완료되었습니다!
좌측의 Side Bar에 보면 main.dart 가 선택되어있고, 우측의 Editor 창에 main.dart의 내용이 보입니다.
폴더 구조가 복잡해 보일 수도 있지만, 실제로 만지게 되는 파일들은 아래 정도였었습니다.
① \pubspec.yaml
library dependency를 수정할 때 사용합니다. 많은 경우에 pub.dev에서 타개발자들이 이미 개발해놓은 library들을 가져다 쓰게되는데 그럴때 \pubspec.yaml 수정을 통해 가져다 쓸 수 있습니다. 하지만 조금 더 편리한 방법이 있어서 저는 이 파일을 직접 수정하는 경우가 많지는않네요.
② \lib 폴더 안의 *.dart 파일
실제 dart 언어로 코딩 작업을 하는 파일들입니다. 실제 대다수의 작업은 여기서 이루어집니다. Flutter의 경우 Java나 Kotlin으로 작업할 때와는 달리 별도의 xml 파일로 UI를 꾸미지않으므로, 이 dart 파일들이 UI 이자 Code이자 모든 것 입니다.
③ \assets
현재는 존재하지않습니다만, 향후 이미지 등을 앱에 넣어야할 경우 \assets 폴더를 만들어서 pubspec.yaml에 등록하면, 해당 파일들을 사용할 수 있습니다.
④ \build
마찬가지로 현재는 존재하지않습니다만, 프로젝트를 배포하기위해 build하면 해당 폴더 안에 결과물이 생성되게됩니다.
Project 생성이 완료되었으니 실행시켜봅시다.
아무런 코딩 작업은 하지않았지만, 이미 Flutter support command 가 기본적인 코드 입력을 해두었습니다.
현 상태에서 전혀 코드를 건드리지않아도 F5 (Debugging 실행) 또는 Ctrl + F5 (Debugging 없이 실행) 키로 앱 실행이 가능합니다.
그대로 따라오신 분들은 아래와 같은 Windows용 앱이 실행되었을겁니다.
Flutter는 Muti-platform을 지원합니다. PC뿐 아니라, Android / Web에서 실행이 가능하고,
설치 포스팅에서는 다루지않았지만, iPhone 및 Linux 환경에서도 실행이 가능합니다.
이제, Android / Web에서도 한 번 실행해보겠습니다.
VS code 에서 아래 표시한 우하단에 현재의 대상 디바이스를 확인할 수 있습니다.
현재는 Windows (windows-x64)로 표시되어있고, 클릭해서 변경하면 다른 디바이스(플랫폼)에서도 실행해볼 수 있습니다.
노란색 원으로 표시된 부분을 클릭해봅니다.
아래와 같이 상단에 팝업이 뜨면서 디바이스 선택창이 뜹니다.
Chrome, Edge를 선택하면 Web에서 실행해볼 수 있겠고....
당장은 Android 에서 실행을 할 수가 없네요. 이유는 간단합니다. Android device가 연결되어있지않아서입니다.
최종적으로는 안드로이드용 설치 파일인 *.apk로 빌드하고, 폰에 설치해서 실행하게되겠지만,
앱을 만드는 동안에는 일반적으로 수많은 디버깅 과정이 필요합니다.
이 경우 2가지 방법이 있습니다.
먼저, Android 폰(삼성 스마트폰)을 가지고 계시다면 실제폰을 연결하는 방법이 있고,
다른 방법으로 emulator를 설치하는 방법도 있습니다.
여기서는 emulator를 설치해서 실행해보겠습니다.
한 번 설치해놓으면, 실제폰을 연결하지않아도 PC에서 바로바로 디버깅이 가능하니,
실제폰을 사용하시는것보다는 emulator를 추천합니다.
Android Studio를 실행합니다. (윈도우키 누르시고 android studio 를 검색하시면 됩니다.)
Android Studio에서 Virtual Device Manager를 실행해야합니다.
저의 경우 Pixel 4를 emulator로 선택했는데, 이유는 한가지 Play Store 지원 때문입니다.
Play Store에 아이콘이 없는 emulator 이미지는 Play Store가 없으니 참고하세요.
처음 Emulator를 만드는 과정이라 Android Image가 Download되어있지않습니다.
원하는 버젼을 선택하고, Download를 클릭해줍니다.
이미지가 다운로드 되었으면, Next 버튼이 활성화됩니다. Next 클릭!
AVD Name을 기억해둡시다. Finish 클릭하면 끝납니다. 이제 Virtual Device Manager와 Android Studio는 종료해주세요.
이제 VS code로 돌아가서 Device 선택(아래 빨간 표시)을 클릭해보면, 아까 기억해둔 명칭의 emulator들이 보입니다.
둘 중 아무거나 실행해도 됩니다. 처음 켜는거니까요.
일반적인 경우 (cold boot)표시가 없는 위쪽 emulator를 선택하시면 됩니다.
혹시 나중에 emulator에 이상이 생겼거나, 필요에 의해 껐다켜야할 상황이 생기면 "Start Pixel 4 API 31 mobile emulator (cold boot)" 를 사용하시면됩니다.
아래와 같이 에뮬레이터가 켜집니다.
Cold boot라서 emulator의 실행 시간이 오래 걸리면 아래와 같은 error가 뜨는 경우도 있습니다만, 관계없습니다.
아래쪽에 Device명이 뜨면 잘 연결된겁니다. 찝찝하시다면... ^^ 위에 노란 원으로 표시된 부분 클릭해서 에뮬레이터를 끄고, 다시 한번 실행해보시면 이번에는 아무 error없이 실행될겁니다. warm boot라 켜지는 속도도 빠를꺼구요.
이제 앱을 실행해봅시다. 여러가지 방법이 있습니다.
아까 Windows에서 실행할 때와 마찬가지 방법으로 단축키를 활용하는 방법과 클릭을 통해 실행하는 방법이 있는데요.
Debugging으로 실행하게되면 설정해놓은 breakpoint나 특정 Exeption 발생시 App 실행이 holding되어 문제되는 코드 확인이 가능합니다. 그냥 실행만 해보는거라면 Debugging없이 실행하시고, 코드 분석시에는 Debugging으로 실행하시면 됩니다.
① F5 (Debugging 실행) 또는 Ctrl + F5 (Debugging 없이 실행) 단축키로 실행
② Side bar에서 Run and Debug 아이콘을 클릭하고, Ru and Debug 버튼을 클릭 (아래 노란색 표시)
③ Editor 창의 우측 상산에 실행 아이콘을 클릭 (아래 빨간색 표시)
→ 이 경우 아이콘 옆의 ∨모양을 클릭하시면 Debugging 여부를 선택해서 실행 가능
아래와 같이 잘 실행되는 모습을 확인하실 수 있습니다.
유사하게 Web에서도 실행이 가능합니다만, Web의 경우 Chrome / Edge가 자동 실행되면서 앱이 웹브라우져 상에 실행되게 됩니다. 앞서 해본 것과 유사하게 Web에서도 직접 실행해보시죠~ 여기서는 Skip하겠습니다.
대신 아래에 Web용으로 build해서 google firebase hosting service를 이용해 직접 사이트에 올려보았습니다.
이 페이지 안에서 직접 동작하는 Web app이니 화면상의 파란색 +버튼을 클릭해보시죠!!
모두 즐거운 하루 되세요~~