뽀루뚜기의 잡다구리 기술 블로그

저번 포스팅에서는 Android Studio에서 기본 앱을 빌드하였다.

본인 콤퓨타가 느린지라 엄청 버거워하는것도 있고 Visual Studio Code의 강력한 애드온들 그리고 자주쓰니까

이젠 code에서 개발해보려고 환경 설정을 해보았다.

1. Visual Studio Code 다운로드

https://code.visualstudio.com/ 에서 다운로드 받는다.

예전에는 드림스파크에서 Visual studio를 받았던 기억이 있는데 이젠 Code를 무료로 쓰다니

마소 성님들 감사합니다.

설치는 다음 다음 다음 딱히 설정할게 없다.

설치되면 다음과 같이 나타난다.

2. Visual Studio Code 환경 설정

일단 우리는 한국인이니까 한글로 변경하도록 하겠다.

좌측 테트리스 블럭모양을 클릭하고 kor이라고 검색하면 최상단에 Korean language Pack이 나타난다.

설치한다.

설치하면 재시작 하자고하는데 마소형님들이 말씀하는건 잘 들어야한다 재시작 한다.

이젠 Flutter를 설치해보자

똑같이 검색에 Flutter를 검색하여 인스톨 한다.

이제 플루터를 설치 완료 했다.

바로 코드 작성 해도 되나

나는 이쁘고 가독성이 중요하니까 플러그인을 설치한다.

Rainbow Brackets를 검색하고 설치해준다.

이제 얼추 환경설정이 다 끝났다.

기본 프로젝트를 만들어 보자

Ctrl + Shift + P를 눌러서 flutter를 입력하여 아래 그림처럼 프로젝트 생성을 눌러주자

우리가 새로 만드는 프로젝트의 경로를 잘 만들어 줘야한다.

각자 편한위치로 지정하자.

이제 프로젝트도 만들어졌으니 애뮬레이터를 돌려야한다.

이전 포스팅에서 만든 Pixel XL를 불러올거다.

일단은 애뮬레이터를 실행해보자

명령의 입력은 프로젝트 생성과 동일하게 Ctrl + Shift + P를 통해서 넣는다

명령은 launch라고 입력하면 아래 사진처럼 Flutter : Launch Emulator를 선택해준다.

그러면 이제 어떤녀석을 돌릴지 물어본다

픽셀...픽셀을 부르자

만약 장치가 안나타난다면 이전 포스팅에서 작성한 AVD를 통해서 장치를 생성해주자

실행하면 저번 포스팅에서 만든 그녀석이 그때 그대로 나온다. 색도 보라색으로.

이제 우리가 새로만든 깡통 프로젝트는 파란색일거구 메세지도 다를거다.

이건 예전 애뮬레이터에 세이브된게 불려와서 보라색인거다.

빌드해서 새로운 프로젝트의 내용대로 바뀌는지 해보자.

F5를 눌러서 디버깅 시작을 해도되고

실행 - 디버깅 시작 

을 눌러서 해도 된다.

빌드하자

깡통 프로젝트 내용으로 핸드폰이 바뀌었다.

성공이다

이제 개발을 시작하자

Flutter(플러터) 시작하기 - 1. 환경 설정(Windows)에서 플러터 환경 설정을 다 끝냈다.

환경설정은 시작의 반이다. 반을 끝냈다 무려 1시간도 안걸려서

이제 나머지 반만 하면 앱이 뚝딱하고 나온다.

우리의 친구 Android Studio를 실행하자

우리는 플러터를 하니까 Start a new Flutter project를 클릭한다.

여기서 우린 최초 앱을 실행하는게 목적이니까 Flutter Application을 클릭 후 Next

프로젝트 이름을 정해주자. 마음에 드는걸로. 나는 자동생성을 사랑한다.

Flutter SDK Path를 설정해줘야한다.

첫번째 글에서 저장해둔 SDK위치가 기억해내야 한다.

나는 문서에다가 넣어놨으니까 그 경로대로...

뭔가 문제가 있으면 아래에 보기싫은 빨강 느낌표가 뜬다. 위에는 경로가 없댄다.

