TIL 34일차 (모음사전 - Kotlin | 피그마 기초 강의 정리)

코드카타

 

모음사전

 

문제

 

 

입출력 예시

 

 

각 자리의 가중치 구하기

5번째 자리: 1 
4번째 자리: 1 x 5 + 1 = 6
3번째 자리: 6 x 5 + 1 = 31
2번째 자리: 31 x 5 + 1 = 156
1번째 자리: 156 x 5 + 1 = 781

다섯번째(마지막) 자리에서 각 문자가 올 수 있는

유일한 경우는 자기 자신 뿐이므로 가중치가 1에 해당한다.

 

각 자리의 가중치는 이전 자리에서 가능한 모든 조합의 수를 반영한다.

 

각 자리의 가중치를 계산할 때 1을 더해주는 이유는

특정 자리의 문자 위치를 포함하기 위해서이다.

 

weight[n] = 5 x weight[n-1] + 1

따라서, n번째 자리의 가중치를 구하는 공식은 위와 같다.

 

 

풀이

class Solution {
    fun solution(word: String): Int {
        val alp = listOf('A', 'E', 'I', 'O', 'U') // 알파벳 모음
        val weights = listOf(781, 156, 31, 6, 1) // 각 자리의 가중치
        var res = 0 // 현재 단어가 몇번째 단어인지 저장할 변수
        
        // 주어진 단어를 순회하며
        for(i in word.indices) {
            val n = alp.indexOf(word[i]) // 각 알파벳이 몇 번째 알파벳인지 구하고
            res += n * weights[i] + 1 // 현재 문자의 가중치를 더한다.
        }
        
        return res
    }
}

결과값에 현재 문자의 가중치를 더하는 로직에서

1을 더하는 것은 현재 문자가 시작하는 위치를 반영하기 위함이다.

 

현재 알파벳이 'A'라면 n이 0에 해당하므로

몇 번째 단어이든지 상관없이 결과값에는 1을 더하게 된다.

 

 

회고

완전탐색 문제라서 원래는 재귀로 풀어야 하는데

뭔가 수학적으로도 풀 수 있을 것 같아서 방법을 찾아보니까

 

각 자리마다 가중치를 설정하고 현재 문자의

가중치를 더하는 방식으로 푸는 방법이 있었다.

 

해당 문제는 알고리즘을 사용하는 것보단 수학적으로 풀어야

더 간결하고 효율적으로 코드를 작성할 수 있는 것 같다.

 

---

 

피그마 기초 강의 정리

 

기본 인터페이스와 조작법

 

객체의 Constraints 지정

프레임 내 객체의 상하기준점을 Center로 설정하면

프레임 모양이 바뀔 때 도형의 위치도 같이 바뀌게 된다.

 

Scale로 설정하면 프레임이 변할 떄 도형의 비율이 변하게 된다.

 

(다 아는 내용들이라 스킵하고 모르는 것만 기록함.)

 

 

 

폰트 스타일 지정하기

 

스타일 정의

피그마는 스타일을 저장하고 재사용할 수 있는 기능을 제공한다.

스타일에는 반복해서 사용할 폰트나 컬러, 레이아웃 등을 저장한다.

 

 

유용한 단축키

ctrl키를 누른 상태에서 객체를 선택하면

그룹 내의 객체를 바로 선택할 수 있게 된다.

 

 

폰트 분류

 

폰트를 크기에 따라서 분류한다.

 

 

폰트 스타일 만들기

 

임의의 텍스트 위젯을 만들어 원하는 폰트를 만들고

우측 상단 아이콘을 눌러서 원하는 이름으로 스타일을 정의한다.

 

텍스트 스타일에는 자간, 행간, 줄 높이 값도 포함할 수도 있다.

 

 

스타일을 체계적으로 관리하기 위해 이름은 "분류/굵기/사이즈" 형식으로 지정한다.

여기서 슬래쉬('/')는 상위-하위 개념을 나타내어 스타일을 계층적으로 분류한다.

 

 

프레임 밖을 누른 뒤 우측 탭을 보면 정의해둔 폰트 스타일을 확인할 수 있다.

 

 

 

컬러 스타일 지정하기

 

프레임 생성

 

100 x 100 사이즈의 프레임을 하나 생성해준뒤

Ctrl + D 를 눌러 일정한 간격으로 여러개 복사해준다.

 

 

색상 선택

 

Fill에서 직접지정해 줘도 되고 I를 누르거나 스포이드 아이콘을 눌러

스포이드를 활성화 한 다음 원하는 색상을 클릭해도 된다.

 

 

색상 이름

 

비슷한 색상을 같은 상위 폴더에 넣는다.

 

 

 

아이콘 컴포넌트 등록하기

 

컴포넌트란?

스타일 지정과 같은 목적을 가지고 사용되는 개념이다.

반복적으로 재사용되는 객체를 컴포넌트로 등록시킨다.

 

 

아이콘 가져오기

 

아이콘은 일반적으로 Google Material Icons를 가져와 사용한다.

 

모든 아이콘 프레임 사이즈는 24 x 24로 지정하는 것이 원칙이며,

떄에 따라서는 더 크거나 작게 만들어서 활용할 수도 있다.

 

 

컴포넌트 등록

 

아이콘 프레임 선택 후 Ctrl + Alt + K 를 눌러 컴포넌트를 진행한다.

상단에 있는 컴포넌트화 아이콘을 눌러도 된다.

 

 

컴포넌트 여러개 등록

 

여러 개의 컴포넌트를 동시에 등록하려면 컴포넌트화 아이콘 누르고

Create multiple components를 선택하면 된다.

 

 

컴포넌트 기능

 

컴포넌트화된 객체를 복사하여 만들어진 객체는 인스턴스에 해당한다.

컴포넌트의 속성이 변할 때 인스턴스의 속성도 동일하게 변한다.

 

인스턴스의 속성을 먼저 바꾼다면 컴포넌트 속성을 변경해도

그 변경점이 인스턴스에 적용되지 않게 된다.

 

인스턴스는 우측 탭에서 다른 컴포넌트로 모양을 바꿀 수 있다.

 

 

 

오토레이아웃 적용하기

 

오토레이아웃 생성

 

객체 선택후 Shift + A 를 눌러 오토레이아웃을 생성한다.

 

 

라벨 간격 확인

도형내에 있는 텍스트를 선택 후 도형에 마우스를 호버한 뒤

Alt를 누르면 텍스트와 도형 사이의 상하좌우 간격을 볼 수 있다.

 

 

오토레이아웃 속성 정의

 

따라할 레이아웃의 상하좌우 간격을 똑같이 설정해주고,

radius값과 Fill색상을 지정해준다.

 

 

오토레이아웃 장점

 

가로 세로 정렬 속성을 Hug로 지정하게 된다면,

지정한 정렬값에 따라 라벨의 모양이 바뀌지 않고 동일한 간격을 유지한다.