[내일배움카드 코딩] 1주차 앱개발

안녕하세요.

이번에 새로 스파르타 코딩클럽의 플러터로 시작하는 앱개발 강의를 내일배움카드로 

듣게 되었습니다.

 

▼내일배움카드 국비지원▼

내일배움카드란 

다양한 역량 개발 훈련을 국가에서 지원해 주는 제도로서 발급해 주는 카드를 말합니다.

 

대상은 이러한 분들을 대상으로 지원을 합니다.

제외 대상자는 공무원, 교직원, 만 75세 이상, 졸업 2년 이상 남은 대학생 월 300만 이상 등

 

훈련비 300만 원을 지원!!!! 뿐만 아니라 K-디지털 기초역량훈련이라고 

추가로 50만 원 상당의 온라인 교육 등을 지원해 주는 제도입니다.

 

K-디지털 기초역량훈련으로 강의를 신청 시 10% 자기 부담금이 존재하지만

걱정은 NO!!! 강의의 환급조건 만족 시 훈련기간 후에 환금급 신청을 할 수 있습니다.

 

 

1번 들으니 잔액이 얼마 안 남아서 추가 강의를 못 듣겠다고요? 

잔액이 일부 남아있는 경우 1회에 한해 한도 초과하여도 10% 자비 부담금으로 

하나 더 들을 수 있습니다.

 

 K-디지털 기초역량훈련의 유효기간은 1년이므로 잘 알아보고 선택하시는 걸 

추천드립니다. 

---

 

강의를 들으면서 느낀 점이랑 진행 과정 일부 및 결과물을 블로그에 한번 정리해 보려고

합니다.

 

 

실제로 동작하는 나만의 앱을 만드는 게 목표인데 벌써부터 떨리는 마음이 드네요.

 

vscode 개발도구를 활용하여 개발할 예정이며 Dart언어를 기반으로 한 Flutter언어로 

강의는 진행됩니다.

 

앱개발 방법은 네이티브 앱&코로스 플랫폼 앱이 있습니다.

 

네이티브 앱: 성능이 가장 빠르고 최신 기능을 빠르게 적용 가능 

                    안드로이드, ios 각각 따로 다른 코드를 작성해줘야 하는 단점이 있다.

 

크로스 플랫폼 앱: 하나의 언어 코드로 모두 개발이 가능하다는 장점이 있다.

 

 

플루터(Flutter)를 사용하기 위해서 설치가 필요한데  플루터 사이트에서 제공하는

프로그램을 다운 받아주세요.

 

▼다운로드 주소 및 방법▼

Windows install | Flutter

Windows install

 

검색하여 들어갔을 때 설치(windows) 방법

 

1. Fluttter 검색하여 사이트 들어갔을 시 우측 상단에 get started 부분을 클릭

2. windows 부분을 클릭하여 들어가서 압축파일(zip)을 다운 받아준다.

 

3. 압축된 파일을 불어주고 환경변수에 등록을 해준다.

(windows 11 버전인 점 참고)

 

 4. 압축해제 한 파일의 bin 폴더를 지정해 준다.

5. 잘 적용됐는지 확인하기 위해 cmd창에서 flutter doctor 실행

초록색 √ 은 준비완료

빨간색 √ 은 미완료

노랑색 !  은 점검 필요

 

android toolchain은 안드로이드 스튜디오를 적용하면 사라진다

 

---

 

 

이 사이트에서는 설치뿐만 아니라 개발에 도움이 되는 추가적인 위젯을 제공하여 개발을 좀

더 쉽게 만들 수 있게 지원을 해줍니다.

 

플루터를 저장한 폴더를 만드는데 경로 상에 한글이 있으면 안 된다.
보통 모든 프로그램 코드가 비슷한데 경로 상 한글이 있을 때 문제가 발생하여
동작이 원활하게 작동할지 않을 수 있다. 

 

▼안드로이드 스튜디오 다운로드▼

나중에 사용할 에뮬레이터(가상의 스마트폰 화면)를 실행하기 위해 설치할 필요가 있다

Download Android Studio & App Tools - Android Developers

Download Android Studio & App Tools - Android Developers

 

설치 경로 설정 

추가적으로 세팅할 것인지와 스튜디오 개발자에게 뭐 보낼 것인지 물어보는 건데 딱히 안 해도 상관은 없다. 

 

설정을 기본형으로 할지 아니면 하나하나 세팅을 할지 선택하라는 내용이다. 

넘기다 보면 SDK 설치라는 부분이 나오는데 설치 경로를 설정해주고 계속 진행해준다.

 

실행하면 가운데 3개의 아이콘이 있을텐데 그 아래에 More Actions을 클릭해서 SDK Manager를 실행한다.

SDK Manager는 가상의 폰 버전을 설정해 줄 수 있다.

 

---

 

 

▼vscode 다운로드▼

Download Visual Studio Code - Mac, Linux, Windows

Download Visual Studio Code - Mac, Linux, Windows

구글, 네이버 등에서 vscode 다운로드하면 나오는 사이트에서 자신에게 맞는 프로그램을 다운로드해 준다

 

---

 

