막내의 막무가내 프로그래밍 & 일상

2024년 버팀목 전세자금 대출 신청(심사) 시 알아야할 기본사항

막무가내막내 — Sun, 28 Apr 2024 18:19:06 +0900

AI 이미지 생성은 처음해봤는데 대단한듯.(진땀빼며 은행 상품 공부를 하고 있는 한국인 IT 개발자 , A Korean IT developer sweating hard studying banking products 입력).

독학하면서 복습겸 간단하게 디딤돌대출 기본사항 정리하는 포스팅이다.

버팀돌 전세자금 대출은 주택도시기금을 통해 무주택 서민에게 낮은 금리로 공급되는 상품이다.

자격기준만 충족되면 은행재원 대출보다 저렴하여 많은 사람들이 우선적으로 고려하는 대출상품이다.

현재기준 은행재원이 4%대면 버팀목의 경우 2%대로 절반 수준이다.

버팀목 전세자금대출을 받기위해 인터넷 또는 지점 방문을 통해 많은 사람들이 상담하러 오시는데 상품 안내나 기본, 공통적인 상담은 해줄 수 있지만 준비서류를 챙겨오더라도 가심사와 대출까지 해주기는 힘들다.

기금이든든(https://enhuf.molit.go.kr/index.jsp) 사이트에서 먼저 자산심사를 통과하고 준비서류를 갖고와야 대출심사를 접수해줄 수 있기 때문이다.

기금이든든에서 자산심사를 먼저 받고 은행에 방문하여 바로 대출접수가 원활히 가능하게 하길 추천한다.

(은행에서 오래 기다렸는데 헛걸음하면 마음이 아프다)

결론적으로 버팀목 전세자금 대출을 받기위한 프로세스는 다음과 같다.

자격요건 알아보기 -> 기금이든든 자산심사 -> 준비서류 들고 은행방문 상담

시작이 반이란 말이 있다. 신청자격과 상품요건에 대해 최우선적으로 알 필요가 있고 정리해보겠음

[자격요건]

버팀목 전세자금 대출도 일반, 신혼가구 전용, 중소기업청년, 청년전용, 신생아특례 등 종류가 다양하며 조금씩 기준과 한도가 다르다는 점 알아두자

1. 무주택 심사

우선 무주택 세대주어야하며 본인, 배우자, 세대원 전원이 무주택이어야 한다 (예비세대주 포함)

2. 자산 심사

- 순자산 가액

부동산, 일반자산, 자동차, 금융자산 등을 포함한 자산이며 순자산가액이 3.45억원 이하여야 한다.

- 연소득

(부부합산) 5천만원 이하, 신생아특례의 경우는 1억3천만 이하

신혼가구는 7천5백만 이하

미성년2자녀이상 등은 6천만 이하

3. 대상 주택

- 임차전용면적

수도권 -> 임차 전용면적 85m^2

수도권 외 -> 임차 전용면적 100m^2

- 임차보증금

일반, 신혼가구 -> 수도권 3억, 수도권 외 2억원

2자녀 이상 -> 수도권 4억, 수도권 외 3억원

4. 대출 한도

대출비율과 호당 대출한도중 낮은게 기준이 된다.

- 대출비율 (디딤돌 종류가 마다 상이함)

대략 일반 디딤돌의 경우 70%이내 나머지는 80% 정도이내

- 호당 대출한도 : 각각의 버팀목 대출의 최대한도 (디딤돌 종류가 마다 상이함)

일반 디딤돌 대출의 경우 수도권 1.2억원, 수도권 외 0.8억원, 단 미성년자 2자녀 이상등은 수도권 3억, 수도권 외 2억원

신혼가구 전용 버팀목은 수도권 3억, 수도권 외 2억원

대출한도는 상품마다 너무 달라서 상품개요를 보자.

5. 대출신청시기

주택임대차계약을 체결하고 임차보증금의 5% 이상을 지불한 상태여야한다.

신규계약 -> 임대차계약서상 잔금지급일과 주민등록본상 전입일 중 빠른 날로부터 3개월 이내

갱신계약 -> 갱신계약일로부터 3개월 이내

핵심은 3개월이다. 절대 놓치지 말자!!!

이상 복습 겸 정리하는 포스팅을 가졌다.

[기타] 엑셀 실적점수표 작업 정리

막무가내막내 — Sun, 14 Apr 2024 14:45:53 +0900

[기획]
영업일은 행에
직원별 점수분류는 열로 분류했다.
추가로 마지막 열에는 전체직원 합계가 들어가게함

[샘플완성]
- 값 테스트 (기본값)

- 수식 표시

[파일]

영업점실적점수표.xlsx

0.01MB

[금융] 손해보험 보험대리점 자격증 취득

막무가내막내 — Sun, 30 Jul 2023 19:15:16 +0900

https://youngest-programming.tistory.com/758

[금융] 생명보험 + 제3보험 보험대리점 자격증 취득

생명보험과 제3보험을 같이 보험대리점 자격증 시험을 봤다. 쉬워서 하루만 공부해도 딸 수 있다고 들어서 딱 전날 퇴근 후 딱 2시간 자고 하루 벼락치기를 했다.. 책 기출만 싹 돌리고 보러갔는

youngest-programming.tistory.com

저번 생명보험, 제3보험에 이어서 이번에는 손해보험 보험대리점 자격증 시험을 봤다.

저번에 보험시험때 벼락치기 하고 너무 피곤하고 불안하게 봤어서 미리미리 공부하고 푹잔상태로 보려했는데 또 시험 하루전날 벼락치기를 하고 보게되었다..

금요일 퇴근 후 8시반쯤부터 공부를 시작했다.

시간이 없어서 한화생명에서 올린 유튜브 개념강의와 기출문제만 1회독하고 2시간만 자고 다음날 오전 11시 시험을 봤다.

선릉역으로 거리도 좀 되서 너무 가는데 너무 피곤했다 시험을 봤을떈 역시 족보 그대로 나오는 문제는 없어서 거의 모든 문제를 다 찍고나와서 떨어졌겠다 생각했는데, 찍기 운이 좋았는지 시험점수도 높은(?) 편으로 합격을 해서 좀 의외였다.

비전공자 기준으로는 밤새지말고 2~3일정도 안전하게 공부하면 좋을 것 같다. 신기하게 다 찍고나오는데 커트라인이 60이라 그런지 붙을 확률이 은근 높다.

SQLD 자격증 취득

막무가내막내 — Sun, 2 Jul 2023 02:15:49 +0900

SQLD 자격증 시험을 봤다!
책은 회사에서 준걸로 공부했고 퇴근후 3일 정도 공부했다.
시험을 보고 2과목은 잘 풀었다 생각했는데 1과목은 과락이 나올수도 있겠다 싶었다.
다행히 과락도 안나고 합격할 수 있었다.

[금융] 생명보험 + 제3보험 보험대리점 자격증 취득

막무가내막내 — Sun, 2 Jul 2023 02:11:51 +0900

생명보험과 제3보험을 같이 보험대리점 자격증 시험을 봤다.
쉬워서 하루만 공부해도 딸 수 있다고 들어서 딱 전날 퇴근 후 딱 2시간 자고 하루 벼락치기를 했다..
책 기출만 싹 돌리고 보러갔는데 분명 도덕적인 문제가 많아서 맞추기 쉽다했는데 도덕적인 문제가 두세문제 정도밖에 없어서 망했다 싶었는데 커트가 60이다 보니 어찌어찌 붙긴 했다.

기출하고도 똑같거나 그런 문젠 거의 없었고 기출문제에 나온 개념을 꼬아서 낸 문제가 많다고 느꼈다.
(공부를 넘 짧게한게 문제긴함)

이번 시험이 좀 다르게 나온게 아니라면 안전하게 2~3일은 공부에 투자하는게 좋을 것 같다.

시험장소가 보문역이라 가기 좀 멀었는데 붙어서 다행이다.

[안드로이드] 앱 게시 취소했던거 다시 출시로 복구하는법 구글 플레이 콘솔

막무가내막내 — Sun, 25 Jun 2023 16:46:19 +0900

게시 취소했던 앱을 다시 재출시 상태로 바꾸었다.

구글 플레이 콘솔에 들어가서 왼쪽 탭에 설정->고급설정 에서 바꿔주면 된다.

[금융] 파생상품투자권유자문인력 금융자격증 취득

막무가내막내 — Thu, 1 Jun 2023 23:30:29 +0900

파생상품투자권유자문인력 자격증을 이번에 취득했다.

시험공부하면서 이전에 공부했던 펀드투자권유자문인력보다도 어렵기도해서 스트레스도 많이 받고 셤도 망했다 생각하여 당연히 떨어질줄 알았는데 왠걸 한번에 합격해서 다행이다!

사내에서 준 교재와 해커스 책을 사서 공부했는데 기간을 2주 잡고해서 해커스는 조금 보다가 시간이 없을거같아서 사내교재로만 공부했다. ㅎㅎ

비전공자기준 기간은 2주를 잡고하면 빡세게 공부해야 안전하게 합격할 수 있을 것 같다.

그리고 1,2 장은 이해를 3, 4장은 달달 외우는게 중요한듯하다.

굳굳~

[면접정리] 안드로이드 면접 후기 및 받은 질문 정리

막무가내막내 — Sun, 27 Nov 2022 17:36:22 +0900

유명 IT기업 n사 안드로이드 직무 신입 면접을 봤었는데 질문을 정리해봤다.
안드로이드를 요즘 못하다보니 확실히 퇴화되긴 했구나 느꼈다. 2년전이 오히려 훨씬 더 잘 대답했을거같다.

0. 가지고잇는 기술셋, 이직사유
1. 액티비티 생명주기 설명
onStart 부가설명
2. 뷰가 그려지는 과정 설명
3. Mvc mvp mvvm 설명 및 장단점
4. Dagger hilt 차이점
둘이 컴파일 런타임때 에러가 검출된다했는데 둘이 컴파일때 구조가 어떻게 되고 어떻게 동작하는지 알고있는지
5. 4대 컴포넌트 설명
컨텐트프로바이더 사용해봣는지 어떻게 내 앱을 등록하는지
컨텐트프로바이더로 내앱을 다른앱에 공유해주는걸 해봤는지와 하는방법
암시적 명시적 호출 차이점
6. 인텐트 설명
7. 엔티티가 뭔지
8. 클린아키텍처 경험 및 설명
9. 클린아키텍처 각 레이어 설명 의존성방향
데이터레이어가 어떻게 되어있는지
10. Savedinstance restroeinstance 뭔지 아는지
11. 파이어베이스 어떤 기능 사용해봤는지
12. Okhttp랑 레트로핏 사용해봤는지
생각나는건 이정도다.
13. 마지막질문
14. 시간이 남았는데 가장 자신있는 기술(지식)이 뭔지

[금융] 오픈뱅킹 API 개념 정리

막무가내막내 — Sun, 13 Nov 2022 16:52:41 +0900

[오픈뱅킹이란]

오픈뱅킹 등 대외망 업무를 하면서 일반적인 망거래와 다른 부분이 있어 처음에 이해가 좀 어려웠던 오픈뱅킹망에 대해 한 번 정리하는 포스팅을 하려했는데 이제서야 한다 :)

오픈뱅킹이란 모든핀테크 사업자와 금융기관이 개별 금융기관과 별도 제휴 없이도 핀테크서비스를 원활하게 제공할 수 있도록 핵심금융서비스(수취조회, 거래내역조회, 이체성 등)을 표준화된 API 를 제공하는 것이다.

금융결제원이 중심 매개체가 되는 망이므로 당연히 오픈뱅킹 거래는 금융결제원(이하 금결원)의 오픈뱅킹망을 거치게된다.

[오픈뱅킹 구축배경]

처음 오픈뱅킹은 핀테크업체들이 금융기관(은행)의 서비스를 제공받아 쉽고 편리한 금융서비스 혁신을 위해 나온

서비스였지만 현재는 은행권들도 모두 사용하고 점점 더 사용범위가 넓어지고 있다.

그래서 다른 망에 비해 가장 혁신적이고 새로운 활용방안이 적용될 가능성이 높다고 생각한다.

[오픈뱅킹 구성주체]

오픈뱅킹공동망에서 API에 대해 살펴보기전 구성주체에 대해 알아야한다.

설명은 그림에 작성되있으니 추가로 간단하게 설명을 덧붙이겠다.

1. 참가기관

오픈뱅킹의 서비스를 제공하는 금융기관으로 예를들어 A은행에서 당행(자기은행) 고객의 거래내역조회, 이체성 거래 등을 제공하는데 참여한 기관을 말한다.

2. 오픈뱅킹센터(금결원)

오픈뱅킹 시스템을 구축 및 운영하고 거래의 중립(정합성)을 지키는 중심매게체로 금융결제원이라고 보면 된다.

만약 무응답, 시스템 에러 등이 발생해서 두 기관끼리의 거래가 어긋난다면 금융결제원에서 어떻게 처리하였는지로

정합성을 맞추게 된다.

3. 이용기관

오픈뱅킹 서비스를 일으키는 주체라고 보면된다.

예를들어 국민은행 스타뱅킹 앱에서 오픈뱅킹 거래로 타행의 잔액조회API를 불러온다면

이용기관은 SOL앱으로 국민은행, 타행들은 API 서비스를 제공하는 참가기관이라고 이해하면 쉽다.

4. 일반고객

오픈뱅킹 서비스를 사용하는 고객이다.

[오픈뱅킹 API 종류(이체성 거래 위주)]

오픈뱅킹에서는 위와 같이 다양한 API를 제공한다.

오픈뱅킹에는 다양한 API 서비스 중 4개의 다이어그램을 가져와봤는데 출금이체, 입금이체 API를 제외하고는 나머지는 모두 거래내역조회, 수취조회 API처럼 3개의 기관이 단순하게 일자로 요청/응답 받는 구조로 되어있다.

그래서 이해하기도 쉬우므로 이 포스팅에서는 조금 더 복잡한(?) 출금이체와 입금이체 API 에 대해 살펴보려한다.

먼저 입금이체 API다.

입금이체 API는 이용기관의 계좌에서 출금하여 수취인계좌로 실시간 입금하는 기능을 제공한다.

여기서 중요한 키포인트는 출금되는 계좌가 이용기관이자 출금기관이 되고 수취 및 입금되는

계좌를 가진 기관은 입금기관이라는 점이다.

즉 오픈뱅킹 API 서비스를 일으키는 주체(이용기관)이 입금을 하는거면 입금이체API라고 이해하면 쉽다.

이 다이어그램에서는 작성되어있지 않지만 모든 이체성 거래는 사전에 입금되는 은행에 대한 수취조회를 선행으로 하게된다.

그리고 자체 은행이 없는 핀테크업체 같은 경우는 주거래은행(ex. 시중은행)을 정하여 모계좌를 지급받고 이 계좌를 그림에서 써져있는거와 같이 이용기관 지급계좌라로 보면 된다.

입금이체 API와 반대로 출금이체 API는 거래를 일으키는 주체(이용기관)가 타기관(출금기관)에 출금을 요청하여 입금기관(이용기관) 계좌에 입금을 하게 된다.

그리고 출금기관은 당연히 이용기관과 같은 사용자 계좌여야하고 사용자 인증이 된 상태어야한다. ㅎㅎ 타인의 계좌에서 마음대로 출금을 할 수 있다면 큰일이 나니깐...;;

이해하기 쉽게 예를들어 설명하면,

고객이 네이버페이앱의 오픈뱅킹서비스를 사용해서 고객 본인의 다른 A은행계좌에 출금이체 API를 사용한다면 고객의 A은행 계좌에서 돈이 출금되어 네이버페이(이용기관)의 수납계좌로 돈이 입금되는 것이다.

마지막으로 좀 더 심화로 들어가서 '홍길동'이라는 사용자가 A핀테크업체 앱에서 오픈뱅킹서비스를 사용해서 B은행 자신의 계좌에서 출금하여 친구인 '막내'의 C은행 계좌에 이체를 하려고 하면 어떤 과정으로 될까?

이것에 대한 과정을 스케치북을 사용해서 간단하게 그려봤다. ㅎㅎ

사전단계로는 먼저 사용자가 자신의 타행계좌가 오픈뱅킹 서비스의 조회 및 출금동의가 되어있어야 한다.

그리고 이체단계에서는 입금될 계좌에 대한 수취조회가 먼저 이루어지고 출금이체와 입금이체 API 가 함께 사용된다는 점을 보는것이 중요하다.

이 과정에 대해 이해했으면 거의 다 이해했다고 보면 될 것 같다.

추가로 무응답과 같은 예외사항 발생시 어떻게 처리하는지는 생략하도록 한다. (대외비인걸로 알아서..?)

이상 오픈뱅킹에 대해 정리하는 포스팅이었습니다 :)

[금결원 공식 사이트 참고]

https://www.openbanking.or.kr/apt/content/openplatform

오픈뱅킹

www.openbanking.or.kr

https://www.openbanking.or.kr/apt/content/openapi?location=openApi1

오픈뱅킹

www.openbanking.or.kr

안드로이드 Flow 학습 및 예제 -flow, collect, buffer, collectLast, StateFlow, SharedFlow, map, filter-

막무가내막내 — Wed, 2 Nov 2022 16:31:09 +0900

https://www.udemy.com/course/android-architecture-componentsmvvm-with-dagger-retrofit/learn/lecture/31674208#overview

예전에 들었던 Udemy 안드로이드 강의를 최근에 들어가보니 Compose 와 Flow + 코루틴 강의가 추가되었다 ㅎㅎ

꾸준히 버전업데이트도 하고 새로운 강의를 만들어주셔서 안드로이드 Jetpack 및 아키텍처 강의로 베스트셀러인 이유가 있는거 같다!

추천추천~

강의는 매우 짧게 예제위주로 구성되어있어서 간단하게 기록용 포스팅이다. (거의 개인적인 사견이 많이 들어감... 간단한 맛보기 공부라 부족한점 이해 바랍니다)

평소 비동기 코드(통신)에 주로 사용하는 리엑티브 프로그래밍 언어로 RxJava를 사용해왔는데 요즘은 구글에서 만든 코루틴과 함께 Flow API가 대체되어가고 있어서 이번 기회에 강의로 Flow 를 맛만(?) 보아봤다.

개념은 같은 리엑티브 프로그래밍인만큼 RxJava와 비슷하고 코드가 간결하고 좀 더 가볍(쉽다)다는 장점이 있는 것 같다.

더 자세한 내용은 공식문서를 참고

https://developer.android.com/kotlin/flow

Android의 Kotlin 흐름 | Android 개발자 | Android Developers

Android의 Kotlin 흐름 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 코루틴에서 흐름은 단일 값만 반환하는 정지 함수와 달리 여러 값을 순차적으로 내보낼

developer.android.com

포스팅에 앞서 코루틴과 RxJava가 비슷하면서 용어가 조금 달라서

소비자(Cousumer) == 구독자

collect == 구독

등 좀 혼용해서 용어를 사용하는 점 참고바랍니다. ㅎㅎ

코루틴도 RxJava처럼 데이터를 생성하는 생성자(Producer)와 생성자로부터 데이터를 전달받아 처리하는 소비자(Consumer)로 나뉜다.

// 생성자 (Producer)
val myFlow = flow<Int> {
	for (i in 1.100){
    	emit(i)
        delay(1000L)
    }
}

// 소비자 (Consumer)
CoroutineScope(Dispatchers.Main).launch{
	myFlow.collect{
    	Log.i("MyTAG", "Current Value ->  $it")
    }
}

위 코드는 flow 빌더함수를 통해 생성자가 1초 간격으로 1~10까지 Int형 데이터흐름을 생성하게 되고 소비자는 메인 스레드에서 앞서 정의한 생성자에서 방출(emit)하는 데이터흐름을 collect를 통해 소비할 수 있다.

참고로 flow 블록을 사용한 Flow는 누군가 collect를 하기 전까지는 데이터를 생성하지 않는 Cold Stream이다. 이부분은 이후 StateFlow를 볼때 한번더 언급할 것이다.

// 생성자 (Producer)
val myFlow = flow<Int> {
	for (i in 1.100){
    	Log.i("MyTAG", "Emit Value ->  $it")
    	emit(i)
        delay(1000L)
    }
}

// 소비자 (Consumer)
viewModelScope.launch{
	myFlow.collect{
    	Log.i("MyTAG", "Current Value ->  $it")
    }
}

// 결과
Emit Value -> 1
Current Value -> 1
Emit Value -> 2
Current Value -> 2
Emit Value -> 3
Current Value -> 3
Emit Value -> 4
Current Value -> 4
.
.
.

flow 블록을 통한 Flow는 collect로 데이터를 소비하기 시작하면 생성자에서 데이터를 생성 및 방출하게 되고 결과는 위와 같다.

// 생성자 (Producer)
val myFlow = flow<Int> {
	for (i in 1.100){
    	Log.i("MyTAG", "Emit Value ->  $it")
    	emit(i)
        delay(1000L)
    }
}

// 소비자 (Consumer)
viewModelScope.launch{
	myFlow.collect{
    	// delay 추가
    	delay(2000L)
    	Log.i("MyTAG", "Current Value ->  $it")
    }
}

// 결과
Emit Value -> 1
Current Value -> 1
Emit Value -> 2
Current Value -> 2
Emit Value -> 3
Current Value -> 3
Emit Value -> 4
Current Value -> 4
.
.
.

소비자쪽에 delay(2000L) 코드를 추가하여 소비속도가 생성속도보다 느려졌지만 결과는 같다.

왜냐하면 Flow는 이전에 방출한 데이터를 소비자가 소비하기전에 데이터를 방출하지 않기 때문이다.

이렇게 생성자가 소비자가 이전에 방출한 데이터를 처리할때까지 기다렸다 하나씩 전달하는 메커니즘은 생성자가 소비자에게 데이터를 다 전달해주지 못하고 끝나거나 과부하가 날수도 있다.

이를 위해 RxJava와 비슷하게 방출대기중인 데이터들을 어떻게 다룰지 정하는 배압전략(backpressure)을 Flow에서도 제공한다.

그 중 buffer 와 collectLast 기능에 대해 배웠다.

배압에 관련된 포스팅은 다음 글에서 재미있게 잘 설명하고 있는거 같다.

https://doublem.org/stream-backpressure-basic/

Stream Backpressure의 이해 | Doublem.org

Stream Backpressure의 이해

doublem.org

buffer() 부터 보면 다음과 같다.

// 생성자 (Producer)
val myFlow = flow<Int> {
	for (i in 1.100){
    	Log.i("MyTAG", "Produced ->  $it")
    	emit(i)
        delay(1000L)
    }
}

// 소비자 (Consumer)
viewModelScope.launch{
	myFlow.buffer().collect{
    	// delay 추가
    	delay(2000L)
    	Log.i("MyTAG", "Consumed ->  $it")
    }
}

// 결과
Produced -> 1
Produced -> 2
Consumed -> 1
Produced -> 3
Produced -> 4
Consumed -> 2
Produced -> 5
Produced -> 6
Consumed -> 3
Produced -> 7
Produced -> 8
Consumed -> 4
Produced -> 9
Produced -> 10
Consumed -> 5
Consumed -> 6
Consumed -> 7
Consumed -> 8
Consumed -> 9
Consumed -> 10

생성자가 소비자의 데이터 처리에 신경쓰지 않고 블로킹없이 데이터를 생성하는 것을 볼 수 있다. 또한 소비자는 나중에라도 전달받은 데이터를 순차적으로 모두 소비하는 것도 볼 수 있다.

만약 가장 최근에 생성한 데이터만 소비하고자하면 어떻게 하면 좋을까? 그럴때는 collect 대신 collectLast를 사용하면 된다.

// 생성자 (Producer)
val myFlow = flow<Int> {
	for (i in 1.100){
    	Log.i("MyTAG", "Produced ->  $it")
    	emit(i)
        delay(1000L)
    }
}

// 소비자 (Consumer)
viewModelScope.launch{
	myFlow.collectLast{
    	// delay 추가
    	delay(2000L)
    	Log.i("MyTAG", "Consumed ->  $it")
    }
}

// 결과
Produced -> 1
Produced -> 2
Produced -> 3
Produced -> 4
Produced -> 5
Produced -> 6
Produced -> 7
Produced -> 8
Produced -> 9
Produced -> 10
Consumed -> 10

마지막 10 데이터만 소비하는 결과를 볼 수 있었다.

계속 같은말을 반복하지만 ㅎㅎ RxJava처럼 Flow 에서도 역시나 필터 함수기능들을 제공한다.

그 중 가장 대표적인 map과 filter를 사용해봤다.

// 생성자 (Producer)
val myFlow = flow<Int> {
	for (i in 1.100){
    	Log.i("MyTAG", "Produced ->  $it")
    	emit(i)
        delay(1000L)
    }
}

// 소비자 (Consumer)
viewModelScope.launch{
	myFlow.filter{  // 말 그대로 조건에 맞는 필터링한 데이터만 통과됨
    	count -> count % 3 = 3
    }
    .map { // 데이터를 가공함
    	it -> ("MAP " + it)
    }
    .collect{
    	Log.i("MyTAG", "Consumed ->  $it")
    }
}

// 결과
Produced -> 1
Produced -> 2
Produced -> 3
Consumed -> MAP 3
Produced -> 4
Produced -> 5
Produced -> 6
Consumed -> MAP 6
Produced -> 7
Produced -> 8
Produced -> 9
Consumed -> MAP 9
Produced -> 10

filter 로 데이터가 조건에 맞는거만 필터링되고 map으로 데이터를 가공할 수 있다는 것을 확인할 수 있었다.

RxJava와 마찬가지로 Flow에도 Cold Hot 개념이 있다.

지금까지한 flow 빌더함수(블록)을 활용한 Flow는 데이터를 소비자가 collect (RxJava로 치면 구독) 하기전까지 데이터를 생성하지 않는 Cold Stream이다. 또한 구독자(소비자)가 오로지 1명 뿐이라는 특징이 있다.

StateFlow 와 SharedFlow 는 소비자의 collect(구독)과 상관없이 늘 동작하는 Hot Stream이고 한 명 이상의 구독자(소비자)를 가질 수 있다. 이 둘에 대한 특징은 밑의 공식문서를 참고하자!

https://developer.android.com/kotlin/flow/stateflow-and-sharedflow

StateFlow 및 SharedFlow | Android 개발자 | Android Developers

StateFlow 및 SharedFlow 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. StateFlow와 SharedFlow는 흐름에서 최적으로 상태 업데이트를 내보내고 여러 소비자에게 값을

developer.android.com

StateFlow 부터 살펴보면,

기존에 사용하던 LiveData 와 비슷하고 비슷하게 사용하면 되었다.

하지만 비슷하지만 몇가지 차이점도 있다.

첫번째로,

LiveData는 초깃값(초기상태)을 가지고 있지 않으므로 null check가 필요하다.

StateFlow는 초깃값을 필요(필수)하므로 null check가 필요하지 않다.

두번째로,

LiveData는 View가 Stopped 상태로 갈때 자동으로 구독자(소비자)를 해제해준다.

StateFlow는 기본으로 LiveData처럼 동작하지 않으므로 lifecycleScope 에서 이것을 해줘야한다 .

세번째로,

LiveData는 안드로이드 프레임워크에 종속되서 안드로이드개발에서만 사용할 수 있다.

StateFlow는 코틀린 언어 종속으로 코틀린 멀티플랫폼 프로젝트에서 다양하게 사용이 가능하다 .

class MainActivityViewModel(startingTotal : Int) : ViewModel() {
//    private var total = MutableLiveData<Int>()
//    val totalData : LiveData<Int>
//        get() = total

      private val _flowTotal = MutableStateFlow<Int>(0)
      val flowTotal : StateFlow<Int> = _flowTotal
      //get() = _flowTotal



    init {
       // total.value = startingTotal
        _flowTotal.value = startingTotal
    }

