[TDL] 07/18 Today's-Done-List

- 유데미 알고리즘 정렬

각 정렬의 성능 측정

/* 각 sort 성능측정 */

let max = 30000;
let arr = [];
for (let i = 0; i < max; i++) {
  arr.push(Math.random() * max);
}

function benchmark(arr, callback) {
  let start = Date.now();
  
  callback(arr);
  
  return Date.now() - start;
}

let array = [...arr];


console.log(benchmark(array,quickSort) + "ms") // 27ms
console.log(benchmark(array,mergeSort) + "ms") // 37ms
console.log(benchmark(array,insertionSort) + "ms") // 594ms
console.log(benchmark(array,selectionSort) + "ms") // 947ms
console.log(benchmark(array,bubbleSort ) + "ms") // 10099ms

이제까지 학습하면서 정리했던 로직의 성능을 측정해보았는데 결과는 위와 같다.
퀵 정렬 27ms > 병합 정렬 37ms > 삽입 정렬 594ms > 선택 정렬 947ms > 버블 정렬 10099ms
(위의 속도는 각 정렬을 위의 코드로 5번 돌려서 나온 가장 빠른 결과이다.)

---

기수 정렬 (Radix Sort)

알고리즘 성능 : O(nk)
n은 배열의 길이로, 정렬하려는 수의 개수이고 (length of array)
k는 이러한 수의 자릿수를 말한다. (number of digits)

/* 각 요소의 끝자리를 나타내는 함수 */
function getDigit(num, i) {
  console.log("getDigit", Math.floor(Math.abs(num) / Math.pow(10, i)) % 10)
  return Math.floor(Math.abs(num) / Math.pow(10, i)) % 10;
}

/* 각 요소의 자릿수를 세는 함수 */
function digitCount(num) {
  if (num === 0) return 1;
  return Math.floor(Math.log10(Math.abs(num))) + 1;
}

/* 자릿수가 가장 많은 수를 추출하는 함수 */
function mostDigits(nums) {
  let maxDigits = 0;
  for (let i = 0; i < nums.length; i++) {
    maxDigits = Math.max(maxDigits, digitCount(nums[i]));
  }
  return maxDigits;
}

function radixSort(nums) {
  let maxDigitCount = mostDigits(nums);
  for (let k = 0; k < maxDigitCount; k++) {
    let digitBuckets = Array.from({ length: 10}, () => []);
    for( let i = 0; i < nums.length; i++) {
      let digit = getDigit(nums[i],k);
      digitBuckets[digit].push(nums[i]);
    }
    nums = [].concat(...digitBuckets);
  }
  return nums;
}

radixSort([23,345,5467,2345,9852]);    // [23, 345, 2345, 5467, 9852]

주어진 위치의 숫자에 따라 버킷으로 분리한 다음, 새로운 목록이나 배열로 재구성하고, 모든 숫자의 다음 자리에 반복하며, 가장 큰 수의 모든 자릿수를 다룰 때까지 계속 진행한다.

---

- 취업지원제도 활동

이력서 첨삭받은 것 토대로 수정하고 지원하고 다시 수정하고 그러다 보니깐 생각보다 시간이 많이 소요됐음.

---

오후 회고 (만족도: 6)

오전에 일어나지 못해서, 목표가 계속 밀리는 중.. 체력이 너무 바닥인 건지 잠이 계속 쏟아진다ㅠ
그래서 집중도도 낮아진다... 큰일이다! 대책을 세워야 할 것 같다.

---

- 제로베이스 JS 강의 복습

저번에 리팩터링 했었던 계산기 부분이 조금 이상해서, 다른 방법으로 시도하였는데 잘 안됐다..
괜찮은 방법이 떠오르지 않아서, 주말에 다른 사람들의 코드를 보고 조금 더 고민해보는 시간을 가져야 할 것 같다.

---

- 제로베이스 React 강의 복습

react CRA 없이 환경 세팅 중 에러 난 거 해결

해당 url을 보고 에러를 해결하였음.

https://stackoverflow.com/questions/43494794/webpack-html-webpack-plugin-error-child-compilation-failed

Webpack, html-webpack-plugin, Error: Child compilation failed

---

- 제로베이스 코딩 테스트 리뷰

