저번시간에 텍스트 필드에 입력된 값으로 부가세 계산식을 적용시켰다. 그리고 결과값 숫자에 콤마를 넣었다. 아주 기뻤다.
그 기쁨은 곧 절망이 되었지만..........
다음단계로 텍스트 필드에 intl 패키지를 이용해서 콤마를 넣었다. 여기서 문제가 생겼다. 콤마를 입힌 숫자는 데이터 타입이 double이 아닌 String이 되었다. 이 문제를 인지한 것도 하루가 꼬박 걸렸다.
3일에 걸쳐 해결했다. 플러터 까페에 질문글을 올렸고 고수님들의 댓글로 방향성을 잘 잡을 수 있게 되었다.
문제 인지
1. 텍스트 필드의 값은 숫자이지만 콤마가 찍혀서 String
2. 계산식을 넣으려면 값은 double로 만들어야함
3. 계산식으로 나온 결과값도 콤마가 필요하니 String
필요한 변수
1. 텍스트 필드 컨트롤러로 입력되는 값의 변수 : text1 = 1,000(String)
2. text1에 입력된 콤마를 없애주는 replaceAll("," , "") 가 진행된 값을 담을 변수 : convert1 = 1000(String)
3. 콤마를 없앤 숫자의 데이터 타입을 String에서 double로 바꿔즈는 double.parse(convert1)의 값을 담을 변수 : income = 1000 (double)
아래와 같은 코드가 필요하다.
void convertStringtoDouble() {
var text1 =t1.text; //text1의 값은 t1 컨트롤러의 값
var convert1= text1.text.replaceAll(",", ""); //convert1 = text1의 콤마 없는 버전
var income=double.parse(convert1); // convert1의 데이터 타입을 double로 변경하고 그 값은 income에 담는다.
//로그에는 숫자와 데이터 타입이 doulbe로 정상적으로 나온다.
print(income);
print(income.runtimeType);
그리고 콤마 입히는 패키지는 총 2개를 (pattern formatter , intl) 사용했다.
사진처럼 검은색 박스 안에 있는 부분이 바로 body 부분입니다. 어플의 주요 화면들이 이 곳에 들어갑니다. 이 화면을 구성을 할 때
가장 중요한 개념이 바로 Column과 Row 입니다.
Column은 "세로" Row 는 "가로"
바로 위에 적은 개념이 핵심입니다. 플러터는 위젯으로 화면을 구성한다고 지난시간에 말씀드렸습니다. 그럼 그 위젯들을 화면에 어떻게 배치 할 것인가가 중요합니다. 화면에 GPS처럼 주소를 만들고 그 주소를 직접 입력해서 배치하는 방법도 있습니다만 이 방법은 코드가 복잡해지고 다른 사람이 봤을 때 코드만 봐서는 화면 구조를 이해하기 어렵다는 단점이 있습니다.
결국 코드만 보더라도 해당 위젯이 어느 위치에 있는지 보다 쉽게 파악을 하고자 Column, Row 개념이 나온 것입니다.
부동산 개발에서 가장 중요한 신도시를 구성할 때 도로를 먼저 만듭니다. 그 도로에 위치에 따라 아파트를 넣을지, 교회를 넣을지, 산업단지를 넣을지 중요해집니다. 즉 도로는 신도시를 구성하는 가이드 라인이 되는 것이고 플러터에서 Column과 Row는 위젯을 이용해 화면을 구성 할 때 가이드 라인이 되어줍니다.
Column과 Row는 하위 위젯을 복수로 받아올 수 있습니다. 그 사용법이
Column(
children :[
]
)
Row(
childeren :[
]
)
위와 같습니다.
즉 세로, 가로로 복수의 위젯들을 배칠 할 수 있음으로 화면 구성을 보다 쉽게 할 수 있습니다. 위에 사진에 들어간 Column과 Row를 말하자면 전체적인 화면 구성은 세로이기에 Column으로 시작합니다. 그리고 밑에 TextField위젯을 3개와 버튼을 집어넣었습니다. 그 다음 Row로 왼쪽과 오른쪽 각각 Text위젯을 구성했습니다.
그 밑에 다시 두번 째 Row로 왼쪽과 오른쪽 Text위젯을 구성했습니다. 이하 동일한 작업을 진행했습니다.
쉽게 그림으로 표현하자면
Column
(처음 만든 Column은 하위 위젯들을 세로로 구성하게 만듬)
TextField
TextField
TextField
button
(여기까지 위젯들이 세로로 구성이 됨)
------------------------
Row
Text Text
(전체적인 위젯들의 배치 방향은 세로이나 중간에 Row를 사용해서 위젯들을 가로려 여러개 배치 할 수 있게됨)
Row
Text Text
Row
Text Text
Row
Text Text
Row
Text Text
-----------------------------------------
Column과 Row를 이해하면 화면 배치가 정말 쉬워집니다.
다음 시간에는 Column과 Row를 이용해 더 세부적인 위치를 조정 할 수 있는 기능들을 알아보겠습니다.
플러터를 제 인생의 첫 개발언어로 선택하고 공부하고 있습니다. 그리고 플러터를 공부하기 위해 시중에 있는 여러 플러터 책을 찾아보고 공부했었습니다. 그리고 느낀 점은 시중에 있는 플러터 책은 처음 코딩을 접하는 사람들에게는 엄청 불친절한 책이라는 것이였습니다.
코드 설명을 할 때
a 라는 함수를 사용하면 결과는 A다. 그러니 이렇게 사용하면 된다.
라고만 적혀져 있을 뿐 입니다. a라는 함수는 왜 a 라고 부르는지, 그 결과 값이 왜 A가 나오는지에 대한 설명은 책에서 자세히 다루지 않기에 제가 만들고 싶어하는 여러 어플들이 위 책의 내용만으로는 절대 실현 할 수 없다는 걸 알게 되었습니다.
사실 저는 2021년 12월 즈음에 자바를 잠깐 공부했었습니다. 숨고라는 어플을 통해서 코딩 1:1 과외를 받아봤었습니다.
과외 선생님은 KT ai 센터 직원분이셨습니다. 엄청난 고수셨죠... 하지만 그 고수분은 저에게 무언가를 알려주려고는 노력하셨지만
제가 가지고 있는 배경 지식이 너무 없다보니 제대로 된 수업이 진행 될 수 없었습니다. 그래서 과외를 중단하고 프로그래밍 관련된 책을 읽기 시작했습니다. 지난 1년 여간 도서관에서 빌린 총 책의 숫자가 89권이네요, 그 중에 70권은 개발과 관련된 책입니다.
책 내용이 이해가 안되더라도 열심히 읽었습니다. 그리고 22년 9월즘에 책에 있는 내용들이 눈에 들어오게 되었습니다.
본격적으로 다시 어플을 만들어 보자 라는 마음이 생겼고 플러터 까페에 가입하고 15기 초급 스터디까지 진행하게 되었습니다.
그리고 마구잡이로 공부를 하기 시작했습니다. 원가계산기를 만들어보자 라는 마음에 깃허브에 있는 계산기 코드를 찾아내어서
똑같이 따라 쳤습니다. 이해가 안되는 코드가 있으면 구글링 하고, 2번 3번 따라 쳤습니다. 그 과정에서 배운 여러 내용들을 제대로 이해하지 못하고 외우기에 급급했습니다.
외국인이 저에게 How r u?라고 물으면 i m fine thank u 라고만 대답할 수 있는 상황이었습니다.
그러던 중에 최근 디자인 패턴 책을 읽게되었습니다.
책 제목이 디자인패턴이라 UI관련된 책인 줄알고 빌렸습니다만
내용 중에 나오는 감시자(옵져버) 패턴을 읽고 감동? 깨우침? 충격? 비스무리한 것을 받았습니다.
옵져버 패턴의 시작은
오래전 인터넷 연결이 원활하지 않을 시절에 웹사이트의 상태를 확인해서, 응답 속도가 느리거나, 연결이 끊기는 경우가 생기면 모니터링 담당자에게 이메일을 보내게 하는 시스템이었습니다.
그렇기에 코드의 구성이 변화를 감지하는 Notifiy 클래스, 그 변화를 옮겨주는 인터페이스 클래스 Observer 그 안에 update( ) 메소드, 그 업데이트 된 값을 가져와 화면에 노출시키는 Display 클래스or 이메일을 보내게 하는 행동 클래스 로 되어 있습니다.
그저 이 상태 관리 패키지를 사용할 때 문법처럼 외우기만 했던 저인데 이러한 기능들이 왜 , 어떻게 나왔는지 알게 되니
클론코딩도 , 조금씩 만들고 있는 원가계산기 코드를 짤 때도 한결 편해지는 느낌입니다.
위 경험을 통해 코딩 할 때 배경 지식의 중요성을 느끼게 되었습니다.
다시 한번 제 개인적인 의견을 말씀드리면
코딩을 처음 하시는 분들에게 시중에 있는 플러터 책은 좋다, 나쁘다를 떠나서 매우 불친절한 책들입니다.
먼저 배경 지식과 관련된 책 , 예를 들어 초보가 보는 프로그래밍, 개발자의 글쓰기, 기술 블로그 적는법, 아키텍쳐를 잘 구성하는 방법, 디자인패턴이란, 알고리즘 등등 쭉 한 번 읽어보시고 플러터를 시작하면 더 효율적인 공부가 되지 않을까 하는 마음에 긴 글 적어보았습니다
코딩의 발전의 속도는 무자비하다 하지만 그 발전의 방향은 일관성이 존재한다. 바로 "효율" 이다.
1. 공간의 효율 -> 프로그램의 실행횟수를 줄여서 메모리를 적게 쓰게 하자
2. 시간의 효율-> 프로그램의 실행횟수를 최소화해서 빠른시간내에 처리가 가능하게 하자
3. 피드백의 효율 -> 코드 읽는 시간을 줄여서 빠르게 문제점을 해결하자
그 "효율" 때문에 최근 많은 사람들로부터 선택받는 개발언어가 있다. 바로 Dart! Dart는 Flutter 프레임워크를 사용해서 하나의 코드로 안드로이드, IOS, 웹, 윈도우까지 프로그램을 만들 수 있는 매우"효율" 적인 언어이다. 회사 입장에서는 개발자를 안드로이드 1명, IOS 1명씩 둘 필요가 없어지니 말이다.
Flutter 가 한 때는 가장 인기 없는 언어로 선정된적도 있지만 지금은 더 "효율"적인 모습들로 개선이 되고 있다.
그렇기에 많은 사람들로부터 선택을 받고 있는 듯 하다.
오늘의 주인공은 Flutter 의 "효율" 적인 발전의 한 모습인 Get X이다. 지금 부터 나오는 내용은 위에 링크를 참고해서 만들었다.
Get X는 "Flutter made easy" 라는 목표를 두고 있다.
기존에 플러터 새로운 프로젝트를 열면 실행되었던 카운트앱이 있다.
아래는 그 카운트앱을 Get X로 개선한 모습이다. 기존에 100줄의코드양이 30줄로 줄어들었다.