    fun setTotal(input:Int){
       // total.value =(total.value)?.plus(input)
        _flowTotal.value = (_flowTotal.value).plus(input)
    }
}

ViewModel 에서 변수를 StateFlow 로 정의하고 Add 버튼을 클릭하면 StateFlow 값을 플러스 하는 함수로 되어있다.

또한 초깃값 0을 가지고 있는 것을 확인 할 수 있다.

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private lateinit var viewModel: MainActivityViewModel
    private lateinit var viewModelFactory: MainActivityViewModelFactory
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        viewModelFactory = MainActivityViewModelFactory(125)
        viewModel = ViewModelProvider(this,viewModelFactory).get(MainActivityViewModel::class.java)

//        viewModel.totalData.observe(this, Observer {
//            binding.resultTextView.text = it.toString()
//        })

        lifecycleScope.launchWhenCreated {
             viewModel.flowTotal.collect{
                 binding.resultTextView.text = it.toString()
             }
        }

        binding.insertButton.setOnClickListener {
            viewModel.setTotal(binding.inputEditText.text.toString().toInt())
        }
    }
}

액티비티에서는 launchWhenCreate {} 를 통해 뷰 라이프사이클이 Create일때 StateFlow 를 collect 해주었고 값이 바뀔때마다 계속 소비하고 최신값으로 text를 세팅해주게 된다.

SharedFlow는 StateFlow와 다르게 초깃값(초기상태)를 필요로 하지 않고, 이러한 상태에서 이벤트가 발생했을때 데이터를 emit 할때 사용하면 좋다.

그래서 밑 예제도 버튼을 클릭하면 토스트메시지를 띄워주는 형식으로 사용하였다.

추가로, 좀 더 깊은 구조를 알고 싶으면 다음 포스팅을 참고하면 좋다.

https://myungpyo.medium.com/stateflow-%EC%99%80-sharedflow-32fdb49f9a32

StateFlow 와 SharedFlow

코루틴 공식 가이드 읽기 Part 9 — Dive1

myungpyo.medium.com

뷰모델 코드다.

SharedFlow 는 초깃값을 안가지고 있고 setTtotal() 버튼을 누를떄때 발생하는 이벤트 함수에 값을 emit 하는 코드를 추가했다.

class MainActivityViewModel(startingTotal : Int) : ViewModel() {

      private val _flowTotal = MutableStateFlow<Int>(0)
      val flowTotal : StateFlow<Int> = _flowTotal

	  //SharedFlow는 기본값을 안가진 것을 볼 수 있음
      private val _message = MutableSharedFlow<String>()
      val message : SharedFlow<Int> = _message


    init {
       // total.value = startingTotal
        _flowTotal.value = startingTotal
    }

    fun setTotal(input:Int){
       // total.value =(total.value)?.plus(input)
        _flowTotal.value = (_flowTotal.value).plus(input)
        viewmodelScope.launch{
        	_message.emit("setTotal Success!!!")
        }
    }
}

액티비티 코드이다. 뷰모델의 SharedFlow 흐름을 구독 감지하여 토스트 메시지를 띄워준다.

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private lateinit var viewModel: MainActivityViewModel
    private lateinit var viewModelFactory: MainActivityViewModelFactory
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        viewModelFactory = MainActivityViewModelFactory(125)
        viewModel = ViewModelProvider(this,viewModelFactory).get(MainActivityViewModel::class.java)

//        viewModel.totalData.observe(this, Observer {
//            binding.resultTextView.text = it.toString()
//        })

        lifecycleScope.launchWhenCreated {
             viewModel.flowTotal.collect{
                 binding.resultTextView.text = it.toString()
             }
        }

        lifecycleScope.launchWhenCreated {
             viewModel.message.collect{
                 Toast.makeText(this, it, Toast.LENGTH_LONG).show()
             }
             
        }

        binding.insertButton.setOnClickListener {
            viewModel.setTotal(binding.inputEditText.text.toString().toInt())
        }
    }
}

이 밖에 공식문서를 보니 강의에서 다루지 않는 Cold Stream을 Hot Stream으로 바꿔주는 shareIn 과 같은 것도 있으니 나중에 사용하게되면 추가로 보면 좋을 것 같다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다!!!!

[Udemy] The Complete 2021 Flutter Development Bootcamp with Dart 강의 수료

막무가내막내 — Sun, 17 Jul 2022 16:45:23 +0900

https://www.udemy.com/certificate/UC-8475640a-8f7d-4705-98f0-dbfe27a9f67b/

Udemy 강의 수료 인증서

내 "The Complete 2021 Flutter Development Bootcamp with Dart" 강의 수료 인증서

www.udemy.com

유데미에서 수강신청했던 안젤라 선생님의 플러터 강의를 수료했다.

플러터와 다트의 기본기부터 파이어베이스와 Provider 아키텍처 패턴도 배울 수 있었다.

구글의 공식 플러터,Dart 강의이기도 해서 퀄리티가 좋고 입문자들에게 추천하는 강의이다!

다만 아쉬운점은 강의와 프로젝트가 플러터 1버전대인데 현재는 3버전대라 에러가 터지거나 뒷부분에서는 오류로 실습 진행이 끝까지 안된 경우도 있었다.

깃허브 샘플 프로젝트를 최신버전으로 빨리 업데이트 해줬으면 좋겠다 :)

댓글과 공감은 큰 힘이 됩니다. 감사합니다!!!

[금융] 펀드투자권유자문인력 금융자격증 취득

막무가내막내 — Thu, 14 Jul 2022 20:16:05 +0900

펀드투자권유자문인력 자격증을 이번에 취득하였다.

기출모의고사랑 문제도 다르고 더 어려웠어서 떨어질거같았는데 다행히 80점으로 붙었다.

다행이다 :)

간략히 시험을 정리하는 포스팅을 남겨보려고한다.

금융에 문외한인데 2주 정도 공부하고 붙은거같다.

(평일 2시간, 주말 4시간 이상 사용했다. 순공타임 ㄴㄴ..)

컷이 70점이라 1주 빡세게 하거나 2주정도 안전하게 공부하면 합격할거라 생각한다.

이패스 펀드투자권유자문인력 책으로 학습했는데 인강은 회사에서 제공해주는걸로 1단원 초반부분만 조금 듣다가 독학으로했다. (시간도 부족해서..)

책은 핵심만 간략하게 잘정리되있고 문제정리도 잘되어있어 좋은책인거 같다고 느꼈다.

마지막 전날에 딱 모의고사 3회차까지 다 풀고 다음날 시험을보러갔다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다!!!

[Flutter] 플러터 빌드 버전 에러 Build failed due to use of deprecated Android v1 embedding.

막무가내막내 — Sun, 10 Jul 2022 14:08:27 +0900

[에러]

플러터에서 실행을 누르니깐 다음과 같은 에러가 발생했습니다.

에러메시지 그대로 현재 플러터가 안드로이드의 너무 오래된 버전인 v1 사용으로 인한 버전 충돌 문제였습니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Warning
──────────────────────────────────────────────────────────────────────────────
Your Flutter application is created using an older version of the Android
embedding. It is being deprecated in favor of Android embedding v2. Follow the
steps at

https://flutter.dev/go/android-project-migration

to migrate your project. You may also pass the --ignore-deprecation flag to
ignore this check and continue with the deprecated v1 embedding. However,
the v1 Android embedding will be removed in future versions of Flutter.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
The detected reason was:

D:\Git\udemy-flutter-practice\flash-chat-flutter\android\app\src\main\AndroidManifest.xml uses `android:name="io.flutter.app.FlutterApplication"`
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Build failed due to use of deprecated Android v1 embedding.

[해결방법]

https://stackoverflow.com/questions/71492645/flutter-build-failed-due-to-use-of-deprecated-android-v1-embedding

Flutter build failed due to use of deprecated Android v1 embedding

I have an error in the flutter project that I cloned from GitHub. I tried this method but it didn't work <application android:name="io.flutter.app.FlutterApplication" To: <

stackoverflow.com

- 변경전

<application
    android:name="io.flutter.app.FlutterApplication"

- 변경후

android:name 수정 및 meta-data 추가

<application
    android:name="${applicationName}"
    android:label="flash_chat"
    android:icon="@mipmap/ic_launcher">

<meta-data
    android:name="flutterEmbedding"
    android:value="2" />

[변경 코드]

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="co.appbrewery.flash_chat">

    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application
        android:name="${applicationName}"
        android:label="flash_chat"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data
                android:name="flutterEmbedding"
                android:value="2" />

            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>

            </intent-filter>
        </activity>
    </application>
</manifest>

[금융] 펀드투자권유자문인력 시험 1장 메모

막무가내막내 — Sat, 18 Jun 2022 22:29:09 +0900

직무윤리 및 투자자 분쟁예방

위험과 거래비용
-> 눈에 보이지 않는 위험비용까지 합해야함

CCO(총괄책임자)는 대표이사 직속의 지위를 갖음

이해상충방지의무
-> 의무임
준법감시인이나 뭔가의 승인이 있어도 거래가능 (X) - 거래가능이란말 있으면 아님

칼뱅 이 한말 키워드
-> 금욕적 생활윤리, 초기 자본주의, 소명

기업의 사회적책임 관련 지수
-> BITC, CR Index

윤리경영 측정 지수
-> CPI, KoBEX, FKI-BEX

재투자권유 가능한 경우
-> 1개월 후 OR 다른종류의 투자상품권유

상품판매 이후 금융소비자 보호
-> 해피콜 - 가입 후 7영업일 이내
불완전판매 배상 - 가입 후 15일 이내 (영업일 X)
판매 수수료 반환 - 가입 후 5영업일 이내

투자관련해서 합리적 근거가 있더라도 투자성과를 예측해서 권유하면안됨

신임의무 두가지 근거
-> 고객우선 원칙, 신의성실의 원칙

KYC(Know - Your - Customer - Rule) 실행순서
-> 앞에 두개순서만 기억하면됨
1. 투자권유원하는지 확인, 2. 일반투자자 여부 확인

기업윤리와 직무윤리
-> 기업윤리 > 직무윤리
기업윤리 - 거시적, 포괄적, 모든구성원, 윤리강령형태
직무윤리 - 미시적,개개인, 추상적, 임직원행동강령형태

투자자 이해수준에 따라 투자권유 서렴ㅇ의 정도를 달리할 수 있음 (없다X)

본인에 대한 윤리
- 법규준수, 자기혁신, 품위유지, 공정성 및 독립성 유지, 사적이익 추구금지(문상제공은 몇경우 가능한데 다른 백화점상품권같은건 불가)

특정정보가 불명화갛ㄴ 경우도 비밀 정보로 관리해야함

회사에 대한 선관주의의무 고용관계 끝나도 일정기간은 지속됨

내부통제관 위반시 과태료 관련
-> 준법감시인의 임면사실을 금융위원회에 보고하지 않은거는(보고관련) 1천만원 미만,
겸직의무위반은 3천만원, 나머지는 1억원 이하

금융투자업자에 대한 제제 가능
-> 금융위원회 (금감원 X)

일임매매, 임의매매
-> 손해배상책임에 있어 차이있음, 일임매매는 예외적으로 자본시장법에서 제한적허용됨

내부통제위원회
- 위원장은 대표이사, 매 반기별 1회이상 개최

금융위원회 조치에 대한 불복
-> 30일 이내 이의신청 가능, 금융위원회는 60일 이내에 이의신청에 대한 결정

개인정보보호법은은 일반법이다.

법정손해배상제도
-> 개인정보 유출 피해자가 피해액 입증 못해도 300만원 이내 보상 (피해액의 3배)

[Flutter] Udemy 플러터 강의 섹션 15 학습 (학습중인 포스팅입니다) (Flash Chat - Fluuter x Firebase Cloud Firestore)

막무가내막내 — Sun, 22 May 2022 17:57:28 +0900

[이전학습]

https://youngest-programming.tistory.com/701

[Flutter] Udemy 플러터 강의 섹션 14 학습 (학습중인 포스팅입니다) (Boss Level Challenge 3 - Bitcoin Tricker)

[이전학습] https://youngest-programming.tistory.com/692 [Flutter] Udemy 플러터 강의 섹션 13 학습 (학습중 3시간18분 강의) (Clima - Powering Your Flutter App with Live W [이전학습] https://youngest-p..

youngest-programming.tistory.com

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2021 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

https://github.com/mtjin/flutter-practice

GitHub - mtjin/flutter-practice: Learning About Flutter (플러터 공부)

Learning About Flutter (플러터 공부). Contribute to mtjin/flutter-practice development by creating an account on GitHub.

github.com

[프로젝트]

[메모]

플러터 커스텀 애니메이션 관련 클래스 및 문서들

3개다 구현해보고 마지막으로 Tween 해봄

import 'package:flash_chat/screens/login_screen.dart';
import 'package:flash_chat/screens/registration_screen.dart';
import 'package:flutter/material.dart';

class WelcomeScreen extends StatefulWidget {
  static const String id = 'welcome_screen';

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

// SingleTickerProviderStateMixin 는 AnimationController 를 사용하는데 필요
class _WelcomeScreenState extends State<WelcomeScreen>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(duration: Duration(seconds: 1), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

    controller.forward();
    animation = ColorTween(begin: Colors.blueGrey, end: Colors.white)
        .animate(controller);
    controller.addListener(() {
      setState(() {});
      print(animation.value);
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: animation.value,
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Row(
              children: <Widget>[
                Hero(
                  tag: 'logo',
                  child: Container(
                      child: Image.asset('images/logo.png'), height: 60.0),
                ),
                Text(
                  'Flash Chat',
                  style: TextStyle(
                    fontSize: 45.0,
                    fontWeight: FontWeight.w900,
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 48.0,
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 16.0),
              child: Material(
                elevation: 5.0,
                color: Colors.lightBlueAccent,
                borderRadius: BorderRadius.circular(30.0),
                child: MaterialButton(
                  onPressed: () {
                    //Go to login screen.
                    Navigator.pushNamed(context, LoginScreen.id);
                  },
                  minWidth: 200.0,
                  height: 42.0,
                  child: Text(
                    'Log In',
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 16.0),
              child: Material(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(30.0),
                elevation: 5.0,
                child: MaterialButton(
                  onPressed: () {
                    //Go to registration screen.
                    Navigator.pushNamed(context, RegistrationScreen.id);
                  },
                  minWidth: 200.0,
                  height: 42.0,
                  child: Text(
                    'Register',
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

아직 학습중인 챕터 포스팅입니다 :)

[Flutter] 서버 API 네트워크 통신 예제

막무가내막내 — Sun, 22 May 2022 16:18:04 +0900

플러터 네트워크 통신 코드 예제 메모입니다 :)

http 디펜던시 yaml 추가 (flutter 1.x 버전대임..)

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  #TODO: Add your dependencies here.
  http: ^0.12.1

https://pub.dev/packages/http/versions

http package - All Versions

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.

pub.dev

http, convert 패키지 import

import 'dart:convert';
import 'package:http/http.dart' as http;

http는 통신, convert는 json코드를 decode하는데 사용한다.

네트워크 통신 베이스 클래스

const coinAPIURL = 'https://rest.coinapi.io/v1/exchangerate';
const apiKey = '시크릿';

class CoinData {
  String coinRateUrl = '$coinAPIURL/BTC/USD?apikey=$apiKey';

  //TODO: Create your getCoinData() method here.
  Future getCoinData() async {
    http.Response response = await http.get(coinRateUrl);
    if (response.statusCode == 200) {
      var decodedData = jsonDecode(response.body);
      var lastPrice = decodedData['rate'];
      return lastPrice;
    } else {
      print(response.statusCode);
      throw 'getCoinData() error';
    }
  }
}

화면에서 베이스 클래스 사용

String coinRate = '?';
//TODO: Create a method here called getData() to get the coin data from coin_data.dart
void getData() async {
  try {
    double data = await CoinData().getCoinData();
    setState(() {
      coinRate = data.toStringAsFixed(0);
    });
  } catch (e) {
    print(e);
  }
}

댓글과 공감은 큰 힘이 됩니다. 감사합니다 !!

[Flutter] 플러터 IOS 쿠퍼티노 Android 머터리얼 디자인 분기처리 (dart:io 패키지 Platform 사용)

막무가내막내 — Sun, 22 May 2022 15:20:10 +0900

Flutter 는 리엑트네이티브처럼 IOS, Android 를 동시에 개발이 가능하다.

Android 에서는 기본적으로 Material 디자인을 제공하고 있고

https://docs.flutter.dev/development/ui/widgets/material

Material Components widgets

docs.flutter.dev

IOS에서는 Cupertino 라는 디자인을 제공하고 있다.

https://docs.flutter.dev/development/ui/widgets/cupertino

Cupertino (iOS-style) widgets

docs.flutter.dev

위 두개의 링크처럼 플러터는 IOS, Android 두 프레임워크의 디자인을 모두 지원한다.

나는 Android 폰과 삼성 노트북만을 사용하고 있기 떄문에 IOS의 디자인에 대해서는 잘 알지는 못하지만 안드로이드 머터리얼 디자인에 익숙해져있는 내가 IOS 디자인으로 된 UI를 보면 이질감이 조금 있을 순 있을거 같다.

이를 위해 Flutter 에서는 두 개의 플랫폼에 따라 다른 디자인을 구현해줄 수 있다.

Flutter에서 기본으로 제공하는 io 패키지를 먼저 import 해준다.

import 'dart:io' show Platform;

여기서 show 는 이 io 패키지의 Platform 파일만을 사용하겠다는 뜻이다.

이외에도 as , hide도 있긴하다.

이 Platform 클래스를 활용해서 사용자가 무슨 플랫폼을 사용하고 있는지 체크하여 디자인을 분기 처리할 수 있다.

- Android 머터리얼 디자인 구현 -

DropdownButton<String> androidDropdown() {
  List<DropdownMenuItem<String>> dropdownItems = [];
  for (String currency in currenciesList) {
    var newItem = DropdownMenuItem(
      child: Text(currency),
      value: currency,
    );
    dropdownItems.add(newItem);
  }

  return DropdownButton<String>(
    value: selectedCurrency,
    items: dropdownItems,
    onChanged: (value) {
      setState(() {
        selectedCurrency = value;
      });
    },
  );
}

- IOS 쿠퍼티노 디자인 구현 -

CupertinoPicker iOSPicker() {
  List<Text> pickerItems = [];
  for (String currency in currenciesList) {
    pickerItems.add(Text(currency));
  }

  return CupertinoPicker(
    backgroundColor: Colors.lightBlue,
    itemExtent: 32.0,
    onSelectedItemChanged: (selectedIndex) {
      print(selectedIndex);
    },
    children: pickerItems,
  );
}

- 플랫폼에 따른 분기처리-

Container(
  height: 150.0,
  alignment: Alignment.center,
  padding: EdgeInsets.only(bottom: 30.0),
  color: Colors.lightBlue,
  child: Platform.isIOS ? iOSPicker() : androidDropdown(),
),

- 결과 -

안드로이드 환경이라 머터리얼 디자인이 뜬다.

[Flutter] Udemy 플러터 강의 섹션 14 학습 (Boss Level Challenge 3 - Bitcoin Tricker)

막무가내막내 — Sat, 7 May 2022 22:21:14 +0900

[이전학습]

https://youngest-programming.tistory.com/692

[Flutter] Udemy 플러터 강의 섹션 13 학습 (학습중 3시간18분 강의) (Clima - Powering Your Flutter App with Live W

[이전학습] https://youngest-programming.tistory.com/685 [Flutter] Udemy 플러터 강의 섹션 12 학습 (BMI Calculator - Building Flutter for intermediates) [이전학습] https://youngest-programming.tistor..

youngest-programming.tistory.com

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2021 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

https://github.com/mtjin/flutter-practice

GitHub - mtjin/flutter-practice: Learning About Flutter (플러터 공부)

Learning About Flutter (플러터 공부). Contribute to mtjin/flutter-practice development by creating an account on GitHub.

github.com

이전 포스팅들과 다르게 이번 포스팅부터는 시간절약과 필요한 부분만 보기위해 강의챕터마다 모두 기록하는게 아닌 필요한 부분만 부분적으로 메모하는 방식으로 포스팅을 진행하려고 한다.

[프로젝트]

[메모]

안드로이드 머터리얼 디자인의 위젯 중 하나를 사용해봤다.

DropDownButton 사용법

https://api.flutter.dev/flutter/material/DropdownButton-class.html

DropdownButton class - material library - Dart API

A material design button for selecting from a list of items. A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item. One ancestor must be

api.flutter.dev

Container(
  height: 150.0,
  alignment: Alignment.center,
  padding: EdgeInsets.only(bottom: 30.0),
  color: Colors.lightBlue,
  child: DropdownButton<String>(
    value: selectedCurrency,
    items: [
      DropdownMenuItem(
        child: Text('USD'),
        value: 'USD',
      ),
      DropdownMenuItem(
        child: Text('EUR'),
        value: 'EUR',
      ),
      DropdownMenuItem(
        child: Text('GBP'),
        value: 'GBP',
      ),
    ],
    onChanged: (value) {
      setState(() {
        selectedCurrency = value;
      });
    },
  ),
),

Flutter Dart 반복문 for 사용법

코틀린이나 자바와 크게 다를점이 없었다.

방법1

List<DropdownMenuItem> getDropdownItems() {
  List<DropdownMenuItem<String>> dropdownItems = [];
  for (int i = 0; i < currenciesList.length; i++) {
    String currency = currenciesList[i];
    var newItem = DropdownMenuItem(
      child: Text(currency),
      value: currency,
    );
    dropdownItems.add(newItem);
  }
  return dropdownItems;
}

방법2

List<DropdownMenuItem> getDropdownItems() {
  List<DropdownMenuItem<String>> dropdownItems = [];
  for (String currency in currenciesList) {
    var newItem = DropdownMenuItem(
      child: Text(currency),
      value: currency,
    );
    dropdownItems.add(newItem);
  }
  return dropdownItems;
}

Cupertino (iOS-style) widgets

안드로이드에 머터리얼 디자인이 있다면 IOS에는 쿠퍼티노 디자인이 있다.

https://docs.flutter.dev/development/ui/widgets/cupertino

Cupertino (iOS-style) widgets

docs.flutter.dev

쿠퍼티노 위젯 중 CupertinPicker 를 사용해봤다.

Container(
  height: 150.0,
  alignment: Alignment.center,
  padding: EdgeInsets.only(bottom: 30.0),
  color: Colors.lightBlue,
  child: CupertinoPicker(
    backgroundColor: Colors.lightBlue,
    itemExtent: 32.0,
    onSelectedItemChanged: (selectedIndex) {
      print(selectedIndex);
    },
    children: getPickerItems(),
  ),

IOS , Android 프레임워크 구별하여 디자인 구현하는 방법

io패키지에 있는 Platform 클래스를 사용한다.

import 'dart:io' show Platform;

Container(
  height: 150.0,
  alignment: Alignment.center,
  padding: EdgeInsets.only(bottom: 30.0),
  color: Colors.lightBlue,
  child: Platform.isIOS ? iOSPicker() : androidDropdown(),
),

[필기] 2022 NH투자증권 IT직무 코딩테스트 후기

막무가내막내 — Sat, 30 Apr 2022 21:03:47 +0900

NH투자증권 IT직무 코딩테스트 시험을 보고 왔습니다. ㅎㅎ

총 2시간 동안 알고리즘 3문제와 SQL 1문제를 풀어야했습니다.

푸는 방법은 사람마다 다르겠지만 제가 생각한 풀이와 아주 간략하게 문제 테마만 적으면 다음과 같습니다.

1번은 백트래킹(완전탐색) - 평평하게 벽돌세우기 경우의 수 문제

2번은 단순구현 - 누진세 계산 문제

3번은 큐, 단순구현 - 은행 손님받기 문제

4번은 - 테이블2개 SQL - 나누기, 반올림, 조인이 필요한 필요한 문제

댓글과 공감은 큰 힘이 됩니다. 감사합니다 !!!

[필기] 2022 NH투자증권 IT직무 필기 NCS 직무능력검사 후기

막무가내막내 — Sat, 30 Apr 2022 20:55:09 +0900

NH투자증권 IT직무 1차 필기 시험인 NCS 직무능력검사를 보고왔습니다.

시험시간은 총 80분동안 80문제를 푸는거였습니다.

한페이지에 20문제씩 나오며 다음 페이지로 넘어가면 이전페이지로 돌아올 수 없다는 점이 특이했습니다.

NH투자증권의 NCS 출제유형은 직무별로 다음과 같습니다.

지점영업, 본사지원

- 문제해결, 언어논리, 창의력, 공간지각, 금융수리, 경제이해

- 문제해결, 언어논리, 창의, 공간지각, 수리, 정보처리

저는 IT직무 시험을 봤습니다.

평소에 NCS나 인적성 준비를 따로 하지 않아서 대부분의 문제를 못풀었습니다. ㅎㅎ 공부를 안하니 시간이 부족한게아니라 애초에 풀기가 어렵더라고요..

하지만 평소 NCS 풀어본 분들한텐 익숙한 문제들일거라고 생각했습니다.

그리고 지인에게 농협은 찍어서 틀리면 감점이라고 들어서 모르는 문제는 그냥 패스했습니다.

생각나는대로 아주 간략하게 후기를 적자면,

문제해결 영역은 명제 추리 유형

언어논리는 띄어쓰기 개수, 이상한 문맥, 비슷한 문단끼리 나누기 등의 유형

정보처리분야에서는 네트워크(IP, 보안)와 디지털논리회로(AND, OR게이트) 유형

수리는 소금물, 첨보는 공식, 그래프 수치계산(?) 유형

공간지각은 공부를 따로 하지않았지만 뭔가 익숙한 벽돌세우기, 주사위, 도형단면자르기 유형

등이 나왔습니다 :)

댓글과 공감은 큰 힘이 됩니다. 감사합니다!!!

[알고리즘] 백준 16922 로마 숫자 만들기 -백트래킹- 자바, 코틀린

막무가내막내 — Sat, 30 Apr 2022 00:34:42 +0900

https://www.acmicpc.net/problem/16922

16922번: 로마 숫자 만들기

2, 6, 10, 11, 15, 20, 51, 55, 60, 100을 만들 수 있다.

www.acmicpc.net

백준 백트래킹 유형문제를 골라 풀어봤습니다. ㅎㅎ

4개의 로마숫자가 있는데 N개를 사용하여 만들 수 있는 합의 모든 경우의 수를 구하는 문제였습니다.

처음에 N이 20개로 작아보여서 Set과 리얼완전모두탐색으로 풀었는데 시간초과가 났네요 ㅠ

중복배열선언과 같은 합이 안나오게 탐색하게끔 인덱스를 설정하여 탐색하여 통과할 수 있었습니다. ㅎㅅㅎ

[Set 사용시 시간초과]

import java.util.HashSet;
import java.util.Scanner;

public class Main {
    private static int N; // 로마 숫자 N개
    private static int[] nums = new int[]{1, 5, 10, 50};
    private static HashSet<Integer> set = new HashSet<>();


    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        N = sc.nextInt();
        dfs(0, 0);
        System.out.println(set.size());
    }

    private static void dfs(int depth, int sum) {
        if (depth == N) {
            set.add(sum);
            return;
        }
        for (int i = 0; i < 4; i++) {
            dfs(depth + 1, sum + nums[i]);
        }
    }
}

[Java]

import java.util.Scanner;

public class Main {
    private static int N; // 로마 숫자 N개
    private static int[] nums = new int[]{1, 5, 10, 50};
    private static boolean[] isVisited = new boolean[1001];
    private static int result = 0;


    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        N = sc.nextInt();
        dfs(0, 0, 0);
        System.out.println(result);
    }

    private static void dfs(int depth, int index, int sum) {
        if (depth == N) {
            if (!isVisited[sum]) {
                isVisited[sum] = true;
                result++;
            }
            return;
        }
        for (int i = index; i < 4; i++) {
            // 중복탐색안되게끔 index 설정
            dfs(depth + 1, i, sum + nums[i]);
        }
    }
}

[Kotlin]

import java.util.*

private var N // 로마 숫자 N개
        = 0
private val nums = intArrayOf(1, 5, 10, 50)
private val isVisited = BooleanArray(1001)
private var result = 0
fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    N = sc.nextInt()
    dfs(0, 0, 0)
    println(result)
}

private fun dfs(depth: Int, index: Int, sum: Int) {
    if (depth == N) {
        if (!isVisited[sum]) {
            isVisited[sum] = true
            result++
        }
        return
    }
    for (i in index..3) { // 중복탐색안되게끔 index 설정
        dfs(depth + 1, i, sum + nums[i])
    }
}

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

https://github.com/mtjin/algorithm_practice/commit/305eab7698ef3ecc22adcd4bbe8b4c291ab703f4

백준 16992 풀이 · mtjin/algorithm_practice@305eab7

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

github.com

[웹] HTTP Status Code Cheat sheet (HTTP 상태코드 쉽게 외우기)

막무가내막내 — Mon, 25 Apr 2022 23:07:16 +0900

클라이언트 개발을 하면서도 서버로 부터 응답받은 HTTP 상태코드에 따라 분기처리를 해서 HTTP 상태코드에 대해 기본적인것을 알아두면 좋다.

되게 쉽고 재밌고 심플하게 정리해논 글을 발견하여 기록한다.

https://www.yohannberger.com/http-status-code/

HTTP Status Code Cheat Sheet - Yohann Berger

Sometimes things don’t go well and you end up with a white page with and a HTTP error code. It can be on any website…

www.yohannberger.com

[Flutter] Udemy 플러터 강의 섹션 13 학습 (Clima - Powering Your Flutter App with Live Web Data)

막무가내막내 — Tue, 12 Apr 2022 21:09:27 +0900

[이전학습]

https://youngest-programming.tistory.com/685

[Flutter] Udemy 플러터 강의 섹션 12 학습 (BMI Calculator - Building Flutter for intermediates)

[이전학습] https://youngest-programming.tistory.com/682 [Flutter] Udemy 플러터 강의 섹션 11 학습 (섹션 11: Boss Level Challenge 2 - Destini) [이전학습] https://youngest-programming.tistory.com/624..

youngest-programming.tistory.com

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2021 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

https://github.com/mtjin/flutter-practice

GitHub - mtjin/flutter-practice: Learning About Flutter (플러터 공부)

Learning About Flutter (플러터 공부). Contribute to mtjin/flutter-practice development by creating an account on GitHub.

github.com

[139. Clima - A Modern Weather App]

실제 날씨 OPEN API 서버와 연동하여 날씨앱을 만들 예정입니다.

서버와 통신하는 방법에 대해 배울 것 같습니다.

[140. Getting Location Data From Across Platforms]

https://pub.dev/packages/geolocator

geolocator | Flutter Package

Geolocation plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API for generic location (GPS etc.) functions.

pub.dev

플러터에서 지리좌표를 얻을 수 있는 라이브러리인 gelocator를 사용했다.

안드로이드에서는 위치정보를 얻는데 권한이 필요하므로

manifest에 따로 다음과 같이 사용권한을 추가해줘야한다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="co.appbrewery.clima">

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

IOS도 마찬가지로 다음과 같이 같은 작업을 해준다.

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>

async는 네트워크 작업과 같이 오래걸릴 수 있는 작업을 비동기로 실행시켜주는 거라고 보면 된다.

뒤에서 더 자세히 배울 것 같다.

이것을 사용하여 geolocator의 위치를 얻어오는 작업을 구현하였다.

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  void getLocation() async {
    Position position = await Geolocator()
        .getCurrentPosition(desiredAccuracy: LocationAccuracy.low);
    print(position);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            //Get the current location
            getLocation();
          },
          child: Text('Get Location'),
        ),
      ),
    );
  }
}

[141. [Dart] Futures, Async & Await]

다트의 Future, async, await에 대해 배웠다.

Future는 자바스크립트의 프로미스와 비슷하며 미래에 비동기작업으로 부터 받을 결과값 타입이라 생각하면 된다.

async는 비동시 실행 await는 이 비동기 작업을 기다려줬다 처리해주는 역할이라 생각하면 편하다.

[142. Stateful Widget Lifecycle Methods]

안드로이드에서 중요한 개념중 하나인 생명주기가 플러터에도 존재한다.

그 중 Stateful Widget의 생명주기에 대해 데모 프로젝트를 통해 배웠다.

크게위젯이 생성되었을떄 가장 먼저 불리는 initState()

위젯을 반환하고 위젯이 다시 만들어질때 불리는 build()

화면이 destoryed 되면 불리는 deactiviate() 가 있다.

자세한건 다음 링크를 참고하면 된다.

https://flutterbyexample.com/lesson/stateful-widget-lifecycle

StatefulWidget lifecycle

When a Flutter builds a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html), it creates a [`State`](https://docs.flutter.io/flutter/widgets/State-class.html) object. This object is where all the **[mutable](https://en.wiki

flutterbyexample.com

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  // async, await 학습
  void getLocation() async {
    Position position = await Geolocator()
        .getCurrentPosition(desiredAccuracy: LocationAccuracy.low);
    print(position);
  }

  @override
  void initState() {
    super.initState();
    getLocation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }

  @override
  void deactivate() {
    super.deactivate();
  }
}

기존에 build()에 있던 getLocation()을 매번 다시 build()될때 하는것보다 항상 공통적으로 불러오는거라 initState() 생명주기로 코드를 옮겼다.

[143. [Dart] Exception Handling & Null Aware Operators]

플러터 Dart에서 에러를 핸들링하는 즉 예외처리 방법에 대해 배웠다.

코틀린하고 똑같이 try catch문을 사용하면 되었다.

class _LoadingScreenState extends State<LoadingScreen> {
  void getLocation() async {
    try {
      Position position = await Geolocator()
          .getCurrentPosition(desiredAccuracy: LocationAccuracy.low);
      print(position);
    } catch (e) {
      print(e);
    }
  }

  @override
  void initState() {
    super.initState();
    getLocation();
  }

  @override
  Widget build(BuildContext context) {
    String myMargin = '15';
    double myMarginAsADouble;

    try {
      myMarginAsADouble = double.parse(myMargin);
    } catch (e) {
      print(e);
    }

    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(myMarginAsADouble ?? 30),
        color: Colors.red,
      ),
    );
  }

