02.16 TIL 완전탐색, flex

😎 너무 졸리다.

이런 규칙적인 생활.. 너무 오랜만이다.
낮엔 졸려서 커피 없이는 견딜 수가 없다.
벌써 목요일인게 확실히 시간이 빠르긴한듯
밤 9시면 꾸벅꾸벅 졸려서 자는 생활을 반복하고 있다.

---

😎flex를 좀 더 잘 알아봐야겠다.

flex,grid는 크게 부모요소에 적용해야할 것과 자식요소에 적용해야할 것으로 나뉩니다.

부모요소에 적용시킬 것

flex	부모요소	display : flex	부모요소의 display를 flex로 적용시킨다.
flex-direction	부모요소	row column reverse row reverse column	flex의 방향을 결정함
flex-wrap	부모요소	nowrap(기본값) wrap wrap-reverse	nowrap이면 줄바꿈을 하지 않음 wrap이면 자식요소들이 부모요소의 크기보다 크면 줄바꿈을 해줌
justify-content	부모요소	center flex-start flex-end space-between space-around	자식요소들을 어떻게 정렬할지 결정함 flex-direction과 같은 방향으로 정렬됨
align-items	부모요소	center flex-start flex-end baseline stretch	자식요소들을 어떻게 정렬할지 결정함 flex-direction과 다른 방향을 정렬함

자식 요소에 설정 가능한 것
여기서 내가 어제 어떻게 사용할지 헷갈렸던 basis와 관련된 속성들이 나온다.

flex	자식요소	flex : <grow> <shrink> <basis>	위 순서대로 자식요소의 flex에 한번에 설정 가능
flex-grow	자식요소	기본값은 0 비율로 설정가능	따로따로 적용도 가능하다.
flex-shrink	자식요소	기본값은 1 비율로 설정가능	-
flex-basis	자식요소	grow, shrink로 늘거나 줄기 전에 갖는 기본크기	-

basis랑 grow,shrink를 잘 설정하면 좋은 사이트를 만들 수 있을 것 같은 느낌이네용

어이어이 과거의 나 이미 다 했던거냐고 www

찾아보니 그리드도 깔끔하게 정리해뒀는데

정말 그리드는 까맣게 까먹었더라.. fr이 뭔데..

---

😎스터디원 구하기

오전 일정은 flex에 대하여 공부하는 것이었다.
빠르게 끝낸 후 스터디 모집글을 작성했는데 노션을 안써봐서 그런지
마크다운 개쩔어~~ 같은 느낌은 별로 없었다. 
다만 /키로 대부분의 명령에 접근할 수 있으니 깃허브 readme같은거 쓰는거보단 훨씬 쉬운듯?

하여간 오전엔 저거 쓰다보니 시간이 다 가버렸다.

---

😎 프로그래머스 모음사전 (완전탐색 재귀)

완전탐색 유형의 문제다. 완전 탐색을 하는 기준은 경우의수가 10만개 이하일때
시도해볼만하다고 하는데 아직 직관적으로 경우의수를 계산해내는건 조금 힘든 것 같다.

위 문제의 경우엔 길이가 1인 단어는 총 5개
길이가 2인 단어는 5*5니까 25개
이런식으로 계산하면

5^5 + 5^4 + 5^3 + 5^2 + 5^1 = 3905개이다.

완전탐색은 뭐랄까... 순열,조합은 해봤지만 문제를 풀려고하면 재귀의 벽에 막혀버린다.
이번엔 챗지피티님의 풀이를 따라가봤다.

문제를 해석하자면 이런데
이 모음 사전에는 A,E,I,O,U로만 구성되어 만들 수 있는 모든 단어가 수록되어 있다.

앞서 경우의수를 살펴봤으니 총 경우의수는 3905이며

A , AA , AAA , AAAA , AAAAA , AAAAE와 같은 순서로 구성되어있다.
단어가 주어지면 그 단어가 몇번째 단어인지를 리턴하는 문제다.

function generateWords(n, word, words) {
  if (n === 0) {
    words.push(word);
    return;
  }
  for (let i = 0; i < 5; i++) {
    generateWords(n - 1, word + ["A", "E", "I", "O", "U"][i], words);
  }
}

function solution(word) {
  let words = [];
  for (let i = 1; i <= 5; i++) {
    generateWords(i, "", words);
  }

  words.sort();

  let count = 0;
  for (let i = 0; i < words.length; i++) {
    count++;
    if (words[i] === word) {
      return count;
    }
  }
}

해결방식은 다음과 같습니다.

1. 가능한 모든 단어를 생성해주는 역할을 맡을 generateWords 함수를 선언한다.
generateWords 함수는 재귀적으로 동작하며 모든 경우의수를 반환한다.

