2번째 리팩터링 하면서 느낀점

scrollGotoTop

  • 스크롤 깊이와 스로틀 딜레이와 같은 정해진 숫자는 상수이므로, 가독성을 높이기 위해 대문자로 네이밍해주었다.
    • 은닉해야할 정보가 없기 때문에 클로저로 만들어줄 필요가 없다.

counter

  • 리팩터링 전 코드에서는 생성자 함수로 만들어서 인스턴스를 생성하여 클로저를 구현하였다
    • 하지만 이 방식은 불필요한 인스턴스 생성을 한다는 생각이 들었다.
    • 리팩토링한 코드는 즉시 실행 함수로 감싸서 변수 할당 같이 한번만 실행해도 되는 것들은 한 번만 실행되도록 만들어주었고, 내부의 데이터에 유일하게 접근할 수 있는 해당 함수를 return 해주어 데이터를 은닉해주었다.
    • counter에 관련된(해당 기능에만 사용되는) 데이터들과 함수들을 한데 묶어줘 응집도를 높여주었다
1
2
3
4
5
6
7
8
//document.body.addEventListener('click', e => {
//  if (!e.target.matches('button')) return;

//  e.target.matches('.increase') ? counter.increase() : counter.decrease();
//});

document.querySelector(".increase").addEventListener("click", counter.increase);
document.querySelector(".decrease").addEventListener("click", counter.decrease);
  • 증가, 감소 버튼을 이벤트 위임으로 작성해보았다. 이럴 경우 이벤트 핸들러 등록 갯수가 줄어들어 증감 버튼에 대한 로직을 한곳에서 관리할 수 있고 각각의 이벤트 마다 이벤트 핸들러를 등록하지 않아도 된다는 장점이 있다고 생각했다.
    • 하지만, 이벤트 위임의 경우 각 버튼이 다른 기능을 해야하는 경우라면 이벤트가 발생한 요소에 대한 조건문이 많아지고 그에 따라 코드가 복잡해질 수 있으므로 이벤트 위임 대신 각 요소에 이벤트 핸들러를 등록하는 방법으로 선택하였다.

isPalindrome

  • 문자열을 배열로 만들어 주는 경우 str.split('') 를 사용하는 것보단 문자열이 이터러블 요소인 것을 감안하여 스프레드 문법([…string])을 사용하였다.
    • 메서드를 사용하기위해 알아야 할 것들이 많은데 스프레드 문법은 알아야할 정보가 적어 코드의 이해성을 높일 수 있다.
1
2
3
4
5
//$result.textContent = isPalindrome(value) ? `"${value}" is a palindrome` : `"${value}" is not a palindrome`

$result.textContent = `"${value}" is ${
  isPalindrome(value) ? "" : "not"
} a palindrome`;
  • 중복이 아닌 부분만 삼항 연산자를 이용하여 중복을 줄였다.
  • innerHTML 대신 textContent를 사용한 이유는 해당 요소에 할당한 값이 text 요소로만 이루어져 있기 때문이다.
    • innerText는 숨겨진 텍스트는 무시하고 사용자에게 보여지는 text만 가져올 수 있기 때문에 원하지 않는 오류가 발생할 수 있다. 내부에 특별히 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않다.

DarkMode

1
2
3
4
5
// +getComputedStyle(document.querySelector(':root')).getPropertyValue('--transition-duration')

+getComputedStyle(document.documentElement).getPropertyValue(
  "--transition-duration"
);
  • :root 에 존재하는 사용자 정의 변수를 가지고 올 경우에는 document.documentElement로 접근해야 한다.
    • document.querySelector(':root') 도 가능하지만 querySelector 메서드를 사용하는 것보다 프로퍼티를 접근하는 것이 더 효율적이므로 판단하여 사용하자.
1
const getCurrentMode = () => JSON.parse(localStorage.getItem("isDark"));
  • 로컬스토리지에 정보를 저장할 때 문자열로 저장되기 때문에 이를 getter 함수로 가져올 때 문자열 ‘true’ 값을 boolean 값으로 받기 위해 JSON.parse() 메서드를 사용하였다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// const setCurrentMode = selectedMode => {
//    localStorage.setItem('isDark', selectedMode);
//    toggleMode();
// };

init() {
   // localStorage.getItem('isDark') === null ? setCurrentMode(userTheme) : toggleMode();
   localStorage.setItem('isDark', localStorage.getItem('isDark') ?? userTheme);
   toggleMode();
},
toggle() {
   localStorage.setItem('isDark', !getCurrentMode());
   toggleMode();
}
  • 기존에는 삼항연산자를 사용하였지만, 초기값이 없는 null 상태일 때 null 병합 연산자를 사용하여 초기값을 할당함으로써 함수를 줄일 수 있었다. 또한, setCurrentMode 함수가 필요없으므로 함수를 제거하여 코드의 이해성과 가독성을 높였다.
1
2
3
window.addEventListener("DOMContentLoaded", setDarkMode.init);

window.addEventListener("load", setDarkMode.preventBlink);
  • 렌더링 되는 시점이 다르면 다른 역할을 하는 함수로 판단한다.

