1. getElementsLessThan100AtProperty

• lessThan100 함수는 number 를 인자로 받으며 number < 100 을 리턴한다.
• getElementsLessThan100AtProperty 함수는 인자로 obj(객체) 와 property(string) 을 받는다.
• 이때, obj의 키가 property 와 같으면, 그 중 number 타입의 요소만 getElementsLessThan100AtProperty 함수를
  사용하여 배열로 리턴해야 한다.

function lessThan100(number) {
  if(typeof(number) === 'number') { // number 라고 했다고, 모두 number 타입만 나오는 것은 아니기 때문에 타입이 number인 조건을 넣는다.
    return number < 100;
  }
}
function getElementsLessThan100AtProperty(obj, property) {
  if(!Array.isArray(obj[property])) { // 배열만을 리턴해야 하기 때문에, 배열이 아닌 경우는 제외한다.
    return [];
  } else {
    let result = obj[property].filter(lessThan100) // filter 로 obj 중에 키가 property 인 것 중에, lessThan100 함수를 사용한다.
    return result;
  }
}

• 처음에는 obj의 키를 얻어 내기 위해 닷 노테이션을 사용했지만 변수로 property 를 비교 해야 하기 때문에 브라켓 노테이션으로 바꿨다.
• 이후, lessThan100 함수에서 타입이 맞지 않는 경우를 제외 하기 위해 number 타입이 아니면 빼버렸다.
• 실행 결과를 계속 실행해 가면서 점점 상황을 줄여 나가서 풀 수 있었다.

1. pipe

• 입력되는 함수가 많다. 이 함수들을 입력받아서 차례대로 결합된 함수를 다시 리턴해야 한다.
• 각 함수는 number를 입력받아서 number을 다시 리턴한다.
• 함수는 1개 이상이고, 함수가 아닌 입력은 없다.

function pipe(...funcs) { // 입력되는 함수의 수가 많다고 하였을떄, 모두를 가져오기 위해 spread를 사용 한다.
  return function sum(num) { // 다시 함수를 리턴해야 하니 함수를 선언하고 인자를 num으로 받는다.
    let result = num; // 이때, 받는 인자를 result 에 할당하고
    for(let func of funcs) { // 반복문과 of 를 통해 모든 함수를 돌면서
      result = func(result); // 모든 함수들에 인자를 넣어 처리해 준다.
   } return result; // 모든 처리가 끝난 결과를 리턴한다.
 }
}

• spread로 함수를 가져와서 각각의 함수에 모두 같은 인자를 주기 위해 for of를 쓸 수 있는 것이 포인트이다.
• 조금 더 데이터들을 가져올 때를 주의해서 생각해야 한다.

2. getIndex

• 인자로 넘버 타입을 가진 arr와 num를 받아, arr에 num를 추가하고, 이를 순서대로 정렬해서 추가한 num의 인덱스를 리턴해야 한다.
• 반복문과 sort와 indexOf는 사용금지이다.

// 첫번째 시도 => reduce 를 이용해 정렬해서 num의 인덱스를 리턴한다.
function getIndex(arr, num) {
  arr.push(num); // arr에 num를 넣는다.
  arr.reduce((acc, cur) => {
    if(Number(cur) > Number(acc)) { // cur과 acc를 비교해서
      arr.push(cur) // 보다 크면 뒤로 붙이고
    } else {
      arr.unshift(cur) // 작거나 같으면 앞으로 붙인다.
    }
  })
  return arr.indexOf(num) // index를 리턴.
}

• 물론 처참히 실패.
• 먼저 indexOf를 사용했기 때문에 실패이다.
• 그리고 나오는 값은 reduce 함수를 실행될 때 첫 번째 요소가 각 요소들과 전부 비교하게 된다. 그래서 배열이 엄청 늘어난다.
• reduce로는 해결하기 복잡할 것 같아서 map으로 배열을 정렬할 수는 없을까?라는 생각을 하였다.
• 하지만 다른 방법으로는 배열을 정렬시킬 수는 없을 것 같아서 생각을 바꿔보았다.
• num 가 배열에 들어가는 것이 아니라, arr 안의 모든 수들을 num와 비교하여,
  arr의 요소 중에 num 보다 작은 수가 있을 때마다 count를 올리면 index와 같다고 생각했다.