경로 써주고 치우자

Next를 누르면

이런다

말이많다. 난 자동 좋아한다 Finish

이런창이 뜨면 프로젝트 만들기는 끝 이제 돌려보자

돌리려면 애뮬레이터가 돌아야 한다.

좌측 빨강 상자에 no devices라고 한다. 없으면 만들어야지

첫번째 글에 AVD manager에서 만든 pixel XL 기억나는가? 그거 불러 오면 된다.

우측 빨간상자. 핸드폰에 귀여운 안드로이드봇 있는 아이콘 눌러주자.

창이 뜨고 빨강 상자의 플레이버튼을 누르자

축하합니다. 당신은 공짜 픽셀 핸드폰이 생겼읍니다.

이제 다시 Android Studio를 보면 장치가 생겼을거다.

좌측 빨강박스처럼 sdk gphone x86 arm이 생겼다. 이제 오른쪽 빨강박스의 시작버튼을 눌러주자

빌드를 기다리면 위에처럼 애뮬레이터에 기본 앱이 실행된걸 확인 할 수 있다.

완성이다.

라면 아쉬우니 색이랑 메세지만 바꿔보자.

이게 원본 코드이고 우리는 아래처럼 수정해 주자.

21번째 라인에서 Colors.purple로 바꿔주자.

Colors.에서 .을 지우고 다시 쓰면 자동완성으로 선택할수있는 색이 나타난다

난 보랏빛이 좋아

23번째 라인에서 타이틀명을 바꿔주자 원하는대로

그리고 95번째 라인도 원하는 글자로 바꿔주자.

그리고 Run

색과 타이틀명, 중간 멘트가 바뀌었다.

이제 앱도 수정했다.

이런식으로 점점 늘려나가면 된다.

PC환경이 느려서 Android Studio가 버겁다

다음번엔 Visual studio code에 환경설정 후 앱을 수정해봐야겠다.

Flutter는 크로스 플랫폼 프레임워크다.

React와 Flutter 그리고 Xamarin이 고려 대상이였다. 네이티브는 패스

React가 국내에서 많이 사용되고 있어보이나 구글에서 밀고있는 Flutter

사실 다룰수 있는 언어가 C랑 매트랩정도라 Flutter가 비교적 C랑 비슷하다 하는것도 있고

구글신을 믿음으로 모셔야하니까 Flutter 선택

첫 설정은 Android Studio에서 기본 프로젝트 빌드까지 해보기로.

1. Flutter SDK 설치 및 다운로드

우선 플러터 SDK먼저 다운로드를 아래 링크에서 다운로드 받는다

https://flutter-ko.dev/docs/get-started/install/windows

위 링크는 플러터 공식사이트에서 제공하는 메뉴얼이다. 위 메뉴얼대로 해도 상관은 없으나

중간 라이센스 문제나... 몇가지 문제가 있었다.

아래 진행 과정을 나열해보겠다

일단은 SDK를 다운로드 받은 후 압축을 풀어주면 

flutter라고 폴더가 생긴다.

flutter 폴더의 위치를 편한 위치에 해주면 된다. 나의 경우 문서 안에다가 두었다.

flutter 폴더 내 콘솔이 존재한다. 

플러터 콘솔을 켜면 옛날느낌이 나는 창이 뜬다

여기서 SDK가 잘 있는지 확인 해보자

이미 설치가 완료되서 No issues로 나온다.

아마 처음 하게되면 Flutter는 체크가 되어있을거다.

2. Android Studio 설치

이제 Android Studio를 설치해보자.

https://developer.android.com/studio에서 다운로드 받아서 설치를 진행하자.

설치는 그냥 다음다음다음... 다음만 눌러도 잘 설치된다.

설치를 했으면 이제 flutter Plugin과 Dart Plugin을 설치해야한다.

우선 flutter Plugin.

Studio를 실행하면 

위 사진처럼 나타난다.

우리는 여기서 톱니바퀴모양 Configure를 눌러줘야한다.