  @override
  void deactivate() {
    super.deactivate();
  }
}

[144. Async/Await Challenge]

기존의 getLocation() 함수를 다른 클래스에 모듈화해서 가져오는 식으로 구현하는 챌린지를 했다.

모듈화한 함수에서 Future와 async를 사용하도 비동기 작업과 리턴을 할 수 있게만들고

이 함수를 부르는 클래스에서는 비동기작업이 끝나면 값을 받아올 수 있게 await 해주었다.

import 'package:geolocator/geolocator.dart';

class Location {
  double latitude;
  double longitude;

  Future<void> getCurrentLocation() async {
    try {
      Position position = await Geolocator()
          .getCurrentPosition(desiredAccuracy: LocationAccuracy.low);
      latitude = position.latitude;
      longitude = position.longitude;
    } catch (e) {
      print(e);
    }
  }
}

import 'package:flutter/material.dart';
import 'package:clima/services/location.dart';

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  @override
  void initState() {
    super.initState();
    getLocation();
  }

  void getLocation() async {
    Location location = Location();
    await location.getCurrentLocation();
    print(location.latitude);
    print(location.longitude);
  }

[145. Application Programming Interfaces (APIs) Explained]

API란 무엇인가에 대해 배웠다.

[146. Networking in Flutter Apps with the HTTP Package]

https://pub.dev/packages/http

http | Dart Package

A composable, multi-platform, Future-based API for HTTP requests.

pub.dev

Flutter 에서 HTTP 통신을 하기 위해서 위의 패키지를 사용한다.

HTTP라이브러리를 사용하여 Weather API에서 데이터를 불러오는 것을 구현했다.

import 'package:flutter/material.dart';
import 'package:clima/services/location.dart';
import 'package:http/http.dart' as http;

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  @override
  void initState() {
    super.initState();
    getLocation();
  }

  void getLocation() async {
    Location location = Location();
    await location.getCurrentLocation();
    print(location.latitude);
    print(location.longitude);
  }

  void getData() async {
    http.Response response = await http.get(
        'https://api.openweathermap.org/data/2.5/weather?lat=35&lon=136&appid=f46d282380022c79ed0008839c7af08d');
    if (response.statusCode == 200) {
      String data = response.body;
      print(data);
    } else {
      print(response.statusCode);
    }
  }

  @override
  Widget build(BuildContext context) {
    getData();
    return Scaffold();
  }

  @override
  void deactivate() {
    super.deactivate();
  }
}

네트워크 통신은 비동기로 이루어지므로 async과 await가 사용되었고 get()으로 데이터를 API로부터 호출해서 불러온다.

그리고 상태코드에 따라 200(성공)과 실패로 나눠 분기처리하였다.

import 'package:http/http.dart' as http;

추가로 다음과 같이 특정 패키지에 이름을 as로 붙여서 사용할 수 있음도 배웠다.

[147. JSON Parsing and Dynamic Types]

import 'dart:convert';

먼저 json 값을 컨버팅해서 추출할 수 있는 패키지를 추가해줬다.

void getData() async {
  http.Response response = await http.get(
      'https://api.openweathermap.org/data/2.5/weather?lat=35&lon=136&appid=f46d282380022c79ed0008839c7af08d');
  if (response.statusCode == 200) {
    String data = response.body;
    // dynamic type 인 var로 정확한 타입을 몰라도 저장할 수 있다.
    var decodedData = jsonDecode(data);
    double temperature = decodedData['main']['temp'];
    int condition = decodedData['weather'][0]['id'];
    String cityName = decodedData['name'];
    print(temperature);
    print(condition);
    print(cityName);
  } else {
    print(response.statusCode);
  }
}

json 구조를 코드로 받는 거는 이 예제만 보면 이해가 될 것 같다.

[148. Getting Actual Weather Data from the OpenWeatherMap API]

기존의 네트워크통신하던 로직을 좀 더 모듈화하고 NetworkHelper 클래스로 분리하였다.

import 'package:http/http.dart' as http;
import 'dart:convert';

class NetworkHelper {
  final String url;

  NetworkHelper(this.url);

  Future getData() async {
    http.Response response = await http.get(url);
    if (response.statusCode == 200) {
      String data = response.body;
      return jsonDecode(data);
    } else {
      print(response.statusCode);
    }
  }
}

import 'package:flutter/material.dart';
import 'package:clima/services/location.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:clima/services/networking.dart';

const apiKey = 'f46d282380022c79ed0008839c7af08d';

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  double latitude;
  double longitude;

  @override
  void initState() {
    super.initState();
    getLocationData();
  }

  void getLocationData() async {
    Location location = Location();
    await location.getCurrentLocation();
    latitude = location.latitude;
    longitude = location.longitude;
    NetworkHelper networkHelper = NetworkHelper(
        'https://api.openweathermap.org/data/2.5/weather?lat=$latitude&lon=$longitude&appid=$apiKey');

    var weatherData = await networkHelper.getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }

  @override
  void deactivate() {
    super.deactivate();
  }
}

[149. Showing a Spinner While the User Waits]

플러터에서는 다양한 로딩바(spinner)를 지원한다.

https://pub.dev/packages/flutter_spinkit

flutter_spinkit | Flutter Package

A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit.

pub.dev

이 라이브러리를 import 한 후 로딩스크린을 문서에 작성되있는대로 구현하였다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:clima/services/location.dart';
import 'package:clima/services/networking.dart';
import 'location_screen.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

const apiKey = 'f46d282380022c79ed0008839c7af08d';

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  double latitude;
  double longitude;

  @override
  void initState() {
    super.initState();
    getLocationData();
  }

  void getLocationData() async {
    Location location = Location();
    await location.getCurrentLocation();
    latitude = location.latitude;
    longitude = location.longitude;
    NetworkHelper networkHelper = NetworkHelper(
        'https://api.openweathermap.org/data/2.5/weather?lat=$latitude&lon=$longitude&appid=$apiKey');

    var weatherData = await networkHelper.getData();
    Navigator.push(context, MaterialPageRoute(builder: (context) {
      return LocationScreen();
    }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SpinKitDoubleBounce(
          color: Colors.white,
          size: 100.0,
        ),
      ),
    );
  }

  @override
  void deactivate() {
    super.deactivate();
  }
}

[150. Passing Data to a State Object]

State Object에 데이터를 넘겨주는 방법에 대해 배웠다.

class _LoadingScreenState extends State<LoadingScreen> {
  double latitude;
  double longitude;

  @override
  void initState() {
    super.initState();
    getLocationData();
  }

  void getLocationData() async {
    Location location = Location();
    await location.getCurrentLocation();
    NetworkHelper networkHelper = NetworkHelper(
        'https://api.openweathermap.org/data/2.5/weather?lat=${location.latitude}&lon=${location.longitude}&appid=$apiKey&units=metric');

    var weatherData = await networkHelper.getData();
    Navigator.push(context, MaterialPageRoute(builder: (context) {
      return LocationScreen(
        locationWeather: weatherData,
      );
    }));
  }

StateFulWidget의 initState()에서 넘겨받은 값을 초기화시켜준다.

import 'package:flutter/material.dart';
import 'package:clima/utilities/constants.dart';

class LocationScreen extends StatefulWidget {
  final locationWeather;

  @override
  _LocationScreenState createState() => _LocationScreenState();

  LocationScreen({this.locationWeather});
}

class _LocationScreenState extends State<LocationScreen> {
  int temperature;
  int condition;
  String cityName;

  @override
  void initState() {
    super.initState();
    updateUI(widget.locationWeather);
  }

  void updateUI(dynamic weatherData) {
    double temp = weatherData['main']['temp'];
    temperature = temp.toInt();
    condition = weatherData['weather'][0]['id'];
    cityName = weatherData['name'];
  }

[151. Updating the Weather with the WeatherModel]

WeatherModel 클래스 함수를 활용하여 나머지 날씨아이콘과 메시지를 리펙토링해주었다.

class WeatherModel {
  String getWeatherIcon(int condition) {
    if (condition < 300) {
      return ' ';
    } else if (condition < 400) {
      return ' ';
    } else if (condition < 600) {
      return '☔️';
    } else if (condition < 700) {
      return '☃️';
    } else if (condition < 800) {
      return ' ';
    } else if (condition == 800) {
      return '☀️';
    } else if (condition <= 804) {
      return '☁️';
    } else {
      return ' ‍';
    }
  }

  String getMessage(int temp) {
    if (temp > 25) {
      return 'It\'s   time';
    } else if (temp > 20) {
      return 'Time for shorts and  ';
    } else if (temp < 10) {
      return 'You\'ll need   and  ';
    } else {
      return 'Bring a   just in case';
    }
  }
}

import 'package:flutter/material.dart';
import 'package:clima/utilities/constants.dart';
import 'package:clima/services/weather.dart';

class LocationScreen extends StatefulWidget {
  final locationWeather;

  @override
  _LocationScreenState createState() => _LocationScreenState();

  LocationScreen({this.locationWeather});
}

class _LocationScreenState extends State<LocationScreen> {
  WeatherModel weather = WeatherModel();
  int temperature;
  String weatherIcon;
  String weatherMessage;
  String cityName;

  @override
  void initState() {
    super.initState();
    updateUI(widget.locationWeather);
  }

  void updateUI(dynamic weatherData) {
    setState(() {
      double temp = weatherData['main']['temp'];
      temperature = temp.toInt();
      var condition = weatherData['weather'][0]['id'];
      weatherIcon = weather.getWeatherIcon(condition);
      weatherMessage = weather.getMessage(temperature);
      cityName = weatherData['name'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/location_background.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
                Colors.white.withOpacity(0.8), BlendMode.dstATop),
          ),
        ),
        constraints: BoxConstraints.expand(),
        child: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  FlatButton(
                    onPressed: () {},
                    child: Icon(
                      Icons.near_me,
                      size: 50.0,
                    ),
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: Icon(
                      Icons.location_city,
                      size: 50.0,
                    ),
                  ),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(left: 15.0),
                child: Row(
                  children: <Widget>[
                    Text(
                      '$temperature°',
                      style: kTempTextStyle,
                    ),
                    Text(
                      weatherIcon,
                      style: kConditionTextStyle,
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(right: 15.0),
                child: Text(
                  '$weatherMessage in $cityName!',
                  textAlign: TextAlign.right,
                  style: kMessageTextStyle,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[152. Refactoring the Location Methods]

날씨를 불러오는 함수를 WeahterModel 안으로 넣어주면서 리펙토링을 진행했다.

import 'package:clima/services/location.dart';
import 'package:clima/services/networking.dart';

const apiKey = 'f46d282380022c79ed0008839c7af08d';
const openWeatherMapURL = 'https://api.openweathermap.org/data/2.5/weather';

class WeatherModel {
  Future<dynamic> getLocationWeather() async {
    Location location = Location();
    await location.getCurrentLocation();
    NetworkHelper networkHelper = NetworkHelper(
        '$openWeatherMapURL?lat=${location.latitude}&lon=${location.longitude}&appid=$apiKey&units=metric');

    var weatherData = await networkHelper.getData();
    return weatherData;
  }

  String getWeatherIcon(int condition) {
    if (condition < 300) {
      return ' ';
    } else if (condition < 400) {
      return ' ';
    } else if (condition < 600) {
      return '☔️';
    } else if (condition < 700) {
      return '☃️';
    } else if (condition < 800) {
      return ' ';
    } else if (condition == 800) {
      return '☀️';
    } else if (condition <= 804) {
      return '☁️';
    } else {
      return ' ‍';
    }
  }

  String getMessage(int temp) {
    if (temp > 25) {
      return 'It\'s   time';
    } else if (temp > 20) {
      return 'Time for shorts and  ';
    } else if (temp < 10) {
      return 'You\'ll need   and  ';
    } else {
      return 'Bring a   just in case';
    }
  }
}

그리고 onPressed() 에서 비동기 함수를 불러오는것이므로 앞에 async와 await를 설정해주었다.

또한 null 체크도 추가해주었다.

import 'package:flutter/material.dart';
import 'package:clima/utilities/constants.dart';
import 'package:clima/services/weather.dart';

class LocationScreen extends StatefulWidget {
  final locationWeather;

  @override
  _LocationScreenState createState() => _LocationScreenState();

  LocationScreen({this.locationWeather});
}

class _LocationScreenState extends State<LocationScreen> {
  WeatherModel weather = WeatherModel();
  int temperature;
  String weatherIcon;
  String weatherMessage;
  String cityName;

  @override
  void initState() {
    super.initState();
    updateUI(widget.locationWeather);
  }

  void updateUI(dynamic weatherData) {
    setState(() {
      if (weatherData == null) {
        temperature = 0;
        weatherIcon = 'Error';
        weatherMessage = 'Unable to get weahter Data';
        cityName = '';
        return;
      }
      double temp = weatherData['main']['temp'];
      temperature = temp.toInt();
      var condition = weatherData['weather'][0]['id'];
      weatherIcon = weather.getWeatherIcon(condition);
      weatherMessage = weather.getMessage(temperature);
      cityName = weatherData['name'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/location_background.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
                Colors.white.withOpacity(0.8), BlendMode.dstATop),
          ),
        ),
        constraints: BoxConstraints.expand(),
        child: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  FlatButton(
                    onPressed: () async {
                      var weatherData = await weather.getLocationWeather();
                      updateUI(weatherData);
                    },
                    child: Icon(
                      Icons.near_me,
                      size: 50.0,
                    ),
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: Icon(
                      Icons.location_city,
                      size: 50.0,
                    ),
                  ),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(left: 15.0),
                child: Row(
                  children: <Widget>[
                    Text(
                      '$temperature°',
                      style: kTempTextStyle,
                    ),
                    Text(
                      weatherIcon,
                      style: kConditionTextStyle,
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(right: 15.0),
                child: Text(
                  '$weatherMessage in $cityName!',
                  textAlign: TextAlign.right,
                  style: kMessageTextStyle,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[153. Creating and Styling a TextField Widget for Text Entry]

TextField 위젯을 사용해봤다. 안드로이드로 치면 EditText와 비슷한거같다.

https://api.flutter.dev/flutter/material/TextField-class.html

TextField class - material library - Dart API

A material design text field. A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard. The text field calls the onChanged callback whenever the user changes the text in the field. If the user indicates that they ar

api.flutter.dev

const kTextFieldInputDecoration = InputDecoration(
  filled: true,
  fillColor: Colors.white,
  icon: Icon(
    Icons.location_city,
    color: Colors.white,
  ),
  hintText: 'Enter City Name',
  hintStyle: TextStyle(color: Colors.grey),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.all(
      Radius.circular(10.0),
    ),
    borderSide: BorderSide.none,
  ),
);

import 'package:flutter/material.dart';
import 'package:clima/utilities/constants.dart';

class CityScreen extends StatefulWidget {
  @override
  _CityScreenState createState() => _CityScreenState();
}

class _CityScreenState extends State<CityScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/city_background.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        constraints: BoxConstraints.expand(),
        child: SafeArea(
          child: Column(
            children: <Widget>[
              Align(
                alignment: Alignment.topLeft,
                child: FlatButton(
                  onPressed: () {},
                  child: Icon(
                    Icons.arrow_back_ios,
                    size: 50.0,
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.all(20.0),
                child: TextField(
                  style: TextStyle(
                    color: Colors.black,
                  ),
                  decoration: kTextFieldInputDecoration,
                  onChanged: (value) {},
                ),
              ),
              FlatButton(
                onPressed: () {},
                child: Text(
                  'Get Weather',
                  style: kButtonTextStyle,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[154. Passing Data Backwards Through the Navigation Stack]

Navigator를 사용하여 데이터를 전달하면서 화면을 이동하는 것은 배웠었는데

이번에는 현재 화면에서 pop()으로 이전화면으로 돌아가면서 동시에 데이터결과값을 전달해주는 방법에 대해 배웠다.

Weather 클래스에 먼저 도시이름으로 날씨를 얻어오는 함수를 구현하였따.

class WeatherModel {
  Future<dynamic> getCityWeather(String cityName) async {
    NetworkHelper networkHelper = NetworkHelper(
        '$openWeatherMapURL?q=$cityName&appid=$apiKey&units=metric');
    var weatherData = await networkHelper.getData();
    return weatherData;
  }

도시를 검색하는 화면에서 pop()을 통해 스택에서 화면이 제거됨과 동시에 결과값을 다음 화면스택에 전달할 수 있게했다.

import 'package:flutter/material.dart';
import 'package:clima/utilities/constants.dart';

class CityScreen extends StatefulWidget {
  @override
  _CityScreenState createState() => _CityScreenState();
}

class _CityScreenState extends State<CityScreen> {
  String cityName;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/city_background.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        constraints: BoxConstraints.expand(),
        child: SafeArea(
          child: Column(
            children: <Widget>[
              Align(
                alignment: Alignment.topLeft,
                child: FlatButton(
                  onPressed: () {
                    // 뒤로가기는 값전달하지 않고 화면을 스택에서 제거한다.
                    Navigator.pop(context);
                  },
                  child: Icon(
                    Icons.arrow_back_ios,
                    size: 50.0,
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.all(20.0),
                child: TextField(
                  style: TextStyle(
                    color: Colors.black,
                  ),
                  decoration: kTextFieldInputDecoration,
                  onChanged: (value) {
                    cityName = value;
                  },
                ),
              ),
              FlatButton(
                onPressed: () {
                  // 결과값을 리턴할 수도 있음
                  Navigator.pop(context, cityName);
                },
                child: Text(
                  'Get Weather',
                  style: kButtonTextStyle,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

결과값을 받는 화면쪽에서는 다음과 같이 받으면된다.

값이 안넘어 오는 단순 pop()일 수도 있으므로 null체크는 꼭 하도록하자.

FlatButton(
  onPressed: () async {
    // 네비게이터로 이동한 화면에서의 결과값을 받을 수 있다.
    // async await 사용이 필요
    var typedName = await Navigator.push(context,
        MaterialPageRoute(builder: (context) {
      return CityScreen();
    }));
    if (typedName != null) {
      var weatherData =
          await weather.getCityWeather(typedName);
      updateUI(weatherData);
    }
  },

텍스트필드에 런던을 친후 Get Weather 버튼을 누르면 런던의 날씨를 얻어올 수 있다.

THE END..

이상 섹션 11 학습을 완료했습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다 !!!

[다음강의]

https://youngest-programming.tistory.com/701

[Flutter] Udemy 플러터 강의 섹션 14 학습 (학습중인 포스팅입니다) (Boss Level Challenge 3 - Bitcoin Tricker)

youngest-programming.tistory.com

[Flutter] Hot Reload 시 null error 주의사항

막무가내막내 — Tue, 12 Apr 2022 21:05:41 +0900

[에러내용]

A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'

말그대로 null 에러가 났다. 근데 null 에러가 날 수가 없는 상황이고 앞에 null체크를 해줘도 같은 에러가 났다.

이걸로 삽질을 한거에 대해 포스팅을 한다. (별거아니지만 헿)

import 'package:bmi_calculator/components/bottom_button.dart';
import 'package:flutter/material.dart';

import '../components/reusable_card.dart';
import '../constants.dart';

class ResultsPage extends StatelessWidget {
  final String bmiResult;
  final String resultText;
  final String interpretation;

  ResultsPage(
      {@required this.bmiResult,
      @required this.resultText,
      @required this.interpretation});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
              child: Container(
            padding: EdgeInsets.all(15.0),
            alignment: Alignment.bottomLeft,
            child: Text(
              'Your Result',
              style: kTitleTextStyle,
            ),
          )),
          Expanded(
            flex: 5,
            child: ReusableCard(
              colour: kActiveCardColour,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    resultText,
                    style: kResultTextStyle,
                  ),
                  Text(
                    bmiResult,
                    style: kBMITextStyle,
                  ),
                  Text(
                    interpretation,
                    style: kBodyTextStyle,
                    textAlign: TextAlign.center,
                  )
                ],
              ),
            ),
          ),
          BottomButton(
              onTap: () {
                Navigator.pop(context);
              },
              buttonTitle: 'RE-CALCULATE')
        ],
      ),
    );
  }
}

BottomButton(
  buttonTitle: 'CALCULATE',
  onTap: () {
    CalculatorBrain calc = CalculatorBrain(height: height, weight: weight);
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => ResultsPage(
                  bmiResult: calc.calculateBMI(),
                  resultText: calc.getResult(),
                  interpretation: calc.getInterpretation(),
                )));
  },

원인은 이 ResutsPage 위젯 이전에 InputPage에서 생성자를 위와 같이 넘겨주고

class ResultsPage extends StatelessWidget {
  final String bmiResult;
  final String resultText;
  final String interpretation;

  ResultsPage(
      {@required this.bmiResult,
      @required this.resultText,
      @required this.interpretation});

children: <Widget>[
  Text(
    resultText,
    style: kResultTextStyle,
  ),
  Text(
    bmiResult,
    style: kBMITextStyle,
  ),
  Text(
    interpretation,
    style: kBodyTextStyle,
    textAlign: TextAlign.center,
  )

ResultPage는 매개변수로 받은 값을 Text에 세팅해주는 로직을 추가로 구현하고 HotReload를 돌렸는데

ResultPage에서 HotReload 가 되어서 생성자로 값을 못받은 상태이므로 Text에 세팅할때 null 에러가 나는게 원인이었다.

HotReload 는 플러터에서 매우 좋은 기능이지만 단순 화면갱신말고 로직이 바뀔때는 재컴파일 시작을 해주는 습관도 필요할 것 같다.

[Flutter] 컴파일 에러 The overflowing RenderFlex has an orientation of Axis.vertical.The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents bei..

막무가내막내 — Sat, 9 Apr 2022 22:35:08 +0900

The overflowing RenderFlex has an orientation of Axis.vertical.The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

넘친 RenderFlex의 방향은 Axis.vertical입니다. 넘치고 있는 RenderFlex의 가장자리는 렌더링에서 노란색과 검은색 줄무늬 패턴으로 표시되었습니다. 이는 일반적으로 내용이 RenderFlex에 비해 너무 커서 발생합니다.

해결하는 방법은 보통 코드를 잘못짠경우나 기존의 Colum 이 너무 길어서 생기는 문제일 수 있으므로 Colum을 다음과 같이 SingleChildScrollView로 Wrapping 해준다.

SingleChildScrollView(
    child: Column(
      ...
    ),
),

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

참고

https://stackoverflow.com/questions/67476311/overflowing-renderflex-has-an-orientation-of-axis-vertical

Overflowing RenderFlex has an orientation of Axis.vertical

I am not able to scroll on my form, how do I solve the scrolling problem: Code and error below. Error from the terminal: ════════ Exception caught by rendering library ════════════════════════

stackoverflow.com

[Flutter] 플러터 텍스트 베이스라인 맞추기 (하단 정렬, CrossAxisAlignment.baseline, textBaseline)

막무가내막내 — Tue, 5 Apr 2022 16:30:32 +0900

안드로이드에서는 제약뷰로 제약을 주면 되었는데 플러터에서는 선언형 UI 방식이기도해서 구현 방법이 좀 다르다.

많이 써먹을 것 같아 기록한다.

crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,

을 사용해서 크기가 다른 Text위젯인 100과 cm를 가운데 정렬 + cm는 숫자 100과 더 크기가 큰 위젯인 100의 하단 베이스라인에 맞추는것을 구현했다.

베이스라인은 이렇게 서로 다른 위젯, 폰트의 기준을 잡아주는 역할을 한다고 보면 된다.

그리고 textBaseLine은 알파벳을 기준선으로하는 alphabetic과 텍스트영역 최하단 기준인 ideographic가 있다.

Expanded(
                child: ReusableCard(
              colour: kActiveCardColour,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "HEIGHT",
                    style: kLabelTextStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: <Widget>[
                      Text('100', style: kNumberTextStyle),
                      Text(
                        'cm',
                        style: kLabelTextStyle,
                      )
                    ],
                  )
                ],
              ),
            )),

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[Flutter] Function 클래스와 예제

막무가내막내 — Tue, 5 Apr 2022 15:31:56 +0900

플러터는 객체지향과 함수형 프로그래밍 특징을 모두 가진 언어이다.

https://api.flutter.dev/flutter/dart-core/Function-class.html

Function class - dart:core library - Dart API

The base class for all function types. The run-time type of a function object is subtype of a function type, and as such, a subtype of Function. Constructors Function() Properties hashCode → int A hash code value that is compatible with operator==. read-

api.flutter.dev

그래서 모든 함수의 기본이 되는 타입이 되는 Function 클래스가 있으며 함수형 프로그래밍이기 때문에 함수도 변수에 담을 수가 있다.

이에 대해 몇가지 예제를 직접 테스트를 해보았다.

void main() {
  int result = cal(2, 5, multiply);
  print(result);
}

int cal(int n1, int n2, Function func) {
  return func(n1, n2);
}

int add(int n1, int n2) {
  return n1 + n2;
}

int multiply(int n1, int n2) {
  return n1 * n2;
}

void main() {
  int result = cal(2, 5, add);
  print(result);
}

final Function cal = (int n1, int n2, Function func) {
  return func(n1, n2);
};

int add(int n1, int n2) {
  return n1 + n2;
}

int multiply(int n1, int n2) {
  return n1 * n2;
}

Function에 선언된 Function 이름인 add Function을 매개변수로 전달하여 이 매개변수로 해당 함수를 호출할 수 있다.

또한 함수도 Function 변수타입으로 저장할 수가 있다.

다음은 클래스 객체 테스트다.

void main() {
  Game game = Game(state: play);
  print(game.state);
  game.state = stop;
  print(game.state);
}

class Game {
  Game({this.state});

  Function? state;
}

void play() {
  print('play ~~~~');
}

void stop() {
  print('stop !!!!!');
}

예상대로 흘러감을 볼 수 있다. 예제를 통해 콜백도 이를 통해 구현됨을 알 수 있다.

class ReusableCard extends StatelessWidget {
  // @required로 색상값 매개변수 필요하다고 알려줌 (린트로 잡힘)
  ReusableCard({@required this.colour, this.cardChild, this.onPress});

  final Color colour;
  final Widget cardChild;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
      return GestureDetector(
      onTap: onPress,
      child: Container(
        child: cardChild,
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
            // 생성자로 받은 컬러 사용
            color: colour,
            borderRadius: BorderRadius.circular(10.0)),
      ),
    );
  }
}

body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  onPress: () {
                    setState(() {
                      selectedGender = Gender.male;
                    });
                  },
                  colour: selectedGender == Gender.male
                      ? activeCardColour
                      : inactiveCardColour,
                  cardChild: IconContent(
                    icon: FontAwesomeIcons.mars,
                    label: 'MALE',
                  ),
                )),

ReusableCard 클래스를 만들어 Function을 활용하여 GestureDetector의 onPress 콜백함수를 외부에서 매개변수를 받아서 결과를 리턴해주는 기능을 구현한 예제이다.

이상 플러터의 Function 클래스를 예제를 통해 학습해봤다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[Flutter] Udemy 플러터 강의 섹션 12 학습 (BMI Calculator - Building Flutter for intermediates)

막무가내막내 — Mon, 4 Apr 2022 15:16:50 +0900

[이전학습]

https://youngest-programming.tistory.com/682

[Flutter] Udemy 플러터 강의 섹션 11 학습 (섹션 11: Boss Level Challenge 2 - Destini)

[이전학습] https://youngest-programming.tistory.com/624 [Flutter] Udemy 플러터 강의 섹션 10 학습 (섹션 10: Quizzler -Modularising & Organising FlutterCode) [이전학습] https://youngest-programming.t..

youngest-programming.tistory.com

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2021 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

https://github.com/mtjin/flutter-practice

GitHub - mtjin/flutter-practice: Learning About Flutter (플러터 공부)

Learning About Flutter (플러터 공부). Contribute to mtjin/flutter-practice development by creating an account on GitHub.

github.com

[121. BMI Calculator - A Beautiful Health App]

BMI 계산기 앱을 만들거다.

커스텀 위젯을 만들어보고 UI를 더 깊이 알아보는 강의가 될 것 이다.

[122. How to Use Flutter Themes]

안드로이드에서 Theme를 사용하는 것 처럼 플러터에도 Theme가 있고 ThemeData 클래스를 사용하면된다.

기본적인 테마를 잘 설정하면 기본속성들에 대한 모듈화가 되고 추가 코드도 필요 없어지므로 개발이 편리해진다.

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primaryColor: Color(0xFF0A0E21),
          scaffoldBackgroundColor: Color(0xFF0A0E21),
          accentColor: Colors.purple,
          textTheme: TextTheme(
              bodyText2: TextStyle(
            color: Colors.white,
          ))),
      home: InputPage(),
    );
  }
}

이렇게 내가 커스텀으로 테마를 설정할 수 있다.

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
      ),
      home: InputPage(),
    );
  }
}

그리고 copyWith() 를 사용하여 기존의 다크테마를 기반으로 부분 커스텀도 가능하다.

import 'package:flutter/material.dart';

import 'input_page.dart';

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

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
      ),
      home: InputPage(),
    );
  }
}

import 'package:flutter/material.dart';

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Center(
        child: Text('Body Text'),
      ),
    );
  }
}

그리고 input_page 코드를 main과 분리하였다.

[123. How to Refactor Flutter Widgets]

import 'package:flutter/material.dart';

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: Container(
                  margin: EdgeInsets.all(15.0),
                  decoration: BoxDecoration(
                      color: Color(0xFF1D1E33),
                      borderRadius: BorderRadius.circular(10.0)),
                )),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.all(15.0),
                  decoration: BoxDecoration(
                      color: Color(0xFF1D1E33),
                      borderRadius: BorderRadius.circular(10.0)),
                ))
              ],
            )),
            Expanded(
                child: Container(
              margin: EdgeInsets.all(15.0),
              decoration: BoxDecoration(
                  color: Color(0xFF1D1E33),
                  borderRadius: BorderRadius.circular(10.0)),
            )),
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: Container(
                  margin: EdgeInsets.all(15.0),
                  decoration: BoxDecoration(
                      color: Color(0xFF1D1E33),
                      borderRadius: BorderRadius.circular(10.0)),
                )),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.all(15.0),
                  decoration: BoxDecoration(
                      color: Color(0xFF1D1E33),
                      borderRadius: BorderRadius.circular(10.0)),
                ))
              ],
            )),
          ],
        ));
  }
}