function getIndex(arr, num) {
let count = 0; // index 를 계산 해 줄 count를 선언하고 0을 할당한다.
arr.push(num); // 먼저 arr에 num를 넣는다.
arr.filter((arr) => { // filter 로 arr의 요소들을 하나하나 비교 한다.
  if(arr < num) { //  num 보다 작다면
    count++ // count를 올린다.
  }
})
return count; // count는 num 의 인덱스와 같으니 리턴한다.
}

• 해결!
• 꼭 map이나 filter, reduce로 배열을 바꿔서 조작하는 것이 아닌, 데이터를 가공해서 필요한 정보만을 가지고 올 수 있어야 한다.

1. 자꾸 틀려서 찾아본 git commit message 수정하는 법

• 로컬 레파지토리에 있을 경우 (push 이전)
  1. 가장 마지막에 commit 한 내용을 수정할 수 있다. => git commit --amend
  2. 그것보다 더 이전 혹은, 한번에 여러 가지를 수정할 때
     • git log 를 이용해 모든 commit 내역을 확인한다.
     • git rebase -i HEAD~위에서부터 확인하고 싶은 커밋의 개수를 이용해 커밋을 확인한다.
     • 수정하고 싶은 커밋의 pick을 reword로 바꾼다. 이후 저장하면, 각각 수정할 수 있는 창을 볼 수 있다.
     • 다시 git log 로 수정된 것을 확인하면 끝
• 리모트 레파지토리에 있을 경우 (push 이후)
  • 로컬 레파지토리에서 commit message를 위의 방법 을로 수정한 후, git push --force 브랜치 이름
  주의! : 이는 보다싶이 강제로 다시 수정하는 방법이므로 만약, 함께 작업하고 있는 경우라면 커밋의 로그가 다 깨진다. 수동으로 맞춰주면 되긴 하나, 팀원들의 원성을 들을 수 있다. 그냥 push 할 때 주의하자... 흑흑

2. Spread Operator

• 선언된 변수( array)의 모든 요소들을 가져온다.

var num = [1, 2, 3];
var newNum = [...num, 4, 5, 6];
console.log(newNum) // [1, 2, 3, 4, 5, 6]

• 함수에도 사용 가능하다!

function plusNum(x, y, z) {
    console.log(x + y + z)
}
var arr = [0, 1 ,2];
plusNum(...arr); // 3 => 만약 arr 가  [0, 1, 2, 3] 이라면? 마지막 3은 무시된다! plusNum의 인자로 3개 만 받기 때문이다.

• spread는 배열을 '복사' 도 할 수 있다. 마치 slice와 같다. 응용하면, 복제 해 놓고 데이터를 한 곳만 바꿔서 간단하게 수정된 데이터를 얻을 수 도 있다.
• concat으로 합쳐준 배열 2개와 spread를 배열 안에 2개의 배열을 넣는 것은 같은 효과이다.

var arr1 = [1, 2, 3]
var arr2 = [4, 5, 6]
arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
arr1 = [...arr1, ...arr2] // [1, 2, 3, 4, 5, 6] 물론 두개의 spread 사이에 다른 데이터를 넣어줘도 상관없다.

• 함수를 인자로 받을 때도 사용이 가능하다. map과 함께 사용하면 매우 유용하다.

.1 버튼에 쓸 수 있는 CSS

button:hover {
  background-color: #fff385;
  color: black;
  box-shadow: 2px 2px 5px gray;
}
/* 마우스를 올렸을때 줄 수 있는 효과. 위의 경우 색을 바꿔주고, 그림자를 줘서 버튼 느끼을 살린다. */

button:active {
  transform: scale(0.9);
}
/* 버튼을 눌렀을 때 줄 수 있는 효과. 크기를 조금 작게 만들어서 눌리는 듯한 느낌을 준다. */

• 위의 예시처럼 버튼에 3D 느낌의 애니메이션 효과를 줄 수 있다.

폰트는 nanumsquare 이 깔끔하고 좋은것 같다. 하지만 많이 얇다. bold와 함깨라면 문제 없다.
계산기 기능 구연을 완벽하게 하려다가 다른 공부를 많이 하지 못 했다. 뭔가 많이 중간에 꼬인 느낌이다.
사이드 이펙트가 굉장히 많은 것 같다.
(결과 버튼을 계속 누른다거나...
연산자 버튼 이후 다시 숫자를 나오게 하는 부분이라거나...)
내일 다시 하나씩 처리해 볼 생각이다.