1회차 세부 과정 목차
1.Flutter new project 옵션 선택
new Flutter Project 를 클릭합니다.
(아래 test2 test1 등등은 그동안 만들어두었던 프로젝트 목록들입니다. 개인 프로젝트 및 회사프로젝트가 있어서 가림처리함)
새로만들 프로젝트의 Flutter SDK path 를 선택합니다.
(저같은 경우는 flutter와 flutter3 두가지가 있는것이 보이는데, 회사에서 flutter 2.5.3기반으로 만들고있어서 flutter에는 2.5.3 버전의 SDK가 있고, flutter3 은 3.10.0 의 SDK버전이 있습니다. )
프로젝트의 기초 세팅을 해줍니다.
1. Project name : 프로젝트 네임. 원하는걸로 언더바 케이스로 만드세요
2. Description : 프로젝트 설명입니다. 중요하지 않습니다.
3. Organization : com.asdf.asdf 이런식으로 작성됩니다. 보통 com.회사이름 으로 짓게되는데 Organization + . + project name 으로 프로젝트 id? 가 생성됩니다. 앱의 고유 이름이며 배포시 중복된 ID의 앱이 있으면 등록이 안됩니다.. 주의할점은 com.example 이렇게 처음부터 설정하지 마세요. 배포시 example이 있으면 배포가 안됩니다. 나중에 바꿀수도있지만 처음부터 그냥 안쓰도록 합니다.
4. Android language : Kotlin 으로 선택하세요.
IOS language : Swift 로 설정하세요.
Platforms : Android , IOS 에만 체크하세요.
2.파일 구조와 역할 설명
왼쪽 상단의 Project 를 눌러보면 제가 project Name 으로 설정했던
basic_flutter_1 이라는 패키지 ? 와 하부 폴더 같은게 보이고 하부 폴더 및 파일로 여러가지가 보입니다.
External Libraries 이라는 패키지? 도 보이는데 여기에 나중에 우리가 라이브러리 같은걸 받으면 이쪽으로 들어갑니다.
Scatches and colsoles 라는 패키지? 도 보입니다. 이건뭔지 잘 모르겠습니다.
일단은 basic_flutter_1 이라는 우리가 만든 패키지를 봅시다.
바로 직할 하부에 대략 6개의 폴더와 7개의 파일이 보입니다.
지금 수준에서 우리가 알아야할것은
android 폴더 , ios 폴더 , lib 폴더 와 pubspeck.yaml 파일이 존재한다는걸 인식하도록 합시다.
1. android , 2.ios 폴더
처음 우리가 프로젝트를 만들때 플랫폼에 안드로이드, IOS 만 체크해서 저 두개의 폴더가 생겼습니다.
플러터는 크로스플랫폼으로써 플러터에서 코드작성하면 안드로이드 ,IOS 등등 모드로 코드가 만들어져 저 폴더로 들어가게 됩니다.
한방에 두개의 플랫폼을 만든다는것이죠.
추후 라이브러리 사용과 배포를 위해 저 폴더 내부의 어떠한 설정들을 건들어야 한다는 정도만 알도록 합니다.
3. lib 폴더
우리가 생성한 코드의 파일들이 들어가는 곳입니다. 프로젝트 내부에서 경험하는 95%?? 의 시간을 lib 폴더를 만들어내는데 사용할것입니다. 그만큼 비중을 많이 차지한다는그죠
4. pubspec.yaml 파일
이번엔 폴더가 아닌 파일입니다. 라이브러리와 , 버전 , 폰트 , 에셋등 뭘 어떻게 사용할것이다 라는 내용을 적어두는곳입니다.
적어둔다고 끝이아니고 이 적어둔걸 토대로 라이브러리를 다운받는 등등의 조취를 취하게됩니다.
비슷한 pubspec.lock 이라는 파일도 보이는데, pubspec.yaml 파일에 쓰여진걸 토대로 확정된 값이 pubspeck.lock 에 적혀지고
pubspeck.lock에 적혀진걸 토대로 앱이 설정됩니다. 근데 나중에 자연스럽게 알게되는까, 지금은 그냥 pubspec.yaml 파일이 있다는것 정도만 알아둡니다.
3.주석
왼쪽 lib 폴더의 main.dart 를 클릭해서 열어보면
플러터에서 기본으로 제공하는 기본앱이 코딩되어 있습니다.
// 가 붙어서 긴글이 적혀있는것이 보입니다. 이걸 주석이라고 하는데 코드에대한 설명을 적는곳입니다.
개발시에 사람이 이게 무슨코드인지 알기위해 메모해둔것으로 나중에 우리가 작성한 코드및 주석을 컴퓨터가 알아듣는 모드로 변환할때
주석은 제외되므로 잘 적어두도록 합니다.
4.안드로이드 시뮬레이터 테스트 앱띄우기
에뮬레이터를 선택하고
main.dart 로 되어있는지 확인합니다.
플레이 버튼처럼 생긴것을 누릅니다. 이걸누르게 되면 에뮬레이터를 실행시킴과 동시에 앱 내부의 main 함수를 찾아서 실행하게되고 , 메인함수 내부의 코드가 실행되면서
꼬리의 꼬리를 무는식으로 앱이 구동됩니다.
안드로이드 에뮬레이터가 실행되었습니다.
플러터에서 기본으로 제공하는 코드를 토대로 만들어진 앱입니다.
오른쪽 하단의 +를 눌러보면서 숫자올리기 놀이를 해봅니다.
그리고 주석때문에 페이지가 너무 길어져서 코드를 한눈에 보기 힘드니 주석은 모두 지워서 코드가 한눈에 보이도록 해봅시다.
주석을 지운다고 주석이 중요하지 않다는게 아니니 오해안하시길 바랍니다.
5.핫리로드
코드를 찾아보면 영어로 'You h....' 이렇게 적혀있는게 있는데 이 문자열을 다른걸로 한번 바꿔봅니다.
그리고 우측 상단에 번개모양을 눌러봅니다. 마우스를 가져다 대면 flutter hot reload 라고 설명도 나옵니다.
눈이 침침하신 분들을 위해 확대를 해보았습니다.
그랬더니 이렇게 글씨가 바뀌는걸 알수있습니다.
원래 내용이 바뀌면 메인함수를 다시 실행시켜야 되는데 flutter 에서는 hot reload 기능을 지원해서
dart 파일이 바뀌면 이렇게 빠르게 화면을 바꿔줘서 개발시간이 단축됩니다.
근데 시스템 코드 또는 dart 이외의 파일이 바뀌면 핫리로드 말고 플레이 버튼같은걸 눌러서 앱을 다시 실행시켜야 변경된걸 확인할수있는 경우도 있습니다.
정확하게 뭐는 되고 뭐는 안되고에 대해 저도 잘 모르겠습니다.
챗 지피티 한테 물어보니 이렇다고합니다.
6.IOS 시뮬레이터 테스트 앱띄우기
에뮬레이터 고르는 곳에서 아이폰을 고른다음 실행시켜봅니다.
왼쪽 하단에 main.dart 파일이 탭으로 두개 떠있는걸 확인할수있습니다.
우측상단에 main.dart 에 플러터 로고 부분에 2 라고 적혀있는 부분도 볼수있고, 플레이 버튼 아이콘에도 2라는 숫자가 적혀있는걸 볼수있습니다. main 함수가 2개 실행되고 있다는 뜻입니다.
코드를 수정하고 안드로이드 에뮬레이터가 실행되고있는 메인함수 탭을 선택하고 (왼쪽하단) , hot reload를 눌렀는데 , IOS 앱이 변경이 안되네 라고 하면 안됩니다.
7.머티리얼앱 과 스케폴드
코드를 분석해보겠습니다.
main 함수가 실행되면 내부의 로직들이 실행되는데
MyApp 이라는것를 매개변수로 플러터 내장함수인 runApp을 실행 시키게 됩니다.
(매개변수라 함은 예전 우리가 수학시간에 함수배울때 x 값에 어떤 수를 넣으면 값이 나왔듯이 여기서 x 와 같은역할이라고 보면되겠네요.)
MyApp 이라는걸 보면 내부에 build 라는 함수를 실행시키고 retrun 이라는 걸통해 MaterialApp 을 반환 하도록 되어있습니다.
이렇게 꼬리에 꼬리를 물며 코드가 실행됩니다
그래서 MyApp 이라는게 뭔지 정의해둔(코드짜둔) 곳을 보겠습니다.
첫번째로 볼 부분은 MaterialApp 인데 이게 앱의 시작입니다. 시작페이지라는 뜻은 아니고
전체적인 앱의 와꾸를 정의 하는곳입니다.
그래서 앱의 이름 , 테마 , 시작페이지 등등을 설정할수있습니다.
title : 앱의 이름을 넣습니다. 근데 이건 좀 의미가 없습니다. 대충 자기 앱의 이름을 넣어주도록 합니다.
theme : 앱의 테마입니다. 모든페이지의 공통 기본 색상을 지정한다거나 , 전체 앱 프로젝트의 기본 폰트를 지정한다거나 할수있습니다.
안해도 상관없고 각페이지마다 수기로 테마를 적용해줄수있으나 공통적으로 필요한게있으면 여기서 설정해주면 됩니다.
home: 앱의 시작 페이지 입니다. 사용자에게 보여주는 첫 진입페이지로 제일중요하고 필수인 옵션입니다.
그 이외 옵션들이 있는데 Commend(맥) control(윈도우) 를 누른상태에서 MaterialApp 부분에 커서를 가져다 대면 설명과
옵션들이 나옵니다.
여기서 제가 옵션이라고 하는데 이것들은 다 매개변수입니다.
위에서 설명했듯이 우리가 수학시간에 함수를 쓸때 예를들어 2차방정식이라고 하면, 2개의 변수를 집어넣듯이 여기서 n개의 매개변수를 집어넣어서 MaterialApp 이라는 방정식을 완성시킨다고 보면 단순하게 이해하기 쉬울것 같네요.
(예시가 이상하다면 , 자동차를 계약할때 색상 에어백 선루프 등등 옵션을 넣어서 자동차를 구매하는거랑 비슷?)
나중에 플러터에 대해 익숙해지면 다른 옵션들도 사용해보세요.
그래서 정리하자면 결국 이런 그림으로 볼수있겟네요.
home : 을 보면 MyHomePage라는 걸 불러오게되고 title이라는 옵션에 Flutter Demo home Page 라는걸 준걸 볼수있습니다. 그리고 MyHomePage 가 뭔지 정의된곳에 보면 아까 MyApp 을 정의해둔곳 처럼 비슷하지만 조금은 다르게 된게 보이네요. 달라진점은
1. MyHomePage extend StatefulWidget 이라고 써져있네요. 아까는 StatelessWidget 이라고 써져있었는데.. 어쨋든 이것도 중용하지만 지금 다룰것은 아닌데 , Widgtet 이라고 적혀있는것 보니 이것이 위젯이구나 라는 직감이 살짝듭니다.
위젯은 하나의 개념덩어리 라고 생각하면됩니다.
2. 언더바(_) 가 달린 _MyHomePageState 라는 앞에 class 가 붙은 부분이 한개더 존재합니다.
지금은 그냥 extend statelessWidget 가 붙은곳은 정의가 하나고 , statefulWidget 이 붙은곳은 정의가 2개구나 라고 가볍게 생각하고 넘어가시길 바랍니다.
그래서 언더바가 붙은 정의된 부분의 아래쪽에 보시면 build 함수를 호출하고 Scaffold 라는것을 리턴(반환) 하도록 되어있습니다.
이것이 바로 페이지를 만드는 부분입니다.
이 전체 코드에서는 첫 진입페이지 부분이 되겠네요.
에뮬레이터에 보이는 이부분이 Scaffold 내부에 코드해둔내용이 보이는 것입니다.
위에보면 _counter 라는 변수와 _incrementCounter() 라는 함수가 보이는데 이건 중요하지만 지금다룰것은 아니니까
일단 Scaffold 내부를 분석해보겠습니다.
아까 MaterialApp 이라는 것은 앱을 정의하는거고
Scaffold 라는것은 페이지를 정의하는 것입니다.
페이지라함은 어떠한 제목같은것이 있고 , 내용이 있고 페이지의 색상이라던지 등등을 정의하는것이 있을 것입니다.
여기서는 3개의 페이지 옵션이 있네요
1. appbar : 보통 우리가 다운로드 받은 앱을 보면 맨위에 머릿말처럼 약 손톱두깨정도 가지는 바가 보이는데 그걸 앱바 라고합니다. 근데 이 앱바가 없는것도 많이 보셨을겁니다. 즉 페이지에는 앱바가 필수가 아니라는 건데 , 어쨋든 페이지를 구성하는 요소입니다.
2. body : 이부분은 필수로 들어가야하는 페이지의 내용입니다.
3. floatingActionButton : 이것은 페이지에 주로쓰는 둥둥떠다니는 버튼을 표현한건데 , 보통 페이지 단위에서 이런 기능을 많이쓰니까 이런 옵션을 지원하는건데 , body 내부에서 직접 만들수도 있습니다. 앱바도 마찬가지구요. 어쨋든 이것도 필수는 아니겠죠.
이렇게 페이지 하나를 표현하는 스케폴드를 단순 분석해보았습니다.
페이지를 만들때 꼭 스케폴드 라는것을 사용해야할 필요는 없습니다.
그러나 스케폴드 라는걸 사용하면 보통 페이지를 만들때 필요한 기능들이 기본적으로 포함되어있으니 이걸 사용안할이유가 없기도하고
이건 페이지다 라는걸 불문률로 알기위해서는 웬만하면 페이지를 만들때는 스케폴드 라는 것을 이용하도록 합시다.
그리고 스케폴드 , 머티리얼앱 이런것들을 위젯이라고 합니다. MyApp() 이렇게 된것도 위젯이고 모두 위젯이라고합니다.
하나의 개념덩어리죠. 앞으로 스케폴드위젯을 넣어주세요 이렇게 이야기하면 , 아 하나의 스케폴드라는 개념덩어리를 집어 넣구나 생각하시면됩니다.
8.Lib -> directory 만들기
보통 우리가 페이지를 만들때는 각각의 다트파일 1개당 1개의 페이지를 만들고
의미있는 단위로 다트 파일을 쪼개어 관리합니다.
지금 예시로 준 main.dart 파일 에는
MyApp 이라는 MaterialApp 을 정의하는 부분과
MyHomePage 라는 Scaffold 를 정의하는 부분 으로 의미있는 단위가 2개가 있습니다.
그래서 이거를 분리하고자 합니다.
lib 부분에 마우스 오른쪽을 눌러서 New -> Directory 를 선택해줍니다.
Directory는 대충 폴더 라고 보십됩니다.
폴더명을 아무렇게나 지어도 되지만 myHomePage(카멜케이스) 라고짓고 lib 아래에 폴더가 생성되는것을 확인하세요.
9.다트파일만들기
같은 방법으로 myHomePage 폴더에서 우츨 클릭하여 New -> Dart file을 선택해줍니다.
dart 파일명에는 MyHomePage(파스칼케이스) 라고 짓고 파일을 클릭해서 내용을 적을 준비를 해봅시다.
여기서 카멜메이스랑 , 파스칼 케이스가 뭐냐면 검색해보면 더쉽게 알수있으나
대충 이런겁니다. 요런걸 네이밍 명명 규칙 또는 네이밍 컨벤션 이라고 합니다.
카멜케이스 : myHomePage
파스칼케이스 : MyHomePage
언더바케이스 : my_home_page
케밥케이스 : my-home-page
저는 폴더명을 만들때는 카멜케이스로 , 다트파일명을 만들때는 파스칼 케이스로 합니다.
그이유는
1.예전 회사에서 자바 라는걸 했는데 그때 자바프로젝트는 클래스가 들어간 자바 파일의 이름을 파스칼 케이스 하자고 규칙을 정하고 습관이 됬습니다.
2.클래스를 정의하는 다트파일을 만들때 그 클래스 이름을 파스칼 케이스로 하는데, 파일명과 클래스 명칭을 같게 하면서 네이밍 컨벤션도 같게 하면 뭔가 직관적이라는 생각이 들었고 마음이 편했습니다.
3.템플릿 라이브러리를 사용을 하면 자동으로 베이스 코딩을 짜주는데 이때 자동으로 짜주는 코드의 클래스 이름을 파일명에서 따와서 자동작성 해주는걸로 설정을 해둔터라 바꾸기도 귀찮고 해서 그냥 하게되었습니다.
근데 다트에서는 파일명을 언더바 케이스로 하는것이 원칙이고 일반적으로 많은 다트 개발자가 파일명을 언더바로 사용합니다.
강의 교안에서 일반적이지 않는 방법을 해서 죄송하네요.
어쨌든 이렇게 파일을 만들었으면 내용을 적을것인데 아까 main.dart 에 있는 MyHomePage 의 내용을 가져올것입니다
MyHomePage 부분을 전체 잘라내기해주세요.
그러면 빨간줄이 뜨면서 오류가 날텐데 MaterialApp 의 home 부분에 MyHomePage 부분을 넣어줬으나
그것은 잘라내기가 되면서 존재하지않는 것이 되었기 때문에 생기는 오류입니다.
잘라낸 부분을 우리가 새로만든 다트파일 MyHomePage.dart 에 붙여 넣어주세요.
이때 빨간줄로 오류가 생기는데 StatfulWidget , State 등등은 플러터가 제공해주는 어떤 파일에 의존하고 있는데, 그파일을 못불러와서 생기는 오류입니다.
그래서 우리는 파일을 불러올수있도록 해볼것입니다.
이렇게 import 'package:.......' 부분을 적어 넣어주세요.
이뜻은 저 경로 안에 들어있는 material.dart 라는 파일을 불러오겠다는 뜻이며,
우리는 지금 import...으로 한줄적었지만 사실은 저기 파일에 적혀있는 모든 내용이 우리눈에는 안보이지만 지금 이 파일에 다 적혀있는거라고 보시면됩니다.
근데 타이핑하기 귀찮으니까 안드로이드 스튜디오의 기능을 이용하자면 저렇게 빨간줄에 있는곳을 클릭해서 포커스를 준다음option+enter(맥) ,alt+enter(윈도우) 하시면 이렇게 고를수있고, 고르게 되면 자동적으로 위에 적어지게됩니다.
그러면 MyHomePage.dart 파일은 오류가 없어졌습니다.
마찬가지로 main.dart 파일로와서 이렇게 import를 시켜주세요.
위에꺼는 상대경로 , 아래거는 절대경로인데 둘중 아무거나 선택해도 됩니다.
다만 상대경로로 적어뒀을때 폴더 경로 구조가 바뀌면 다시 수정해야하니 절대경로로 하면 더 안전하겠지만 그냥 아무거나 선택하세요.
이렇게 모든 오류를 해결하였습니다.
그리고 페이지 구분을 해보았습니다.
10.네이밍컨벤션
네이밍 컨벤션은 이름을 짓는 방법론 입니다.
좀전에 살짝 언급한것처럼
카멜케이스 : myHomePage
파스칼케이스 : MyHomePage
언더바케이스(스네이크케이스) : my_home_page
케밥케이스(데쉬케이스) : my-home-page
+
어퍼케이스 : MYHOMEPAGE
로월케이스 : myhomepage
어퍼언더바케이스 : MY_HOME_PAGE
어퍼케밥케이스 : MY-HOME_PAGE
...등등
이런 겁니다.
이런규칙없이 개발자 마음대로 네이밍을 하게되면 예를들어 mYhOmepa_ge 이런식으로하면 알아보기도 힘들도 코드해석도 힘들거라서 규칙을 만든겁니다.
1. 카멜케이스 : 네이밍 모양이 낙타(카멜) 을 닮았다고해서 붙여진 이름입니다. myHomePage 의 경우 3개의 단어로 이루어져있는데
(my, home, page) 첫글자는 소문자로 하고 그뒤에 단어의 첫글자를 대문자로 하는것입니다. 보통 변수명을 지을때 사용합니다.
근데 한단어로 이루어져있다면 그냥 my 이런식으로 소문자로만 되어있겟죠
2.파스칼케이스 : 첫글자가 대문자로 오고 나머지는 카멜케이스랑 같습니다. 보통 클래스명을 지을때 사용합니다.
3.언더바케이스 : _(언더바) 를 단어사이에 씁니다. 한글자인경우 그냥 my 겟죠. 다른말로 스네이크(뱀)케이스 라고도 합니다.
4.케밥케이스 : 모두 소문자를 쓰고 단어 사이를 - 를 사용하여 마치 꼬지에 끼어져있는 모양입니다. 다른말로 대쉬케이스 라고도 합니다.
위 4개가 대표적으로 사용되는거고 , 나머지는 그냥 뭐 말장난수준같네요.
(다만 이런 것들은 따로 외우거나 시간내서 공부할필요는 없는것 같습니다.
코딩하다보면 자연스럽게 익혀지는 것이니, 길거리 다니면서 파스칼케이스~ 스네이크 케이스~ 라고 중얼거리지도 말고 시간낭비도 하지 마시길 바랍니다~)
'코딩생초보를 위한 플러터 빠르게 한바퀴' 카테고리의 다른 글
| 6.network (0) | 2023.08.22 |
|---|---|
| 5.state management (0) | 2023.08.11 |
| 4.Json (0) | 2023.08.09 |
| 3.component (0) | 2023.08.03 |
| 2.first my project (1) | 2023.07.29 |