먼저 샘플 앱 디자인 틀대로 위젯을 구현해주었다.

안드로이드로 따지면 카드뷰 같은 둥근 위젯을 구현할떄 BoxDecoration을 사용한다.

그런데 중복되는 Container 코드가 너무 많다. 리펙토링이 필요하다.

위와 같이 하면 된다.

import 'package:flutter/material.dart';

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(child: ReusableCard()),
                Expanded(child: ReusableCard())
              ],
            )),
            Expanded(child: ReusableCard()),
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(child: ReusableCard()),
                Expanded(child: ReusableCard())
              ],
            )),
          ],
        ));
  }
}

class ReusableCard extends StatelessWidget {
  const ReusableCard({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
          color: Color(0xFF1D1E33), borderRadius: BorderRadius.circular(10.0)),
    );
  }
}

ReusableCard라는 이름으로 리펙토링하였다.

class ReusableCard extends StatelessWidget {
  // @required로 색상값 매개변수 필요하다고 알려줌 (린트로 잡힘)
  ReusableCard({@required this.colour});

  Color colour;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
          // 생성자로 받은 컬러 사용
          color: colour,
          borderRadius: BorderRadius.circular(10.0)),
    );
  }
}

Expanded(
                    child: ReusableCard(
                  colour: Color(0xFF1D1E33),
                ))

그리고 ReusableCard 클래스에서 색상변경을 위한 생성자를 커스텀해주었다.

@required 키워드에 대해서도 배웠다. 이거를 설정안하면 사용하는 곳에서 color 매개변수를 안넣어도 린트오류표시가 안뜬다...

그리고 stateless한 클래스에 불변적인 속성만 들어가는게 보통 원칙이라서 클래스에 린트표시가 된다.

class ReusableCard extends StatelessWidget {
  // @required로 색상값 매개변수 필요하다고 알려줌 (린트로 잡힘)
  ReusableCard({@required this.colour});

  final Color colour;

그래서 Color colour에 final로 해주도록 한다.

[124. [Dart] Final vs. Const]

Final 과 Const 의 차이점에 대해 알아봤다.

우선 둘의 공통점은 불변(immutable)의 성질을 가지고 있어 선언한 값을 변경할 수 없다.

차이점은 const 는 컴파일 타임에 상수를 설정하고 final 은 런타임시에 결정되는 값도 상수로 설정할 수 있다는 점이다.

main() { 
	// error const 는 실행시에 결정되는 값을 설정할 수 없다. 정해진 값만 가능하다.
	const DateTime now1 = new DateTime.now(); 
    // final 은 실행시에 결정되는 값도 설정할 수 있다.
	final DateTime nw = new DateTime.now();  
}
출처: https://skymin2.tistory.com/52 [생계형 개발자]

배운내용을 바탕으로 코드를 리펙토링 해주었다.

import 'package:flutter/material.dart';

const bottomContainerHeight = 80.0;
const activeCardColour = Color(0xFF1D1E33);
const bottomContainerColour = Color(0xFFEB1555);

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                )),
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                ))
              ],
            )),
            Expanded(
                child: ReusableCard(
              colour: activeCardColour,
            )),
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                )),
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                ))
              ],
            )),
            Container(
              color: bottomContainerColour,
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              height: bottomContainerHeight,
            )
          ],
        ));
  }
}

class ReusableCard extends StatelessWidget {
  // @required로 색상값 매개변수 필요하다고 알려줌 (린트로 잡힘)
  ReusableCard({@required this.colour});

  final Color colour;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
          // 생성자로 받은 컬러 사용
          color: colour,
          borderRadius: BorderRadius.circular(10.0)),
    );
  }
}

[125. Creating Custom Flutter Widgets]

가장 상단 두개의 남/녀 위젯을 구현했다.

이것도 124에서 했던것처럼 공통적인 부분이 많아 위젯을 모듈화 시켰다.

그리고 필요한 UI 요소를 위해

yaml파일에 font_awesome_flutter 디펜던시를 추가해줬다.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  font_awesome_flutter: ^8.4.0

기존 ReusableCard 위젯 클래스에 이 안에 위젯을 하나 더 담기위해 cardChild 위젯속성을 추가했다.

import 'package:flutter/material.dart';

class ReusableCard extends StatelessWidget {
  // @required로 색상값 매개변수 필요하다고 알려줌 (린트로 잡힘)
  ReusableCard({@required this.colour, this.cardChild});

  final Color colour;
  final Widget cardChild;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: cardChild,
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
          // 생성자로 받은 컬러 사용
          color: colour,
          borderRadius: BorderRadius.circular(10.0)),
    );
  }
}

cardChild 에 담을 아이콘과 텍스트가 위아래로 들어갈 공통 위젯 클래스 IconContent를 만들었다.

import 'package:flutter/material.dart';

const labelTextStyle = TextStyle(
  fontSize: 18.0,
  color: Color(0xFF8D8E98),
);

class IconContent extends StatelessWidget {
  IconContent({this.icon, this.label});

  final IconData icon;
  final String label;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(
          icon,
          size: 80.0,
        ),
        SizedBox(
          height: 15.0,
        ),
        Text(
          label,
          style: labelTextStyle,
        )
      ],
    );
  }
}

메인에서 모듈화한거 사용

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import 'icon_content.dart';
import 'reusable_card.dart';

const bottomContainerHeight = 80.0;
const activeCardColour = Color(0xFF1D1E33);
const bottomContainerColour = Color(0xFFEB1555);

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                  cardChild: IconContent(
                    icon: FontAwesomeIcons.mars,
                    label: 'MALE',
                  ),
                )),
                Expanded(
                    child: ReusableCard(
                        colour: activeCardColour,
                        cardChild: IconContent(
                          icon: FontAwesomeIcons.venus,
                          label: 'FEMALE',
                        )))
              ],
            )),
            Expanded(
                child: ReusableCard(
              colour: activeCardColour,
            )),
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                )),
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                ))
              ],
            )),
            Container(
              color: bottomContainerColour,
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              height: bottomContainerHeight,
            )
          ],
        ));
  }
}

참고로 핫리로드로는 아이콘이 안뜬다. 재실행을 해줘야함!

[126. The GestureDetector Widget]

GestureDetector 위젯을 사용해서 onTap 이벤트를 통해 남/녀 버튼을 눌렀을때 색상이 변하는 로직을 구현하였다.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import 'icon_content.dart';
import 'reusable_card.dart';

const bottomContainerHeight = 80.0;
const activeCardColour = Color(0xFF1D1E33);
const inactiveCardColour = Color(0xFF111328);
const bottomContainerColour = Color(0xFFEB1555);

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  Color maleCardColour = inactiveCardColour;
  Color femaleCardColour = inactiveCardColour;

  // 1 = male, 2= female
  void updateColour(int gender) {
    // male card pressed
    if (gender == 1) {
      if (maleCardColour == inactiveCardColour) {
        maleCardColour = activeCardColour;
        femaleCardColour = inactiveCardColour;
      } else {
        maleCardColour = inactiveCardColour;
      }
    }
    if (gender == 2) {
      if (femaleCardColour == inactiveCardColour) {
        femaleCardColour = activeCardColour;
        maleCardColour = inactiveCardColour;
      } else {
        femaleCardColour = inactiveCardColour;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: GestureDetector(
                  onTap: () {
                    setState(() {
                      updateColour(1);
                    });
                  },
                  child: ReusableCard(
                    colour: maleCardColour,
                    cardChild: IconContent(
                      icon: FontAwesomeIcons.mars,
                      label: 'MALE',
                    ),
                  ),
                )),
                Expanded(
                    child: GestureDetector(
                  onTap: () {
                    setState(() {
                      updateColour(2);
                    });
                  },
                  child: ReusableCard(
                      colour: femaleCardColour,
                      cardChild: IconContent(
                        icon: FontAwesomeIcons.venus,
                        label: 'FEMALE',
                      )),
                ))
              ],
            )),
            Expanded(
                child: ReusableCard(
              colour: activeCardColour,
            )),
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                )),
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                ))
              ],
            )),
            Container(
              color: bottomContainerColour,
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              height: bottomContainerHeight,
            )
          ],
        ));
  }
}

[127. [Dart] Enums]

Enum에 대해 배웠다.

Enum은 숫자로 표현하던 것들을 사람이 이해하기 쉽게 선언해줄 수 있어 코드 가독성이 좋아진다는 장점이 있다.

기존의 1, 2 로 male , female로 구분했던 것을 Enum을 통해 가독성을 높여줬다.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import 'icon_content.dart';
import 'reusable_card.dart';

const bottomContainerHeight = 80.0;
const activeCardColour = Color(0xFF1D1E33);
const inactiveCardColour = Color(0xFF111328);
const bottomContainerColour = Color(0xFFEB1555);

enum Gender { male, female }

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  Color maleCardColour = inactiveCardColour;
  Color femaleCardColour = inactiveCardColour;

  // 1 = male, 2= female
  void updateColour(Gender selectedGender) {
    // male card pressed
    if (selectedGender == Gender.male) {
      if (maleCardColour == inactiveCardColour) {
        maleCardColour = activeCardColour;
        femaleCardColour = inactiveCardColour;
      } else {
        maleCardColour = inactiveCardColour;
      }
    }
    if (selectedGender == Gender.female) {
      if (femaleCardColour == inactiveCardColour) {
        femaleCardColour = activeCardColour;
        maleCardColour = inactiveCardColour;
      } else {
        femaleCardColour = inactiveCardColour;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: GestureDetector(
                  onTap: () {
                    setState(() {
                      updateColour(Gender.male);
                    });
                  },
                  child: ReusableCard(
                    colour: maleCardColour,
                    cardChild: IconContent(
                      icon: FontAwesomeIcons.mars,
                      label: 'MALE',
                    ),
                  ),
                )),
                Expanded(
                    child: GestureDetector(
                  onTap: () {
                    setState(() {
                      updateColour(Gender.female);
                    });
                  },
                  child: ReusableCard(
                      colour: femaleCardColour,
                      cardChild: IconContent(
                        icon: FontAwesomeIcons.venus,
                        label: 'FEMALE',
                      )),
                ))
              ],
            )),
            Expanded(
                child: ReusableCard(
              colour: activeCardColour,
            )),
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                )),
                Expanded(
                    child: ReusableCard(
                  colour: activeCardColour,
                ))
              ],
            )),
            Container(
              color: bottomContainerColour,
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              height: bottomContainerHeight,
            )
          ],
        ));
  }
}

[128. [Dart] Ternary Operator]

3항 연산자에 대해 배웠다.

기존의 if else 문으로 분기처리하던것을 리펙토링하였다.

body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedGender = Gender.male;
                    });
                  },
                  child: ReusableCard(
                    colour: selectedGender == Gender.male
                        ? activeCardColour
                        : inactiveCardColour,
                    cardChild: IconContent(
                      icon: FontAwesomeIcons.mars,
                      label: 'MALE',
                    ),
                  ),
                )),

[129. [Dart] Functions as First Order Objects]

Function 객체에 대해 배웠다. 플러터는 함수형언어이기도 해서 함수도 변수처럼 할당할 수가 있다.

함수를 담을 수 있다.

기존의 GestureDector 클래스를 ReusableCard 커스텀 위젯에 넣어주고 생성자를 통해 메인에서 불러오게끔 리펙토링을 하였다.

플러터에서 위젯에 콜백을 구현한거같은데 되게 쉽게 구현할 수 있었다.

import 'package:flutter/material.dart';

class ReusableCard extends StatelessWidget {
  // @required로 색상값 매개변수 필요하다고 알려줌 (린트로 잡힘)
  ReusableCard({@required this.colour, this.cardChild, this.onPress});

  final Color colour;
  final Widget cardChild;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
      return GestureDetector(
      onTap: onPress,
      child: Container(
        child: cardChild,
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
            // 생성자로 받은 컬러 사용
            color: colour,
            borderRadius: BorderRadius.circular(10.0)),
      ),
    );
  }
}

body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  onPress: () {
                    setState(() {
                      selectedGender = Gender.male;
                    });
                  },
                  colour: selectedGender == Gender.male
                      ? activeCardColour
                      : inactiveCardColour,
                  cardChild: IconContent(
                    icon: FontAwesomeIcons.mars,
                    label: 'MALE',
                  ),
                )),
                Expanded(
                    child: ReusableCard(
                        onPress: () {
                          setState(() {
                            selectedGender = Gender.female;
                          });
                        },
                        colour: selectedGender == Gender.female
                            ? activeCardColour
                            : inactiveCardColour,
                        cardChild: IconContent(
                          icon: FontAwesomeIcons.venus,
                          label: 'FEMALE',
                        )))
              ],

[130. The Flutter Slider Widget]

Slider Widget 사용법에 대해 배웠다.

https://api.flutter.dev/flutter/material/Slider-class.html

Slider class - material library - Dart API

A Material Design slider. Used to select from a range of values. The Sliders value is part of the Stateful widget subclass to change the value setState was called. To create a local project with this code sample, run: flutter create --sample=material.Slide

api.flutter.dev

Expanded(
                child: ReusableCard(
              colour: kActiveCardColour,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "HEIGHT",
                    style: kLabelTextStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: <Widget>[
                      Text(height.toString(), style: kNumberTextStyle),
                      Text(
                        'cm',
                        style: kLabelTextStyle,
                      )
                    ],
                  ),
                  Slider(
                    value: height.toDouble(),
                    min: 120.0,
                    max: 220.0,
                    activeColor: Color(0xFFEB1555),
                    inactiveColor: Color(0xFF8D8E98),
                    onChanged: (double newValue) {
                      setState(() {
                        height = newValue.round();
                      });
                    },
                  )
                ],
              ),
            )),

그리고 상수는 다음과 같이 상수파일을 따로 만들어 관리하면 편리하고 앞에 k를 붙이는 컨벤션이 좋다고 한다. (구글에서도 전역적으로 사용하는 상수를 앞에 k를 붙여서 함께 검색하기 좋다)

import 'package:flutter/material.dart';

const kBottomContainerHeight = 80.0;
const kActiveCardColour = Color(0xFF1D1E33);
const kInactiveCardColour = Color(0xFF111328);
const kBottomContainerColour = Color(0xFFEB1555);

const kLabelTextStyle = TextStyle(
  fontSize: 18.0,
  color: Color(0xFF8D8E98),
);

const kNumberTextStyle = TextStyle(
  fontSize: 50.0,
  fontWeight: FontWeight.w900,
);

[131. Customising Widgets with Themes]

SliderTheme에 대해 배웠다.

SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                        inactiveTrackColor: Color(0xFF8D8E98),
                        activeTrackColor: Colors.white,
                        overlayColor: Color(0xFFEB1555),
                        thumbColor: Color(0x29EB1555),
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 15.0),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 30.0)),
                    child: Slider(
                      value: height.toDouble(),
                      min: 120.0,
                      max: 220.0,
                      onChanged: (double newValue) {
                        setState(() {
                          height = newValue.round();
                        });
                      },
                    ),

만약 이 슬라이더 테마를 공통모듈로서 사용하고 싶다면 밑과 같이 메인 MaterialApp()에 넣어주면 된다.

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        sliderTheme: SliderTheme.of(context).copyWith(
            activeTrackColor: Colors.white,
            overlayColor: Color(0xFFEB1555),
            thumbColor: Color(0x29EB1555),
            thumbShape:
            RoundSliderThumbShape(enabledThumbRadius: 15.0),
            overlayShape:
            RoundSliderOverlayShape(overlayRadius: 30.0)),,
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
      ),
      home: InputPage(),
    );
  }
}

[132. Composition vs. Inheritance - Building Flutter Widgets From Scratch]

클래스 상속을 통해 둥그런 커스텀 아이콘 클래스 위젯을 만들었다. RoundIconButton

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import 'constants.dart';
import 'icon_content.dart';
import 'reusable_card.dart';

enum Gender { male, female }

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  Gender selectedGender;
  int height = 180;
  int weight = 60;
  int age = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  onPress: () {
                    setState(() {
                      selectedGender = Gender.male;
                    });
                  },
                  colour: selectedGender == Gender.male
                      ? kActiveCardColour
                      : kInactiveCardColour,
                  cardChild: IconContent(
                    icon: FontAwesomeIcons.mars,
                    label: 'MALE',
                  ),
                )),
                Expanded(
                    child: ReusableCard(
                        onPress: () {
                          setState(() {
                            selectedGender = Gender.female;
                          });
                        },
                        colour: selectedGender == Gender.female
                            ? kActiveCardColour
                            : kInactiveCardColour,
                        cardChild: IconContent(
                          icon: FontAwesomeIcons.venus,
                          label: 'FEMALE',
                        )))
              ],
            )),
            Expanded(
                child: ReusableCard(
              colour: kActiveCardColour,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "HEIGHT",
                    style: kLabelTextStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: <Widget>[
                      Text(height.toString(), style: kNumberTextStyle),
                      Text(
                        'cm',
                        style: kLabelTextStyle,
                      )
                    ],
                  ),
                  SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                        inactiveTrackColor: Color(0xFF8D8E98),
                        activeTrackColor: Colors.white,
                        overlayColor: Color(0xFFEB1555),
                        thumbColor: Color(0xFFEB1555),
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 15.0),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 30.0)),
                    child: Slider(
                      value: height.toDouble(),
                      min: 120.0,
                      max: 220.0,
                      onChanged: (double newValue) {
                        setState(() {
                          height = newValue.round();
                        });
                      },
                    ),
                  )
                ],
              ),
            )),
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                    child: ReusableCard(
                  colour: kActiveCardColour,
                  cardChild: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'WEIGHT',
                        style: kLabelTextStyle,
                      ),
                      Text(
                        weight.toString(),
                        style: kNumberTextStyle,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          RoundIconButton(
                            icon: FontAwesomeIcons.minus,
                            onPressed: () {
                              setState(() {
                                weight--;
                              });
                            },
                          ),
                          SizedBox(
                            width: 10.0,
                          ),
                          RoundIconButton(
                            icon: FontAwesomeIcons.plus,
                            onPressed: () {
                              setState(() {
                                weight++;
                              });
                            },
                          ),
                        ],
                      )
                    ],
                  ),
                )),
                Expanded(
                    child: ReusableCard(
                  colour: kActiveCardColour,
                  cardChild: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'AGE',
                        style: kLabelTextStyle,
                      ),
                      Text(
                        age.toString(),
                        style: kNumberTextStyle,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          RoundIconButton(
                            icon: FontAwesomeIcons.minus,
                            onPressed: () {
                              setState(() {
                                age--;
                              });
                            },
                          ),
                          SizedBox(
                            width: 10.0,
                          ),
                          RoundIconButton(
                            icon: FontAwesomeIcons.plus,
                            onPressed: () {
                              setState(() {
                                age++;
                              });
                            },
                          ),
                        ],
                      )
                    ],
                  ),
                ))
              ],
            )),
            Container(
              color: kBottomContainerColour,
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              height: kBottomContainerHeight,
            )
          ],
        ));
  }
}

class RoundIconButton extends StatelessWidget {
  RoundIconButton({@required this.icon, @required this.onPressed});

  final IconData icon;
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: Icon(icon),
      onPressed: onPressed,
      elevation: 6.0,
      constraints: BoxConstraints.tightFor(
        width: 56.0,
        height: 56.0,
      ),
      shape: CircleBorder(),
      fillColor: Color(0xFF4C4F5E),
    );
  }
}

