본문 바로가기

002.flutter vscode 설정

앞서 기본적인 Flutter 환경 설정부분을 알아보았고 또 설정을 해보았다.

이번은 본격적인 개발에 앞서 개발툴과 몇가지 에뮬레이션 설정등을 확인해보고자 한다.

 

개발도 어렵기는 하지만 그건 헤쳐 나가다보면 짤 때는 고통이라도 완성이 되거나 뭔가 구현을 하면 성취감이라는 피드백을 준다. 그래서 머리가 아파도 계속 하게 되는거 같은데.......

 

이걸 하기 위한 설정이나 설치등은 그런 피드백을 안준다. 그래서 귀찮고 어렵고 번거롭다. 많은 경우 이 초기 셋팅과정에서 접는 경우도 많다.

 

프로그래밍은 처음만 넘기면 나머진 큰 그림에서 반복이고 문제해결을 하는 방식이라는 생각도 든다.괜찮은 강좌에 돈 아까워 하지말고 듣고 가성비 있게 쓰면 된다. 찾아보면 온라인 코딩 강좌도 괜찮아 보이는게 많다.

 

매력적인 Flutter는 초기에 말이 많았지만 지금은 어느정도 개선이 되어서 쓸만해 졌다. 과거에 비해서 점점 나아지고 쓸만한것들도 점점 나오는 추세다.

개발속도를 단축시킬 수 있고 적은 비용으로 크로스플랫폼이 되는데 퍼포먼스까지 받혀 준다면 한번 테스트해볼만 하다 생각한다.

 

서론이 쓸데없이 길었군.

 

  1. Flutter 환경 설정
  2. visual studio code 설정
  3. 기본 문법 및 구조 익힘
  4. 개발 할 앱 Layout 설계 및 간략 기획서 수립
  5. 개발
  6. QNA
  7. 완료
  8. 안드로이드 마켓에 배포를 위한 이미지등 작업 및 배포
  9. 끝.

툴을 받기전에 android studio에서 emulator를 설정을 미리 해줘야 편하다.

 

안드로이드 스튜디오를 실행 후 configure -> AVD Manager를 눌러서 Create Virtual Device를 또 누른 뒤 가상 기기를 만든다.

 

원하는 해상도를 선택 후 next를 눌러서 다운로드를 한다. 다음 나오는창에 OS 버전도 선택해 주고

 

쭉 설정을 하면 하나가 만들어진다.

avd는 기가급의 용량이기 때문에 디바이스가 늘어나면 c가 부족하다. 

난 d로 옮긴다.

c:users\사용자 아이디 \.android에 avd 폴더가 있고 그안에 만든 디바이스명의 폴더가 또 있다.

거기 ini 파일에서 기기명.avd  폴더는 통째 잘라서 d로 옮기고 해당 폴더의 ini에서 경로를 변경해준다.

 

에뮬레이터를 설정하게 되면 VT-x is disabled in BIOS라는 에러가 나오는 경우가 있다.

메시지를 무시하고 에뮬레이터를 만들어도 항목에 보면 계속 에러 표시가 떠 있다.

이건 메인보드의 바이오스에서 가상화 설정을 해주어야 한다. 이 설정창은 메인보드 제조사별로 모두 다르기 때문에 똑같을 수 없다.

하지만 보통 바이오스 Advanced 메뉴에 들어가면 Intel Virtualization Technology라는 부분이 Disabled 되어 있으면 Enabled를 해주면 된다.

 

VT-x is disabled in BIOS

인텔 가상화 기술은 CPU에서 지원을 해야 한다.자신의 cpu가 지원하는지 안하는지는 따로 찾아보면 되겠지만 간단하게 프로그램을 통해서 알아보도록 하자. cpu-z에서 보면 지원을 하면 VT-x라는 문구가 적혀 있다.

이게 해결이 되지 않으면 안드로이드 스튜디오의 에뮬레이터를 사용할 수 없으며 동시에 visual code에서도 에뮬레이터 테스트를 할 수가 없다 연결이 안된다고 나온다.

 

자기 컴퓨터의 사양을 보는 방법은 이전 글을 참조를 하자.

 

컴퓨터-사양보는법

 

설정 방법을 글로 풀어보자면 ASUS의 경우는 부팅후 ESC를 눌러 Advanced Mode로 진입.

그 안에서 또 위쪽 Advanced를 클릭 후 메뉴 중 젤 위쪽의 CPU Configuration를 선택한다.

그리고 나오는 메뉴를 보면 아래쪽에 보통 VT-x 켜주는 부분이 있다.

Intel VirtualizationTechnology가 Disabled가 되어 있으면 켜주고 SAVE 후 리부팅 하면 된다.

그 뒤 안드로이드스튜디오의 AVD 매니저나 VS CODE에서 에뮬레이터 연결하여 실행해보면 이제 정상적으로 동작한다.

 

이제 visualstudio code를 받아보자.

https://code.visualstudio.com

운영체제별로 당연히 있고 installer 버전으로 설치 하거나 압축 파일 zip으로도 제공하니 편한대로 받음 된다. 나는 zip을 선호한다.

 

압축 풀고 원하는 개발관련 툴을 모아놓은 폴더에 던져두고 환경변수 추가하는것을 선호한다. 그래야 나같은 경우는 관리가 편하기 때문.

 

이제 한번 실행을 해보자. 몇가지 flutter와 관련된 플러그인을 설치해야 한다. 왼쪽 메뉴중 확장을 선택 후 flutter를 검색해보자.

 

vs code의 위쪽 보기-> 명령 팔레트 (영문은 View -> Command Palatte)에서 install을 입력하면 Extensions:Install Extensions가 나와서 그것을 선택해도 된다.

 

그리고 나오는 항목에서 Flutter와 아래쪽 Awesome Flutter Snippets를 설치한다. 기본꺼 이외에는 취향이다. 해도 되고 안해도 되고 다른거 써도 되고

프로젝트 생성

View -> command Palatte에 flutter라고 치면 관련 메뉴가 나온다.

Flutter: New Application Project 선택

 

그 뒤 Flutter:Launch Emulator에는 테스트 할 수 있는 에뮬레이터가 나온다. 이전에 만든게 있다면 디바이스 목록이 나올 것이고 한번도 안했다면 없겠지.

 

문서의 첫부분에서 생성한 가상 에뮬레이션을 만들었다면 여기 목록에서 보인다. 

 

테스트를 해보자. 샘플 플젝을 하나 생성을 하고 (command 창에서는 flutter create projectname)

command Palatte에서 Launch Emulator를 선택 후 테스팅을 해보자.

 

이로써 대략적인 설정은 끝이 났다. 나머진 하면서 세세하게 잡아 볼 생각이다.

 

테스트로 해보니 정말 느리구나 여전히. 이전에도 너무 느려서 그냥 폰에 꼽고 계속 개발했었는데 덕분에 배터리는 매일 바닥을...