Twittler 과제를 끝냈다.

• 지난 22일 Q&A 세션에서 class 정의 내에 createElement와 appendChild 등 DOM 메서드를 사용하는 코드를 어디에 작성해야 하는지 질문했었고, 그 답변으로 알려주신 방법을 적용했다.
• 새 트윗이 생성되면 객체 타입으로 트윗 리스트 Array에 push를 해주고 array를 통째로 localStorage에 저장하는 방식이다. 이렇게하면 유저 필터링을 할 때 array 메서드인 filter를 사용할 수도 있고 나중에 localStorage가 아닌 데이터 베이스를 이용할 시에 더 적절하다고 알려주셨다.
• 그리고 이 방식으로 수정을 해보니 생각보다 더 장점이 있었다. 우선은 코드가 전체적으로 깔끔해졌고, for문도 약간 줄었다.
• 한 가지 예시로, 아래는 페이지 로드 시 초기화를 하는 코드다. 예전 코드는 localStorage에 5개의 기존 데이터가 있는지 확인하기 위해 for 문을 돌렸는데, 수정된 코드에서는 tweetList가 있는지만 확인하면 됐기 때문에 for 문을 없앨 수 있었다.

• 트윗을 출력하는 render 함수는 실질적으로 기존 코드와 동일한 횟수로 for 문을 실행하긴 하지만, for문을 함수 안에 넣었기 때문에 렌더링이 필요할 때 간단히 함수 호출만 해주면 되어서 코드가 깔끔해졌다.

  /* AS-IS */
  window.addEventListener('DOMContentLoaded', function(){
  // data.js에 있는 트윗이 LocalStorage에 없을 경우 전달
  for(let i in DATA){
  let value = JSON.stringify(DATA[i]);
  if(localStorage.getItem(i) !== value){
    localStorage.setItem(i, value);
  }
  }
  // LocalStorage에 저장되어있는 트윗 출력
  for(let i = 0; i < localStorage.length; i++){
  let tweet = new Tweet(JSON.parse(localStorage.getItem(i))); // Object 타입으로 변환
  tweet.print();
  }
  });
  

  /* TO-BE */
  window.addEventListener('DOMContentLoaded', function(){
  localStorage.getItem('tweetList') ? ( // 삼항 조건 연산자
  getFromStorage()
  ) : (
  tweetList = DATA,
  addToStorage(tweetList)
  );
  // tweetList 출력
  render();
  });
  

• 또 약간의 개선된 점으로 moment 라이브러리를 사용해서 시간을 "00 minutes ago" 식으로 표시하는데, 이게 그나마 움직이는 것처럼 보인다는 것? 기존에는 새로 트윗을 해도 이전에 작성된 트윗을 고치지 않기 때문에(새로고침을 하지 않는 이상) 항상 "a few seconds ago"라고 표시되는데, 이제는 새로운 트윗을 하거나 유저 필터링 시에 렌더링을 새로 해버리니까 시간 표시가 자주 바뀐다.