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

- 제로베이스 알고리즘 정렬

병합 정렬 (Merge Sort)

- 하나의 배열을 두 개의 균등한 크기로 분할하고, 부분 정렬하며, 이를 다시 합하면서 전체를 정렬해가는 알고리즘
- 평균 시간 복잡도 : O(n log n)

function mergeSort (arr, compare) {
  if (arr.length === 1) return arr;
  
  let m = (arr.length / 2).toFixed(0);
  let left = mergeSort(arr.slice(0, m), compare);
  let right = mergeSort(arr.slice(m), compare);
  
  let i = 0,
    j = 0,
    k = 0;
  while (i < left.length && j < right.length) {
    arr[k++] = compare(left[i], right[j]) ?
                 right[j++] : left[i++];
  }
  while (i < left.length) arr[k++] = left[i++];
  while (j < right.length) arr[k++] = right[j++];
  
  return arr;
}

---

- 유데미 알고리즘 정렬

병합 정렬 (Merge Sort)

function merge(arr1, arr2) {
  let results = [];
  let i = 0;
  let j = 0;
  while (i < arr1.length && j < arr2.length) {
    if (arr2[j] > arr1[i]) {
      results.push(arr1[i]);
      i++;
    } else {
      results.push(arr2[j]);
      j++;
    }
  }
  while (i < arr1.length) {
    results.push(arr1[i]);
    i++;
  }
  while (j < arr2.length) {
    results.push(arr2[j]);
    j++;
  }
  return results;
}

function mergeSort(arr) {
  if(arr.length <= 1) return arr;
  let mid = Math.floor(arr.length/2);
  let left = mergeSort(arr.slice(0,mid));
  let right = mergeSort(arr.slice(mid));
  return merge(left, right);
}


mergeSort([100,54,37,134,11,1,2,3,4,5,6]); // [1, 2, 3, 4, 5, 6, 11, 37, 54, 100, 134]

 

---

오전 회고 (만족도: 5)

더더 일찍 일어나기!!

---

- 제로베이스 part1 미션 리뷰

미션 1 리뷰 -

1. 상태 저장은 unmount시에 한 번만 되도록.

localstorage에 toggle이 오픈되어있을 경우 true를 주고, 닫혀있을 경우 close로 상태 값을 저장했다.
그래서 토글을 열고 새로고침 또는 재렌더링 됐을 경우, 로컬에 저장되어 있는 상태 값을 건네주어 이전 상태를 그대로 구현해주는 로직을 작성했었는데,
멘토님께서 pagehide 또는 beforeunload를 사용해서 상태값을 unmount 되는 시점에 한 번만 저장하면 더 좋을 것 같다고 리뷰를 해주셔서 리팩터링을 해보았다.

간단하지만, 유용한 리팩토링이었다.
그전에는 내가 토글 버튼을 누를 때마다 로컬에 true, false의 상태 값이 계속 저장되어 쓸데없는 메모리 낭비?를 했을 텐데,
beforeunload 이벤트를 적용해줌으로써, 사용자가 현재 페이지를 떠나 다른 페이지로 이동하려 할 때나 창을 닫으려고 할 때 또는 새로고침을 하는 시점 즉 unmount 될 경우에만 작동이 되어, 쓸데없는 메모리 낭비를 줄일 수 있게 되었다.


2. DOMContentLoaded Vs load

멘토님께서 내가 사용성 위해서 최대한 늦게 visibility의 상태를 해제하기 위해서 DOMContenLoaded 함수를 사용한 것으로 보인다고 말씀해주셨는데, 부끄럽게도 그러한 생각을 하지 못하고 그냥 load 하기 위해 사용하였다...
그래서 DOMContentLoaded 이벤트에 대해 공부하던 중, load와 그 외에 다른 HTML 문서의 생명주기 관련 이벤트들이 있는 것을 확인하여 그것에 대해 정리하다 보니,
DOMContentLoaded를 사용하는 것보다 load를 사용하는 것이 더 맞을 것 같다는 생각이 들었다.
화면상으로는, DOMContentLoaded 또는 load를 사용해도 달라지는 것이 없어서 확신을 내릴 순 없지만
아무래도, visibility의 상태를 체크하기 위해서는 이미지 파일(<img>)이나 스타일 시트 등의 로드를 기다리지 않는 DOMContentLoaded보다, 모든 자원을 로드했을 때 이벤트를 불러오는 load를 적용하는 것이 더 맞다고 생각이 든다.
그래서 이 부분 또한 리팩터링 하여 DOMContentLoaded 이벤트를 load로 수정하였다.

