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

- 유데미 알고리즘 버블 정렬, 선택 정렬

어제 제로베이스에서 학습한 버블 정렬, 선택 정렬을 udemy 강의와 Hello coding 알고리즘 책으로 복습.

---

Hello coding 그림으로 이해하는 알고리즘

선택 정렬의 예 :
컴퓨터에 음악이 가수 별로 몇 곡이 들었는지 기록되어 있는 목록이 있다고 가정했을 때,
이 목록을 가장 많이 들은 것부터 가장 적게 들은 것 순서로 정렬하여 가장 좋아하는 가수의 순위를 알고 싶을 경우
선택 정렬을 사용할 수 있다.
즉, 배열을 작은 정수에서 큰 정수 순서로 정렬할 때 또는 그 반대.선택 정렬을 매번 실행할 때마다 n개의 항목을 모두 점검할 필요는 없다.
처음에는 n개의 항목을 점검하지만 다음에는 n-1, n-2..., 2, 1로 줄어든다. 평균적으로는 1/2 x n 개의 항목을 점검한다.
실행 시간은 O(n x 1/2 x n)이 된다. 하지만 빅오 표기법에서 1/2과 같은 상수항은 무시한다.
그래서 O(n x n), 즉 O(n²)가 되는 것.

선택 정렬은 깔끔한 알고리즘이지만 빠르지 않다.
퀵 정렬은 O(n log n) 시간밖에 걸리지 않는 더 빠른 정렬이다.

---

Udemy JavaScript 알고리즘 & 자료구조

어제 제로베이스에서 배운 버블 정렬의 swap 함수를 ES2015 버전으로 작성해보자.

/* ES5 */
function swap(arr, idx1, idx2) {
    let temp = arr[idx1];
    arr[idx1] = arr[idx2];
    arr[idx2] = temp;
}

/* ES2015 */
const swap = (arr, idx1, idx2) => {
    [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];
}

 

/* Zerobase bubbleSort */
function swap (arr, idx1, idx2) {
    let tmp = arr[idx1];
    arr[idx1] = arr[idx2];
    arr[idx2] = tmp;
}

function bubbleSort (arr) {
  for (let i = 0; i < arr.length -1; i++){
    for(let j = 0; j < arr.length -i -1; j++){
      if(arr[j] > arr[j + 1]){
        swap(arr, j, j+1);
      }
    }
  }
  return arr
}


/* Udemy bubbleSort */
function bubbleSort (arr) {
  const swap = (arr, idx1, idx2) => {
    [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];
  };
  
  for(let i = arr.length; i > 0; i--){
    for(let j = 0; j < i - 1; j++) {
      if(arr[j] > arr[j + 1]) {
        swap(arr, j, j + 1);
      }
    }
  }
  return arr;
}

 

버블 정렬 최적화

만약 모든 정렬이 다 끝나기 전에 정렬이 모두 완성되었는데, 계속 정렬이 실행된다면 엄청난 낭비이다.
그러므로 나머지 정렬은 실행되지 않도록 반복문을 break 해주자.

function swap (arr, idx1, idx2) {
  let temp = arr[idx1];
  arr[idx1] = arr[idx2];
  arr[idx2] = temp;
}

function bubbleSort (arr) {
  let noSwaps;
  for(let i = arr.length; i > 0; i--){
    noSwpas = true;
    for(let j = 0; j < i - 1; j++) {
      if(arr[j] > arr[j + 1]) {
        swap(arr, j, j+1);
        noSwpas = false;
      }
    }
    if(noSwpas) break;
  }
  return arr;
}

---

https://www.toptal.com/developers/sorting-algorithms

Sorting Algorithms Animations

https://visualgo.net/en/sorting

Sorting (Bubble, Selection, Insertion, Merge, Quick, Counting, Radix) - VisuAlgo

---

오전 회고 (만족도: 5)

늦게 와서 오후 타임까지 밀렸음.. 만족도 5

---

- 제로베이스 JS 강의

카카오 지도 API를 연동한 지도 서비스

카카오 지도 api를 사용하여 서버 또는 검색창이 없는 그냥 지도 구현하는 프로젝트임으로 임의로 3곳의 mock data를 넣었다. 초기화 설정한 위도, 경도의 지도 정보를 얻어오고, 해당 data의 위치와 마커를 표시하고, zoom-in과 zoom-out을 컨트롤할 수 있는 버튼을 생성하였음.
또한, 현재 내 위치를 조회할 수 있는 버튼을 생성하여, 나의 위치를 알 수 있는 기능을 구현하였다.
또, 위치 정보를 수락하지 않을 경우 alert으로 에러 처리를 하였다.
현 위치 조회하기 기능도 잘 작동하는데, 내 위치가 보이기 때문에 이미지에 담진 못했다ㅎ.ㅎ

이번 프로젝트를 해보면서 어제 어떤 토이 프로젝트를 하면 좋을지 생각했던 것이 떠올랐음.
지도 api를 사용해서 핫플 리뷰 사이트를 구현해보면 좋을 것 같다는 생각을 하였다.
조만간 대략적인 구성을 하여, 조금씩이라도 만들어보면 좋을 것 같다.

---

오후 회고 스터디 (만족도 : 6)

스스로 구현해볼 때, 사람인지라 답지가 있으니까 계속 보게 된다ㅠ 조금 더 고민하는 습관을 기르자.
그래야 내 것으로 만들 수 있다. 그래도 예전보다는 많이 좋아졌지만 (남의 코드 읽고 이해하는 부분이나, 스스로 조금 더 찾아보려고 노력하는 부분에서) 아직 멀었다! 조금 더 깊게 고민해보고, 스스로 학습해보자.

---

- 제로베이스 react 이론 강의

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

---

react에서 hook이 만들어지게 된 이유

 

- class는 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.

 

 

- 복잡한 컴포넌트들은 이해하기 어렵다.

- Class은 사람과 기계를 혼동시킵니다.

• React에서의 Class 사용을 위해서는 JavaScript의 this 키워드가 어떻게 작동하는지 알아야만 한다.
• 또한 class의 사용을 위해 이벤트 핸들러가 등록되는 방법을 정확히 파악해야 했으며,
  이는 불안정한 문법 제안들의 도움이 없을 시엔, 코드를 매우 장황하게 만들었다.
• 이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 제시한다.
  개념적으로 React 컴포넌트는 항상 함수에 더 가깝다.
  Hook은 React의 정신을 희생하지 않고 함수의 사용을 권장한다.
  

---

저녁 회고 스터디 (만족도 : 6)

오늘 집중이 너무 안됐다.. 매번 늦게 오는 바람에 할 일이 미뤄져서 저녁 목표는 대부분 못하는 것 같다;
하루에 30분씩 일찍 오는 연습을 해보자! 그러면 다음 주엔 일찍 오겠지~

---