1. 클로저

• 함수가 함수를 리턴하는 형태의 함수.
• 클로저의 맹점은 함수가 2개가 있는 형태에 있다. 외부의 함수에 변수를 설정하면, 내부의 함수에는 영향을 준다.
  이때, 내부 함수도 외부 함수에 선언된 변수를 가져와 쓸 수 있게 된다.
• 예시를 보자.

const sum = x => y => x + y; // 화살표 함수로 외부 함수와 내부함수를 만들고, 내부함수의 x와 내부함수의 y 를 더해주는 함수를 만들었다.
const sum3 = sum(3) // sum3을 선언해 먼저 sum에 x에 3을 넣어 준다.
sum3(2) // 5 
// 이후, sum3의 y를 2로 넣어주면, 위에 할당된 x = 3 덕분에 2가 더해진 5가 리턴된다.
sum3(5) // 8 
// 마찬가지로 위에 할당된 x = 3 덕분에 8이 리턴된다.

• 이처럼, 외부함수에 선언된 변수를 계속 사용할 수 있다.
• 클로저의 진정한 재사용성의 끝판왕은 아래의 예시로 볼 수 있다.

const count = () => {
    let value = 0; // value를 초기값을 0 으로 준다.

    return { // count 함수에 키로 데이터를 조작할 함수들을 만든다.
        plus: () => { 
            value = value + 1
        },
        minus: () => {
            value = value - 1
        },
        getValue: () => value
    }
}

const counter1 = count(); // 첫번째 계산할 데이터를 준다.
counter1.plus(); // vlaue === 1
counter1.plus(); // vlaue === 2
counter1.plus(); // vlaue === 3
counter1.getValue(); // vlaue === 3 리턴.

const counter2 = count(); // 두번째 계산할 데이터를 준다.
counter.plus(); // vlaue === 1
counter.minus(); // vlaue === 0
counter.plus(); // vlaue === 1
counter.getValue(); // vlaue === 1 리턴.

• 이러한 것을 '클로저 모듈 패턴'이라고 한다.
• 어떠한 수를 입력 받더라도, 외부 함수에서 정해준 변수를 계속 가져와 사용하기 때문에 가능하다!

2. 덤으로 보는 간단한 스코프

• 우리가 생각하는 그 스코프가 맞다. 영향을 주는 범위이다.
• 위의 클로저가 이미 스코프의 원리로 동작하기 때문에 모르면 사용할 수 없다.
• 가장 중요한 포인트는, 선언된 변수는 한 변수 안에서만 사용 가능하다.
• 하지만, 바깥쪽에서 선언된 변수는 안쪽 스코프가 또 있다면 사용이 가능하다.
• 스코프가 중첩이 가능하다고 생각하면 쉽다.

이때가지 배운 것들이 모두 딱딱 맞아 들어가는 느낌이다.
이제 무작정 사용하던 것에서 원리를 알고, 설명까지도 할 수 있을 정도의 단계가 되어 가고 있다.
활용과 응용을 더 연습해서 완전히 내 것으로 만들면 완벽하다!

1. flex로 설정된 콘텐츠를 정 가운데 정렬하기

• flex는 기준을 수직, 수평으로 잡는다고 생각하면 된다.
• 이때, 부모 셀렉터 안에 flex 속성을 넣어 주고, 내가 원하는 자식 셀렉터 안에 내부 속성을 정하게 된다.
• 위의 상황에서 내가 원하는 컨텐츠는 부모 셀렉터가 아까 자식 셀렉터인 셀렉터 안에 있게 된다.
• 그러므로 아까의 자식 셀렉터에 justify-content로 수평 정렬, align-items로 수직정렬을 해주면 가장 가운데에 콘텐츠가 자리하게 된다.

2. flex 의 세부속성

• flex는 세부 속성으로 아래의 3개를 가지고 있다.
• 'flex-조절을 원하는 세부속성: 수치'로 사용한다.
• flex는 화면의 사이즈에 따라 사이즈를 정하고, 화면이 작아지면 안의 콘텐츠도 작아진다.
  • basis : 선택된 아이템의 기본 크기를 정해준다.
    ( nth-child(원하는 번째의 아이템)을 사용하면 지정한 아이템만 사이즈를 설정할 수 있다. )
  • grow : 남은 여백을 가져간다.
    ( 어떤 박스 안에 아이템이 있을 경우, 그 박스를 가득 채우도록 여백을 가져간다는 의미이다.
    특정한 아이템을 지정하지 않으면 남은 여백을 똑같이 가져가고, 마찬가지로 nth-child로 설정하면
    원하는 아이템만 늘어나 여백을 채우게 될 것이다. 즉 비율로 움직인다. )
  • shirink : 만약, 화면보다 flex의 사이즈가 작아진다면, 콘텐츠의 사이즈도 작아질 것이다. 이때,shrink 를 이용하면, 화면이 작아져도 줄어들지 않고 컨텐츠가 사라진다. ( 수치를 0으로 정해주면 줄어들지 않는다. 수치를 늘려놓으면 그 비율만큼 줄어들 것이다. 이를 '줄어들 경우 영향을 받는다' 라고 생각한다면, 아이탬들 마다 shrink 값을 달리해서 화면이 줄어 들었을때 컨텐츠의 사이즈를 콘텐츠마다 다른 비율로 줄여 화면 안에서 내가 원하는 아이템은 줄어들지 않게 하고, 다른 아이템들은 줄여서 화면을 맞춰 줄 수 있다. )

3. 다양한 크기의 단위