가끔 안나오는경우가 있는데 그럴때엔 창을 늘려주면 뿅하고 등장한다.

Configure - Plugins를 클릭해준다

누르면 아래처럼 플러그인 설치화면이 나타나는데 검색창에 flutter를 검색하여 인스톨을 진행한다.

인스톨하면 Dart도 설치해야한다고 물어보는데 Yes를 눌러서 같이 설치해준다.

설치 후 재실행을 해달라고 하고 yes 누르면 알아서 또 재시작을 해준다. 착한 녀석이다

이제 AVD 를 설정해야한다. 내가 개발중인 안드로이드 앱 애뮬레이터다 PC에서 작동되는걸 볼 수 있게 한다.

Configure에서 AVD Manager를 눌러준다.

눌러주면 아래처럼 창이 나타나는데 이미 장치 설정을해서 좀 다를 수 있다. Select Hardware가 나타나면 뭐 OK

안나타 나면 Create Virtural Device를 누르면 Select Hardware가 나타난다.

여기엔 가장 기본적인 장치들만 나타난다. 갤럭시 S20이나 이런건 New Hardware profile 를 통해서 생성이 필요

나중에 다루기로 하고 일단은 Pixel XL로 한다.

Pixel XL 클릭후 Next를 누르면 아래처럼 창이 나타난다.

원하는 image를 고르면 되는데 나는 언제나 최신을 좋아한다.

R을 선택할건데 여기서 반드시 파란글씨의 Download를 클릭해줘야한다. 다운로드를 받아야만 그 이미지를 쓸수 있다.

다운로드 받고 이미지를 선택 후 Next를 누른다.

여기선 딱히 골라줄게 없다. AVD 이름을 원하는대로 설정해도 되고 자동으로 만들어주는걸 써도 된다. 나는 자동

그리고 Emulated Performance의 Graphics를 Hardware - GLES 2.0으로 골라준다. 왠진 모른다. 다들 이렇게 했다...

그리고 나서 Finish를 누르면 AVD 설정은 끝.

3. Flutter Doctor로 잘 되었는지 확인해보자.

이제 얼추 설정이 다 되었다. 이제 Flutter Doctor로 설정이 잘 되어있는지 확인해보자.

그전에 Flutter를 명령 프롬프트에서도 사용할 수 있게 환경변수를 변경해주자.

시작을 누른 후 '환경'을 누르게되면 시스템 환경 변수가 나타난다.

시스템 환경 변수 클릭 후

환경 변수(N)을 클릭한다.

이러면 위 창이 나타나는데 시스템 변수 말고 위에 파란색으로 된 Path를 클릭 후 바로 밑에 편집을 눌러준다.

그리곤 내가 설치해둔 flutter SDK 위치를 추가해준다. 

새로만들기를 클릭 후 맨위에서 설명한 flutter SDK 다운로드 및 설치 에서 지정해둔 flutter 폴더를 추가한다.

반드시 bin 경로를 추가해야한다.

이제 다 되었다.

명령 프롬프트창에서 아래 명령을 실행해 보자

flutter doctor

실행하면 Android tool chain에서 에러가 나타날 것이다.

이는 Flutter SDK에서 찾질 못하는거다.

SDK Manager를 눌러 주자

위에서 빨강색으로 칠한 SDK Tools를 누른후 우측 하단의 Hide Obsolete Packages를 체크해제 해준다.

그리고 Android SDK Tools (Obsolete)를 체크 후 Apply 하고 OK 눌러서 끝낸다.

다시한번 의사선생님(doctor)를 불러보면 라이센스 관련 메세지가 나타난다.

사진을 찍을수가 없어... 메세지를 쓰자면 

Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

그러면 똑같이 써준다 flutter doctor --android-licenses

그러면 자꾸 물어본다 할래 말래? Y Y Y Y Y만 눌러주자

그리고 다시 의사선생님을 불러보자 그러면 아래처럼 깔끔하게 될 것이다.

이제 환경설정은 끝이 났다.

다음 글에서 기본 앱 빌드 및 실행, 약간의 변형을 해보도록 하겠다.