[133. Multi-Screen Apps Using Routes and Navigation]

화면을 이동하는 방법에 대해 배웠다.

이동할 화면을 먼저 만들어줬다.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CACULATOR'),
      ),
      body: Text('HELLO'),
    );
  }
}

이후 메인에서 가장 하단 빨간색 버튼을 클릭하면 화면이 이동되게끔 구현하였다.

Navigator.push(context,
MaterialPageRoute(builder: (context) => ResultsPage()));

를 사용하면 된다.

GestureDetector(
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => ResultsPage()));
              },
              child: Container(
                child: Text("CALCULATE"),
                color: kBottomContainerColour,
                margin: EdgeInsets.only(top: 10.0),
                width: double.infinity,
                height: kBottomContainerHeight,
              ),

자세한 사항은 다음 참고

https://docs.flutter.dev/cookbook/navigation/navigation-basics

Navigate to a new screen and back

How to navigate between routes.

docs.flutter.dev

[134. [Dart] Maps]

다트 Map 자료구조에 대해 배웠다.

https://api.dart.dev/stable/2.15.1/dart-core/Map-class.html

Map class - dart:core library - Dart API

A collection of key/value pairs, from which you retrieve a value using its associated key. There is a finite number of keys in the map, and each key has exactly one value associated with it. Maps, and their keys and values, can be iterated. The order of it

api.dart.dev

예시

void main() { 
   var details = {'Usrname':'tom','Password':'pass@123'}; 
   details['Uid'] = 'U1oo1'; 
   print(details); 
}

[135. Designing the Result Page]

ReslutPage 디자인을 구현했다.

그리고 앞서배웠지만 Exapnded 위젯에서 flex는 안드로이드로치면 weight 비율을 나타낸다고 보면 된다.

import 'package:bmi_calculator/components/bottom_button.dart';
import 'package:flutter/material.dart';

import '../components/reusable_card.dart';
import '../constants.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
              child: Container(
            padding: EdgeInsets.all(15.0),
            alignment: Alignment.bottomLeft,
            child: Text(
              'Your Result',
              style: kTitleTextStyle,
            ),
          )),
          Expanded(
            flex: 5,
            child: ReusableCard(
              colour: kActiveCardColour,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Normal',
                    style: kResultTextStyle,
                  ),
                  Text(
                    '18.3',
                    style: kBMITextStyle,
                  ),
                  Text(
                    'Your BMI result is quite low, you should eat more!',
                    style: kBodyTextStyle,
                    textAlign: TextAlign.center,
                  )
                ],
              ),
            ),
          ),
          BottomButton(
              onTap: () {
                Navigator.pop(context);
              },
              buttonTitle: 'RE-CALCULATE')
        ],
      ),
    );
  }
}

Bottom 버튼도 따로 위젯으로 모듈화해주었다.

import 'package:flutter/material.dart';

import '../constants.dart';

class BottomButton extends StatelessWidget {
  final Function onTap;
  final String buttonTitle;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        child: Center(
          child: Text(
            buttonTitle,
            style: kLargeButtonTextStyle,
          ),
        ),
        color: kBottomContainerColour,
        margin: EdgeInsets.only(top: 10.0),
        padding: EdgeInsets.only(bottom: 20.0),
        width: double.infinity,
        height: kBottomContainerHeight,
      ),
    );
  }

  BottomButton({@required this.onTap, @required this.buttonTitle});
}

그리고 다음과 같이 소스파일들을 분리 및 모듈화하였다.

[136. Adding the BMI Calculator Functionality]

BMI 계산하는 클래스를 만들어주었다.

import 'dart:math';

class CalculatorBrain {
  CalculatorBrain({this.height, this.weight});

  final int height;
  final int weight;

  double _bmi;

  String calculateBMI() {
    _bmi = weight / pow(height / 100, 2);
    return _bmi.toStringAsFixed(1);
  }

  String getResult() {
    if (_bmi >= 25) {
      return 'Overweight';
    } else if (_bmi > 18.5) {
      return 'Normal';
    } else {
      return 'Underweight';
    }
  }

  String getInterpretation() {
    if (_bmi >= 25) {
      return 'You have a higher than normal body weight. Try to exercise more.';
    } else if (_bmi >= 18.5) {
      return 'You have a normal body weight. Good job!';
    } else {
      return 'You have a lower than normal body weight. You can eat a bit more.';
    }
  }
}

바텀버튼에 이 생성자를 사용해줘서 결과페이지에 데이터를 전달해주었다.

BottomButton(
              buttonTitle: 'CALCULATE',
              onTap: () {
                CalculatorBrain calc = CalculatorBrain(height: height, weight: weight);
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => ResultsPage(
                              bmiResult: calc.calculateBMI(),
                              resultText: calc.getResult(),
                              interpretation: calc.getInterpretation(),
                            )));
              },

class ResultsPage extends StatelessWidget {
  final String bmiResult;
  final String resultText;
  final String interpretation;

  ResultsPage(
      {@required this.bmiResult,
      @required this.resultText,
      @required this.interpretation});

이상 섹션 12 학습을 완료했습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!

[다음학습]

https://youngest-programming.tistory.com/692

[Flutter] Udemy 플러터 강의 섹션 13 학습 (학습중 3시간18분 강의) (Clima - Powering Your Flutter App with Live W

youngest-programming.tistory.com

[Flutter] Udemy 플러터 강의 섹션 11 학습 (Boss Level Challenge 2 - Destini)

막무가내막내 — Sun, 3 Apr 2022 16:38:26 +0900

[이전학습]

https://youngest-programming.tistory.com/624

[Flutter] Udemy 플러터 강의 섹션 10 학습 (섹션 10: Quizzler -Modularising & Organising FlutterCode)

[이전학습] https://youngest-programming.tistory.com/623 [Flutter] Udemy 플러터 강의 섹션 9 학습 (Xylophone - Using Flutter and Dart Packages toSpeed Up Development) [이전학습] https://youngest-prog..

youngest-programming.tistory.com

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2021 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

https://github.com/mtjin/flutter-practice

GitHub - mtjin/flutter-practice: Learning About Flutter (플러터 공부)

Learning About Flutter (플러터 공부). Contribute to mtjin/flutter-practice development by creating an account on GitHub.

github.com

[105. Destini - A Choose Your Own Adventure Game]

이번 섹션은 보스 챌린지를 할 차례입니다.

지금까지 배운 내용을 바탕으로 운명게임을 만들 예정입니다.

운명게임이란 두가지 선택지에서 유저가 선택한 내용에 따라 앞으로 스토리가 달라지는 게임이라고 보시면 됩니다.

[108. Step 1 - Adding a Image as a Background]

풀스크린 배경을 하는 방법

BoxDecoration 사용

https://stackoverflow.com/questions/44179889/how-do-i-set-background-image-in-flutter

How do I Set Background image in Flutter?

I am trying to set a background image for the home page. I am getting the image place from start of the screen and filling the width but not the height. Am I missing something in my code? Are there

stackoverflow.com

class _StoryPageState extends State<StoryPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        //TODO: Step 1 - Add background.png to this Container as a background image.
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/background.png'),
            fit: BoxFit.cover,
          ),
        ),
        padding: EdgeInsets.symmetric(vertical: 50.0, horizontal: 15.0),
        constraints: BoxConstraints.expand(),

[110. Step 2/3/4 - Create a New Story Class]

//TODO: Step 2 - Create a new class called Story.
class Story {
  //TODO: Step 3 - Create 3 properties for this class, A. storyTitle to store the story text. B. choice1 to store the text for choice 1, C. choice2 to store the text for choice 2.
  String storyTitle;
  String choice1;
  String choice2;

  //TODO: Step 4 - Create a Constructor for this class to be able to initialise the properties created in step 3.
  Story({this.storyTitle, this.choice1, this.choice2});
}

여기서 Step4의 클래스 생성자 의미는 다음을 간단하게 한거다.

class Story {
  String storyTitle;
  String choice1;
  String choice2;
  Story({String storyTitle, String choice1, String choice2}) {
    this.storyTitle = storyTitle;
    this.choice1 = choice1;
    this.choice2 = choice2;
  }
}

[111. Step 5/6/7 - Create the Story Brain]

//TODO: Step 6 - import the story.dart file into this file.
import 'story.dart';
//TODO: Step 5 - Create a new class called StoryBrain.
class StoryBrain{

}
//TODO: Step 7 - Uncomment the lines below to include storyData as a private property in StoryBrain. Hint: You might need to change something in story.dart to make this work.

List<Story> _storyData = [
 Story(
     storyTitle:
     'Your car has blown a tire on a winding road in the middle of nowhere with no cell phone reception. You decide to hitchhike. A rusty pickup truck rumbles to a stop next to you. A man with a wide brimmed hat with soulless eyes opens the passenger door for you and asks: "Need a ride, boy?".',
     choice1: 'I\'ll hop in. Thanks for the help!',
     choice2: 'Better ask him if he\'s a murderer first.'),
 Story(
     storyTitle: 'He nods slowly, unphased by the question.',
     choice1: 'At least he\'s honest. I\'ll climb in.',
     choice2: 'Wait, I know how to change a tire.'),
 Story(
     storyTitle:
     'As you begin to drive, the stranger starts talking about his relationship with his mother. He gets angrier and angrier by the minute. He asks you to open the glovebox. Inside you find a bloody knife, two severed fingers, and a cassette tape of Elton John. He reaches for the glove box.',
     choice1: 'I love Elton John! Hand him the cassette tape.',
     choice2: 'It\'s him or me! You take the knife and stab him.'),
 Story(
     storyTitle:
     'What? Such a cop out! Did you know traffic accidents are the second leading cause of accidental death for most adult age groups?',
     choice1: 'Restart',
     choice2: ''),
 Story(
     storyTitle:
     'As you smash through the guardrail and careen towards the jagged rocks below you reflect on the dubious wisdom of stabbing someone while they are driving a car you are in.',
     choice1: 'Restart',
     choice2: ''),
 Story(
     storyTitle:
     'You bond with the murderer while crooning verses of "Can you feel the love tonight". He drops you off at the next town. Before you go he asks you if you know any good places to dump bodies. You reply: "Try the pier".',
     choice1: 'Restart',
     choice2: '')
];

[112. Display the Story in the App]

함수 만들기

//TODO: Step 8 - Create a method called getStory() that returns the first storyTitle from _storyData.
String getStory() {
  return _storyData[0].storyTitle;
}

객체 생성

//TODO: Step 9 - Create a new storyBrain object from the StoryBrain class.
StoryBrain storyBrain = StoryBrain();

객체 함수 호출

child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 12,
                child: Center(
                  child: Text(
                    //TODO: Step 10 - use the storyBrain to get the first story title and display it in this Text Widget.
                    storyBrain.getStory(),
                    style: TextStyle(
                      fontSize: 25.0,
                    ),
                  ),
                ),
              ),

[113. Step 11/12/13/14 - Display the Choices in the App]

//TODO: Step 11 - Create a method called getChoice1() that returns the text for the first choice1 from _storyData.
  String getChoice1() {
    return _storyData[0].choice1;
  }

//TODO: Step 12 - Create a method called getChoice2() that returns the text for the first choice2 from _storyData.
  String getChoice2() {
    return _storyData[0].choice2;
  }

Expanded(
                flex: 2,
                child: FlatButton(
                  onPressed: () {
                    //Choice 1 made by user.
                    //TODO: Step 18 - Call the nextStory() method from storyBrain and pass the number 1 as the choice made by the user.
                  },
                  color: Colors.red,
                  child: Text(
                    //TODO: Step 13 - Use the storyBrain to get the text for choice 1.
                    storyBrain.getChoice1(),
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
              ),

 child: FlatButton(
                  onPressed: () {
                    //Choice 2 made by user.
                    //TODO: Step 19 - Call the nextStory() method from storyBrain and pass the number 2 as the choice made by the user.
                  },
                  color: Colors.blue,
                  child: Text(
                    //TODO: Step 14 - Use the storyBrain to get the text for choice 2.
                    storyBrain.getChoice2(),
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),

[114. Update the Story Based on User Choice]

변수 초기화 및 함수 생성

//TODO: Step 16 - Create a property called storyNumber which starts with a value of 0. This will be used to track which story the user is currently viewing.
  int storyNumber = 0;

//TODO: Step 17 - Create a method called nextStory(), it should not have any outputs but it should have 1 input called choiceNumber which will be the choice number (int) made by the user.
  void nextStory(int choiceNumber) {}

클릭 이벤트 함수 호출

 child: FlatButton(
                  onPressed: () {
                    //Choice 1 made by user.
                    //TODO: Step 18 - Call the nextStory() method from storyBrain and pass the number 1 as the choice made by the user.
                    storyBrain.nextStory(1);
                  },

  child: FlatButton(
                  onPressed: () {
                    //Choice 2 made by user.
                    //TODO: Step 19 - Call the nextStory() method from storyBrain and pass the number 2 as the choice made by the user.
                    storyBrain.nextStory(2);
                  },

[115. Step 21 - Use the Story Plan to Progress through the Story]

위와 같이 스토리가 선택에 따라 진행되도록 로직 구현

if/else 문 사용

//TODO: Step 17 - Create a method called nextStory(), it should not have any outputs but it should have 1 input called choiceNumber which will be the choice number (int) made by the user.
  void nextStory(int choiceNumber) {
    //TODO: Step 21 - Using the story plan, update nextStory to change the storyNumber depending on the choice made by the user.
    if (choiceNumber == 1 && storyNumber == 0) {
      storyNumber = 2;
    } else if (choiceNumber == 2 && storyNumber == 0) {
      storyNumber = 1;
    } else if (choiceNumber == 1 && storyNumber == 1) {
      storyNumber = 2;
    } else if (choiceNumber == 2 && storyNumber == 1) {
      storyNumber = 3;
    } else if (choiceNumber == 1 && storyNumber == 2) {
      storyNumber = 5;
    } else if (choiceNumber == 2 && storyNumber == 2) {
      storyNumber = 4;
    }
  }

[116. Step 22/23/24 - Restart the Game When the User Reaches the End]

restart() 재시작 구현

//TODO: Step 17 - Create a method called nextStory(), it should not have any outputs but it should have 1 input called choiceNumber which will be the choice number (int) made by the user.
  void nextStory(int choiceNumber) {
    //TODO: Step 20 - Download the story plan here: https://drive.google.com/uc?export=download&id=1KU6EghkO9Hf2hRM0756xFHgNaZyGCou3
    //TODO: Step 21 - Using the story plan, update nextStory to change the storyNumber depending on the choice made by the user.
    if (choiceNumber == 1 && storyNumber == 0) {
      storyNumber = 2;
    } else if (choiceNumber == 2 && storyNumber == 0) {
      storyNumber = 1;
    } else if (choiceNumber == 1 && storyNumber == 1) {
      storyNumber = 2;
    } else if (choiceNumber == 2 && storyNumber == 1) {
      storyNumber = 3;
    } else if (choiceNumber == 1 && storyNumber == 2) {
      storyNumber = 5;
    } else if (choiceNumber == 2 && storyNumber == 2) {
      storyNumber = 4;
    }
//TODO: Step 22 - In nextStory() if the storyNumber is equal to 3 or 4 or 5, that means it's the end of the game and it should call a method called restart() that resets the storyNumber to 0.
    else if (storyNumber == 3 || storyNumber == 4 || storyNumber == 5) {
      restart();
    }
  }

  //TODO: Step 22
  void restart() {
    storyNumber = 0;
  }

기존 0으로 하드코딩되어있던거 변수로 변경 (step 23)

//TODO: Step 23 - Use the storyNumber property inside getStory(), getChoice1() and getChoice2() so that it gets the updated story and choices rather than always just the first (0th) one.
//TODO: Step 8 - Create a method called getStory() that returns the first storyTitle from _storyData.
  String getStory() {
    return _storyData[storyNumber].storyTitle;
  }

//TODO: Step 11 - Create a method called getChoice1() that returns the text for the first choice1 from _storyData.
  String getChoice1() {
    return _storyData[storyNumber].choice1;
  }

//TODO: Step 12 - Create a method called getChoice2() that returns the text for the first choice2 from _storyData.
  String getChoice2() {
    return _storyData[storyNumber].choice2;
  }

기존에 클릭리스너에 구현되어어있던거 함수 구현에 따라 UI상태가 바뀔 수 있도록 setState() 해줌

onPressed: () {
                    //Choice 2 made by user.
                    //TODO: Step 19 - Call the nextStory() method from storyBrain and pass the number 2 as the choice made by the user.
                    //TODO: Step 24 - Run the app and try to figure out what code you need to add to this file to make the story change when you press on the choice buttons.
                    setState(() {
                      storyBrain.nextStory(2);
                    });
                  },

[117. Step 25 - Renaming and Refactoring Using Android Studio]

dart 에서는 변수 앞에 _를 붙이면 private

//TODO: Step 16 - Create a property called storyNumber which starts with a value of 0. This will be used to track which story the user is currently viewing.
  int _storyNumber = 0;

[118. Step 26/27/28 - Hiding Buttons]

Visibility 위젯 사용 (Show/Hide 기능이 있는 위젯) - step 26

//TODO: Step 26 - Use a Flutter Visibility Widget to wrap this FlatButton.
                //TODO: Step 28 - Set the "visible" property of the Visibility Widget to equal the output from the buttonShouldBeVisible() method in the storyBrain.
                child: Visibility(
                  child: FlatButton(
                    onPressed: () {
                      //Choice 2 made by user.
                      //TODO: Step 19 - Call the nextStory() method from storyBrain and pass the number 2 as the choice made by the user.
                      //TODO: Step 24 - Run the app and try to figure out what code you need to add to this file to make the story change when you press on the choice buttons.
                      setState(() {
                        storyBrain.nextStory(2);
                      });
                    },
                    color: Colors.blue,
                    child: Text(
                      //TODO: Step 14 - Use the storyBrain to get the text for choice 2.
                      storyBrain.getChoice2(),
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),

StoryBrain 클래스에 bool 함수 구현

//TODO: Step 27 - Create a method called buttonShouldBeVisible() which checks to see if storyNumber is 0 or 1 or 2 (when both buttons should show choices) and return true if that is the case, else it should return false.
  bool buttonShouldBeVisible() {
    return _storyNumber < 3;
  }

Visiblity 위젯에 visible 속성추가하여 마지막 스토리일때 버튼이 보이게끔 설정한다.

child: Visibility(
                  //TODO: Step 28 - Set the "visible" property of the Visibility Widget to equal the output from the buttonShouldBeVisible() method in the storyBrain.
                  visible: storyBrain.buttonShouldBeVisible(),
                  child: FlatButton(
                    onPressed: () {
                      //Choice 2 made by user.
                      //TODO: Step 19 - Call the nextStory() method from storyBrain and pass the number 2 as the choice made by the user.
                      //TODO: Step 24 - Run the app and try to figure out what code you need to add to this file to make the story change when you press on the choice buttons.
                      setState(() {
                        storyBrain.nextStory(2);
                      });
                    },

THE END..

이상 섹션 11 학습을 완료했습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!

[다음강의]

https://youngest-programming.tistory.com/685

[Flutter] Udemy 플러터 강의 섹션 12 학습 (학습중....) (BMI Calculator - Building Flutter for intermediates)

youngest-programming.tistory.com

[알고리즘] 백준 9237 이장님 초대 -그리디- 자바, 코틀린

막무가내막내 — Fri, 11 Mar 2022 22:42:34 +0900

https://www.acmicpc.net/problem/9237

9237번: 이장님 초대

입력은 두 줄로 이루어져 있다. 첫째 줄에는 묘목의 수 N (1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄에는 각 나무가 다 자라는데 며칠이 걸리는지를 나타낸 ti가 주어진다. (1 ≤ ti ≤ 1,000,000)

www.acmicpc.net

백준 그리디 유형에서 9237번 이장님 초대라는 문제를 풀어봤습니다. ㅎㅎ

그리디 유형은 코드는 간단한데 생각을 빨리하는게 역시 중요한 것 같습니다

주석으로 설명은 대체합니다.

[Java]

import java.util.Arrays;
import java.util.Collections;
import java.util.Scanner;

public class Main {

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int N = sc.nextInt();
        Integer[] t = new Integer[N];
        for (int i = 0; i < N; i++) {
            t[i] = sc.nextInt();
        }
        // 오래걸리는거부터 심어야 최대한 빠르므로 역정렬
        Arrays.sort(t, Collections.reverseOrder());
        int maxDay = 0;
        for (int i = 0; i < N; i++) {
            // 나무자라는데걸리는시간 + 며칠지났는지 + 심는데 하루
            maxDay = Math.max(maxDay, t[i] + i + 1);
        }
        // 다 심은 다음날 이장님 초대 가능
        maxDay += 1;
        System.out.println(maxDay);
    }
}

[Kotlin]

import java.util.*

fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    val N = sc.nextInt()
    val t = arrayOfNulls<Int>(N)
    for (i in 0 until N) {
        t[i] = sc.nextInt()
    }
    // 오래걸리는거부터 심어야 최대한 빠르므로 역정렬
    Arrays.sort(t, Collections.reverseOrder())
    var maxDay = 0
    for (i in 0 until N) { // 나무자라는데걸리는시간 + 며칠지났는지 + 심는데 하루
        maxDay = Math.max(maxDay, t[i]!! + i + 1)
    }
    // 다 심은 다음날 이장님 초대 가능
    maxDay += 1
    println(maxDay)
}

https://github.com/mtjin/algorithm_practice/commit/ae39f3a9e59c984436f953ebf950231496b214ee

백준 9237 풀이 · mtjin/algorithm_practice@ae39f3a

Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Showing 2 changed files with 44 additions and 0 deletions. +25 −0 백준 9237 이장님 초대 -그리디-/Main.java +19 −0 백

github.com

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[알고리즘] 백준 15658 연산자 끼워넣기 (2) -백트래킹- 자바, 코틀린

막무가내막내 — Wed, 9 Mar 2022 18:33:30 +0900

https://www.acmicpc.net/problem/15658

15658번: 연산자 끼워넣기 (2)

N개의 수로 이루어진 수열 A1, A2, ..., AN이 주어진다. 또, 수와 수 사이에 끼워넣을 수 있는 연산자가 주어진다. 연산자는 덧셈(+), 뺄셈(-), 곱셈(×), 나눗셈(÷)으로만 이루어져 있다. 연산자의 개수

www.acmicpc.net

백준 유형별풀기에 백트래킹 문제 연산자 끼워넣기 (2) 를 풀어봤습니다.

연산자 우선순위는 배제하고 정해지 연산자별 개수로 가장 큰 수식과 작은 수식 결과를 도출해내는 문제였습니다.

연산자 개수를 한개씩 줄여가며 백트래킹을 돌리면 되는 문제였습니다.

그리고 이렇게 두 개의 값을 연산하는 문제인 경우 첫번째 값을 넣어주고 돌리면 풀기 좋습니다 :)

풀이는 다음과 같습니다.

[Java]

import java.util.Scanner;

public class Main {
    private static int N;
    private static int[] op = new int[4];
    private static int[] arr;
    private static int max = Integer.MIN_VALUE;
    private static int min = Integer.MAX_VALUE;

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        N = sc.nextInt();
        arr = new int[N];
        for (int i = 0; i < N; i++) {
            arr[i] = sc.nextInt();
        }
        for (int i = 0; i < 4; i++) {
            op[i] = sc.nextInt();
        }
        dfs(1, op, arr[0]);
        System.out.println(max);
        System.out.println(min);
    }

    private static void dfs(int depth, int[] op, int result) {
        if (depth == N) {
            max = Math.max(max, result);
            min = Math.min(min, result);
            return;
        }
        for (int i = 0; i < 4; i++) {
            if (op[i] == 0) {
                continue;
            }
            op[i]--;
            switch (i) {
                case 0:
                    dfs(depth + 1, op, result + arr[depth]);
                    break;
                case 1:
                    dfs(depth + 1, op, result - arr[depth]);
                    break;
                case 2:
                    dfs(depth + 1, op, result * arr[depth]);
                    break;
                case 3:
                    dfs(depth + 1, op, result / arr[depth]);
                    break;
            }
            op[i]++;
        }
    }
}

[Kotlin]

import java.util.*


private var N = 0
private val op = IntArray(4)
private lateinit var arr: IntArray
private var max = Int.MIN_VALUE
private var min = Int.MAX_VALUE
fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    N = sc.nextInt()
    arr = IntArray(N)
    for (i in 0 until N) {
        arr[i] = sc.nextInt()
    }
    for (i in 0..3) {
        op[i] = sc.nextInt()
    }
    dfs(1, op, arr[0])
    println(max)
    println(min)
}

private fun dfs(depth: Int, op: IntArray, result: Int) {
    if (depth == N) {
        max = Math.max(max, result)
        min = Math.min(min, result)
        return
    }
    for (i in 0..3) {
        if (op[i] == 0) {
            continue
        }
        op[i]--
        when (i) {
            0 -> dfs(depth + 1, op, result + arr[depth])
            1 -> dfs(depth + 1, op, result - arr[depth])
            2 -> dfs(depth + 1, op, result * arr[depth])
            3 -> dfs(depth + 1, op, result / arr[depth])
        }
        op[i]++
    }
}

https://github.com/mtjin/algorithm_practice/commit/d982e5e058e2b74ea434ce44efb8fd68bf92ea4f

백준 15658 풀이 · mtjin/algorithm_practice@d982e5e

Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Showing 2 changed files with 96 additions and 0 deletions. +53 −0 백준 15658 연산자 끼워넣기 (2) -백트래킹-/Main.java

github.com

오랜만에 자바와 코틀린으로 알고리즘을 풀어봤네요.

뇌가 굳지 않게 꾸준히 해야겠습니다...

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[알고리즘] 백준 2164 카드2 -큐, 데큐(Dequeue)- 자바, 코틀린

막무가내막내 — Wed, 2 Feb 2022 13:07:27 +0900

https://www.acmicpc.net/problem/2164

2164번: 카드2

N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다. 이제 다음과 같은 동작을 카드가

www.acmicpc.net

백준 단계별풀기에서 큐에 해당하는 문제를 풀어봤습니다.

데큐(Dequeue)는 알고는 있었는데 자바에서 직접 사용해보는건 처음이었네요.

양방향으로 입출력이 가능한 데큐의 특성을 활용하여 문제 그대로 풀면 되었습니다.

풀이는 주석으로 자세히 적어놨고 다음과 같습니다.

[Java]

import java.util.ArrayDeque;
import java.util.Deque;
import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int N = sc.nextInt();
        Deque<Integer> deque = new ArrayDeque<>();
        // 1. 초기화
        for (int i = 1; i <= N; i++) {
            deque.add(i);
        }
        // 한 장 남을때까지 반복
        while (deque.size() > 1) {
            // 2. 맨 위 카드 버리기
            deque.pollFirst();
            // 3. 맨 위 카드 맨밑으로 옮기기
            deque.offerLast(deque.pollFirst());
        }
        // 마지막 카드 정답 출력
        System.out.println(deque.poll());
    }
}

[Kotlin]

import java.util.*


fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    val N = sc.nextInt()
    val deque: Deque<Int> = ArrayDeque()
    // 1. 초기화
    for (i in 1..N) {
        deque.add(i)
    }
    // 한 장 남을때까지 반복
    while (deque.size > 1) { // 2. 맨 위 카드 버리기
        deque.pollFirst()
        // 3. 맨 위 카드 맨밑으로 옮기기
        deque.offerLast(deque.pollFirst())
    }
    // 마지막 카드 정답 출력
    println(deque.poll())
}

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

https://github.com/mtjin/algorithm_practice/commit/d6c5f1a8b7700cf43f1452d20989eec502fea653

백준 2164 풍이 · mtjin/algorithm_practice@d6c5f1a

Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Showing 2 changed files with 44 additions and 0 deletions. +24 −0 백준 2164 카드2 -큐, 덱큐-/Main.java +20 −0 백준 2164

github.com

[면접정리] 2021 하반기 현대오토에버 커넥티드카 2차 면접 후기 -어플리케이션 개발/운영-

막무가내막내 — Tue, 1 Feb 2022 21:13:52 +0900

지인의 현대 오토에버 2차면접 후기입니다. ㅎㅎ

[면접 방식]

면접관 3 : 지원자 2

30분 동안 화상면접 진행

[질문 내용 - 개인적인 질문은 제외]

자기소개

인턴

3년 후 무엇을 하고 있을지 ?

3년 후에도 개발자로 있을 것인지?

공백기간 동안 머했는지?

코딩 테스트 난이도 어땠는지

인턴때 한것 간략히 설명

언어와 소프트웨어 도구는 왜 초급이라고 기재했는지 ?

마지막 할말

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!!

[안드로이드] 클린 아키텍처 Hilt 추가 적용 (MVVM, Muliti Module, RxJava2, Hilt)

막무가내막내 — Tue, 1 Feb 2022 21:02:53 +0900

안녕하세요 안드로이드 아키텍처나 한번 훓을겸 예전에 한 프로젝트에 Hilt를 추가해봤는데 이에 대한 기록을 남겨볼까 합니다.

[안드로이드 MVVM 클린 아키텍처 프로젝트 정리 포스팅]

https://youngest-programming.tistory.com/484

[안드로이드] 클린 아키텍처(Clean Architecture) 정리 및 구현

[2021-04-28 업데이트] [2022-02-01 업데이트] Hilt 사용한 프로젝트 링크 하단에 추가 [프로젝트] github.com/mtjin/mtjin-android-clean-architecture-movieapp mtjin/mtjin-android-clean-architecture-movieap..

youngest-programming.tistory.com

예전에 안드로이드 클린아키텍처를 처음 공부하고 다양한 방식으로 아키텍처가 적용된 프로젝트를 직접 구현해보면서 정리한 포스팅을 한 적이 있습니다.

MVVM, Multi Module, RxJava2, Dagger2, Koin 등을 사용하며 구현한 프로젝트였는데 추가로 Hilt를 적용한 예시를 만들어야겠다는 생각이 있었는데 오늘에서야 했네요... ㅎㅎ

https://github.com/mtjin/mtjin-android-clean-architecture-movieapp/tree/main

GitHub - mtjin/mtjin-android-clean-architecture-movieapp: Clean Architecture 학습 및 구현(MVVM, RxJava2, Hilt, Koin, Dagger

Clean Architecture 학습 및 구현(MVVM, RxJava2, Hilt, Koin, Dagger2, Jetpack Lib) - GitHub - mtjin/mtjin-android-clean-architecture-movieapp: Clean Architecture 학습 및 구현(MVVM, RxJava2, Hilt, Koin, Dagger2...

github.com

main 과 clean-mvvm-multi-module-rxjava-hilt 브랜치에 구현해놨고 따로 설명하는 글은 남기지 않겠습니당.

그리고 예전에 만든 프로젝트에서 구조만 바꾼거고 비현직자가 구현한거라 네이밍이나 구조가 좀 이상해도 양해부탁드립니다. ㅎㅎ

나중에 기회되면 더 깔끔하게 바꿔보도록 하겠습니다 !!

[사용기술]

MVVM, Multi Module, RxJava2, Hilt, Databinding, Room, AAC ViewModel, Glide, Retrofit2

[구현내용]

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

1. 자동로그인

2. 영화 로컬캐싱

3. 영화 검색 및 불러오기 무한스크롤

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[안드로이드] Jetpack Navigation Fragment 관련 에러해결 java.lang.IllegalArgumentException: No view found for id 0x7f090102 (com.mtjin.bungsegwon:id/main_navigation_view) for fragment MainEnrollFragment{815f3ee} (abd6ddc7-177d-4b7a-99a0-3d2d4..

막무가내막내 — Tue, 11 Jan 2022 22:14:55 +0900

[에러 사항]

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.mtjin.bungsegwon, PID: 1717
    java.lang.IllegalArgumentException: No view found for id 0x7f090102 (com.mtjin.bungsegwon:id/main_navigation_view) for fragment MainEnrollFragment{815f3ee} (abd6ddc7-177d-4b7a-99a0-3d2d4c1a4610 id=0x7f090102 tag=2131296509)
        at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:513)
        at androidx.fragment.app.FragmentStateManager.moveToExpectedState(FragmentStateManager.java:282)
        at androidx.fragment.app.FragmentStore.moveToExpectedState(FragmentStore.java:112)
        at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1647)
        at androidx.fragment.app.FragmentManager.dispatchStateChange(FragmentManager.java:3128)
        at androidx.fragment.app.FragmentManager.dispatchViewCreated(FragmentManager.java:3065)
        at androidx.fragment.app.Fragment.performViewCreated(Fragment.java:2988)
        at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:546)
        at androidx.fragment.app.FragmentStateManager.moveToExpectedState(FragmentStateManager.java:282)
        at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2180)
        at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:2106)
        at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:2002)
        at androidx.fragment.app.FragmentManager$5.run(FragmentManager.java:524)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at android.os.Looper.loop(Looper.java:237)
        at android.app.ActivityThread.main(ActivityThread.java:7811)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1076)
