[Flutter] 코딩 스터디 16회차 | 탭바(TabBar) 만들어보기 ✨ 목표 책 '플러터 앱 프로그래밍' p.116~122 학습. 탭바 만들어보기 ✨ 이해한 것 TabController에서 length는 몇개의 탭을 만들지 결정, vsync는 탭이 이동했을때 호출되는 콜백함수 호출. 일종의 탭 라우팅 및 key값 설정이라고 보면 될것 같다 위젯 상태관리에서 완전히 끝내는 dispose() 함수를 호출해서 메모리 누수를 막을 수 있음. 항상 위젯이 실행되는것이 끝나면 dispose() 함수로 끝내두기. ✨ 이해 안되는 것 이해가 안됬다기보단 삽질한 내용들을 올려본다. 삽질1) 바로 _MyHomePageState 클래스로 작업이 넘어가서, 이전 MyApp()과 MyHomePage() 함수 설정을 따로 해줘야하나? 지워야 하나 고민하면서 지웠더니 오류가 주르르륵 뜨고... 책.. [Flutter] 코딩 스터디 15회차 | 계산기앱 만들어보기(2) ✨ 목표 책 '플러터 앱 프로그래밍' p.107~114 학습. ✨ 이해한 것 플러터가 제공하는 키보드 유형은 총 7가지 타입이 있음. text: 기본텍스트 multiline: 메모같이 여러줄 입력할때. textarea같은 느낌인듯 number: 말해뭐해 phone: 말해뭐해2 datatime: 날짜입력 emailAddress: @표시 포함하는 이메일입력 url: 주소입력 텍스트 필드에 있는 값을 가져오려면 TextEditingController.value.text 이와 같은 형태로 객체의 값을 지정하는 것처럼 해당값을 가져와야 함 setState는 리액트의 useState와 같이 상태를 갱신하고 관리하는 역활을 진행. 다만 [상태값, 상태변화함수] 이런식으로 들어가진 않고, 직관적으로 안에 함수와 변수들.. [Flutter] 코딩 스터디 14회차 | 계산기앱 만들어보기 (1) ✨ 목표 책 '플러터 앱 프로그래밍' p.104~106 학습. ✨ 이해한 것 Padding 위젯을 이용하면 EdgeInsets.only에 left, right, top, bottom 등에 원하는 값을 넣어 여백을 줄 수 있음. ElevateButton 위젯의 onPressed는 버튼이 눌리면 발생하는 이벤트이다. ✨ 이해 안되는 것 없다 ✨ 소감 오늘은 살짝 분량을 적게 공부했다. 그래도 Padding 위젯에 대해서 알아볼 수 있었다. 스코프 체인 | 너와 나의 연결 정의 ✨ 서론 자바스크립트를 공부하는데 있어서 시작할때 제일 중요한것은 변수가 무엇인지 그리고 어떤것들이 할당되는것을 알아야 하는것도 있지만 이 개념이 선 다음에는 함수를 알아야하고 다음으로 이 '스코프 체인'에 대해서 어느정도 원리를 알아야 한다고 생각한다. 물론 요즘에는 책이라던가 영상강의등의 여러 풍부한 자료들이 많아서 볼 자료들이 많지만 혹여나 이 포스팅을 통해서 정보를 얻어갈 수 있는 사람들이 한둘이라도 생기길 바라는 마음에 나름 학습하고 이해한 내용을 적어본다. ✨ 왜 불렀는데 듣지를 못하니... 자니? 스코프를 이해하기 앞서 먼저 함수의 선언과 호출에 대한 기본 개념을 알고 있어야 한다. 다음 코드를 한번 살펴보자. function 전애인_카톡() { console.log("자니..?") } 여기.. [Flutter] 코딩 스터디 13회차 | 이미지와 폰트 추가해보기 ✨ 목표 책 '플러터 앱 프로그래밍' p.96~103 학습. ✨ 이해한 것 자주 사용되는 이미지는 앱에 넣어두었다가 직접 호출하는편이 데이터 사용 혹은 속도 면에서도 유리함. pubspec.yaml 파일에 이미지, 폰트 정보를 추가해야 플러터 앱의 환경설정에 맞게끔 출력이 가능해짐. pubspec.yaml은 들여쓰기에 주의해야 함. 앱이 제대로 동작하지 않을 수 있기 때문에. pubspec.yaml을 수정했을 경우 노란 알림창에 뜨는 Get dependencies를 클릭해줘야 자동으로 변경된 정보를 출력할 수 있게 됌. 해당 파일에 이미지, 폰트등을 집어넣는 코드는 다음과 같다. flutter: (...) assets: - 이미지파일 경로 fonts: - family: 폰트명 fonts: - asset:.. [Flutter] 코딩 스터디 12회차 | 스캐폴드를 이용한 머터리얼 디자인 (2) ✨ 목표 책 '플러터 앱 프로그래밍' p.93~95 학습. ✨ 이해한 것 child 안에 하위 자식목록을 만들 때 여러개를 넣는다면 children을 넣는다. 또한 children은 배열 형태로 선언됨. 위 그림과 같이 화면 정 가온데 정렬을 하려면 Center() 위젯만으로는 해결이 안됨. Center 위젯은 가로로만 정렬해주기 때문에 세로 column 축 정렬도 필요한데 이때 필요한것이 mainAxisAlignment이다. Center 위젯과 함께 이 메서드?를 선언하고 MainAxisAlignment.center를 입력하면 화면 정 가온데 정렬이 되는 것. 다음 코드를 보면 이해가 한결 쉬울것이다. child: Center( children: ~~~ mainAxisAlignment: MainAxi.. [Flutter] 코딩 스터디 11회차 | 스캐폴드를 이용한 머터리얼 디자인 (1) ✨ 목표 책 '플러터 앱 프로그래밍' p.87~92 학습. ✨ 이해한 것 [ 기본 머티리얼 디자인의 이해 ] 머티리얼 디자인은 구글에서 2014년부터 사용한 플랫 디자인. 일종의 이미지 스프라이트 혹은 디자인 컨벤션이라고 보면 될것같다. 머티리얼 디자인을 적용하기 위해서는 스캐폴드 클래스를 이용해야 함. 화면을 출력하는 buld() 함수의 리턴값이 null 이면 화면에 아무것도 표시할 수가 없어서 오류가 뜸. [ 스캐폴드 클래스 이용해보기 ] 스캐폴드에서 현재 위치를 알 수 있는 제목줄 추가하는 방법은 appBar를 넣는것. 다음과 같은 코드를 넣으면 실행됨. Scaffold( appBar: AppBar(title: Text('륜곰의 마테리얼 디자인앱'),), ) 그리고 화면 좌측 하단에 플로팅 버튼을 .. [Flutter] 코딩 스터디 10회차 | main.dart 뜯어보기 (4) ✨ 목표 책 '플러터 앱 프로그래밍' p.74~84 학습. ✨ 이해한 것 [ 버튼 생성하기 두번째 ] 엊그제 스위치가 클릭이 되도 안되더니, switchValue 변수의 위치를 Widget 밖으로 빼보니까 잘 작동한다. 이런...ㅋ 정말 신기하다. 마치 HTML에 인라인으로 자바스크립트 넣는 기분과 자바스크립트로 DOM 탐색후 innerHTML을 동시에 수행하는 느낌인데 이게 기본동작원리라니... child 안에도 child 선언이 가능하다. 느낌상 child > child 이런식으로 가능하다는 느낌같음. [ 위젯의 생명주기 ] 스테이트리스 위젯은 갱신불가로 생명주기가 없음. 화면 넘어가는 순간 꾀꼬닥. 그러나 10단계의 생명주기가 있음. 상태 생성, createState() 위젯을 화면에 장착, mou.. [Flutter] 코딩 스터디 9회차 | main.dart 뜯어보기 (3) ✨ 목표 책 '플러터 앱 프로그래밍' p.69~73 학습. ✨ 이해한 것 앱에 머터리얼 디자인을 적용하려면 Scaffold 클래스를 이용해야 함. 스위치를 생성하려면 Switch() 함수를... (계속 느끼는건데 함수를 선언한것만으로 DOM? 이 그려지는게 넘 신기하다) 스위치 클릭했을때의 상태값은 따로 코드로 구현하는 것이 아닌, Switch() 함수 내에서 onChanged 키값?을 이용해서 변환. 클래스 앞에 언더스코어(_)를 붙이는 것은 일종의 지역변수 느낌으로 내부에서만 사용할 수 있다는 것을 의미. 지금 작업에서는 main.dart 안에서만 사용할 수 있도록. 화면의 값을 바꾸려면 setState() 함수 안에서 조절해야 함. ✨ 이해 안되는 것 print 함수로 오류 확인이 정확하게 안되.. [Flutter] 코딩 스터디 8회차 | main.dart 뜯어보기(2) ✨ 목표 책 '플러터 앱 프로그래밍' p.63~68 학습 ✨ 이해한 것 플러터앱을 구성하는 위젯은 크게 2가지, 스테이트리스(stateless) | 스테이트풀(statefull)로 구분. stateless : 상태관리를 감시할 필요가 없는것, StatelessWidget 클래스 상속. statefull : 상태관리가 계속 이어져야 함. StatefulWidget 클래스 상속. 항시 지켜봐야함으로 메모리나 CPU등의 자원을 많이 소비함. Flutter의 기본 배경은 검은색. 검은색 도화지 위에서 하나하나 그려나간다고 생각. contents는 좌측 상단에서부터 우측하단방향으로 내려옴. 위젯을 하나만 넣을때는 child 옵션, 여러 위젯을 넣으려면 children 옵션을 사용. CSS 처럼 속성을 넣을때는 '.. [Flutter] 코딩 스터디 7회차 | main.dart 뜯어보기(1) ✨ 목표 책 '플러터 앱 프로그래밍' p.57~62 학습 ✨ 이해한 것 [ 기본내용 토대 ] vscode처럼 여러가지 폴더를 내가 직접 만드는 것이 아닌, 기본 폴더구조가 저절로 만들어진다. 크게 android, ios, lib, test 폴더가 메인. 주 폴더는 lib 폴더로서 여기에만 집중하면 됨. 이 lib 폴더안의 main.dart 파일의 main() 함수부터 시작이 되는듯. HTML로 따지자면 이 함수 자체가 부터 시작하는 느낌인것 같다. test 폴더는 쉽게 앱 테스트를 할 수 있게끔 하는 기본 제공 폴더. pubspec.yaml : 일종의 css 파일과도 같은 느낌인듯? 나머지 .gitignore, .packages 등은 node 등에서 쓰이던 폴더들이랑 결을 같이하는 느낌. [ main.d.. [Flutter] 코딩 스터디 6회차 | 스트림 그리고 Dart 도전 ✨ 목표 책 '플러터 앱 프로그래밍' p.50~56 학습 스트림 통신 (p.50~52) Dart 프로그래밍 만들기 (p.53~56) ✨ 이해한 것 비동기에서 여러개의 값을 저장하는 클래스로 사용하려면 Stream 클래스를 사용. 순서를 보장 받고 싶을때 사용하는 클래스. 데이터를 차례대로 주고 받는 코드를 작성할 때 사용. async* 는 앞으로 yield를 이용해 지속적으로 데이터를 전달하겠다는 의미. return값은 한번만 반환하는 반면 yield는 반환 후에도 계속 함수를 유지함. Stream 클래스를 이용할 경우 then()함수로 값을 받을 수도 있으나 then() 함수를 이용할 경우는 한번만 사용해야 함. 왜냐면 Stream 클래스를 이용하여 데이터를 사용하면 데이터는 바로 사라지기 때문에. 실.. 이전 1 2 3 4 5 다음
