매일 기록 매월 성장

플러터를 제 인생의 첫 개발언어로 선택하고 공부하고 있습니다. 그리고 플러터를 공부하기 위해 시중에 있는 여러 플러터 책을 찾아보고 공부했었습니다. 그리고 느낀 점은 시중에 있는 플러터 책은 처음 코딩을 접하는 사람들에게는 엄청 불친절한 책이라는 것이였습니다. 

코드 설명을 할 때 

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 이메일을 보내게 하는 행동 클래스 로 되어 있습니다. 

제가 계산기 코드를 클론코딩하면서 배웠던 GetX, Provider가  바로 생각났습니다. 

플러터의 대표적인 상태관리 패키지로

Get x는 Obx() , .obs 

Provider는  ChangeNotifierProvider(or MultiProvider) , notifyListener() 

로 변화된 값을 감지하고 있습니다. 

즉 옵져버 패턴자체가 기능화 되어 패키지로 옮겨진 것입니다. 

그저 이 상태 관리 패키지를 사용할 때 문법처럼 외우기만 했던 저인데 이러한 기능들이 왜 , 어떻게 나왔는지 알게 되니 

클론코딩도 , 조금씩 만들고 있는 원가계산기 코드를  짤 때도 한결 편해지는 느낌입니다. 

위 경험을 통해 코딩 할 때 배경 지식의 중요성을 느끼게 되었습니다. 

다시 한번 제 개인적인 의견을 말씀드리면

코딩을 처음 하시는 분들에게 시중에 있는 플러터 책은  좋다, 나쁘다를 떠나서 매우 불친절한 책들입니다. 

먼저 배경 지식과 관련된 책 , 예를 들어 초보가 보는 프로그래밍, 개발자의 글쓰기, 기술 블로그 적는법, 아키텍쳐를 잘 구성하는 방법, 디자인패턴이란, 알고리즘 등등  쭉 한 번 읽어보시고 플러터를 시작하면 더 효율적인 공부가 되지 않을까 하는 마음에 긴 글 적어보았습니다 

비전문가인 내가 플러터를 배우는 모든 순간이 위기이다. 오늘의 위기는 Stateful 과 Stateless 위젯의 차이점의 대한 이해이다. 

코딩책을 읽다보면 정말 고이고 고인 분들이 코딩의 세계를 만들었다는게 느껴진다. 

어플을 만들기 위해서는 화면을 꾸며야 한다. 요즘 대부분의 어플들은 화면에 정적인 정보보다는 동적인 정보도 같이 제공해주는 경우가 많다. 예를들어 날씨어플, 실시간으로 버스 동선, 비트코인의 쉼 없이 움직이는 그래프 등등  

이러한 동적인 정보를 화면에 구성하기 위해서는 Stateful 위젯을 사용해야 한다. 

Stateful 위젯에 대해서 알아보는 중  "생명주기" 라는 단어가 날 더 혼란스럽게 했다. 

내가 이해한 바로는   Stateful 위젯의 생명주기 == 정해진 실행순서 이다. 

곰곰히 생각해보니 코딩의 궁극적인 목표는  빠른 속도로 안정된 프로그램의 실행이다. 실시간으로 정보를 주고 받아야 하는 어플들은 아무래도 과부하가 걸리기 쉽다. 그래서 우리 코딩의 천재분들이 미리 이러한 문제를 해결하기 위해  빠른속도로 안정화된 코드를 만들어 주셨다. 

아래는 그 안정화시키는 코드들이다. 

Stateful  위젯을 사용시 

1. createState()  -> 위젯을 상태를 생성하는 함수

2. mounted == true -> createSate 함수 이후에 화면을 생성할 수 있다라는 함수 -> 많이 쓰이지는 않지만 안정성을 위해 작성을 요함 

3. initState(){

super. initSate();

_getJsonData(); }

-> 위젯을 초기화 할 때 한 번만 호출, 주로 데이터 목록을 만들거나,  처음 필요한 데이터를 주고 받을 때 쓰인다 --> 계산기 같은 데이터가 필요하지 않을 때는 사용하지 않는다. 

4. didChangeDependencies()함수 -> initState 함수가 호출된 후에 이어서 바로 호출되는 함수이다. 실시간으로 데이터를 의존해야 한다면 무조건 사용해야 한다. 

5. build() -> 화면을 만드는 함수 

6. didUpdateWidget() ->부모 위젯이나 데이터가 변경 될 때 사용하는 함수 

7. setState() -> 함수를 이용하면 데이터가 변경되었다는 것을 알려주고 변경된 데이터를 이용해 화면의 UI 변경할 수 있도록 합니다. 제일 많이 호출 하는 함수이다. 

8.deactivate() ->위젯의 상태관리를 잠시 중지하는 함수

9. dispose( )-> 위젯의 상태관리를 아예 중지하는 함수 

10.mounted == false -> 객체의 소멸 

아래는 계산기 어플 코드이다. 

위에 배운 위젯의 정해진 순서는 

void main() => runApp(Myapp()); 