I/Process: Sending signal. PID: 1717 SIG: 9

Jetpack Navigation을 사용중인데 홈화면에서 다른 프래그먼트로 이동 후 뒤로가기 버튼으로 다시 홈화면으로 돌아오면 위와 같은 에러로 앱이 팅기는 문제가 발생하였습니다.

[에러 원인]

No view found for id 0x7f090102 (com.mtjin.bungsegwon:id/main_navigation_view) for fragment MainEnrollFragment{

에러에 써있는대로 MainEnrollFragment 프래그먼트에서 main_navigation_view 라는 id를 못찾는 문제인 것 같았습니다.

그리고 구글링을 해봤는데 제 해결방법과 다른거만 나왔지만 다 id를 수정해주거나 Jeptack Navigation을 안쓰고 일반적인 트랜잭션으로 직접 프래그먼트을 구현하시는분은 replace로 바꾸는식으로 해결했음을 볼 수 있었습니다.

getChildFragmentManager() 로 수정해서 해결하신분도 있었고요. 자세한건 아래 링크 남겨놨습니다.

https://stackoverflow.com/questions/7508044/android-fragment-no-view-found-for-id

Android Fragment no view found for ID?

I have a fragment I am trying to add into a view. FragmentManager fragMgr=getSupportFragmentManager(); feed_parser_activity content = (feed_parser_activity)fragMgr ...

stackoverflow.com

https://jionchu.tistory.com/133

[Android] java.lang.IllegalArgumentException: No view found for id for fragment

프로젝트 리팩토링 진행 중 프래그먼트 연결 부분에서 다음과 같은 오류가 발생했다. java.lang.IllegalArgumentException: No view found for id 0x7f080056 for fragment MainFragment id=0x7f080056} at androi..

jionchu.tistory.com

https://pythonq.com/so/android/214638

android - IllegalArgumentException : 조각의 id에 대한보기를 찾을 수 없음 — ViewPager의 ViewPager - IT 툴 넷

android - IllegalArgumentException : 조각의 id에 대한보기를 찾을 수 없음 — ViewPager의 ViewPager 기사 출처 android android-fragments android-viewpager

pythonq.com

[에러 해결]

먼저 에러에 명시된 id인 main_navigation_view에 가보았습니다.

fragment에 린트가 되어있고 FragmentContainerView로 변경해보라고 되어있어서 변경했더니 해결되었습니다.

FragmentContainerView는 Fragment를 위해 특별히 설계된 레이아웃이며 FrameLayout을 확장하여 프래그먼트 트랜잭션을 안정적으로 처리 할 수 있고, 프래그먼트 동작을 조정할 수있는 추가 기능도 있습니다.

https://developer.android.com/reference/androidx/fragment/app/FragmentContainerView

FragmentContainerView | Android Developers

FragmentContainerView public final class FragmentContainerView FragmentContainerView is a customized Layout designed specifically for Fragments. It extends FrameLayout, so it can reliably handle Fragment Transactions, and it also has additional features to

developer.android.com

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[안드로이드] 네이버맵 코드 정리 (마커, 현재위치표시, 카메라이동 및 감지, Geocoder 좌표 주소 변환 등)

막무가내막내 — Sun, 9 Jan 2022 22:14:16 +0900

지금까지 안드로이드 개발을 하며 구글맵, 티맵, 카카오맵을 사용해봤는데 네이버맵은 처음 사용해봤습니다.

사용한 코드를 메모하는 포스팅입니다 :)

https://navermaps.github.io/android-map-sdk/guide-ko/1.html

시작하기 · 네이버 지도 안드로이드 SDK

No results matching ""

navermaps.github.io

먼저 네이버맵 관련 세팅과 사용법은 위 공식문서를 참고하면 됩니다.

구현해야하는 화면과 로직은 다음과 같았습니다.

1. 사용자 현재 위치 표시 (파랑 아이콘)

2. 상점을 등록할 마커 (빨간색 아이콘) - 항상 가운데에 고정되어야함

3. 처음 현재위치로 카메라와 아이콘들이 세팅되어있어야함

4. 움직일때는 이동중 텍스트와 함께 확인 버튼 비활성화

5. 카메라 이동이 멈추면 빨간색 마커 좌표를 주소로 변환하여 텍스트에 세팅하고 확인 버튼 활성화

[Manifest]

먼저 현재 위치를 받아오기 위해서는 manifest에 위치 권한을 등록해주어야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mtjin.bungsegwon">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

[build.gradle]

https://github.com/ParkSangGwon/TedPermission

GitHub - ParkSangGwon/TedPermission: Easy check permission library for Android Marshmallow

Easy check permission library for Android Marshmallow - GitHub - ParkSangGwon/TedPermission: Easy check permission library for Android Marshmallow

github.com

코드에서 위치권한 요청을 위해 저는 TedPermission 라이브러리를 사용했습니다.

평소에도 자주 사용하는데 정말 편합니다. ㅎㅎ 감사합니다 :)

// Ted Permission - RxJava3
implementation 'io.github.ParkSangGwon:tedpermission-rx3:3.3.0'

[Layout XML]

레이아웃은 크게 볼건 없을것 같고 네이버맵을 FrameLayout에 프래그먼트 코드에서 동적으로 넣어주는식으로 구현했습니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".views.location_enroll.LocationEnrollFragment">

        <FrameLayout
            android:id="@+id/naver_map"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="188dp"
            android:layout_height="30dp"
            android:layout_marginTop="100dp"
            android:background="@drawable/rect_round_white_radius_30"
            android:gravity="center"
            android:text="@string/text_move_map_set_location"
            android:textColor="@color/black_2d2d2d"
            android:textSize="12dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_location"
            android:layout_width="0dp"
            android:layout_height="73dp"
            android:layout_marginHorizontal="16dp"
            android:layout_marginBottom="8dp"
            android:background="@drawable/rect_round_white_radius_8"
            android:gravity="center"
            android:paddingHorizontal="12dp"
            android:textColor="@color/black_2d2d2d"
            app:layout_constraintBottom_toTopOf="@id/btn_confirm"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:text="서울특별시 강남구" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn_confirm"
            android:layout_width="0dp"
            android:layout_height="52dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="23.74dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="56dp"
            android:background="@drawable/rect_round_ffd464_radius_8"
            android:text="@string/confirm_text"
            android:textColor="@color/black"
            android:textSize="14dp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_tracking"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:backgroundTint="@color/yellow_ffd464"
            android:contentDescription="추적"
            android:src="@drawable/ic_tracking"
            app:backgroundTint="@color/yellow_ffd464"
            app:layout_constraintBottom_toTopOf="@id/tv_location"
            app:layout_constraintEnd_toEndOf="parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

[Fragment]

프래그먼트에 로직들을 구현했습니다.

하나하나 다 설명하긴 힘들고 메모용이라 주석을 참고하시면 될 것 같습니다. ㅎㅎ

package com.mtjin.bungsegwon.views.location_enroll

import android.Manifest
import android.content.pm.PackageManager
import android.graphics.Color
import android.location.Address
import android.location.Geocoder
import android.location.Location
import android.util.Log
import androidx.annotation.UiThread
import androidx.core.app.ActivityCompat
import com.google.android.gms.location.FusedLocationProviderClient
import com.google.android.gms.location.LocationServices
import com.gun0912.tedpermission.rx3.TedPermission
import com.mtjin.bungsegwon.R
import com.mtjin.bungsegwon.base.BaseFragment
import com.mtjin.bungsegwon.databinding.FragmentLocationEnrollBinding
import com.naver.maps.geometry.LatLng
import com.naver.maps.map.CameraUpdate
import com.naver.maps.map.MapFragment
import com.naver.maps.map.NaverMap
import com.naver.maps.map.OnMapReadyCallback
import com.naver.maps.map.overlay.Marker
import com.naver.maps.map.overlay.OverlayImage
import com.naver.maps.map.util.FusedLocationSource
import java.io.IOException
import java.util.*


class LocationEnrollFragment :
    BaseFragment<FragmentLocationEnrollBinding>(R.layout.fragment_location_enroll),
    OnMapReadyCallback {
    private lateinit var fusedLocationClient: FusedLocationProviderClient
    private lateinit var locationSource: FusedLocationSource
    private lateinit var naverMap: NaverMap

    override fun init() {
        fusedLocationClient = LocationServices.getFusedLocationProviderClient(requireContext())
        requestPermissions()
        initView()
    }

    private fun initView() {
        // 네이버맵 동적으로 불러오기
        val fm = childFragmentManager
        val mapFragment = fm.findFragmentById(R.id.naver_map) as MapFragment?
            ?: MapFragment.newInstance().also {
                fm.beginTransaction().add(R.id.naver_map, it).commit()
            }
        mapFragment.getMapAsync(this)
    }

    // 위치권한 관련 요청
    private fun requestPermissions() {
        // 내장 위치 추적 기능 사용
        locationSource =
            FusedLocationSource(this, LOCATION_PERMISSION_REQUEST_CODE)
        TedPermission.create()
            .setRationaleTitle("위치권한 요청")
            .setRationaleMessage("현재 위치로 이동하기 위해 위치권한이 필요합니다.") // "we need permission for read contact and find your location"
            .setPermissions(
                Manifest.permission.ACCESS_COARSE_LOCATION,
                Manifest.permission.ACCESS_FINE_LOCATION
            )
            .request()
            .subscribe({ tedPermissionResult ->
                if (!tedPermissionResult.isGranted) {
                    showToast(getString(R.string.location_permission_denied_msg))
                }
            }) { throwable -> Log.e("AAAAAA", throwable.message.toString()) }


    }

    // 네이버맵 불러오기가 완료되면 콜백
    @UiThread
    override fun onMapReady(naverMap: NaverMap) {
        this.naverMap = naverMap
        // 내장 위치 추적 기능 사용
        naverMap.locationSource = locationSource

        // 빨간색 표시 마커 (네이버맵 현재 가운데에 항상 위치)
        val marker = Marker()
        marker.position = LatLng(
            naverMap.cameraPosition.target.latitude,
            naverMap.cameraPosition.target.longitude
        )
        marker.icon = OverlayImage.fromResource(R.drawable.ic_location_enroll)
        marker.map = naverMap

        // 카메라의 움직임에 대한 이벤트 리스너 인터페이스.
        // 참고 : https://navermaps.github.io/android-map-sdk/reference/com/naver/maps/map/package-summary.html
        naverMap.addOnCameraChangeListener { reason, animated ->
            Log.i("NaverMap", "카메라 변경 - reson: $reason, animated: $animated")
            marker.position = LatLng(
                // 현재 보이는 네이버맵의 정중앙 가운데로 마커 이동
                naverMap.cameraPosition.target.latitude,
                naverMap.cameraPosition.target.longitude
            )
            // 주소 텍스트 세팅 및 확인 버튼 비활성화
            binding.tvLocation.run {
                text = "위치 이동 중"
                setTextColor(Color.parseColor("#c4c4c4"))
            }
            binding.btnConfirm.run {
                setBackgroundResource(R.drawable.rect_round_c4c4c4_radius_8)
                setTextColor(Color.parseColor("#ffffff"))
                isEnabled = false
            }
        }

        // 카메라의 움직임 종료에 대한 이벤트 리스너 인터페이스.
        naverMap.addOnCameraIdleListener {
            marker.position = LatLng(
                naverMap.cameraPosition.target.latitude,
                naverMap.cameraPosition.target.longitude
            )
            // 좌표 -> 주소 변환 텍스트 세팅, 버튼 활성화
            binding.tvLocation.run {
                text = getAddress(
                    naverMap.cameraPosition.target.latitude,
                    naverMap.cameraPosition.target.longitude
                )
                setTextColor(Color.parseColor("#2d2d2d"))
            }
            binding.btnConfirm.run {
                setBackgroundResource(R.drawable.rect_round_ffd464_radius_8)
                setTextColor(Color.parseColor("#FF000000"))
                isEnabled = true
            }
        }

        if (ActivityCompat.checkSelfPermission(
                requireContext(),
                Manifest.permission.ACCESS_FINE_LOCATION
            ) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(
                requireContext(),
                Manifest.permission.ACCESS_COARSE_LOCATION
            ) != PackageManager.PERMISSION_GRANTED
        ) {
            return
        }
        // 사용자 현재 위치 받아오기
        var currentLocation: Location?
        fusedLocationClient.lastLocation
            .addOnSuccessListener { location: Location? ->
                currentLocation = location
                // 위치 오버레이의 가시성은 기본적으로 false로 지정되어 있습니다. 가시성을 true로 변경하면 지도에 위치 오버레이가 나타납니다.
                // 파랑색 점, 현재 위치 표시
                naverMap.locationOverlay.run {
                    isVisible = true
                    position = LatLng(currentLocation!!.latitude, currentLocation!!.longitude)
                }

                // 카메라 현재위치로 이동
                val cameraUpdate = CameraUpdate.scrollTo(
                    LatLng(
                        currentLocation!!.latitude,
                        currentLocation!!.longitude
                    )
                )
                naverMap.moveCamera(cameraUpdate)

                // 빨간색 마커 현재위치로 변경
                marker.position = LatLng(
                    naverMap.cameraPosition.target.latitude,
                    naverMap.cameraPosition.target.longitude
                )
            }
    }

    // 좌표 -> 주소 변환
    private fun getAddress(lat: Double, lng: Double): String {
        val geoCoder = Geocoder(requireContext(), Locale.KOREA)
        val address: ArrayList<Address>
        var addressResult = "주소를 가져 올 수 없습니다."
        try {
            //세번째 파라미터는 좌표에 대해 주소를 리턴 받는 갯수로
            //한좌표에 대해 두개이상의 이름이 존재할수있기에 주소배열을 리턴받기 위해 최대갯수 설정
            address = geoCoder.getFromLocation(lat, lng, 1) as ArrayList<Address>
            if (address.size > 0) {
                // 주소 받아오기
                val currentLocationAddress = address[0].getAddressLine(0)
                    .toString()
                addressResult = currentLocationAddress

            }

        } catch (e: IOException) {
            e.printStackTrace()
        }
        return addressResult
    }


    companion object {
        private const val LOCATION_PERMISSION_REQUEST_CODE = 1000
    }

}

처음 사용해보는 맵이라 몇가지 구현부분에서 삽질이 좀 많고 코드도 좀 더럽네요... ㅠ

보시다가 궁금하신 점이 있으면 댓글로 남겨주시면 답변해드리겠습니다. ㅎㅎ

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[알고리즘] 백준 10974 모든 순열 -백트래킹- 자바, 코틀린

막무가내막내 — Tue, 4 Jan 2022 21:22:29 +0900

https://www.acmicpc.net/problem/10974

10974번: 모든 순열

N이 주어졌을 때, 1부터 N까지의 수로 이루어진 순열을 사전순으로 출력하는 프로그램을 작성하시오.

www.acmicpc.net

오랜만에 백트래킹과 자바 감도 익힐겸 백트래킹 유형에서 기본문제를 풀어봤습니다. ㅎㅎ

요즘 코볼만 쓰고 있는데 자바 정말 오랜만에 쓰네요.... 그립다 자바야 ㅜㅜㅜㅜㅜㅜㅜㅜ

풀이는 다음과 같습니다.

[Java]

import java.util.Scanner;

public class Main {
    private static int N;

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        N = sc.nextInt();
        boolean[] isVisited = new boolean[N+1];
        dfs(0, isVisited, new int[N]);
    }

    private static void dfs(int depth, boolean[] isVisited, int[] nums) {
        if (depth == N) {
            for (int i = 0; i < nums.length; i++) {
                System.out.print(nums[i] + " ");
            }
            System.out.println();
            return;
        }
        for (int i = 1; i <= N; i++) {
            if (!isVisited[i]) {
                isVisited[i] = true;
                nums[depth] = i;
                dfs(depth + 1, isVisited, nums);
                isVisited[i] = false;
            }
        }
    }


}

[Kotlin]

import java.util.*

private var N = 0
fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    N = sc.nextInt()
    val isVisited = BooleanArray(N + 1)
    dfs(0, isVisited, IntArray(N))
}

private fun dfs(depth: Int, isVisited: BooleanArray, nums: IntArray) {
    if (depth == N) {
        for (i in nums.indices) {
            print(nums[i].toString() + " ")
        }
        println()
        return
    }
    for (i in 1..N) {
        if (!isVisited[i]) {
            isVisited[i] = true
            nums[depth] = i
            dfs(depth + 1, isVisited, nums)
            isVisited[i] = false
        }
    }
}

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!

[일상] 2021년 12월 일상 4 - 여의도 한우 오마카세 도쿄등심, 폴바셋 아이스크림, 깐부치킨, 계림닭도리탕, 동남집 곰탕, 스타벅스, 파

막무가내막내 — Sun, 26 Dec 2021 18:22:29 +0900

안녕하세요~ 2021년 12월 네 번째 일상포스팅입니다 ㅎㅎ

회사 점심시간에 종로계림닭도리탕원조 국회의사당점에 다녀왔다.
종로가 본점이고 몇십년 전통 닭도리탕 맛집이라고한다. 유명하다함!!

한 국자씩 덜고 찍은 3인분 사진인데 닭도 푸짐하게 들어있고 감자, 라면, 떡 등 다양한 사리도 들어있다.
남자 세싱 먹는데 다 못먹고 남길정도로 양은 많다.
그리고 라면 대신 우동으로 선택할 수 있고 다먹은뒤에는 볶음밥도 가능하고 매운맛도 조절가능하다.
정말 오랜만에 닭도리탕을 먹었는데 맛있게 먹었다!
가격은 만원초반이었던걸로 기억한다.

요즘 닭가슴살을 먹고 있는데 하림 닭가슴살 훈제 맛있고 단백질도 많이 들어있어서 추천한다.

회사 점심시간에 돈까스 맛집 카츠카츠라 여의점에 다녀왔다.
돈까스 사랑 :)

히레카츠 세트를 시켜먹었고 가격은 14,000원으로 좀 비싼편이다.
부드러운 맛이 특징인 집이다!

요즘 파리바게트 쿠폰을 받아서 샌드위치도 자주먹었다.

빵집 샌드위치는 언제나 옳다. ㅎㅎ
(편의점꺼는 실패한적이 있음..)

퇴근 후 회사동기와 미소페 구두수선 및 쇼핑도 할려고 신도림역에 위치한 현대백화점 디큐브시티점에 다녀왔다.
(더현대서울에는 미소페가 없더라 ㅠㅠ)

지금쯤이면 시즌오프 할인행사 좀 하겠지하고 니트를 사려고 갔는데 라코스테 30%할인빼고 나머진 1월달에 한다고 하더라.. 폴로랑 빈폴거도 사고 싶었는데 할인없인 너무비싸서 못샀다. ㅎㅅㅎ
겨울 시즌오프 할인행사를 즐기려면 1월달에 가야한다는걸 기억하자!

결국 라코스테에서 니트 2벌을 질러버렸다.
라코스테 니트만 이제 4개다.. 브랜드 겹치는걸 그닥 상관안해서 사긴했지만 앞으론 무신사에서 싸게 사야지..

쇼핑 후 신도림역에서 10분정도 걸어가면 있는 30년 전통!!! 새벽집 양곱창을 먹고왔다.
처음 가보는데 손님도 많고 연예인 사진이며 느낌이 아 맛집이다라는 삘이 딱왔다.
나중에 알고보니 여기 신도림역에만 있는 로컬 유일 맛집이다!

소주와 함께 곱창과 대창, 볶음밥을 각 1인분씩 시켜먹었다.
서비스로 고기, 계란찜, 선지, 선엽도 주셨다. 서비스 쩖..
지금까지 살면서 먹은 곱창, 대창 중 가장 맛있었다 :) ㄹㅇ 개존맛
곱창 대창 좋아하는 사람들은 꼬꼬곡꼬꼬꼬꼬꼬꼬꼬꼬꼬꼬꼮꼮 가보길 추천한다.

회사 점심으로 여의도에서 곰탕집으로 유명한 동남집에 다녀왔다.

간은 다되어있고 밥과 국수사리와 함께 먹으면 된다.
깔끔한 맛이 일품이고 국수사리와 밥은 무한리필이 가능하다!

엄마가 치킨기프티콘을 줘서 저녁에 BHC 황금올리브(?) 치킨을 시켜먹었다.

비싸긴 하지만 맛있었다. ㅎㅎ 땡스 맘

회사 점심시간에 덮밥 전문점 핵밥에 다녀왔다.

난 돼지고기덮밥을 먹고 선임님은 생연어덮밥을 먹었다.
덮밥 종류가 많아 골라 먹는 재미가 있고 맛도 다 평균이상은 한다!

금요일 퇴근 후 대학교 친구가 대전에서 놀러와서 만났다.
저녁도 먹을 겸 깐부치킨에 갔다.

순살스윗치킨과 함꼐 맥주한잔을 했다.
치킨맛은 솔직히 좀 별로였다... 바삭한 맛이다 별로 스윗한 맛이 안느껴졌다 ㅠ

먹은 후 디저트는 진리
폴바셋으로 아이스크림을 먹으러갔다.

폴바셋이 커피도 커피지만 아이스크림이 맛있다고 유명해서 엄청 기대하고 먹었는데 음... 극찬까지 할정도인가 싶었다.
맛은 있으나 극찬까진 아닌듯하다. (내가 먹은 아이스크림이 맞다면 ㅇㅇ..)

어제 만난친구와 자취방에서 잔 뒤 토요일 점심으로 한우 오마카세를 가기로했다.
친구가 싸피에 합격한 기념으로 한턱 크게 쐈다~!

여의도역 걸어가는 길에 여의도공원 풍경
이날 춥더라..

도쿄등심이라는 한우 오마카세 집이었다.
체인점이다.

여기 지하로 내려가면 있다

인테리어는 고급지게 잘 되있다.
그리고 주류는 외부에서 무료로 반입이 가능하다!

7,9000원 (120g) 한우 오마카세를 2인분을 시켜먹었다. (런치인데 스시 오마카세보다 가격이 좀 더 썐거같다)
코스는
숙성 한우 구이
연어 홍시 폰즈
크림 새우 고로케
코코넛 관자
한우 미역국
탄산음료
디저트
로 이루어져있다.

룸으로 처음 내부인테리어는 이렇다.

음료는 제로콜라를 시켰다.

처음에 연어 홍시 폰즈가 나온다.
맛있당 하지만 오마카세 특징이지만 양이 적다 ㅠ

두번째로는 코코넛 관자가 나온다.
이것도 맛있었다.
근데 접시는 큰데 관자는 한개라니~~~

세번째로는 크림 새우 고로케가 나왔다.
크림과 새우의 조합이 존맛이었다.
평소 와사비를 싫어하는데 와사비소스맛이 강하진 않아 맛있게 먹었다.

한우 안심, 등심, 살치살 3 종류가 나온다.