• em : 현재 폰트 사이즈를 나타내는 단위. 부모의 폰트 사이즈를 곱한 값이 된다.
• rem (root em) : 최상위 요소인 html의 폰트 사이즈를 곱한 값이다.
• vh, vw (vertical height & vertical width) : 브라우저, 즉 내가 보고 있는 화면의 100 분의 1 단위.
• vmin, vmax : vh와 vw처럼 비율로 넓이와 높이의 최대치를 정해 준다.
• auto : 오토는 오토다!
• px : 그 작고 작은 화면 조각의 픽셀 하나를 뜻 한다.

1. 문제의 발단

언제나 문제가 많은 우분투였다. 아니나 다를까 블루투스가 아예 연결이 되지 않았다.
에어 팟을 사용하기 위해 구글링 했다.

2. Blueman 설치

• 블루투스 연결에 도움을 주는 프로그램이다.
• 아래의 내용을 터미널에 입력해 쉽게 설치하자
  sudo apt-get update
  sudo apt-get install blueman

3. Blueman 설정

• 바로 연결된다면 나이스하고 사용하면 된다.
• 연결이 안될경우, 연결하고 싶은 기기의 오른쪽 마우스를 눌러. Pair를 누른다.
• 그래도 안된다면, Pair 아래의 Set up의 Pairing의 설정을 Proceed Without Pairing으로 바꾼다.
• 그래도 그래도 안된다면, 기기의 이름에 띄어쓰기를 모두 없에면 된다는 말이 있다
  • 하지만 에어팟의 경우 연결이 안 되는 경우가 있었는데, 다른 기기들은 연결이 잘 되었다. 주파수 같은 게 다른 것 같다.

4. 에어팟 소리 설정

• 여기까지 해서 연결을 어떻게든 했다면 드디어 블루투스를 이용해 즐거운 코딩 생활을 즐기자.
• 하지만 에어팟을 이용한다면 소리를 아무리 크게 해도 개미 소리처럼 들릴 것이다.
• 해결은 이렇게 한다.

1. sudo systemctl edit --full bluetooth.service를 터미널에 입력
2. ExecStart=/usr/lib/bluetooth/bluetoothd 라고 적힌 줄을
3. ExecStart=/usr/lib/bluetooth/bluetoothd --noplugin=avrcp 이렇게 고치자.
4. 재부팅

• 출처 : https://jwcompute.tistory.com/entry/%EC%9A%B0%EB%B6%84%ED%88%AC-1904-%EC%97%90%EC%96%B4%ED%8C%9F-%EB%82%AE%EC%9D%80-%EB%B3%BC%EB%A5%A8-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

5. 아직도 에어팟 소리가 작아요!

• Setting에 들어간다.
• Sound 탭으로 간다.
• 가장 위의 System Volume에 Over-Amplification을 켜준다.
• 사운드를 100% 이상으로 올려서 더 크게 사용하면 된다.

노래와 함께 더 즐겁게 코딩하면 좋겠습니다!
혹시나 다른 방법이 있다면 계속 수정하겠습니다. 여러분은 어려운 우분투로 고통받지 마세요

1. countStr

• 문자열을 입력받아, 각 문자열의 요소를 키로, 그리고 문자열에서 반복되어 나온 횟수를 값으로 가지는 객체를 리턴.

function countStr(str) {
    let result = {}; // 빈 객체를 하나 만들어서 계산될 키와 값을 넣는다.
  for(let i = 0; i < str.length; i++) { // 반복문으로 입력받은 str 을 전부 돈다.
    if(result[str[i]] === undefined) { // 만약, str 의 요소가 result의 키로 없다면,
        result[str[i]] = 1; // 그것을 키로 넣고 값은 한번 반복되었으니 일단 1로 한다.
    } else {
      result[str[i]]++ // 요소가 반복되어 나오면 값을 올린다.
    }
  }
    return result; // 마지막으로 계산된 키와 값을 리턴시킨다.
}

2. objStr:count

• 위의 문제와 마찬가지로, str을 입력받아서, 가장 많이 입력된 문자 하나를 리턴

function objStrcount(str) {
  let result = { multStr: '', count: 0 } // 새로운 객체를 선언하여, 가장 많이 입력된 문자와 그것을 count 할 키와 값을 할당한다.
  for(let i = 0; i < str.length; i++) { // 입력 받은 문자열을 돌고 돌아
    if(result[str[i]] === undefined) { // 입력 받은 문자열이 result 에 키로 없다면,
      result[str[i]] = 0; // 키로 문자를 넣고, 값은 0으로 한다.
    }
    if(str[i] === ' ') { // 입력받은 문자에 띄어쓰기가 있을경우 무시한다.
      continue;
    }
    result[str[i]]++ // 입력 받은 문자열이 result 에 키로 있다면 값을 하나 늘려준다.
    if(result.count < result[str[i]]) { // count 와 입력받은 문자열의 값을 비교한다. 이때, count 보다 더 많이 반복 되었다면,
      result.multStr = str[i] // 가장 많이 나온 문자로 바꿔주고
      result.count = result[str[i]] // count 도 그 문자열의 반복된 횟수만큼으로 바꿔준다.
    } // 이는 반복문으로, 계속해서 입력받은 문자열 들을 돌게 되고, 그 안에서 또 더 많이 반복된 문자열이 있다면 다시 할당 될 것이다.
  }
    return result.multStr; // 마지막으로 가장 많이 나온 문자열 하나를 리턴.
}

조금 당황할 수 있지만, 그렇게 어렵지 않게 풀렸다.
다른 사람들은 모두 배열로 바꿔서 풀었다고 한다. 모두 한 배열에 넣고 배열 안의
문자를 count 하면 가능은 할 것이다. 하지만 매우매우 복잡하고 효율이 떨어질 것이다.
객체가 배열보다 조금 더 복잡하지만, 조금 더 연습하면 완벽히 다룰 수 있을 것이다.