2. 단 작은 문제가 있다. 저런식으로 코드를 짜면 문제의 요구처럼 단어가 구성되는게 아니라
길이 1인 경우, 길이2인 경우 , 길이3인경우 이런식으로 출력된다. 이를 정렬해줄 필요성이 있다.

3. sort()메서드를 이용해 배열을 문제요구대로 사전순으로 정렬한다.

4. 첫번째 반복문을 거치고 나면 words 배열에는 모든 경우의수가 담긴 배열이 존재하게된다!
이때 words 배열의 길이는 3905이다.
두번째 반복문에서는 count 값을 올려주면서 순차적으로 값을 찾아나간다.
내 생각엔 굳이 count 변수까지도 필요없고 그냥 i를 리턴하면될듯하다.

5. 만약 words의 i가 주어진 word와 같다면 카운트 값을 반환한다. 

 

처음에 sort()를 왜해주는거지??라고 생각하면서 콘솔을 찍어봤는데

sort()하기 이전의 상황을 찍어보니 동작이 납득이 되었다.

아무리 생각해도 generateWords 함수의 로직이라면 A AA AAA같은 순서로

찍힐수가 없는데??

 

정렬을 하기 전 words 배열의 상황이다.

내가 예상하는 동작과정이랑 일치해서 아 이래서 sort()가 필요했던거구나 납득하게되었다.

 

이제 대충 답을 봤으니까 챗지피티의 답을 이해하고 외워서 쳐보려고했다.

function solution(word) {
    let words = []
    
    function maker(n,word,words) {
        if(n === 0 ) {
            words.push(word)
            return
        }    
        for(i=0; i<5; i++) {
            maker(n-1, word + ['A','E','I','O','U'][i] , words)
        }
        
    }
    
    for(i=1; i<=5 ; i++) {
        maker(i, '', words)
    }
}

내가 생각하기에 이 코드는 전혀 문제가 없었다.

하지만 동작하지는 않았다. 왜일까..?

function solution(word) {
    let words = [];
    
    function maker(n, word, words) {
        if (n === 0) {
            words.push(word);
            return;
        }    
        for (let i = 0; i < 5; i++) {
            maker(n - 1, word + ['A', 'E', 'I', 'O', 'U'][i], words);
        }
    }
    
    for (let i = 1; i <= 5 ; i++) {
        maker(i, '', words);
    }
    
    return words.indexOf(word) + 1;
}

챗지피티는 해결책으로 이 코드를 제시해줬다.

둘의 차이가 뭔데..? 똑같은거 아냐..?라고 생각했는데

 

for문 안에서의 i는 let을 이용해 선언해주지 않으면 암묵적으로 "전역"변수로 선언된다는것이다.

따라서 내 윗 코드는 i가 전역으로 여겨지면서 변수가 오염되었고

그에 따라 의도치않은 현상이 발생한것이다. 엄...

평소에는 코드를 절차적으로 실행하다보니 문제가 된적이 없었는데

재귀함수를 이용하려고 할 때엔 큰 문제가 될 수 있구나...

앞으론 let i를 하는 습관을 들여야겠다..

 

그래서 다시 도움을 받아 수정한 풀이

똑같은 로직으로 짜여져있더라도 내 방식으로 쓴 코드가

나중에 읽었을때 내가 이해하기 더 쉽더라..

function solution(word) {
    let answer = []
    let aeiou = ['A','E','I','O','U']
    function maker(n,word,words) {
        if(n === 0 ) {
            words.push(word)
            return
        }    
        for(let i=0; i<5; i++) {
            maker(n-1, word + aeiou[i] , words)
        }
        
    }
    
    for(let i=1; i<=5 ; i++) {
        maker(i, '', answer)
    }
    
    answer.sort()
    
   for(let i=0 ; i<answer.length ;i++) {
       if(answer[i] === word) return i+1
   }
}

aeiou라는 변수를 만들어서 알파벳순서를 넣어줬고

count 변수를 만드는 대신 i값을 활용해서 답을 찾아줬다.

 

생각해보면 저 알파벳들은 어떤 순서로 들어있든 상관이 없구나 어차피 sort하니까

이제 이런식으로 좀만 더 해보면 완전탐색은 할 수 있을 것 같다는 근거없는 자신감이 솟구친다.

const solution = (word) => word.split('').reduce((acc, w, i) => acc + ['A', 'E', 'I', 'O', 'U'].indexOf(w) * (Math.pow(5, 5-i) - 1) / 4 + 1, 0);

그리고 저걸 한줄로 풀어보라하니 풀어버리는 챗지피티

haah...

---

😎 계산기 만들기 과제

전 기수가 만든 계산기를 봤는데 엄청 잘 만드는 사람들이 많았다.

깔끔하게 잘만들기는 포기하고
짱나게 만들기로 노선을 바꾸기로 결심함

---