1. CSS 추가 학습내용
    • 화면만 만들면 되는줄 알고 이것저것 막 다 때려박았는데, 그렇게 하면 안된다는 피드백을 받았다.
    • 실제로 멘토님이 내가 작성한 CSS에서 여러 항목들을 뺐는데, 화면에 전혀 변화가 없었다.
    • 필요한 기능만 가지고 화면을 구축할 수 있는 능력이 필요하다.
 .tweet-page {
       display: flex;
       flex-direction: column;
 }

HTML tag들을 span으로 하고 위와 같이 구현했는데, div나 p같은 block tag를 이용하면, html tag의 특성상 먼저 작성한 것 부터 아래로 계속 쌓이기 때문에, 굳이 위의 CSS를 작성할 필요가 없다는 것을 배웠다.

  • 앞으로도 지속적인 학습이 필요할듯.
  1. fetch / then
    • json 형식으로 저장된 data를 사용하여 html에 display 되도록 구현했다.
      fetch ('/data/getAllTimeline.json')
      .then (
        (response) => {
          response.json().then((data) => {
            for (let i=0; i<data.result.length; i++) {
              const originalTweet = document.createElement('li');
              originalTweet.innerHTML = makeTweetList(data.result[i]);
              elTweetList.appendChild(originalTweet);
            }
          });
        }
      )
      • 일단 생각보다 간단해서 놀랐고, 단어가 완전 straight-forward해서 이해하기 편했다.
    • 우선 fetch하고, 그리고 나서 (then) response를 확인한 후에, 아래내용을 실행해라.
    • 이런 것 보면 확실히 언어이긴한듯.