[Flutter]. 03. 기본 템플릿 프로젝트 실행하기(VS Code)

개발에 사용 할 에디터까지 준비 완료!

[Flutter]. 02. 에디터 준비 (tistory.com)

[Flutter]. 02. 에디터 준비

 

 

Hello, World!

이제 프로그래밍 하면, 한번 해줘야 되는, 반가운 Hello, World 한번 해봐야죠.^^

 

먼저, VS Code로 해보겠습니다.

매뉴에서 View > Command Palette  를 누르거나 단축키 (Control + Shift + p)를 눌러 명령창을 띄우고, 거기서 Flutter : New Project를 선택합니다.

만약, VS Code에서 flutter를 찾지 못하면 아래와 같은 에러창이 뜰 수도 있는데, PATH 환경 변수에 SDK 경로가 설정되어 있지 않은지 한번 확인 해 보세요.

 

여러가지 옵션들이 있네요. 우선 기본 프로그램 만들어 보려고 하는 것이니, application을 선택 해 보겠습니다. 옆에 뜬 툴팁 내용을 보니 적합해 보이네요. 겸사겸사 다른 것들은 무엇이 있는지도 한번 읽어라도 봐두면 좋을 것 같아요.

VS Code의 flutter project template들

 

그리고 나면, 작업 폴더를 지정해야 합니다. 빈 폴더를 하나 만들어 지정 해 보겠습니다.

참, 설치 할 때 본 경고처럼, 한글이나 특수문자가 경로에 들어가지 않는 것이 우리의 몸과 마음의 건강에 도움이 될 것 같아요.

이어서 프로젝트 이름을 입력하고, Enter를 치면 징~징~ 하면서 프로젝트가 만들어 집니다.

 

지정한 폴더 자체가 프로젝트 폴더가 되는 것이 아니고, 지정한 폴더는 일종의 Workspace와 같이, project가 만들어지는 폴더가 됩니다. 지정한 폴더 하위에 지정한 프로젝트 이름으로 폴더가 만들어지게 됩니다.

자~ 드디어 첫 프로젝트가 만들어졌네요. 우측 하단에 뭔가 창들이 뜨는데, 오류가 아니면 크게 신경 쓰지 않아도 되지만, 어떤 내용인지는 한번 봐두는게 좋을 것 같아요. 그래야 나중에 '아~ 그게 여기 필요한 것이구나`' 싶을 때 생각이 나죠.

 

뭐 그렇더라도 깊이 있게 다른 것을 살펴보는 것은, 일단 하던 것을 마무리 하고 해야 하니, 아래와 같이 새로운 읽은꺼리는 다음으로 미뤄두도록 합시다.

 

만들어진 프로젝트 폴더를 보니, 지원 가능한 플랫폼별 폴더들이 다 따로 있네요. 지원 할 플랫폼을 따로 지정하지 않았는데, 모든 플랫폼의 코드들이 다 만들어질 필요는 없으니 아마도 어딘가 필요한 플랫폼만 지정하는 것이 있지 않을까 생각 한번 해두고 넘어가겠습니다..

pubspec.yaml 파일이 중요한 설정을 하는 파일인 것 같아요. dependency 나 버젼 정보 이런거 앱 개발할 때 중요하잖아요.

 

 

 

 

템플릿 프로젝트

 

 

일단 기본 템플릿이 어떤 프로젝트인지 볼께요. VSCode 우측 상단의 실행 버튼을 눌러 봅니다. 

SDK 위치가 잘 설정 된 상태라면 별 문제 없이 진행이 될 것 입니다. 특별한 설정을 하지 않았는데, Windows application으로 빌드가 되네요.

 

결과는 아래 그림과 같습니다.

우측 하단의 버튼을 누르면 중앙의 숫자가 증가하는 간단한 프로그램입니다.

템플릿 프로젝트를 보니, 타이틀바도 있고, 텍스트 위젯도 있고, Layout과 Align 방식을 설정하는 것도 있겠고, 이벤트 처리도 있겠네요.

 

flutter를 시작한다니까 VS Code에서 이것 저것 추천도 많이 해주네요. 뭔가 확인이나 해보자 싶어서 Open 눌러보니...

사용 정보 보내는 것 같은데 일단 안하는 걸로~~~~ 뭘 어떻게 보내는지 모르니~~~ Google이 사회를 위해 헌신적이라는 믿음이 있다면 기꺼이 제공 할텐데 Don't be evil이라는 그런 멋진 말과는 동떨어진 모습도 있고, 제공 할 정보가 어떤 가치가 있는지 아직은 판단 하기 이른 시점이니~~~~ 일단 안하는걸로~...

이것저것 눌러보니 프로그램 실행 시 디버깅 환경도 멋지게(? 뭔지 모르지만 좀 복잡한게 막 돌아가는 듯한...) 구성되어 있는 것 같아요.

 

어쨋든, Hello World!!!

일단, Hello World 보러 왔으니 한번 보고 가야죠.

main.dart 파일을 열고, Title의 내용을 Hello, World로 변경합니다. 

문법을 알고 바꾸는건 아니고 딱 보이니까~

home: const MyHomePage(title: 'Hello, World'),

 

결과는 잘 나옵니다.

프로젝트의 설정 파일들의 역할도 차차 알아둬야 하겠네요.

 

다음 시간에는 Android Studio에서 템플릿을 실행 시켜보고, 이 템플릿을 에뮬레이터와 실제 단말에서 실행하는 것까지 한번 해보도록 하겠습니다.

https://learn-and-give.tistory.com/38

[Flutter]. 04. 기본 템플릿 프로젝트 실행하기(Android Studio)