사전캠프 TIL 21일차 (카드 뭉치, 과일 장수 - Kotlin | FlutterFlow - 레이아웃 짜기)

코드카타

 

카드 뭉치

 

문제

 

 

정답

class Solution {
    fun solution(cards1: Array<String>, cards2: Array<String>, goal: Array<String>): String {
        var a = 0
        var b = 0
        for (i in goal) {
            when {
                a < cards1.size && cards1[a] == i -> a++
                b < cards2.size && cards2[b] == i -> b++
                else -> return "No"
            }
        }
        return "Yes"
    }
}

각 단어를 goal배열에서 순차적으로 확인하며 

두 카드 뭉치에서 차례대로 단어를 비교해준다.

 

카드를 순차적으로 배치하여 goal을 만들 수 있다면 "Yes"를,

그렇지 않다면 "No"를 반환한다.

 

for (i in goal)

여기서 i는 goal의 요소 즉 문자열에 해당한다.

 

a < cards1.size
b < cards2.size

해당 조건들은 cards배열들의 인덱스 범위를 초과하여 참조하는 것을 방지해준다.

 

 

 

과일 장수

 

문제

 

 

정답

class Solution {
    fun solution(k: Int, m: Int, score: IntArray): Int {
        score.sortDescending()
        var res = 0
        for (i in 0 until score.size step m) {
            if (i + m <= score.size) {
                val boxMinScore = score[i + m - 1]
                res += boxMinScore * m
            }
        }
        return res
    }
}

사과의 점수들을 내림차순으로 정렬한 뒤 앞에있는 사과부터 m개씩 묶어서 상자를 만든다.

상자 중 최소 점수를 계산하고 최소 점수를 m만큼 곱한 값을 res에 더해 반환한다.

 

 

내림차순 정렬

score.sortDescending()

// [1, 2, 3, 1, 2, 3, 1] -> [3, 3, 2, 2, 1, 1, 1]

sortDescending() 함수를 호출하면 배열의 요소를 내림차순으로 정렬해준다.

가장 높은 점수부터 상자를 채우게 하기 위해 해당함수를 호출한다.

 

 

step

for (i in 0 until score.size step m)

for문에서 step키워드를 이용하여 증가 값을 지정할 수 있다.

해당 구문에선 인덱스를 m씩 증가시키면서 상자를 만든다.

 

 

로직 설명

if (i + m <= score.size) {
    val boxMinScore = score[i + m - 1]
    res += boxMinScore * m
}

i는 0을 포함한 m의 배수를 값으로 가지고 있다.

if (i + m <= score.size)에서 남은 사과가 m개 보다 많은지 검사한다.

 

score은 내림차순 정렬이 되어있기 때문에 score[i + m - 1]은 

사과를 m개씩 묶어놓은 상자, 즉 현재 상자의 가장 낮은 점수를 의미한다. 

 

 

 

FlutterFlow 1주차 숙제

 

 

플러터 플로우를 이용해 해당 레이아웃을 구현하는 것이 이번주 숙제이다.

 

 

AppBar

 

앱바에선 텍스트와 아이콘을 넣어주기만 하면 된다.

icon은 "Menu"라고 검색하면 나온다.

 

 

TextField

 

검색어를 입력할 텍스트필드 레이아웃이다.

 

 

 

패딩값은 8의 배수로 준다.

 

 

 

좌측 아이콘은 Icon Properties에서 설정해준다.

 

 

Divider

 

원래 저런 화면같은 거 구현할 때는 리스트뷰 같은 거 쓰는데

플러터 플로우의 리스트뷰에서 구분선을 설정할 수 없어서 

구분선은 Dvider위젯으로 줬다.

 

Height를 0으로 주면 구분선의 위아래 여백을 제거할 수 있다.

 

 

Container

 

Container내에서 Row와 Column을 적절하게 사용해 위젯들을 배치한다.

Column은 여러 개의 위젯들을 세로로 배치하고 Row는 가로로 배치한다.

 

해당 레이아웃 위젯들 내에 위치한 자식 위젯들의 패딩값을 적절히 줌으로써 위젯을 배치한다.

 

 

결과화면

 

이런 식으로 위젯의 구조를 짜면 된다.

 

 

느낀 점

본인은 플러터를 어느정도 공부를 했었는데

나에게 있어 플러터플로우는 상당히 불편하게 느껴졌다.

 

 위젯의 프로퍼티를 설정하는 탭에서 설정할 위젯 속성을 검색할 수가 없어

필요한 설정을 하나하나 찾아야 되는 것이 불편했다.

 

그리고 레이아웃을 구현하는 방식이 많이 달랐다.

해당 화면을 구현할 때 처음에 컨테이너의 특정 방향으로만 테두리를 주는 것이 

불가능해서 Divider위젯으로 테두리를 대체하는 등의 상황이 발생했다.

 

최상단의 위젯이 알맞지 않은 위젯일 때 바꾸려면 

코드로 구현할 땐 위젯이름만 바꾸면 됬는데 플러터플로우에선

해당 위젯을 지우고 다시 끌어와야 되서 비효율적으로 느껴졌다.

 

가장 문제라고 느낀 점은 해당 레이아웃 코드를 가져와서 플러터에서 원하는 기능을

구현하려고 하면 코드를 다시 작성해야 한다는 점이다.

 

플러터 개발을 해본 나로썬 여러모로 비효율적으로 느껴졌지만 

개발 시간 절약을 위해 이런 툴을 사용하는 방법도 있다는 것을 알게되었다.

 

 

한줄 요약: 난 코드쳐서 화면 구현하는 게 더 편하다.