2주 전에 코테를 보았을 때 열심히 봤고 이제까지 중 제일 잘 봤었는데,
코테 설루션 코드가 제공돼서 오늘 리뷰를 보려 했는데, 프로그래머스에서 풀었던 문제를 볼 수도 없고 코드만 볼 수 있었다;
제공받은 설루션 폴더에서도 문제의 내용이 없고 제목들 밖에 없어서 어떤 게 어떤 것인지 알 수가 없는 상황ㅠ.ㅠ
다음 코테 볼 땐, 어느 정도 잘 풀어서 해당 코테의 리뷰가 하고 싶다면 문제를 다 적어놔야 될 것 같다 휴

---

- 유데미 클린 코드

전역 공간을 사용하지 말아야 하는 이유

- 전역 공간은 최상위 스코프 이기 때문에, 브라우저(window) / 노드 JS(global) 해당 공간을 침범하면 좋지 않다.
- 그 이유는 각 컴포넌트는 독립되어 있는 것이 재사용성과 안전성 등의 면에서 좋은데,
전역 공간에 변수를 생성하는 아래와 같은 경우 index.js에서도 index2.js에서도 모두 globalVar를 불러올 수 있다.

컴포넌트를 나눈다고 해서, 전역 공간도 스코프도 다 나뉘는 것이 아님. 큰 문제를 불러올 수 있으니 조심!!

---

따라서, 전역 공간을 더럽히면 좋지 않은 이유는
- 어디서나 접근 가능하다.
- 위험한 스코프 분리이다.

전역 공간을 사용하지 않는 방법
- 전역 변수를 생성하지 않는다.
- 지역 변수를 생성한다.
- window, global을 조작하지 않는다.
- const, let을 사용한다.
- 즉시 실행 함수, module, closure 등을 사용한다.

---

임시 변수를 제거해야 하는 이유
- 임시 변수를 사용할 경우 명령형으로 가득한 로직이 나온다.
- 디버깅이 힘들어진다.
- 추가적인 코드를 작성하고 싶은 유혹에 빠지기 쉽다.

임시 변수를 사용하지 않는 방법
- 함수들은 명확해야 하므로 함수 나누기
- 바로 반환
- 고차 함수 사용(map, filter, reduce)
- 선언형 프로그래밍으로 바꿔보는 연습.

---

함수 표현식을 지향하는 이유

var sum;

console.log(sum)

/*
ƒ sum() {
  return 1 + 2 + 3 + 4;
}
*/

function sum() {
  return 1 + 2;
}

function sum() {
  return 1 + 2 + 3;
}

function sum() {
  return 1 + 2 + 3 + 4;
}

위와 같이 변수 sum을 선언하고 sum의 이름으로 함수를 만들 경우, 호이 스팅 되어서 sum을 콘솔 찍어보면 변수가 아닌 함수가 나타나지는 것을 볼 수 있다.
이러한 호이스팅을 막기 위해서는 최상단의 변수에 선언과 동시에 할당을 해주어야 한다.

var sum = 100;

console.log(sum)  // 100

function sum() {
  return 1 + 2;
}

function sum() {
  return 1 + 2 + 3;
}

function sum() {
  return 1 + 2 + 3 + 4;
}

호이스팅은 런타임 시 선언이 최상단으로 끌어올려지는 것으로,
코드를 작성할 때 예측하지 못한 결과를 나타내기 때문에 프로그래밍에 안 좋은 영향을 가능성이 있다.

따라서, 보통 함수를 만들 때 const를 사용해서 만든 후 함수를 할당하는 방식이 좋다.

console.log(sum());    // Uncaught ReferenceError: Cannot access 'sum' before initialization

const sum = function() {
  return 10 + 10;
}

console.log(sum());    // 20

이러한 방식을 함수 표현식이라 한다.

---

저녁 회고 (만족도: 8)

저녁에는 목표들을 많이 건드려? 는데 생각한 것보다 제대로 할 수 있는 것이 없어서,
저녁 파트의 목표 중 할 수 있는 부분들은 모두 한 것 같음. 그래도 오랜만에 목표를 달성한 것 같아서 만족도는 8점 하겠다.
내일부터는 제발 제발 일찍 일어나자! 체력을 기르자!

---

[ 출처 : udemy 클린 코드 자바스크립트,
JavaScript 알고리즘 & 자료구조 마스터클래스 ]