오늘은 전에 말씀 드린 Hello World 웹 사이트를 개발하는 부분을 살펴보겠습니다.
오늘도 http://grrrrtube.com방문 부탁드립니다.
제가 쓰는 개발 환경
CPU: Intel i7-8700
RAM: 64GB
SSD: HP EX 920 1TB
VGA: MSI RTX2080
이제 인텔리J를 실행시키고 다음 순서대로 helloworld 프로젝트를 만듭니다.
1) New Project > Flutter 선택합니다.
2) Project Name 을 입력합니다. helloworld 를 입력하고 Finish를 누릅니다.
3) 이제 프로젝트가 만들어집니다.
4) 하단의 Terminal을 선택합니다.
5) 플로터 채널을 dev로 변경합니다.
C:\Users\ten10\IdeaProjects\helloworld>flutter channel dev Switching to flutter channel 'dev'... git: From https://github.com/flutter/flutter git: 1c79347ef6..bc6f270c58 dev -> origin/dev git: * [new branch] DaveShuckerow-patch-1 -> origin/DaveShuckerow-patch-1 git: + 18cd7a3601...659dc8129d beta -> origin/beta (forced update) git: ab36346af6..f34bb03d89 master -> origin/master git: * [new branch] revert-48350-check-desktop-setup-on-build -> origin/revert-48350-check-desktop-setup-on-build git: * [new branch] sjindel.aar -> origin/sjindel.aar git: * [new branch] time-text-scale -> origin/time-text-scale git: * [new tag] v1.13.9 -> v1.13.9 git: * [new tag] v1.14.0 -> v1.14.0 git: Your branch is behind 'origin/dev' by 88 commits, and can be fast-forwarded. git: (use "git pull" to update your local branch) git: Already on 'dev' |
이미 dev를 설정 중이라 Aleady on 'dev'라고 나오는 것같습니다. 만약 나온다고 해도 무시하시면 됩니다.
6) 이제 프로젝트에서 web 개발을 할 수 있도록 enable 시켜 줍니다.
C:\Users\ten10\IdeaProjects\helloworld>flutter config --enable-web Setting "enable-web" value to "true". You may need to restart any open editors for them to read new settings. |
--enable-web 이 정상적으로 잘 실행되면 상단에 디바이스 선택에서 chrome을 선택할 수 있습니다.
Chrome과 Web Server를 선택할 수 있습니다.
7) Flutter doctor를 실행해 봅니다. (생략가능)
C:\Users\ten10\IdeaProjects\helloworld>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel dev, v1.13.8, on Microsoft Windows [Version 10.0.18362.592], locale ko-KR) [√] Android toolchain - develop for Android devices (Android SDK version 29.0.0) [√] Chrome - develop for the web [√] Android Studio (version 3.4) [√] IntelliJ IDEA Ultimate Edition (version 2019.1) [√] Connected device (2 available) • No issues found! |
Chrome-develop for web이 체크 되어 있으면 정상입니다.
8) 이제 실행해 봅니다.
C:\Users\ten10\IdeaProjects\helloworld>flutter run -d chrome Launching lib\main.dart on Chrome in debug mode... Building application for the web... 24.6s Attempting to connect to browser instance.. 5.9s Warning: Flutter's support for web development is not stable yet and hasn't been thoroughly tested in production environments. For more information see https://flutter.dev/web � To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R". For a more detailed help message, press "h". To quit, press "q". Debug service listening on ws://127.0.0.1:5080/1CNA2fYFTRQ= |
크롬 브라우저가 실행됩니다.
+ 버튼을 누르면 숫자가 올라 갑니다. 안드로이드에서 보는 화면을 웹에서도 동일하게 볼 수 있습니다.
* 다음에는 모바일 웹 페이지를 실제 웹서버에 설정하여 외부에서도 접근 가능하게 고쳐보는 부분을 살펴보겠습니다.
감사합니다. http://grrrrtube.com 자주 애용해주세요. (요즘 힘들어서.. 부탁 드립니다.)