** 이 글은 https://flutter.dev에 있는 안내 페이지의 내용을 편집 및 재구성한 내용입니다. 참고 바랍니다.
(출처: https://flutter.dev/docs/get-started/test-drive)
참고로 사이트 주소가 flutter.io에서 flutter.dev로 변경되었네요. 왜 변경되었는지는 찾지 못했습니다;;
이 페이지는 어떻게 템플릿으로부터 새로운 플러터 앱을 생성하는지, 그것을 실행하는지, 앱에 변화를 주고난 뒤 "핫 리로드"를 경험하는지에 대한 것을 기록하고 있습니다.
작성, 빌드, Flutter 앱을 실행할 개발 툴을 선택해서 보시면 됩니다.
(1,2,3번 각 개발툴 사이의 연관성은 없으니 하나만 선택해서 참고하시면 됩니다 :) )
1. Android Studio / IntelliJ
1.1 앱 생성
1. [File] > [New Flutter Project] 를 선택하세요.
2. 프로젝트 타입에서 [Flutter application]를 선택하세요. 그리고 [Next]를 누르세요.
3. [Flutter SDK Path]에 SDK가 설치된 위치를 채워 넣으세요. 만약 아직 설치되지 않았다면 먼저 SDK를 설치하세요.
4. 프로젝트 이름을 입력하세요(예를들면 myapp 같은), 그리고 [Next]를 누르세요.
5. 이제 [Finish]를 누르세요.
6. SDK를 설치하기 위해 Android Studio를 기다리고, 프로젝트를 생성하면 됩니다.
상단에서 언급한 명령은 Material 컴포넌트를 사용하는 간단한 데모 앱을 포함하는 myapp이라는 Flutter 프로젝트 디렉토리를 만듭니다.
팁: 당신의 앱의 코드는 lib/main.dart에 있습니다. 각 코드 블럭이 하는 일에 대한 상세한 설명은 해당 파일의 맨 위에 있는 주석을 참고하면 됩니다.
1.2 앱 실행
1. Android Studio 툴바 메인의 위치를 찾습니다.
2. [Target selector]에서, 앱을 실행할 Android 기기를 선택하세요. 만약 이용가능한 것이 목록에 아무것도 없다면, [Tools] > [Android] > [AVD Manager]를 선택하고, 그곳에서 하나를 생성하세요.
3. 툴바에서 run 아이콘을 클릭하거나 메뉴에서 [Run] > [Run]을 실행하세요.
앱 빌드가 완료되고 나면, 당신의 기기에서 스타터 앱을 볼 수 있을 겁니다.
1.3 핫 리로드 시도
Flutter는 핫 리로드 기능을 이용하여 빠른 개발 사이클을 제공합니다. 핫 리로드는 앱이 살아있는 상태에서 리스타트나 앱의 상태를 잃어버리지 않고 코드를 리로드 하는 기능입니다. 앱 소스를 고치고, IDE나 커맨드 라인 툴을 통해 알리고, 그것을 시뮬레이터, 에뮬레이터, 혹은 기기에서 확인할 수 있습니다.
1. lib/main.dart를 열어주세요.
2. 문자열을 변경하세요.
'You have pushed the button this many times'
위의 것을 아래와 같이 변경해보세요.
'You have clicked the button this many times'
당신의 앱을 중지하지 말고, 앱을 실행하고 있어야 합니다.
3. 변화를 저장하세요: [Save All]을 호출하거나 [Hot Reload]를 클릭하세요.
실행중인 앱 안에서 거의 즉각적으로 업데이트 된 문자열을 볼 수 있을겁니다.
2. Visual Studio Code
2.1 앱 생성
1. [View] > [Command Palette]를 호출하세요.
2. "flutter"를 타이핑하시고, [Flutter: New Project]를 선택하세요.
3. 프로젝트 이름을 myapp과 같이 입력하시고, 엔터를 누르세요.
4. 생성하거나, 새로운 프로젝트 폴더를 위한 부모 디렉토리를 선택하세요.
5. 프로젝트 생성을 완료하고, main.dart 파일이 나타날때까지 기다리세요.
상단에서 언급한 명령은 Material 컴포넌트를 사용하는 간단한 데모 앱을 포함하는 myapp이라는 Flutter 프로젝트 디렉토리를 만듭니다.
팁: 당신의 앱의 코드는 lib/main.dart에 있습니다. 각 코드 블럭이 하는 일에 대한 상세한 설명은 해당 파일의 맨 위에 있는 주석을 참고하면 됩니다.
2.2 앱 실행
1. VS Code 상태바를 찾으세요.(윈도우의 최 하단에 있는 파란색 바 입니다.)
2. 기기를 Device Selector 영역에서 찾고 선택하세요. 자세한걸 원한다면 이 링크를 참고하세요.
- 만약 이용가능한 기기가 없고, 디바이스 시뮬레이터를 이용하기 원한다면 [No Devices]를 클릭해서 시뮬레이터를 구동하면 됩니다.
- 실제 기기를 설정한다면 OS에 종속되는 설치 페이지에서 기기 특정의 안내를 따르세요.
3. [Debug] > [Start Debugging]을 누르거나 [F5]키를 누르세요.
4. 앱이 실행될 때까지 기다리세요. 진행상태는 [Debug Console View] 에 출력됩니다.
앱 빌드가 완료되고 나면, 당신의 기기에서 스타터 앱을 볼 수 있을 겁니다.
2.3 핫 리로드 시도
Flutter는 핫 리로드 기능을 이용하여 빠른 개발 사이클을 제공합니다. 핫 리로드는 앱이 살아있는 상태에서 리스타트나 앱의 상태를 잃어버리지 않고 코드를 리로드 하는 기능입니다. 앱 소스를 고치고, IDE나 커맨드 라인 툴을 통해 알리고, 그것을 시뮬레이터, 에뮬레이터, 혹은 기기에서 확인할 수 있습니다.
1. lib/main.dart를 열어주세요.
2. 문자열을 변경하세요.
'You have pushed the button this many times'
위의 것을 아래와 같이 변경해보세요.
'You have clicked the button this many times'
당신의 앱을 중지하지 말고, 앱을 실행하고 있어야 합니다.
3. 변화를 저장하세요: [File] > [Save All]을 호출하거나 [Hot Reload]를 클릭하세요.(녹색으로 된 동그란 화살표 버튼)
실행중인 앱 안에서 거의 즉각적으로 업데이트 된 문자열을 볼 수 있을겁니다.
3. Terminal & editor
3.1 앱 생성
새 프로젝트 생성을 위해 "flutter create"명령을 사용하세요.
$ flutter create myapp
$ cd myapp
이 명령은 myapp이라고 불리는 flutter 프로젝트 디렉토리를 생성해 줍니다. 이 앱은 Material 컴포넌트를 사용하는 간단한 데모 앱을 포함합니다.
팁: 당신의 앱의 코드는 lib/main.dart에 있습니다. 각 코드 블럭이 하는 일에 대한 상세한 설명은 해당 파일의 맨 위에 있는 주석을 참고하면 됩니다.
3.2 앱 실행
1. 안드로이드 기기가 실행중인지 체크하세요. 만약 보이지 않는다면, OS에 종속되는
설치 페이지에서 기기 특정의 안내를 따르세요.
2. 아래의 명령을 사용하여 앱을 실행하세요.
앱 빌드가 완료되고 나면, 당신의 기기에서 스타터 앱을 볼 수 있을 겁니다.
3.3 핫 리로드 시도
Flutter는 핫 리로드 기능을 이용하여 빠른 개발 사이클을 제공합니다. 핫 리로드는 앱이 살아있는 상태에서 리스타트나 앱의 상태를 잃어버리지 않고 코드를 리로드 하는 기능입니다. 앱 소스를 고치고, IDE나 커맨드 라인 툴을 통해 알리고, 그것을 시뮬레이터, 에뮬레이터, 혹은 기기에서 확인할 수 있습니다.
1. lib/main.dart를 열어주세요.
2. 문자열을 변경하세요.
'You have pushed the button this many times'
위의 것을 아래와 같이 변경해보세요.
'You have clicked the button this many times'
당신의 앱을 중지하지 말고, 앱을 실행하고 있어야 합니다.
3. 변화를 저장하세요.
4. 터미널 윈도우에서 키보드의 "r"을 입력하세요.
실행중인 앱 안에서 거의 즉각적으로 업데이트 된 문자열을 볼 수 있을겁니다.
댓글