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

1. box-sizing

• pading 과 margin, border 의 사이즈 때문에 width와 height 사이즈가 헷갈릴때 사용할 수 있다.
• content-box 가 기본값이며, border-box 로 속성을 설정하면 모든 영역(margin, pading border 전부 싹다!)이 다 포함 되어 진다.
• box-sizing: border-box; 로 사용하면 된다.

2. background 의 다양한 속성

• background-color : 색을 바꾼다.
• background-image : 이미지를 배경으로 사용한다.
  • url(경로); 를 사용해서 이미지를 불러오면 된다.
  • 이미지가 배경 배경의 크기보다 작을경우 바둑판 식으로 반복해서 나오게 된다. 이는 background-repeat 속성으로 수정하면 된다
• background-repeat : 배경 이미지를 반복시킨다.
  • 기본값은 repeat으로 되어 있다. no-repeat으로 바꿔서 반복해서 나오는 이미지를 하나로 만들어서 배경으로 쓸 수 있다.
• background-position : 초기 배경의 위치를 결정한다.
  • 기본값은 left top 이다. 그래서 이미를 배경으로 설정해 놓고, repeat을 없에면 좌상단에 배경이 하나 나오는 것을 알 수 있다.
• background-size : 배경 이미지의 사이즈를 설정한다.
  • background-size: 넓이 높이 로 사용할 수 있다. 위의 상황처럼 이미지를 배경으로 사용하고 반복을 없엔 후에,
    배경이 컨텐츠 사이즈 보다 작을때, 컨탠츠 사이즈 만큼의 크기를 설정해 주면 가득 찬 이미지로 배경을 얻을 수 있다.
  • 위의 조건을 간단하게 background-size: cover; 로 이미지를 늘려서 배경을 전부 덮어 줄 수 있다.
  • background-size: contain; 을 사용하면, 이미지 자체가 잘리지 않는 한도 내에서 배경의 사이즈를 설정한다.
• background: 세부 속성 : background는 하위 속성들을 정확한 값으로 정의만 해주면 위의 내용을 똑같이 사용할 수 있다.
  • Ex) background-color : brue; === background: brue; (이후 다른 세부속성을 계속 적어주면 된다)

3. float 과 clear

• float은 코드를 작성한 순서를 무시하고, float: 원하는 위치; 로 옮긴다.
• clear은 float을 제거하여 코드가 작성된 순서로 다시 위치를 돌린다.

4. position

• 요소의 위치 값을 바꿔준다.
• position: fixed; top: 원하는 높이; left 혹은 right; : 원하는 가로 위치; : 코드의 작성 순서와 상관없이 지정된 위치에 요소를 고정시킨다.
  • fixed로 고정을 시켜 놓으면, 스크롤를 아무리 움직여도 브라우저의 정해준 위치에서 벗어나지 않는다.
• position: sticky; : 코드의 작성순서에 따라 일단 배치한 후에, 스크롤이 되는 도중에 정해준 위치에 요소가 오면 붙어서 고정된다.
  • Ex) position: sticky; top: 0px => 다른 위치에 있던 요소가 유저가 스크롤을 하다가 브라우저의 최상단에 위치 하게 되면 그대로 붙어서 고정된다!

5. 선택자를 더 다양하게 활용해 보자.

• [원하는 선택자] 그 선택자만 선택해 골라진다.
  • Ex) [class=""name] 이후 속성을 적어주면 class 가 name 인 모든 class의 속성을 바꿔주게 될 것이다.
• 연산기호로 더 다양하게 활용 할 수 있다.
  • *="문자" => 지정한 문자가 이름에 들어가 있는 선택자만 고른다.
  • ^="문자" => 지장힌 문자로 시작하는 이름을 가진 선택자만 고른다.
  • $="문자" => 지정한 문자로 끝나는 이름을 가진 선택자만 고른다.
• 자손 결합자 : 선택자의 선택자를 선택한다.
  • Ex) body p {CSS 코드} => body안의 모든 p 요소를 선택한다.
  • Ex) body > span {CSS 코드} => body 바로 아래의 span 만 선택한다.
    • 만약, body안에 p안에 span이 있다면 선택 되지 않는다. 이럴때는 p > span이라고 해 줘야 한다.
• 형제 결합자 : 선택자의 선택자 형제요소들을 선택한다.
  • Ex) h1 ~ p {CSS코드} => h1과 같은 위치에 있는 모든 p 들을 선택한다.
  • Ex) h1 + p {CSS코드} => h1의 바로 뒤에 있는(첫번째 있는) p를 선택한다.
• 물론 조건만 만족하면 여러개의 요소를 선택도 할 수 있다.

6. 의사클래스

• 선택자에 추가하여, 특정한 상태가 되면 요소를 선택하겠다는 의미 이다.
• 즉, 기본일때 하나의 상태와 의사클래스가 들어가 있는 상태 두개의 상태를 CSS 코드로 작성 해 주어야 한다.
• 자주 사용하는 의사클래스
  • hover : 마우스 커서가 올라 갔을때 적용
    •  box-shadow: 가로, 세로, 색 => 입체감을 살리는 그림자를 만들 수 있다.
  • active : 활성화 상태가 되면 적용 (마우스를 누른다거나 하는 상황)
    • 선택자:active {transform: scale(0.9);} => 버튼이 눌리는 애니메이션을 간단히 만들 수 있다.
  • focus : 그 요소가 선택된 상태일때 적용 (input 에 text를 쓰기 위해 커서가 깜박이는 상태 같은 경우)
  • disabled : 요소를 사용불가능으로 만듬 (예를들어 휴대폰 인증 이후에 인증되었습니다. 같은 거 만들어 놓을때 사용하면 될 것 같다)
  • nth-child() : 그 요소의 형재들 중에 특정한 번째의 요소를 선택한다.
    • ()에는 원하는 번째의 숫자를 넣으면 되고, n을 넣어서 수식으로도 선택이 가능하다.
    • nth-child(2n) => 짝수번쨰에 있는 요소만 선택