vscode 설치가 완료 됐으면 플루터를 적용해 보자

 

vscode에서는 확장 프로그램을 지원하는데 외부에서 받아서 적용해야 하는 게 아니라

내부에서 지원하는 extentions을 이용하면 쉽게 확장 프로그램을 설치할 수 있습니다.

 

ctrl + shift + x 누른 후 flutter라고 검색을 해주면 여러 개의 프로그램들이 나올 텐데 Flutter 프로그램을 다운 받아

줬습니다. + dart 역시 설치 해줍니다.

 

▼주의사항▼

받은 프로그램 적용을 위해서는 한번 컴퓨터 재시작을 해야지 적용될 수 있습니다.   

받고 나서 바로 실행 했는데 안되는 경우 해매지 말고 재시작 한번 해보세요.

 

---

확장 프로그램 flutter, dart를 설치가 완료되었으면 ctrl + shift + p 를 누르면 "flutter new project"가 있을 텐데 

실행을 하면 'Application' 등이 나올 텐데 'Application'을 선택해 줍니다.

이제 프로젝트를 만들 폴더를 선택하라고 하는데 하나의 빈 폴더를 만들어 선택하고 프로젝트명을 입력해

줍니다. 

▶프로젝트명 주의사항: 영어, _ 만 사용하여 명명해 줍니다.

 

프로젝트 명을 입력을 다 하면 왼쪽에 프로젝트 파일 목록이 보일 겁니다.

 

[출처 - 스파르타 코딩클럽 1-5 강의 일부]

lib	pubspec.yaml	android	ios	web
코딩 파일 저장하는 폴더	라이브러리 및 설정을 하는 폴더	스마트폰 OS 등의 프로젝트 폴더

 

main.dart 내용 부분을 지우고 원하는 부분으로 교체해 줍니다.

이제 dart 세팅을 하기 위해 다시 [ctrl + shift + p] 를 입력하여 dart의 추천 세팅을 클릭해 줍니다.

 

설정이 다 끝났다고 끝난 게 아닙니다.

나중에 실제 폰에서 제대로 동작해야 하는데 코딩 다 끝나고 마무리에서 에러가 발생한다??? 

 

갑자기 뭐든 하기 싫어지니 애뮬레이터로 가상의 폰 환경을 설정하여 중간중간 제대로 동작하는지 

점검할 수 있게 할 수 있습니다.

한번 에뮬레이터 동작을 실행해 보도록 할게요...

 

 [ctrl + shift + p] 에 launch emulator 입력하여 안드로이드 실행!!!!

 

windows에서는 위 화면처럼 ios 환경은 보이지 않습니다.
macOS 등에서만 보입니다.

실행을 해보면 잘 동작하는 것을 볼 수 있어요

 

main.dart러 돌아가면 우측 상단에 화살표가 있는 것을 볼 수 있는데 클릭해보면 

아래와 같이 나옵니다.

 

start debugging: 디버깅 실행

run without debugging: 디버깅 없이 실행

 

디버깅을 실행할 것인지는 선택해서 실행해주시면 됩니다.

 

애뮬레이터를 실행 시 좋은 점은 소스를 변경 시 즉각 애뮬레이터에도 적용이 되기 때문에 좋아요.

 

body: Text('hello Flutter')

적용한 것은 '헬로 플루터'를 작성해봤는데 애뮬레이터를 재시작하지 않아도 오른쪽처럼 바로 

결과를 확인할 수 있어서 좋네요^^

 

 

목표가 로그인 페이지 만들어야 하는데 입력하는 것도 없고 좀 심심하죠.ㅋ 

입력할 수 있게 컬럼을 하나 넣어 볼께요.

 

Column(children: [
          Text(
          'hello Flutter',
          style: TextStyle(fontSize: 28),
          ),
          TextField(                                     
          # obscureText: true 적용 시 암호처럼 가려주는 역할
          decoration: InputDecoration(
            labelText: '이메일'
          ),), 
          
          .....

 

 

▼타이틀 위치 변경▼

appBar라는 항목이 보일텐데 그 항목 아래에 타이틀을 넣고 원하는 내용을 입력해 주면 

앱바에 텍스트가 들어가는 것을 볼 수 있습니다.

appBar: AppBar(
          centerTitle: true,
          title:Text(내용 입력)
          ),

 

 

상단에 이미지를 넣고 싶어서 칠드런 부분에 이미지를 넣으면 잘 들어가지만 텍스트를 입력할려고

하면 오버플로우(허용 범위 벗어난 경우)가 발생하네요 ㅠ.ㅜ

 

이런 경우 이미지가 스크롤 되지 않고 화면에 고정된 느낌이라서 입력 칸의 범위를 침범(?)해서 그런 것 같네요.

 

이미지를 스크롤할 수 있게 적용해서 오버 플로우를 없애도록 할께요.

 

 

아래의 코드로 기존 body 코드를 감싸 보니 스크롤이 되면서 오버플로우가 해결이 됐네요 ^^

 body: SingleChildScrollView(
 	#포함할 위젯
    )

 

크기가 부담이 되시면 width를 사용하면 조절 가능 합니다

Image.network("이미지 파일", width: 크기 조절,)