먼저 runApp가 실행이 되고 

class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

Myapp의 화면 위젯을 만든다.

class Calculator extends StatefulWidget {
  const Calculator({Key? key}) : super(key: key);

  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State {
  Widget calcbutton(String btntxt, Color btncolor, Color txtcolor) {
    return Container(

Myapp화면 위젯 안에 Calulator Stateful 위젯을 만든다.

Stateful의 원활한 진행을 위해상속받는  _CalulatorState 위젯을 createState 함수로 호출하고 화면을 구성한다. 

후아 코딩 어렵다

 

© weareprocreator, 출처 Unsplash

 

나는 #숨고 라는 어플을 통해서 1:1 코딩 교육을 받았다. 과외선생님은 KT에서 AI 알고리즘을 짜는 대단한 분이셨다. 문제는 과외선생님과 나의 지식의 갭이 너무 크다보니 내가 선생님 설명의 10%도 이해를 못한다는 것이다. 

다시금 느낀게 공부를 잘하는 능력과 공부를 잘 가르키는  능력이 같지는 않다는 것이다..

수업 첫 날 코딩의 코자도 모르는 나에게 

백준 홈페이지에 들어가 문제를 풀게하셨다...(대혼란 환장파티)

수업때마다 과외선생님의 "왜 이걸 이해못하지???"  표정을 볼 때마다 죄책감만 들었다.. 

무튼 내 주변에 코딩을 이제 막 시작하는 친구가 있다면  난 코딩에 대해서 이렇게 설명해주고 싶다. 

컴퓨터는 숫자 0과 1 밖에 인식을 하지 못한다. 0101 010101010 010101010 

사람이 매번 01의 규칙을 의존해서 컴퓨터에게 명령을 내릴 수는 없다. 그래서 나온게 개발언어이다. 

대표적으로 C 언이다. C 언어로print ("hello word!") 라는 명령문을 치게 되면

컴퓨터는 01010101 0101010101101로 (진짜인지는 모르지만 일단은..) 인식해서 화면에 

hello word! 를 표시해주는 방식이다. 

 

© claybanks, 출처 Unsplash

개발언어에는 수천 수만가지의 명령문이 존재하다.이런 개발 언어를 익히는 방법이 어려운 것은 개발언어 만든사람이 특정 소수이기 때문이다. 컴퓨터와 관련된 천재들, 즉 고인물들이 지들 편하게 만든 시스템이기 때문에 우리 같은 비전문가들, 이제 막 코딩을 시작하는 사람들에게는 상당한 벽을 느낄 수 밖에 없다. 

그러니 스스로가 특정 언어의 문법, 알고리즘 등등이 어려워도 그건 당연한 것이니 자책하지 말자. 

나는 음식점을 운영하는 사람으로 코딩이 요리와 참 많이 닮아있다라고 생각한다 

요리의 기본과정을 보면 

1. 무엇을 만들지 생각하기 

2. 재료를 준비하기 

3. 재료를 손질하기 

4. 재료를 조리하기 

5. 조리된 요리를 서비스 하기 

 

 

© kevinmccutcheon, 출처 Unsplash

코딩의 기본과정 또한 

1. 무엇을 만들지 생각하기 

-계산기 어플을 만들자!

2. 재료를 준비하기 

-자바로 만들자!

3. 재료를 손질하기

-자바 문법으로 계산기 어플에 있는 입력칸, 숫자칸, 연산자 칸을 만들자!

4. 재료를 조리하기 

- 잘 만들어진 칸에 함수를 설정해서 값을 나오게 만들자 ! 

5. 조리된 요리를 서비스 하기 

-  구글 스토어에 업로드! 이후 서비스 관리! 

나는 외식업에 15년차 몸을 담그고 있다. 제육볶음 이라는 단어를 들으면 자동적으로 머릿속에 레시피가 떠오른다. 

고기는 목전지를 쓰고, 두께는 2미리~3미리가 좋을 것 같고  

깔끔한 맛을 내려면 고추장 보다는 고춧가루 베이스로 분말가루로 만들고 

같이 볶을 야채는 대파? 양파? 오호 오늘은 가지를 넣어보자 

 

먼저 후라이팬을 살짝 달구고 기름을 두르고 

잘 으깬 마늘을 넣고 마늘향이 노릇해지면 목전지를 넣고 불맛! 

약간 간간하게 맛소금 쬐금 고기가 30% 익으면 가지 투하! 

 

잘 배합한 분말 소스 넣고 마무리 ! 

 

조리 시간은 3분 30초 좋았어! 

위 레시피는 이 글을 작성하는 순간에 생각을 해서 적은 것이다. 이렇게 쉽게 레시피를 생각해내는 건 그간 오랜 경험이 큰 역할을 한다. 

나도 이제 막 코딩을 배우는 단계이고 어렵다. 너무 어렵다. 그래도 음식을 처음 배웠을 때 처럼 꾸준히 하다보면 쉬워지리라 생각한다. 

오늘도 화이팅

 

 

 

© Sammy-Sander, 출처 Pixabay