오픈소스 Flutter 쉽게 시작해 보기 (VS Code 사용, web support 사용)
오픈소스인 Flutter는 구글에서 만든 소프트웨어 개발 도구입니다. 프로그래밍 언어는 아니고 SDK입니다. 크로스 플랫폼이라 안드로이드(Android), iOS, 리눅스(Linux), 윈도우(Windows), 맥(Mac) 등에서 돌아가는 애플리케이션 개발에 사용됩니다. 플러터(Flutter)는 다트(Dart)라는 프로그래밍 언어를 사용합니다.
Flutter는 태어난 지 얼마안됐지만 벌써 유명합니다. 저는 1년 전에 Flutter 스터디를 잠깐 한 적이 있었는데 그때 사용해보니 개발 속도가 아주 빠르고 학습 진입 장벽이 낮고 사용이 쉬워서 좋다고 생각했었습니다. 1년이 지난 지금은 더 유명해진 것 같습니다. 앞으로 기대하고 SDK(software development kit)입니다.
그럼 간단하게 Flutter를 사용해 보겠습니다.
- Visual Studio Code를 설치해서 실행합니다. VISUAL STUDIO CODE 설치하고 한국어팩 사용하기 ( click )
- View > Command Palette 을 선택합니다.
- >extensions 을 검색해서 나오는 리스트 중 Extensions: Install Extensions를 선택합니다.
- Marketplace에서 Flutter라고 입력하고 해당 extension을 찾습니다.
- Flutter를 설치(Install) 합니다. Dart 플러그인도 같이 설치됩니다.
- 다시 View > Command Palette 로 가서 >doctor를 치고 Flutter:Run Flutter Doctor 를 고릅니다.
- Flutter SDK 설치를 깜빡했네요. 역시 닥터는 닥터입니다.
- 링크를 타고 들어가서 본인의 OS에 맞는 SDK를 다운받습니다. 그리고 압축을 풉니다. 용량이 한 170MB 정도 됩니다. 그 정도는 플러터에 양보하세요~
- 환경 변수(environment variables)에 flutter\bin 절대 경로를 추가합니다.
- git 설치 후 View > Command Palette에서 Flutter: Run Flutter Doctor 를 실행시킵니다. 닥터가 환경을 진단한 결과를 말해줍니다.
- VS 코드 터미널에서 flutter doctor 를 실행하는 방법도 있습니다.
- 다시 뷰>커맨드 팔레트에서 flutter을 입력하고 Flutter: New Application Project 를 선택합니다. 폴더 지정하시고, 프로젝트명 정합니다.
- 바로 아래의 화면이 보일 것입니다. 오~ 샘플 코드 굿! Flutter는 Dart 언어를 사용하기 때문에 파일이 main.dart 입니다.
- 앱을 Chrome에서 실행시키기 위해 설정을 하겠습니다. 아직 베타 버전에서만 웹 버전을 지원하고 있습니다. (참고링크) Terminal을 열고 1. flutter channel beta 2. flutter upgrade 3. flutter config --enable-web 를 순서대로 실행합니다.
- flutter devices 명령어를 실행하면 연결된 2개 장치 목록에 Chrome과 Edge가 보입니다.
- Run > Start Debugging 을 실행합니다.
- 실행하면 웹 서포트 쓸꺼냐 물어보고 선택한 뒤에는 flutter create 을 실행하라고 메세지가 뜨는데 마우스 클릭하시면 됩니다. 혹시 안되면 터미널에 직접 실행 ㄱㄱ 잘 되면 아래와 같이 선택할 장치 목록에 뜹니다. 크롬을 선택합니다. 그리고 F5 로 실행 하고 뭐 에러 있다고 해도 걍 진행 ㄱㄱ
- 아래와 같이 크롬 창에 Flutter 앱이 잘 동작하는 것을 확인 할 수 있습니다. 우측 하단의 플러스 버튼을 막 눌러봅시다.
* 간단하게 보여드리려고 했는데 의도치 않게 좀 빙빙 돌기도 했네요. 트러블슈팅 없이 순조롭게 되면 그게 개발인가요? 훗! (사실 처음부터 다시 만들기 귀찮으니 걍 패스!!!)
그럼 해피 코딩~~
- The End -
Comments
Post a Comment