[Flutter #8] 우리가 만들 첫 프로그램은?

우리가 만들 첫 프로그램은?

이번 스텝에서는 첫 번째로 플러터 앱을 만들기 위해서 코딩을 시작할 것이며, 플러터에서 제공하지 않고 외부에서 만든 외부 패키지를 이용해 볼 것입니다. 그리고 프로그램의 상태를 변경하는 Statefull 위젯을 배워 볼 것이고 마지막으로 이 프로그램에는 무한정 스크롤을 할 수 있는 ListView 위젯도 구현을 할 것입니다. 

그리고 핫 리로리드라는 기능도 경험을 할 텐데, 이것은 처음 개발을 시작할 때 컴파일을 한번 해 주면 개발자가 코드를 변경할 때마다 에뮬레이터나 실제 폰에 이미 실행을 해 놓은 애플리케이션에 자동으로 변경 사항이 반영 되는 것을 말하는 것입니다.

 

다음에 있는 그림이 우리가 만들 애플리케이션입니다. 안드로이드와 아이폰에서 동일하게 실행되는 화면을 보여주는 것으로 flutter-ko.dev에서 가지고 왔습니다. 

 

   

 

https://codelabs.developers.google.com/은 구글 코드랩이라고 하는 사이트로 구글에서 제공하는 다양한 내용들을 접해 볼 수 있고 플러터로 구현이 되어 있는 애플리케이션 역시 찾아 볼 수 있습니다. 

 

우리가 스텝1에서 만들 애플리케이션도 코드랩에서 찾을 수 있는데 Write your first Flutter app, part 1과 part2로 검색을 하면 찾을 수 있습니다. 여기서 만드는 애플리케이션은 유튜버들도 제작 과정 포스팅을 많이 했습니다. 유튜브에서 검색을 해서 시청을 하시는 것도 좋은 경험이 될 것입니다. 문자로 보는 것과 동영상으로 보는 것은 배울 수 있는 내용이 조금은 다를 수 있을 것 같습니다.

 

다시 한번, 플러터로 만드는 앱은 구글과 애플의 안드로이드 및 아이폰의 원래 개발환경으로 개발하는 것과 같은 코드를 생성해 주는 장점을 가지고 있습니다. 웹 검색에서는 네이티브 앱으로 변환된다고 표현이 되어 있습니다.

코딩을 따라해 보면서 플러터에 대한 감을 잡을 수 있길 기대하며 애플리케이션의 구조도 생각해 볼 수 있는 기회가 되길 바랍니다.

 

프로그램의 개발은 설치한 플러터 SDK와 VS코드를 이용해 개발을 할 것입니다. 안드로이드 스튜디오에 있는 에디터를 사용해서 플러터 애플리케이션을 개발 할 수도 있습니다만 많은 분들이 VS코드를 사용하는데는 이유가 있을 것이라 생각해 VS코드를 사용하겠습니다.

 

우리가 만들 프로그램은 아이폰과 안드로이드 폰 및 웹에서 실행을 해 볼 수 있지만 아이폰 개발 환경이 만들어져 있지 않아 안드로이드에서 실행하는 것으로 만족하려고 합니다. 웹에서도 실행을 해 볼 수 있지만 현재까지 발표된 바에 따르면 웹용은 베타 버전 수준이라고 합니다. 아무리 베타 버전이라고 해도 한번 살펴보고 넘어가는 것이 좋겠죠?

 

 

• 웹용으로 컴파일을 하기 위해서는 다음의 명령을 실행해야 합니다. 비주얼 코드 스튜디오 터미널에서 실행을 하면 됩니다.

 

$ flutter channel beta $ flutter upgrade $ flutter config --enable-web

 

실행을 한 결과는 다음과 같습니다. 에디터를 재 시작하라는 메시지가 보입니다. 

 

VS코드를 재 실행하고 터미널에서 flutter devices를 입력해 보면 다음과 같이 코드를 재 실행해 볼 수 있는 디바이스 리스트를 얻을 수 있습니다.

 

그리고 VS코드의 우측 하단에서 기존에 선택이 되어 있던 안드로이드 폰 에뮬레이터를 클릭하면 에디터 중앙 상단에 디바이스를 선택할 수 있는 창이 뜹니다. 거기서 Chrome을 선택을 하고 다시 실행을 하면 다음의 그림과 같이 Chrome에서도 동일한 애플리케이션이 실행이 되는 것을 볼 수 있습니다.

 

 

웹용 개발툴을 보기 위해서 안드로이드 스튜디오에서 디바이스를 Chrome으로 선택을 하고 실행을 하면 하단에 다음과 같은 콘솔이 나타납니다. 여기서 Console이라고 써 있는 곳에서 우측으로 세 번째 파란색 아이콘을 클릭합니다. 

 

 

다음과 같은 웹용 플러터 인스펙터 환경을 볼 수 있습니다.

 

 

이 환경은 webapp의 구조를 볼 수 있는 툴입니다. 나중에 어떻게 사용이 될 수 있는지 나중에 살펴봐야겠습니다.

 

여기까지 하나의 앱이 애플 아이폰, 구글 안드로이드 폰 그리고 웹에서 실행이 되는 것을 확인했습니다.