popupModal

  • 변수를 사용한 이유는 단지 코드의 중복때문만이 아니라 이벤트가 발생할 때마다 호출될 필요가 없는 함수의 반환값을 변수에 저장하여 사용하기 위함이다.
  • 특정 목적을 위해서 밀접하게 연관된 기능들을 한데 모아 관리하면 해당 함수에 대한 이해도가 증가하게 되고 이는 유지보수성을 높이는데 도움이 된다. 또한 코드의 재사용성도 증가하는 장점도 있어 응집도를 높이는 구조로 코드를 설계하였습니다. 응집도를 높인 코드를 짜면서 정보를 안전하게 다룰 수 있도록 클로저를 구현하였습니다.
  • 요구사항에 맞게 Enter키 입력과 OK버튼 클릭시 중복을 줄이는 코드를 작성하기 위해서 이들을 form 태그로 감싸주었고 ‘submit’ 이벤트 타입으로 이벤트 핸들러를 등록하였습니다. cancel 버튼도 연관성을 위해 form 태그 안에 추가하였는데, cancel 버튼은 기본타입을 버튼으로 변경하여 submit 이벤트가 발생하지 않도록 하였습니다.
  • is-open 클래스를 이용하여 모달창을 보여주고 사라지도록 구현하였습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const popupModal = (() => {
  const $modalContainer = document.querySelector(".modal-container");
  const $modal = document.querySelector(".modal");
  const $popupMessage = document.querySelector(".popup-message");

  return {
    toggle() {
      $modal.classList.toggle("is-open");
      $modalContainer.classList.toggle("background-gray");
    },
    //    remove() {
    //      $modal.classList.remove('is-open');
    //      $modalContainer.classList.remove('background-gray');
    //   },
    render(e) {
      e.preventDefault();
      $popupMessage.textContent = `from popup : ${e.target.firstElementChild.value}`;
      popupModal.toggle();
    },
  };
})();

document
  .querySelector(".popup-form")
  .addEventListener("submit", popupModal.render);
document.querySelector(".modal").addEventListener("click", (e) => {
  if (!e.target.matches(".is-close")) return;

  // popupModal.remove()
  popupModal.toggle();
});

document.querySelector(".modal-container").addEventListener("click", (e) => {
  if (!e.target.matches(".modal-container")) return;

  // popupModal.remove()
  popupModal.toggle();
});
  • e ⇒ {popupModal.render(e)} === popupModal 인수 전달안해줘도 event 객체 첫번째 인수로 넘어간다. 축약형
  • toggle 메서드를 사용하여 remove 메서드가 필요없어지므로 제거하였다.

stopWatch

  • 동일한 버튼을 구분할 때 textContent가 Start인지 Stop인지로 판단하는 것은 매우 좋지 않은 방식이므로, isStarted라는 현재 상태(시작/정지)를 판단하는 변수를 사용하였습니다.
  • leftButton / rightButton , laps/ title은 동일한 클래스를 가져 querySelectAll로 불러와서 인덱스 값으로 접근하는 것이 아닌 배열 디스트럭처링 할당으로 식별자를 할당해주었습니다.
    • 리팩터링 이후 이벤트 핸들러를 위한 leftButton, rightButton만 querySelectorAll로 받아오고 lap,title은 내부적으로 해결하였다.
  • 스톱워치내에서 관리해야할 데이터(isStarted, elapsedTime, timerId)를 하나의 객체에 담았다.
    • isStarted : 스톱워치가 시작되었는지 여부 (true / false)
    • elapsedTime : Start 버튼을 누르고 경과된 시간
      (setInterval의 delay마다 값이 증가하며, 이를 convertTime 함수를 통해 display에 표시한다.)
    • timerId : setInterval 함수의 리턴값을 가지며 clearInterval 함수와 함께 stop 기능을 구현하였다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const convertTime = (time) => {
  const minutes =
    Math.floor(time / 6000) < 10
      ? `0${Math.floor(time / 6000)}`
      : `${Math.floor(time / 6000)}`;
  const seconds =
    Math.floor((time % 6000) / 100) < 10
      ? `0${Math.floor((time % 6000) / 100)}`
      : `${Math.floor((time % 6000) / 100)}`;
  const ms =
    Math.floor(time % 6000) % 100 < 10
      ? `0${Math.floor(time % 6000) % 100}`
      : `${Math.floor(time % 6000) % 100}`;

  return `${minutes}:${seconds}:${ms}`;
};
  • convert 함수는 display에 보여질 시간으로 변환하고 그 값을 문자열로 리턴한다.
1
2
// $laps.children.length
$laps.childElementCount;
  • 리팩터링 전에는 자식노드의 갯수를 알기 위해서 자식노드(children)로 접근한 다음 길이(length)로 접근하여 값을 얻었지만, childElementCount라는 프로퍼티를 이용하여 한 번에 값을 얻을 수 있었다.
1
$laps.insertAdjacentHTML("beforeend", newLap);
  • 리팩터링 전에는 laps를 배열로 관리하여 이를 innerHTML으로 하나가 추가되더라도 모든 부분을 렌더링하였지만, 리팩터링 후에는 insertAdjacentHTML 메서드를 사용하여 HTML을 동적으로 추가해주어 추가된 부분만 렌더링 되도록 해주었다. (참고 : 여기서 beforeend 는 해당 요소의 자식노드 마지막에 삽입하는 것을 의미한다)
  • reset 함수에서도 insertAdjacentHTML처럼 추가된 부분만 삭제해주고 싶었지만, 고려해야할 조건들이 많아져 가독성을 위해 기존의 innerHTML을 사용하였다.
1
2
3
4
5
6
7
8
return {
  toggle,
  lapAndReset() {
    !data.isStarted ? addLap() : reset();
  },
};

$rightButton.addEventListener("click", stopWatch.lapAndReset);
  • 이벤트 핸들러에서 data.isStarted를 이용하여 조건에 따라 함수를 실행해주려 하였으나 클로저로 구현하였기 때문에 클로저 바깥에서 data.isStarted 값을 참조할 수 없기 때문에 클로저 내부에서 data.isStarted를 참조하여 조건에 맞게 해당 함수를 실행하는 함수를 return하였다.