WTC 1 : Refactoring

리팩토링

처음으로 제대로 된 리팩토링을 해본다.
얼마나 코드를 내가 개선할 수 있는지 전후 비교해보기 위해 기록한다.

1. 가독성 : 새로운 DOM이 추가됬을 때 이벤트 전파를 이용해서 window에서 감지했었으나 가독성을 위해서 좀 더 범위를 좁혔다. 좀 더 읽기 쉬워진듯 하다!

window.addEventListener('click', e => {
  if (e.target.id !== 'game-restart-button') return;
  init();
  createRandomNumber();
});

$app.addEventListener('click', e => {
  if (e.target.id !== 'game-restart-button') return;
  init();
  createRandomNumber();
});

---

2. 가독성 : 이벤트 핸들러가 바인딩되는 이벤트 컨트롤러와 초기화/랜더/랜덤숫자생성을 구분짓기 위해 주석을 추가했다. 주석을 많이 추가하지 않고 영역별로 나누니 좀 더 보기 좋아졌다!

---

3. 사용자 편의성 향상
   사용자가 입력한 숫자값이 유효성을 통과하지 못했을 때 혹은 재시작을 눌렀을 때 다시 input창을 마우스로 클릭해줘야 하는 문제점을 focus를 사용해서 해결

$submit.addEventListener('click', e => {
  e.preventDefault();
  userInputNumbers = $userInput.value;
  if (!BG.validate(userInputNumbers)) {
    window.alert('숫자, 3자리, 0을 제외한 값을 입력해주세요');
    $userInput.focus(); // focus!
    return;
  }
  render();
});

$app.addEventListener('click', e => {
  if (e.target.id !== 'game-restart-button') return;
  init();
  createRandomNumber();
  $userInput.focus(); // focus!
});

---

4. init을 활용해서 페이지에 처음 진입했을 때, 재시작 버튼을 눌렀을 때 동일하게 randomNumber가 생성되도록 변경. 일관성을 더 좋게 만들어서 가독성이 좋아졌다.
   

---

5. 기존에 의미없이 Class내에 속해있었던 validate를 index.js파일로 이동. Class내에 어떤 항목을 넣어야할지 좀 더 알게 되었다! 🎉 이것때문에 몇일간 고생했는데 정답은 모르겠지만 해결된 기분이라 너무 기쁘다.

이번 프로젝트를 하면서 가장 어려웠던 점

• 모듈로 파일 두개로 나눠서 사용해보려고 하니 어떤 데이터를 주고 받아야할지 고민이 됬다. 만약 기본적으로 주어진 예제가 없었더라면 좀 더 자유롭게 했을 수 있으나 일부분 정해져있는 메서드를 지키려고하다보니 더욱 어려웠던 것 같다. 하지만 그 부분을 너무 집요하게 생각해서 시간을 오래 잡아먹었다가 일단 대략적인 구상을 해놓고 코드를 써내려가니 자연스럽게 맞춰지는 것을 볼 수 있었다. 즉, 처음부터 너무 많은 생각은 오히려 방해된다는 것을 깨달았다.

이번 프로젝트를 하면서 배운 점

• 가장 어렵기도 했고 가장 좋았던 점이기도 하다.
  클래스에 대해 몇일간 공부해서 적용하였지만 이론상 어떤 느낌인지 알겠지만 실제로 어떻게 적용해야 할지 감이 잘 오지 않았다. 이번 프로젝트로 완벽하게 알게된 것은 아니지만 이해하고 사용할 수 있어서 좋았다.

• 리팩토링을 직접 경험해보면서 코드를 볼 때마다 리팩토링 할 것이 있구나라는 것을 느꼈다. 코드 작성하는 시간보다 리팩토링 시간을 더 가져가야 한다는 이유를 알 것 같다. 코드를 작성했고 구현되면 그만이지! 라는 생각은 완전 오만이다. 다음에 유지보수를 할 일이 있다면 그때 더 고생하지 않으려면 당장 리팩토링을 하는 것이 좋다. 뿐만 아니라 성능적으로 향상될 수 있고 의도치 않은 오류도 방지할 수 있고 가독성도 올라간다. 리팩토링 너무 재밌었다.

후기

요즘 공부하면서 번아웃이 크게 왔었다. 평소에 나름 긍정적으로 생각한다고 자부했었는데 요즘은 "내가 개발자가 될 수 있을까. 함수 하나도 제대로 못짤것 같은데.." 이런 생각을 안하려고 해도 나의 실력을 탓하며 부정적인 생각이 났다.
하지만 대단한 것을 한 것도 아니고 정답인지도 모르지만 이번 과제를 하면서 생각을 하고 내 나름대로 생각을 정리하면서 코드를 작성한다는 것에서 기쁨을 느껴서 너무 행복한 1주일이였다.