치즈와 먹으면 개꿀맛

그 다음 대망의 메인 메뉴인 숙성 한우 구이와 한우 미역국이 나온다.
한우는 당연히 구워주시고 굽기를 어느정도로 할 지 여쭤보신다. 우리는 미디엄으로 먹었다.
고기와 미역국 둘 다 정말 맛있었다!!! 입에서 살살 녹음.. 물론 돈도 녹음.. 하지만 내 돈은 아님.. ㅎ

마지막으로는 디저트 아이스크림과 아메리카노를 주신다.

처음에 맛은 있겠는데 이걸 먹고 배가 차겠어 했는데 굶은 상태로간 성인 남자 둘 다 신기하게 배불렀다.
콜라때문인가...? 하튼 양이 딱 적당하고 맛도 있고 인테리어도 잘되어 있었다.
한우 오마카세를 경험하고 싶다면 한번쯤 와도 좋을 것 같다. ㅎㅎ
친구 덕분에 한우 오마카세를 맛있게 먹었다. THANKS THANKS~

밥 먹은 후 카페는 역시 진리
스타벅스로 향했다.

콜드브루 마시며 놀다 헤어졌다.
매번 대학교 친구들이 올라오는데 나도 대전 한 번 가긴 해야겤ㅅ다

카페에서 나온 뒤 부모님이 내 자취방 여름 옷도 가지러올겸 오셔서 함께 본가인 일산에 갔다.

저녁으로 날 반기는 진초밥
초밥 꿀맛

본가에 온 후 주말은 가족과 함께 시간을 보냈다.
샤브샤브 해먹음 :)

원래 누나 아이디로 스타벅스 앱을 공유해서 사용했는데 최근에 내 아이디로 새로 만들었다.
프리퀀시 31일까지 9잔 먹어야하는데 불가능할 것 같다. ㅠ

작성하다보니 엄청 먹은 한 주 였던 것 같다.
다이어트 운동 해야제.. 허허

[알고리즘] 백준 14659 한조서열정리하고옴ㅋㅋ -그리디- 자바, 코틀린

막무가내막내 — Sun, 5 Dec 2021 14:15:52 +0900

https://www.acmicpc.net/problem/14659

14659번: 한조서열정리하고옴ㅋㅋ

첫째 줄에 봉우리의 수 겸 활잡이의 수 N이 주어진다. (1 ≤ N ≤ 30,000) 둘째 줄에 N개 봉우리의 높이가 왼쪽 봉우리부터 순서대로 주어진다. (1 ≤ 높이 ≤ 100,000) 각각 봉우리의 높이는 중복 없이

www.acmicpc.net

백준 그리디 유형의 한조서열정리하고옴ㅋㅋ 문제를 풀어봤습니다.

간단한 그리디 유형의 문제였는데 가독성이 조금 안좋은 것 같습니다..

풀이는 다음과 같습니다.

[Java]

import java.util.Scanner;

public class Main {

    private static int answer = Integer.MIN_VALUE;

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int N = sc.nextInt(); // 활잡이의 수
        int[] arr = new int[N];
        for (int i = 0; i < N; i++) {
            arr[i] = sc.nextInt();
        }
        for (int i = 0; i < N; i++) {
            int count = 0;
            for (int j = i + 1; j < N; j++) {
                if (arr[i] > arr[j]) { // 자신보다 높은 봉우리면 킬
                    count++;
                } else { // 자신보다 낮은 봉우리면 포기
                    break;
                }
            }
            answer = Math.max(answer, count);
        }
        System.out.println(answer);
    }
}

[Kotlin]

import java.util.*


private var answer = Int.MIN_VALUE
fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    val N = sc.nextInt() // 활잡이의 수
    val arr = IntArray(N)
    for (i in 0 until N) {
        arr[i] = sc.nextInt()
    }
    for (i in 0 until N) {
        var count = 0
        for (j in i + 1 until N) {
            if (arr[i] > arr[j]) { // 자신보다 높은 봉우리면 킬
                count++
            } else { // 자신보다 낮은 봉우리면 포기
                break
            }
        }
        answer = answer.coerceAtLeast(count)
    }
    println(answer)
}

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

https://github.com/mtjin/algorithm_practice/commit/d878372d1dd9c9c7b4a8da687e960662abb9430f

백준 14659 풀이 · mtjin/algorithm_practice@d878372

github.com

[안드로이드] Jetpack Navigation 사용시 프래그먼트 재생성 되는 문제 해결 (android bottom navigation fragment save state)

막무가내막내 — Sat, 4 Dec 2021 23:05:35 +0900

https://github.com/STAR-ZERO/navigation-keep-fragment-sample

GitHub - STAR-ZERO/navigation-keep-fragment-sample

Contribute to STAR-ZERO/navigation-keep-fragment-sample development by creating an account on GitHub.

github.com

위 깃허브 샘플프로젝트의 예제 화면

안드로이드 Jetpack Navigation 사용을 하면 프래그먼트는 항상 재생성이 됩니다.

그래서 Jetpack의 BottomNavigation을 사용해 밑에 탭이 있는 메인 홈화면을 구성한다면,

홈탭을 누를때마다 프래그먼트가 재생성이 되서 로딩도 느리고 뭔가 시중앱과 다르게 부자연스러워 보이기도 할겁니다. 예를들어 대표적인 시중앱인 카카오톡, 토스 등은 메인 홈화면의 바텀 탭을 누르면 처음에만 화면이 생성되고 그 다음 다시 누를떄는 재생성되지 않고 기존화면(프래그먼트)를 보여주어 빠릅니다.

즉, 홈화면의 바텀탭간의 화면전환(프래그먼트) 만큼은 재생성이 되는 것을 막는게 좋아보였습니다.

이 샘플 프로젝트에서 Jetpack Navigationd을 커스텀해서 이러한 문제점을 해결하였는데 이 코드를 살짝 수정하여 저도 문제를 해결할 수 있었습니다.

현재 좀 할게 많은 상태기도하고 이를 구현한 깃허브 레포지토리만 남겨놓겠습니다.

https://github.com/mtjin/bungsegwon-android

GitHub - mtjin/bungsegwon-android

Contribute to mtjin/bungsegwon-android development by creating an account on GitHub.

github.com

저와 같은 문제를 겪은 분들은 샘플 프로젝트를 보면 해결하실 수 있을 것 같습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[알고리즘] 백준 11497 통나무 건너뛰기 -그리디- 자바, 코틀린

막무가내막내 — Thu, 2 Dec 2021 22:03:13 +0900

https://www.acmicpc.net/problem/11497

11497번: 통나무 건너뛰기

남규는 통나무를 세워 놓고 건너뛰기를 좋아한다. 그래서 N개의 통나무를 원형으로 세워 놓고 뛰어놀려고 한다. 남규는 원형으로 인접한 옆 통나무로 건너뛰는데, 이때 각 인접한 통나무의 높이

www.acmicpc.net

백준 11497 통나무 건너뛰기 문제를 풀어봤습니다.

그리디 유형의 문제였습니다.

최소의 난이도를 가진 둥근 모양의 통나무 배치를 하기 위해서는

통나무를 양 옆으로 작은것들로 시작하여 점점 가운데로 올 수록 크게 배치하면 최소의 난이도를 만들 수 있습니다.

풀이는 다음과 같습니다.

[Java]

import java.util.Arrays;
import java.util.Scanner;

public class Main {

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int T = sc.nextInt(); // 테스트 케이스 수
        for (int t = 0; t < T; t++) {
            int N = sc.nextInt(); // 통나무 개수
            int[] arr = new int[N];
            for (int i = 0; i < N; i++) {
                arr[i] = sc.nextInt();
            }
            Arrays.sort(arr); // 정렬
            int left = N - 1;
            int right = 0;
            int[] nums = new int[N];
            // 왼쪽 오른쪽에 하나씩 정렬된 통나무를 놓으면 가장 작은 차이를 만들 수 있음
            for (int i = 0; i < N; i++) {
                if (i % 2 == 0) {
                    nums[left--] = arr[i];
                } else {
                    nums[right++] = arr[i];
                }
            }
            // 인접한것들끼리의 크기비교
            int answer = Integer.MIN_VALUE;
            for (int i = 1; i < N; i++) {
                answer = Math.max(answer, Math.abs(nums[i] - nums[i - 1]));
            }
            // 처음과 끝 통나무도 크기비교
            answer = Math.max(answer,Math.abs(nums[0] - nums[N - 1]));
            System.out.println(answer + " ");
        }

    }
}

[kotlin]

import java.util.*
import kotlin.math.abs

fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    val T = sc.nextInt() // 테스트 케이스 수
    for (t in 0 until T) {
        val N = sc.nextInt() // 통나무 개수
        val arr = IntArray(N)
        for (i in 0 until N) {
            arr[i] = sc.nextInt()
        }
        Arrays.sort(arr) // 정렬
        var left = N - 1
        var right = 0
        val nums = IntArray(N)
        // 왼쪽 오른쪽에 하나씩 정렬된 통나무를 놓으면 가장 작은 차이를 만들 수 있음
        for (i in 0 until N) {
            if (i % 2 == 0) {
                nums[left--] = arr[i]
            } else {
                nums[right++] = arr[i]
            }
        }
        // 인접한것들끼리의 크기비교
        var answer = Int.MIN_VALUE
        for (i in 1 until N) {
            answer = answer.coerceAtLeast(abs(nums[i] - nums[i - 1]))
        }
        // 처음과 끝 통나무도 크기비교
        answer = answer.coerceAtLeast(abs(nums[0] - nums[N - 1]))
        println("$answer ")
    }
}

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

https://github.com/mtjin/algorithm_practice/commit/79d3ccc066903ee71af5d537954d05cad6680999

백준 11497 풀이 · mtjin/algorithm_practice@79d3ccc

github.com

[안드로이드] 파이어베이스 인증 에러 해결 An internal error has occurred. [ Requests from this Android client application com.mtjin.bungsegwon are blocked. ]

막무가내막내 — Sat, 27 Nov 2021 21:02:38 +0900

구글링해도 안나오는 에러라 삽질 오래했네요 후..

[에러 사항]

파이어베이스 구글 회원가입 인증 후 토큰을 활용해 구글 로그인 인증이 실행 되는데

이 함수에서 isSusccessful로 떨어지지않고 에러가 Blocked 되는 에러가 발생하였습니다.

An internal error has occurred. [ Requests from this Android client application com.mtjin.bungsegwon are blocked. ]

[에러 원인]

보통 이 에러는 파이어베이스 콘솔 프로젝트 설정에서 내 앱 패키지에 SHA-1 인증키를 등록하지 않아서 발생하는데 저는 추가했는데도 이런 에러가 발생하여 삽질을 하였습니다. (구글 로그인 한두번해보는 것도 아니고 뭐지 싶었네요...)

원인은 두 명이 다른 안드로이드 패키지로 개발했었는데 그거로 인해 꼬인게 있는 것 같습니다.

즉 기존에 다른 패키지명으로 안드로이드 개발을 해놨었는데 프로젝트를 리뉴얼할거라 새로운 패키지로 프로젝트를 파고 파이어베이스 연결을 하였는데 이 두개의 google-service.json 이 꼬이고 기존에 있던 것만 제대로 동작하는 상황이 만들어진것 이었습니다.

google-service.json 파일에 의해 빌드 시 vaues.xml이 만들어지고 이것들의 키 값에 의해 구글로그인이 실행되게 되는데 제 키값이 아닌 이전 프로젝트의 키값들이 삽입되면서 에러가 난거였습니다.

[에러 해결]

1. google-service.json 기존 프로젝트 패키지명을 새로만든 패키지명으로 변경

-> 이 부분은 내가 파이어베이스 프로젝트 설정 패키지 탭에서 google-service.json 을 다운 받았으면 내껄로 자동으로 다 되어있어야하는데 그렇지 않았다. 이 점은 파이어베이스 측에서 고쳐줘야 싶지 않나 싶다..

google-service.json을 뜯어보았고 웹 API KEY 와 연관된 에러이므로 api_key에서 이전 프로젝트의 키 코드를 지워줬습니다.

이것도 안 되면 다른 패키지관련 코드를 모두 지워버리면 됩니다!

2. 파이어베이스 콘솔뿐만 아니라 구글클라우드 플랫폼 사이트 사용자인증정보에서 잘 등록되었는지 확인

추가로 파이어베이스 콘솔에서는 위와 같이 제 SHA-1 키가 잘 등록되었으나

https://console.cloud.google.com/apis/api/firebaseinstallations.googleapis.com/credentials?project=bungsegwon

Google Cloud Platform

하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.

accounts.google.com

구글 클라우드 플랫폼 사이트에서는 제가 새로만든 프로젝트 파이어베이스 연동하며 자동생성된 사용자 인증정보가 노란색 세모 느낌표 표시로 뭔가 잘 못되었다는 것을 확인하여 수정했습니다. (위 사진은 수정 후라 초록색으로 정상표시가 되어있는 점 양해부탁드립니다.)

원래 위와 같이 되어있었던 것을

키도 등록해주고 수정해주었습니다.

이렇게 크게 두가지를 수정하고 values.xml을 삭제 후 재실행 하면 자동생성되는 values.xml에 제 키값들이 들어가게되면서 구글 로그인도 성공하며 에러가 해결되었습니다.

구글링해도 SHA-1 키 얘기만 나오고 혼자 삽질하느라 힘들었네요 ㅠ

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[안드로이드] 에러 해결 error: cannot find symbolpublic final class SignUpFragment extends BaseFragment<com.mtjin.bungsegwon.databinding.FragmentSignUpBinding> { symbol: class BaseFragment

막무가내막내 — Sat, 27 Nov 2021 19:00:12 +0900

[에러 사항]

안드로이드 런타임때

error: cannot find symbolpublic final class SignUpFragment extends BaseFragment<com.mtjin.bungsegwon.databinding.FragmentSignUpBinding> { symbol: class BaseFragment

라는 에러가 발생했습니다.

[에러 원인]

package com.mtjin.bungsegwon.views.signup;

import java.lang.System;

@kotlin.Metadata(mv = {1, 4, 1}, bv = {1, 0, 3}, k = 1, d1 = {"\u0000\u0016\n\u0002\u0018\u0002\n\u0002\u0018\u0002\n\u0002\u0018\u0002\n\u0002\b\u0002\n\u0002\u0010\u0002\n\u0000\u0018\u00002\b\u0012\u0004\u0012\u00020\u00020\u0001B\u0005\u00a2\u0006\u0002\u0010\u0003J\b\u0010\u0004\u001a\u00020\u0005H\u0016\u00a8\u0006\u0006"}, d2 = {"Lcom/mtjin/bungsegwon/views/signup/SignUpFragment;", "LBaseFragment;", "Lcom/mtjin/bungsegwon/databinding/FragmentSignUpBinding;", "()V", "init", "", "app_debug"})
public final class SignUpFragment extends BaseFragment<com.mtjin.bungsegwon.databinding.FragmentSignUpBinding> {
    
    @java.lang.Override()
    public void init() {
    }
    
    public SignUpFragment() {
        super(0);
    }
}

에러로그를 보면 LoginFrament 에서 에러났고

cannot find symbol class BaseFragment

로 BaseFragment를 못찾는 문제라는 것을 알 수 있습니다.

추가로

Execution failed for task ':app:kaptDebugKotlin'.
> A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptExecution
> java.lang.reflect.InvocationTargetException (no error message)

에러도 추가로 발생한 것도 볼 수 있습니다.

[에러 해결]

BaseFragment를 못찾는 문제 같으므로 BaseFragment를 들여다보았습니다.


import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.annotation.LayoutRes
import androidx.databinding.DataBindingUtil
import androidx.databinding.ViewDataBinding
import androidx.fragment.app.Fragment
import io.reactivex.rxjava3.disposables.CompositeDisposable

abstract class BaseFragment<B : ViewDataBinding>(
    @LayoutRes val layoutId: Int
) : Fragment() {
    lateinit var binding: B
    protected lateinit var thisContext: Context
    protected val compositeDisposable = CompositeDisposable()

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = DataBindingUtil.inflate(inflater, layoutId, container, false)
        thisContext = inflater.context
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        binding.lifecycleOwner = this
        init()
    }

    abstract fun init()
    override fun onDestroy() {
        super.onDestroy()
        compositeDisposable.dispose()
    }

    protected fun showToast(msg: String) =
        Toast.makeText(context, msg, Toast.LENGTH_SHORT).show()
}

가장 상단에 Pacakage가 추가되어 있지 않아서 경로를 인지하지 못하여 SignUpFragment에서 import가 잘못되어 생긴 문제였습니다.

경로에 맞게 추가해주었더니 해결되었습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!

[안드로이드] 에러 해결 Caused by: org.gradle.cache.internal.btree.CorruptedCacheException: Corrupted IndexBlock 2020577 found in cache 'C:\Users\82107\.gradle\caches\journal-1\file-access.bin'.

막무가내막내 — Sat, 27 Nov 2021 17:20:13 +0900

[에러 사항]

안드로이드 스튜디오에서 실행을 시키니깐

Caused by: org.gradle.cache.internal.btree.CorruptedCacheException: Corrupted IndexBlock 2020577 found in cache 'C:\Users\82107\.gradle\caches\journal-1\file-access.bin'.

같은 에러가 났습니다.

[에러 원인]

gradle의 캐싱된 종속성들에서 충돌 혹은 오류가 있어서 발생합니다.

[에러 해결]

안드로이드 스튜디오를 모두 종료해준 다음에

윈도우 기준 C:\Users\82107\.gradle\caches

경로로 가서 journal-1 폴더를 삭제하여 해결했습니다.

이렇게 하면 Android Studio가 프로세스에서 손상된 파일을 수정하는 .gradle 폴더를 다시 빌드하고 다시 다운로드합니다.

참고

https://stackoverflow.com/questions/55801823/corruptedcacheexception-corrupted-indexblock-298298-found-in-cache-users-macu

CorruptedCacheException: Corrupted IndexBlock 298298 found in cache '/Users/macuser/.gradle/caches/journal-1/file-access.bin'

My android projects runs and my app works but I keep getting these errors. Can anyone explain what is happening and how I can solve it? org.gradle.cache.internal.btree.CorruptedCacheException:

stackoverflow.com

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!

[알고리즘] 백준 1026 보물 -그리디- 자바, 코틀린

막무가내막내 — Tue, 23 Nov 2021 23:43:13 +0900

https://www.acmicpc.net/problem/1026

1026번: 보물

첫째 줄에 N이 주어진다. 둘째 줄에는 A에 있는 N개의 수가 순서대로 주어지고, 셋째 줄에는 B에 있는 수가 순서대로 주어진다. N은 50보다 작거나 같은 자연수이고, A와 B의 각 원소는 100보다 작거

www.acmicpc.net

백준 그리디 유형에서 보물이라는 문제를 풀어봤습니다.

A와 B 배열의 인덱스 곱의 합이 최솟값이 나와야하는데 A만 재배열이 가능하고 B는 불가능합니다.

B가 재배열이 불가하다는 말에 꽂히지말아야합니다.

A와 B를 오름차순으로 정렬한다음에 A의 가장 작은값과 B의 가장 큰 값 인덱스들을 서로 곱해주는게 최소의 S결과가 나오게됩니다.

풀이는 다음과 같습니다.

[Java]

import java.util.Arrays;
import java.util.Scanner;

public class Main {

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int N = sc.nextInt();
        int[] A = new int[N];
        int[] B = new int[N];
        for (int i = 0; i < N; i++) {
            A[i] = sc.nextInt();
        }
        for (int i = 0; i < N; i++) {
            B[i] = sc.nextInt();
        }
        Arrays.sort(A);
        Arrays.sort(B);
        int S = 0;
        for (int i = 0; i < N; i++) {
            S += A[i] * B[N - 1 - i];
        }
        System.out.println(S);

    }
}

[Kotlin]

package kotlin

import java.util.*


fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    val N = sc.nextInt()
    val A = IntArray(N)
    val B = IntArray(N)
    for (i in 0 until N) {
        A[i] = sc.nextInt()
    }
    for (i in 0 until N) {
        B[i] = sc.nextInt()
    }
    Arrays.sort(A)
    Arrays.sort(B)
    var S = 0
    for (i in 0 until N) {
        S += A[i] * B[N - 1 - i]
    }
    println(S)
}

https://github.com/mtjin/algorithm_practice/commit/013a0cdfdf4059b6dda7c7ae09e61ca12d9795b5

백준 1026 풀이 · mtjin/algorithm_practice@013a0cd

github.com

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[알고리즘] 백준 15656 N과 M (7) -백트래킹- 자바

막무가내막내 — Mon, 22 Nov 2021 23:23:40 +0900

https://www.acmicpc.net/problem/15656

15656번: N과 M (7)

N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. N개의 자연수는 모두 다른 수이다. N개의 자연수 중에서 M개를 고른 수열

www.acmicpc.net

오랜만에 알고리즘을 풀고 백트래킹의 기본이라 할 수 있는 N과 M 시리즈를 풀어봤습니다.

확실히 오랜만에 자바를 사용하고 알고리즘을 풀었더니 없던 실력도 많이 줄은 것 같네요.. ㅠ

주어진 숫자를 여러번 사용할 수 있지만 오름차순으로 중복되지 않은 순열을 출력해야 했습니다.

그러므로 isVisited[] 같은 중복을 체크하는 Boolean 형 타입은 필요하지 않고 StringBuilder와 순열을 저장할 배열만을 사용했습니다. 추가로 오름차순으로 출력해야하므로 정렬을 하는 전처리도 진행하였습니다.

풀이는 다음과 같습니다.

[Java]

import java.util.Arrays;
import java.util.Scanner;

public class Main {
    private static int N;
    private static int M;
    private static int[] nums;
    private static StringBuilder sb = new StringBuilder();

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        N = sc.nextInt();
        M = sc.nextInt();
        nums = new int[N];
        for (int i = 0; i < N; i++) {
            nums[i] = sc.nextInt();
        }
        Arrays.sort(nums);
        dfs(0, new int[M]);
        System.out.println(sb.toString());
    }

    private static void dfs(int depth, int[] answers) {
        if (depth == M) {
            for (int i = 0; i < M; i++) {
                sb.append(answers[i]).append(" ");
            }
            sb.append("\n");
            return;
        }
        for (int i = 0; i < N; i++) {
            answers[depth] = nums[i];
            dfs(depth + 1, answers);
        }
    }
}

https://github.com/mtjin/algorithm_practice/commit/8e764158039d010159aef2bb64e6ed1499e4d802

백준 15656 풀이 · mtjin/algorithm_practice@8e76415

github.com

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!

[코딩테스트] 2021 NHN Pre-Test 1차 후기 (코딩테스트)

막무가내막내 — Sat, 23 Oct 2021 17:17:12 +0900

NHN은 자소서 없이 지원만하면 필기시험을 볼 수 있습니다.
NHN Pre-Test 1차 코딩테스트를 14:00~16:00 동안 보고왔습니다. ㅎㅎ
NHN 은 필기 1차는 코딩테스트 2차는 CS(전공) 시험을 보는 것 같습니다.
그리고 노캠 + 구름에서 코딩테스트 시험이 진행되었습니다.

문제는 총 3문제였고 알고리즘을 애초에 잘하지도 않고 두달 넘게 쉰 제가 모든 문제를 다 푼거보면 이번 문제난이도는 매우 쉬웠던 것 같습니다. 객관적으로 봐도 쉬웠습니다..
그래서 1차로 가르기보다는 2차 전공시험으로 면접자를 뽑지않을까 생각합니다. (코딩테스트 타임어택을 할 것 같지도 않고 데이터 개수도 적어서 효율성으로 판가름날 것 같지도 않기 때문입니다.)

[1번 문제 - 구현]
1번 문제는 단순 구현 문제에서 말하는 그대로 구현하면 되는 문제였습니다.
저같은 경우 우선순위큐, 리스트, 정렬 정도를 사용하여 풀었습니다.

[2번 문제 - 구현]
2번 문제도 구현문제로 다양한 방법으로 풀 수 있을 것 같은데 전 배열을 사용해서 풀었습니다.
맵을 사용해서 풀 수도 있을 것 같은데 배열이 더 효율적이었습니다.

[3번 문제 - 백트래킹]
3번 문제는 백트래킹으로 저는 풀었습니다.
어렵지 않은 백트래킹으로 백준의 N과 M 시리즈를 풀어보셨다면 어렵지 않게 푸셨을거라 생각합니다.
다만 백트래킹을 하기전에 문제 조건에 맞게 리스트에 String으로 판별해야할 조건을 넣는 작업을 했습니다.

카카오 기출 단체사진찍기 문제가 조금 더 어렵지만 비슷하다고 느꼈습니다.

그리고 기본적으로 백트래킹으로 풀었다보니 백준 N과M 시리즈와 비슷합니다.

https://programmers.co.kr/learn/courses/30/lessons/1835

코딩테스트 연습 - 단체사진 찍기

단체사진 찍기 가을을 맞아 카카오프렌즈는 단체로 소풍을 떠났다. 즐거운 시간을 보내고 마지막에 단체사진을 찍기 위해 카메라 앞에 일렬로 나란히 섰다. 그런데 각자가 원하는 배치가 모두

programmers.co.kr

https://www.acmicpc.net/workbook/view/2052

문제집: N과 M (시리즈)

www.acmicpc.net

1차는 통과하였습니다.

이후에 시간날때 백준에 비슷한 문제가 있다면 남겨보도록 하겠습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[안드로이드] Poketdex, MarvelHeros 안드로이드 샘플 프로젝트 학습

막무가내막내 — Mon, 4 Oct 2021 18:53:44 +0900

10월 목표 중 경력자분들의 샘플 프로젝트를 보며 공부하는게 있었습니다.

예전에 다음 링크처럼 Sunflower 안드로이드 아키텍처 공식 프로젝트나 현재 Udemy 에서 Flutter를 정리하는 것 처럼 클래스별로 정리할까 했는데,

https://youngest-programming.tistory.com/545

[안드로이드] 구글 공식 프로젝트 Sunflower 스터디 (4) Hilt Dependency Injection

[2021-04-29 업데이트] [출처 및 참고] github.com/android/sunflower android/sunflower A gardening app illustrating Android development best practices with Android Jetpack. - android/sunflower github...

youngest-programming.tistory.com

이번에는 샘플 프로젝트 Fork한 후 주석으로 기록하며 학습하려고 합니다. 나중에 추가로 더 확실하게 기록하고 싶으면 전체적으로 프로젝트를 정리하는 포스팅을 작성하겠습니다.

학습할 프로젝트는 일단 다음 두개의 프로젝트로 정했습니다.

Skydoves님의 프로젝트를 Fork로 가져왔고 프로젝트를 학습하며 필요한 부분에 주석을 추가하는 방식으로 학습할 예정입니다.

학습 및 기록할 프로젝트 레포지토리

[PoketDex]

https://github.com/mtjin/Pokedex

GitHub - mtjin/Pokedex: ️ Android Pokedex using Hilt, Motion, Coroutines, Flow, Jetpack (Room, ViewModel) based on MVVM ar

️ Android Pokedex using Hilt, Motion, Coroutines, Flow, Jetpack (Room, ViewModel) based on MVVM architecture. - GitHub - mtjin/Pokedex: ️ Android Pokedex using Hilt, Motion, Coroutines, Flow, Jet...

github.com

[MarvelHeros]

https://github.com/mtjin/MarvelHeroes