https://ko.javascript.info/onload-ondomcontentloaded
https://www.youtube.com/watch?v=yIjrdQDRCuk

DOMContentLoaded, load, beforeunload, unload 이벤트

---

미션 3 리뷰 -

1. 마우스 이벤트들을 함수형으로 바인딩.

미션 3에선 마우스 이벤트들을 함수형으로 바인딩하라고 조언해주셔서, 그 부분에 대해 리팩터링을 진행해보겠다.

이벤트 바인딩이란?
이벤트를 적용할 DOM요소와 핸들러 함수를 연결해주는 것.

이벤트 바인딩의 3가지 방법

1) HTML 속성 할당
HTML중간에 JS로직이 포함되어 있어서 코드량과 가독성에 안 좋기 때문에, 가장 비선호되는 방법이다.

<button onclick="alert("클릭!")">버튼</button>

 

2) DOM 프로퍼티
DOM을 선택한 후, 해당 프로퍼티로 핸들러 함수를 할당하는 방법이다.
가독성은 나아졌지만, 1번과 2번의 단점은 복수 핸들러를 할당할 수 없다는 것이다.

<button class="click-btn">버튼</button>

document.queryselector(".click-btn").onclick = function() {
  alert("클릭");
}

 

3) addEventListener
JS의 대표적인 바인딩이며, 인자로 이벤트와 핸들러를 각각 넣어준다.
element.addEventListener(event, function, [options])

<button class="click-btn">버튼</button>

document.queryselector(".click-btn").addEventListener("click", handleClick);

function handleClick() {
  alert("클릭");
}

---

미션 4 리뷰 -

1. 캘린더의 날짜를 선택하면 캘린더가 닫히도록 해보자.

const closeByClickCalendar = (e) => {
		if (e.target.className === "other-day" || e.target.className === "today") {
			$calendar.classList.remove("active");
		}
	};

캘린더에서 클래스명 other-day와 today가 이번 달의 날짜들이기에,
해당 클래스 네임들을 선택할 경우, active로 열려있던 달력이 닫히도록 구현하였다.

 

---

미션 5 리뷰 -

1. 무한대로 생성되는 로딩을 예외 처리해보자.

위의 gif같이 현재 내가 구현한 무한 스크롤 news가 이런 상태였다.. 이렇게 제출했다고라? 흐미
조금 변명을 하자면 그때 시골을 가게 되어서 마지막에 대충 해서 제출하였다..^^
코드를 보는데, 스크롤을 내리는만큼 로딩 이미지가 늘어나기 때문에 조금 바꿔서 될 부분이 아닌 것 같고, 시간이 조금 더 필요할 것 같다. 주말 안에 해보자.

2. navigation을 클릭했을 때 page를 초기화하고 리스트를 재렌더링

이 부분은 과제 당시에 내가 구현하지 못했던 부분이다.
모범 코드를 참고하여, 주말 안으로 구현해보자.

---

- udemy 클린 코드 강의

- 클린 코드에 대해 고민하기
- 타인이 정의한 답을 의심하자
- 배움에 열린 태도를 가지자
- 직접 생각하고 또 고민하자
- 클린 코드가 무엇인지를 자바스크립트를 통해 학습하자
- 흔히 알려진 자바스크립트 코드 스타일에 대한 견해를 탐구하자

---

저녁 회고 (만족도: 7)

기존의 목표는 달성하지 못하였지만, 그래도 수정된 저녁파트 목표는 달성하였다.
또한 집중도 괜찮았어서 7점 하겠다.

---

[ 출처 :
제로베이스 자료구조 / 알고리즘 (JS ver.)
유데미 JavaScript 알고리즘 & 자료구조 마스터클래스 ]