GitHub - mtjin/MarvelHeroes: ❤️ A sample Marvel heroes application based on MVVM (ViewModel, Coroutines, Room, Repository, K

❤️ A sample Marvel heroes application based on MVVM (ViewModel, Coroutines, Room, Repository, Koin) architecture. - GitHub - mtjin/MarvelHeroes: ❤️ A sample Marvel heroes application based on MVVM...

github.com

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[Flutter] Udemy 플러터 강의 섹션 10 학습 (섹션 10: Quizzler -Modularising & Organising FlutterCode)

막무가내막내 — Sun, 26 Sep 2021 11:20:00 +0900

[이전학습]

https://youngest-programming.tistory.com/623

[Flutter] Udemy 플러터 강의 섹션 9 학습 (Xylophone - Using Flutter and Dart Packages toSpeed Up Development)

[이전학습] https://youngest-programming.tistory.com/621 [Flutter] Udemy 플러터 강의 섹션 8 학습 (학습중..) (Boss Level Challenge 1 - Magic 8 Ball) [이전학습] https://youngest-programming.tistory.co..

youngest-programming.tistory.com

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2021 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

https://github.com/mtjin/flutter-practice

GitHub - mtjin/flutter-practice: Learning About Flutter (플러터 공부)

Learning About Flutter (플러터 공부). Contribute to mtjin/flutter-practice development by creating an account on GitHub.

github.com

[87. Quizzler - A True/False Quiz App]

정보처리기사 공부할때 퀴즈렛을 한적이 있는데 그거와 비슷한 Quizzler 라는 앱을 만들어볼 예정입니다.

[88. Building a Score Keeper]

리스트 사용법과 리스트를 활용하여 True 버튼 클릭 시 동적으로 아이콘을 추가하는 방법에 대해 배웠습니다.

import 'package:flutter/material.dart';

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  // 스코어 아이콘 리스트
  List<Icon> scoreKeeper = [
    Icon(
      Icons.check,
      color: Colors.green,
    ),
    Icon(
      Icons.close,
      color: Colors.red,
    ),
    Icon(
      Icons.close,
      color: Colors.red,
    ),
    Icon(
      Icons.close,
      color: Colors.red,
    ),
    Icon(
      Icons.close,
      color: Colors.red,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'This is where the question text will go.',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: () {
                //The user picked true.
                setState(() {
                  scoreKeeper.add(Icon(
                    Icons.check,
                    color: Colors.green,
                  ));
                });
              },
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              color: Colors.red,
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                //The user picked false.
              },
            ),
          ),
        ),
        // 스코어 리스트 동적으로 그려줌
        Row(children: scoreKeeper)
      ],
    );
  }
}

/*
question1: 'You can lead a cow down stairs but not up stairs.', false,
question2: 'Approximately one quarter of human bones are in the feet.', true,
question3: 'A slug\'s blood is green.', true,
*/

[89. [Dart] Lists]

다트의 리스트 개념에 대해 배웠습니다.

자바와 리스트 선언 및 함수 활용법이 크게 다른점이 없었습니다.

[90. Displaying the Questions]

질문 리스트와 질문 번호 변수를 만들어주었습니다.

그리고 true, false 클릭 시 질문번호가 증가되게 하고 질문번호가 변경되게 텍스트를 세팅해주었습니다.

주의할 점은 다음과 같습니다.

 // 질문 번호 (핫리로드시 state를 보존하기때문에 이 값을 보존함 0부터 다시 시작하고싶으면 핫스타트 사용해야함)
  int questionNumber = 0;

import 'package:flutter/material.dart';

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  // 스코어 아이콘 리스트
  List<Icon> scoreKeeper = [];

  // 질문리스트
  List<String> questions = [
    'You can lead a cow down stairs but not up stairs.',
    'Approximately one quarter of human bones are in the feet.',
    'A slug\'s blood is green.'
  ];

  // 질문 번호 (핫리로드시 state를 보존하기때문에 이 값을 보존함 0부터 다시 시작하고싶으면 핫스타트 사용해야함)
  int questionNumber = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                questions[questionNumber], //리스트 이용
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: () {
                //The user picked true.
                setState(() {
                  questionNumber++;
                });
              },
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              color: Colors.red,
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                //The user picked false.
                setState(() {
                  questionNumber++;
                });
              },
            ),
          ),
        ),
        // 스코어 리스트 동적으로 그려줌
        Row(children: scoreKeeper)
      ],
    );
  }
}

/*
question1: 'You can lead a cow down stairs but not up stairs.', false,
question2: 'Approximately one quarter of human bones are in the feet.', true,
question3: 'A slug\'s blood is green.', true,
*/

[91. Checking User Answers]

정답 리스트를 추가 하고

if else 문 활용법에 대해 배웠습니다.

import 'package:flutter/material.dart';

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  // 스코어 아이콘 리스트
  List<Icon> scoreKeeper = [];

  // 질문리스트
  List<String> questions = [
    'You can lead a cow down stairs but not up stairs.',
    'Approximately one quarter of human bones are in the feet.',
    'A slug\'s blood is green.'
  ];

  // 정답리스트
  List<bool> answers = [false, true, true];

  // 질문 번호 (핫리로드시 state를 보존하기때문에 이 값을 보존함 0부터 다시 시작하고싶으면 핫스타트 사용해야함)
  int questionNumber = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                questions[questionNumber], //리스트 이용
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: () {
                //The user picked true.
                bool correctNumber = answers[questionNumber];
                // if else 문을 활용한 정답 분기처리
                if (correctNumber == true) {
                  print('right');
                } else {
                  print('wrong');
                }
                setState(() {
                  questionNumber++;
                });
              },
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              color: Colors.red,
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                //The user picked false.
                setState(() {
                  questionNumber++;
                });
              },
            ),
          ),
        ),
        // 스코어 리스트 동적으로 그려줌
        Row(children: scoreKeeper)
      ],
    );
  }
}

/*
question1: 'You can lead a cow down stairs but not up stairs.', false,
question2: 'Approximately one quarter of human bones are in the feet.', true,
question3: 'A slug\'s blood is green.', true,
*/

[92. [Dart] Conditionals - IF/ELSE]

Dart의 if else 문 개념과 사용법에 대해 배웠는데 이전 언어와 동일하였습니다.

[94. Creating a Question Class]

기존에 문제이름(String)과 정답(bool)로 이루어진 구조를 클래스를 활용하여 한번에 묶어줌으로써 더 효율적으로 코드를 변경하였습니다.

처음 다트 클래스를 활용해보았는데 기존 자바와 크게 다른점은 없었습니다.

class Question {
  String questionText;
  bool questionAnswer;

  Question({String q, bool a}) {
    questionText = q;
    questionAnswer = a;
  }
}

import 'package:flutter/material.dart';

import 'question.dart';

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  // 스코어 아이콘 리스트
  List<Icon> scoreKeeper = [];
  // 클래스 리스트
  List<Question> questionBank = [
    Question(q: 'You can lead a cow down stairs but not up stairs.', a: false),
    Question(
        q: 'Approximately one quarter of human bones are in the feet.',
        a: true),
    Question(q: 'A slug\'s blood is green.', a: true),
  ];

  // 질문 번호 (핫리로드시 state를 보존하기때문에 이 값을 보존함 0부터 다시 시작하고싶으면 핫스타트 사용해야함)
  int questionNumber = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                questionBank[questionNumber].questionText, //리스트 이용
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: () {
                //The user picked true.
                bool correctNumber =
                    questionBank[questionNumber].questionAnswer;
                // if else 문을 활용한 정답 분기처리
                if (correctNumber == true) {
                  print('right');
                } else {
                  print('wrong');
                }
                setState(() {
                  questionNumber++;
                });
              },
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              color: Colors.red,
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                //The user picked false.
                setState(() {
                  questionNumber++;
                });
              },
            ),
          ),
        ),
        // 스코어 리스트 동적으로 그려줌
        Row(children: scoreKeeper)
      ],
    );
  }
}

/*
question1: 'You can lead a cow down stairs but not up stairs.', false,
question2: 'Approximately one quarter of human bones are in the feet.', true,
question3: 'A slug\'s blood is green.', true,
*/

[95. [Dart] Classes and Objects]

다트의 클래스와 객체 개념과 활용법에 대해 배웠습니다. 기존에 알고 있던 언어와 큰 차이점은 없고 동일했습니다.

[96. Abstraction in Action]

QuizBrain 이라는 Object 클래스를 만들어주어 Question 리스트를 관리해주는 식으로 코드를 변경했습니다. 모듈화를 한 것이라 보면 됩니다.

import 'question.dart';

class QuizBrain {
  List<Question> questionBank = [
    Question('Some cats are actually allergic to humans', true),
    Question('You can lead a cow down stairs but not up stairs.', false),
    Question('Approximately one quarter of human bones are in the feet.', true),
    Question('A slug\'s blood is green.', true),
    Question('Buzz Aldrin\'s mother\'s maiden name was \"Moon\".', true),
    Question('It is illegal to pee in the Ocean in Portugal.', true),
    Question(
        'No piece of square dry paper can be folded in half more than 7 times.',
        false),
    Question(
        'In London, UK, if you happen to die in the House of Parliament, you are technically entitled to a state funeral, because the building is considered too sacred a place.',
        true),
    Question(
        'The loudest sound produced by any animal is 188 decibels. That animal is the African Elephant.',
        false),
    Question(
        'The total surface area of two human lungs is approximately 70 square metres.',
        true),
    Question('Google was originally called \"Backrub\".', true),
    Question(
        'Chocolate affects a dog\'s heart and nervous system; a few ounces are enough to kill a small dog.',
        true),
    Question(
        'In West Virginia, USA, if you accidentally hit an animal with your car, you are free to take it home to eat.',
        true),
  ];
}

import 'package:flutter/material.dart';
import 'package:quizzler/quiz_brain.dart';

QuizBrain quizBrain = QuizBrain();

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  // 스코어 아이콘 리스트
  List<Icon> scoreKeeper = [];
  // 질문 번호 (핫리로드시 state를 보존하기때문에 이 값을 보존함 0부터 다시 시작하고싶으면 핫스타트 사용해야함)
  int questionNumber = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                quizBrain.questionBank[questionNumber].questionText, //리스트 이용
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: () {
                //The user picked true.
                bool correctNumber =
                    quizBrain.questionBank[questionNumber].questionAnswer;
                // if else 문을 활용한 정답 분기처리
                if (correctNumber == true) {
                  print('right');
                } else {
                  print('wrong');
                }
                setState(() {
                  questionNumber++;
                });
              },
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              color: Colors.red,
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                //The user picked false.
                setState(() {
                  questionNumber++;
                });
              },
            ),
          ),
        ),
        // 스코어 리스트 동적으로 그려줌
        Row(children: scoreKeeper)
      ],
    );
  }
}

/*
question1: 'You can lead a cow down stairs but not up stairs.', false,
question2: 'Approximately one quarter of human bones are in the feet.', true,
question3: 'A slug\'s blood is green.', true,
*/

[97. Encapsulation in Action]

QuizBrain에 변수와 함수를 추가함으로써 더욱 모듈화 시켰습니다.

또한 캡슐화를 시켜서 get은 가능하나 set은 못하게함으로써 불변하는것들에 대한 수정하는 실수가 없도록 구현했습니다.

import 'question.dart';

class QuizBrain {
  // 질문 번호 (핫리로드시 state를 보존하기때문에 이 값을 보존함 0부터 다시 시작하고싶으면 핫스타트 사용해야함)
  int _questionNumber = 0;

  // 캡슐화시킴
  List<Question> _questionBank = [
    Question('Some cats are actually allergic to humans', true),
    Question('You can lead a cow down stairs but not up stairs.', false),
    Question('Approximately one quarter of human bones are in the feet.', true),
    Question('A slug\'s blood is green.', true),
    Question('Buzz Aldrin\'s mother\'s maiden name was \"Moon\".', true),
    Question('It is illegal to pee in the Ocean in Portugal.', true),
    Question(
        'No piece of square dry paper can be folded in half more than 7 times.',
        false),
    Question(
        'In London, UK, if you happen to die in the House of Parliament, you are technically entitled to a state funeral, because the building is considered too sacred a place.',
        true),
    Question(
        'The loudest sound produced by any animal is 188 decibels. That animal is the African Elephant.',
        false),
    Question(
        'The total surface area of two human lungs is approximately 70 square metres.',
        true),
    Question('Google was originally called \"Backrub\".', true),
    Question(
        'Chocolate affects a dog\'s heart and nervous system; a few ounces are enough to kill a small dog.',
        true),
    Question(
        'In West Virginia, USA, if you accidentally hit an animal with your car, you are free to take it home to eat.',
        true),
  ];

  // 다음 질문 불러오기
  void nextQuestion() {
    if (_questionNumber < _questionBank.length - 1) {
      // 질문 개수이내
      _questionNumber++;
    }
  }

  // _questionBank을 캡슐화 시켰고 변경운 불가능하게하고 불러만 오게끔 구현
  String getQuestionText() {
    return _questionBank[_questionNumber].questionText;
  }

  bool getQuestionNumber() {
    return _questionBank[_questionNumber].questionAnswer;
  }
}

import 'package:flutter/material.dart';
import 'package:quizzler/quiz_brain.dart';

QuizBrain quizBrain = QuizBrain();

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  // 스코어 아이콘 리스트
  List<Icon> scoreKeeper = [];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                quizBrain.getQuestionText(),
                //리스트 이용
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: () {
                //The user picked true.
                bool correctNumber = quizBrain.getQuestionNumber();
                // if else 문을 활용한 정답 분기처리
                if (correctNumber == true) {
                  print('right');
                } else {
                  print('wrong');
                }
                setState(() {
                  quizBrain.nextQuestion();
                });
              },
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              color: Colors.red,
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                //The user picked false.
                setState(() {
                  quizBrain.nextQuestion();
                });
              },
            ),
          ),
        ),
        // 스코어 리스트 동적으로 그려줌
        Row(children: scoreKeeper)
      ],
    );
  }
}

/*
question1: 'You can lead a cow down stairs but not up stairs.', false,
question2: 'Approximately one quarter of human bones are in the feet.', true,
question3: 'A slug\'s blood is green.', true,
*/

[98. Inheritance in Action]

상속의 개념과 다트에서 어떻게 사용하는지에 대해 배웠습니다.

extends로 자바와 동일했습니다.

[99. Polymorphism in Action]

다형성에 대해 배웠습니다.

checkAnswer() 함수를 만들어 모듈화를 진행하였습니다.

import 'package:flutter/material.dart';
import 'package:quizzler/quiz_brain.dart';

QuizBrain quizBrain = QuizBrain();

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  // 스코어 아이콘 리스트
  List<Icon> scoreKeeper = [];

  void checkAnswer(bool userPickedAnswer) {
    //The user picked true.
    bool correctAnswer = quizBrain.getQuestionNumber();
    setState(() {
      // if else 문을 활용한 정답 분기처리
      if (userPickedAnswer == correctAnswer) {
        scoreKeeper.add(Icon(
          Icons.check,
          color: Colors.green,
        ));
      } else {
        scoreKeeper.add(Icon(
          Icons.close,
          color: Colors.red,
        ));
      }
      // 다음 문제
      quizBrain.nextQuestion();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                quizBrain.getQuestionText(),
                //리스트 이용
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: () {
                //The user picked true.
                checkAnswer(true);
              },
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              color: Colors.red,
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                //The user picked false.
                checkAnswer(false);
              },
            ),
          ),
        ),
        // 스코어 리스트 동적으로 그려줌
        Row(children: scoreKeeper)
      ],
    );
  }
}

/*
question1: 'You can lead a cow down stairs but not up stairs.', false,
question2: 'Approximately one quarter of human bones are in the feet.', true,
question3: 'A slug\'s blood is green.', true,
*/

[101. Code Challenge]

코드 챌린지로 알트 라이브러리를 추가하여 마지막 문제까지 풀면 알트창을 띄워주고 처음부터 다시 풀 수 있게 해주는 기능을 구현했습니다.

import 'question.dart';

class QuizBrain {
  // 질문 번호 (핫리로드시 state를 보존하기때문에 이 값을 보존함 0부터 다시 시작하고싶으면 핫스타트 사용해야함)
  int _questionNumber = 0;

  // 캡슐화시킴
  List<Question> _questionBank = [
    Question('Some cats are actually allergic to humans', true),
    Question('You can lead a cow down stairs but not up stairs.', false),
    Question('Approximately one quarter of human bones are in the feet.', true),
    Question('A slug\'s blood is green.', true),
    Question('Buzz Aldrin\'s mother\'s maiden name was \"Moon\".', true),
    Question('It is illegal to pee in the Ocean in Portugal.', true),
    Question(
        'No piece of square dry paper can be folded in half more than 7 times.',
        false),
    Question(
        'In London, UK, if you happen to die in the House of Parliament, you are technically entitled to a state funeral, because the building is considered too sacred a place.',
        true),
    Question(
        'The loudest sound produced by any animal is 188 decibels. That animal is the African Elephant.',
        false),
    Question(
        'The total surface area of two human lungs is approximately 70 square metres.',
        true),
    Question('Google was originally called \"Backrub\".', true),
    Question(
        'Chocolate affects a dog\'s heart and nervous system; a few ounces are enough to kill a small dog.',
        true),
    Question(
        'In West Virginia, USA, if you accidentally hit an animal with your car, you are free to take it home to eat.',
        true),
  ];

  // 다음 질문 불러오기
  void nextQuestion() {
    if (_questionNumber < _questionBank.length - 1) {
      // 질문 개수이내
      _questionNumber++;
    }
  }

  // _questionBank을 캡슐화 시켰고 변경운 불가능하게하고 불러만 오게끔 구현
  String getQuestionText() {
    return _questionBank[_questionNumber].questionText;
  }

  bool getCorrectAnswer() {
    return _questionBank[_questionNumber].questionAnswer;
  }

  //TODO: Step 3 Part A - Create a method called isFinished() here that checks to see if we have reached the last question. It should return (have an output) true if we've reached the last question and it should return false if we're not there yet.

  bool isFinished() {
    if (_questionNumber >= _questionBank.length - 1) {
      //TODO: Step 3 Part B - Use a print statement to check that isFinished is returning true when you are indeed at the end of the quiz and when a restart should happen.

      print('Now returning true');
      return true;

    } else {
      return false;
    }
  }

  //TODO: Step 4 part B - Create a reset() method here that sets the questionNumber back to 0.
  void reset() {
    _questionNumber = 0;
  }
}

import 'package:flutter/material.dart';
//TODO: Step 2 - Import the rFlutter_Alert package here.
import 'package:rflutter_alert/rflutter_alert.dart';
import 'quiz_brain.dart';

QuizBrain quizBrain = QuizBrain();

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),
        ),
      ),
    );
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  List<Icon> scoreKeeper = [];

  void checkAnswer(bool userPickedAnswer) {
    bool correctAnswer = quizBrain.getCorrectAnswer();

    setState(() {
      //TODO: Step 4 - Use IF/ELSE to check if we've reached the end of the quiz. If so,
      //On the next line, you can also use if (quizBrain.isFinished()) {}, it does the same thing.
      if (quizBrain.isFinished() == true) {
        //TODO Step 4 Part A - show an alert using rFlutter_alert,

        //This is the code for the basic alert from the docs for rFlutter Alert:
        //Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();

        //Modified for our purposes:
        Alert(
          context: context,
          title: 'Finished!',
          desc: 'You\'ve reached the end of the quiz.',
        ).show();

        //TODO Step 4 Part C - reset the questionNumber,
        quizBrain.reset();

        //TODO Step 4 Part D - empty out the scoreKeeper.
        scoreKeeper = [];
      }

      //TODO: Step 6 - If we've not reached the end, ELSE do the answer checking steps below  
      else {
        if (userPickedAnswer == correctAnswer) {
          scoreKeeper.add(Icon(
            Icons.check,
            color: Colors.green,
          ));
        } else {
          scoreKeeper.add(Icon(
            Icons.close,
            color: Colors.red,
          ));
        }
        quizBrain.nextQuestion();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                quizBrain.getQuestionText(),
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              textColor: Colors.white,
              color: Colors.green,
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: () {
                //The user picked true.
                checkAnswer(true);
              },
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: FlatButton(
              color: Colors.red,
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                //The user picked false.
                checkAnswer(false);
              },
            ),
          ),
        ),
        Row(
          children: scoreKeeper,
        )
      ],
    );
  }
}

/*
question1: 'You can lead a cow down stairs but not up stairs.', false,
question2: 'Approximately one quarter of human bones are in the feet.', true,
question3: 'A slug\'s blood is green.', true,
*/

이상 섹션 10 강의를 학습완료했습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!

[다음강의]

https://youngest-programming.tistory.com/632

[Flutter] Udemy 플러터 강의 섹션 11 학습 (학습중...) (섹션 11: Boss Level Challenge 2 - Destini)

youngest-programming.tistory.com

[Flutter] Udemy 플러터 강의 섹션 9 학습 (Xylophone - Using Flutter and Dart Packages toSpeed Up Development)

막무가내막내 — Thu, 23 Sep 2021 20:44:11 +0900

[이전학습]

https://youngest-programming.tistory.com/621

[Flutter] Udemy 플러터 강의 섹션 8 학습 (학습중..) (Boss Level Challenge 1 - Magic 8 Ball)

[이전학습] https://youngest-programming.tistory.com/617 [Flutter] Udemy 플러터 강의 섹션 7 학습 (Dicee - Building Apps with State) 플러터에 대해 조금씩 학습하고 있습니다. 최근에는 연수때문에 시간이..

youngest-programming.tistory.com

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2021 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

https://github.com/mtjin/flutter-practice

GitHub - mtjin/flutter-practice: Learning About Flutter (플러터 공부)

Learning About Flutter (플러터 공부). Contribute to mtjin/flutter-practice development by creating an account on GitHub.

github.com

[74. Xylophone - A Simple Musical Instrument App]

간단한 음악 장비 앱을 만들거라고 합니다.

[75. What are Flutter & Dart Packages?]

플러터와 다트 패키지를 다음 사이트에서 찾고 프로젝트에 추가할 수 있습니다.

https://pub.dev/flutter/packages

Page 1 | Top Flutter packages

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.

pub.dev

english_words 패키지를 검색하여 pubspec.yml 파일에 추가해주었습니다.

name: xylophone
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  english_words : ^3.1.5

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - assets/

패키지를 추가했으면 다음과 같이 import 하여 사용이 가능합니다.

nouns 에서 가장 마지막 단어를 볼 수 있습니다.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

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

class XylophoneApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Text(nouns.last),
        ),
      ),
    );
  }
}

[76. How to Play Sound Across Platforms]

이전에 추가한 패키지는 지우고 이번 섹션의 본프로젝트인 오디오 관련 패키지를 추가하고 이 패키지에서 제공하는 기능을 통해 assets 폴더에 있는 wav음악파일을 재생시키는 코드를 작성해봤습니다.

여기서는 internet이 아닌 assets에 프로젝트 내부 음악을 재생시키는거라 audioplayers 패키지의 audio_cache.dart만 사용한것을 볼 수 있습니다. (+이 패키지에서는 인터넷에서 음악 가져오는 기능도 제공합니다.)

https://pub.dev/packages/audioplayers/install

audioplayers | Flutter Package

A Flutter plugin to play multiple audio files simultaneously

pub.dev

name: xylophone
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  audioplayers: ^0.10.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - assets/

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

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

class XylophoneApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: FlatButton(
              onPressed: () {
                final player = AudioCache();
                player.play('note1.wav');
              },
              child: Text('Click Me'),
            ),
          ),
        ),
      ),
    );
  }
}

클릭하면 오디오가 재생됩니다.

[77. How to Play Multiple Sounds]

여러개의 사운드를 낼 수 있는 버튼을 구현했습니다.

함수를 사용하여 모듈화했습니다.

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

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

class XylophoneApp extends StatelessWidget {
  void playSound(int soundNumber) {
    final player = AudioCache();
    player.play('note$soundNumber.wav');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              FlatButton(
                color: Colors.red,
                onPressed: () {
                  playSound(1);
                },
              ),
              FlatButton(
                color: Colors.orange,
                onPressed: () {
                  playSound(2);
                },
              ),
              FlatButton(
                color: Colors.yellow,
                onPressed: () {
                  playSound(3);
                },
              ),
              FlatButton(
                color: Colors.green,
                onPressed: () {
                  playSound(4);
                },
              ),
              FlatButton(
                color: Colors.teal,
                onPressed: () {
                  playSound(5);
                },
              ),
              FlatButton(
                color: Colors.blue,
                onPressed: () {
                  playSound(6);
                },
              ),
              FlatButton(
                color: Colors.purple,
                onPressed: () {
                  playSound(7);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[78. [Dart] Functions - Part 2]

함수란 무엇인가에 대해 배웠습니다.

자바와 코틀린에서의 함수와 큰 차이점은 없었습니다.

[79. Updating the UI of Our App]

Expanded 위젯과 crossAxixAligment 정렬을 통해 UI를 업데이트하였습니다.

그리고 buildKey()로 UI그리는것을 모듈화 하였는데 아직 미완성단계입니다.

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

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

class XylophoneApp extends StatelessWidget {
  void playSound(int soundNumber) {
    final player = AudioCache();
    player.play('note$soundNumber.wav');
  }

  void buildKey() {
    Expanded(
      child: FlatButton(
        color: Colors.red,
        onPressed: () {
          playSound(1);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              buildKey(),
              buildKey(),
              buildKey(),
              buildKey(),
              buildKey(),
              buildKey(),
              buildKey(),
            ],
          ),
        ),
      ),
    );
  }
}

[80. [Dart] Functions - Part 3]

78에서 함수강의에 이어지는 함수강의 파트3입니다.

함수의 리턴에 대해 배웠습니다.

특이한점은 인자값을 넘겨줄때 매개변수명을 이용하여 인자값을 넘겨줄때는 매개변수를 {} 로 감싸야합니다.

이 예시는 다음 81 강의 코드를 참고하면 됩니다.

[82. Refactoring Our App]

79강의에서 미완성한 부분을 80에서 다트 함수에 대해 배우고 이를 적용하여 구현을 완료했습니다.

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

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

class XylophoneApp extends StatelessWidget {
  void playSound(int soundNumber) {
    final player = AudioCache();
    player.play('note$soundNumber.wav');
  }

  // 매개변수명으로 인자를 넘길때는 {} 로 매개변수를 감싸줘야함
  Expanded buildKey({Color color, int soundNumber}) {
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: () {
          playSound(soundNumber);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              buildKey(color: Colors.red, soundNumber: 1),
              buildKey(color: Colors.purple, soundNumber: 1),
              buildKey(color: Colors.yellow, soundNumber: 1),
              buildKey(color: Colors.green, soundNumber: 1),
              buildKey(color: Colors.teal, soundNumber: 1),
              buildKey(color: Colors.blue, soundNumber: 1),
              buildKey(color: Colors.purple, soundNumber: 1),
            ],
          ),
        ),
      ),
    );
  }
}

[83. [Dart] Arrow Functions]

다트의 Arrow Functions 에 대해 간략히 배웠습니다.

배운 내용을 바탕으로 buildKey()에 적용해봤습니다.

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

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

class XylophoneApp extends StatelessWidget {
  void playSound(int soundNumber) {
    final player = AudioCache();
    player.play('note$soundNumber.wav');
  }

  // 매개변수명으로 인자를 넘길때는 {} 로 매개변수를 감싸줘야함
  // Arrow Function 적용
  Expanded buildKey({Color color, int soundNumber}) => Expanded(
        child: FlatButton(
          color: color,
          onPressed: () {
            playSound(soundNumber);
          },
        ),
      );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              buildKey(color: Colors.red, soundNumber: 1),
              buildKey(color: Colors.purple, soundNumber: 1),
              buildKey(color: Colors.yellow, soundNumber: 1),
              buildKey(color: Colors.green, soundNumber: 1),
              buildKey(color: Colors.teal, soundNumber: 1),
              buildKey(color: Colors.blue, soundNumber: 1),
              buildKey(color: Colors.purple, soundNumber: 1),
            ],
          ),
        ),
      ),
    );
  }
}

이상 섹션 9 학습을 완료했습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!

[다음강의]

https://youngest-programming.tistory.com/624

[Flutter] Udemy 플러터 강의 섹션 10 학습 (학습중...) (섹션 10: Quizzler -Modularising & Organising FlutterCode)

youngest-programming.tistory.com