12月26日

  저는 함수 2개를 만들어서 구현했는데, 한 번 참고해보시길! : 0
  
  1) getAlltweet ( DATA ) 
   DATA 배열을 가져와서 for문으로 돌면서 각 요소마다 makeTweetEl( )를 실행하고,
   ul 엘리먼트에 append 해주는 것  
  
  2) makeTweetEl ( data )
   -하나의 유저정보객체를 받아서
   -엘리먼트를 만들고
   -엘리먼트의 textContent값을 알맞게 data.user  / data.message / data.created_at으로 넣어주기
   - 엘리먼트들 다시 조합해서 하나의 List 엘리먼트 만들고 반환하기
      

function makeTweetElWithData(data) {
  name.textContent = data.user;
  tweet.textContent = data.message;
  date.textContent = data.created_at;
}

function makeTweetEl (userData) {
  
  TODO:     
  comment로 어떤게 들어올까?
  ==> 답은 객체가 들어간다. 
  ==> object가 들어가게 된다.
  string 아님 DATA[0]
  { user: 'ingikim', message: 'Welcome to Code States #codestates', created_at: '2019-01-03 12:30:20' },
  comment==> 어떤 변수명을 지어도 object
  comment가 선언이 된다. 사실은 이것은 DATA의 객체 
  object ==> type이름으로 변수명을 짖는것보다 
  의미가 있는 변수 
  이해하기 쉬운 변수명을 적는다: userData; 


  

    

    const liElement = document.createElement('li');
    liElement.classList.add('tweet')
    
    const usernameElement = document.createElement('div');
    usernameElement.classList.add('tweet__username');
    usernameElement.textContent = userData.user;
    liElement.appendChild(usernameElement);

    const createdAtElement = document.createElement('div');
    createdAtElement.classList.add('tweet__createdAt');
    createdAtElement.textContent= userData.created_at;
    liElement.appendChild(createdAtElement);

    const contentElement = document.createElement('div');
    contentElement.classList.add('tweet__content');
    contentElement.textContent = userData.message;
    liElement.appendChild(contentElement);

    return liElement
}

//text콘텐츠를 어떻게 가져오지???? ///

//// 
  // 1) getAlltweet ( DATA ) 
  //  DATA 배열을 가져와서 for문으로 돌면서 각 요소마다 makeTweetEl( )를 실행하고,
  //  ul 엘리먼트에 append 해주는 것  
  

function getAlltweet (userInfos) {
  
 TODO:
    DATA 배열을 가져와서 for문으로 돌면서 각 요소마다 makeTweetEl( )를 실행하고,
    ul 엘리먼트에 append 해주는 것  
    
    확장성이 없다.
    의미적인 요소를 넣는다
    여기서 For문을 쓰면 된다
    let userInfos = DATA;가 생략
    뭐가 들어가야 하나요?
    DATA[0], DATA[1], DATA[3] ==> userData 로 만들어줘야한다?
    DATA가 하나씩 돌면서 makeTweetEl 을 하나씩 만든다
    
    
    let ulElement = document.querySelector('.tweets');

    for (let i =0; i <userInfos.length; i++) {
       makeTweetEl(userInfos[i]);//// 함수를 바로 쓴다./// return 값이 liEliment
       ulElement.appendChild(makeTweetEl(userInfos[i])); 
    }
    /// append vs appendChild의 차이점이 무엇인가..///
}

/// 함수를 만들었으니까 실행//


getAlltweet(DATA); /// 실행했다.

let userInfos =DATA;; 선언이 생략되어있댜. 
인자로 들어가는 것이 DATA 
parameter 와 argument의 차이

userInfos --> parameter로 지정을 해둔것이고
  --> 의미적인것이고 
  --> 미리 변수를 선언한것이고 
  --> 은유적인것이고
139번쨰 줄은 DATA를 넣어서 실행 하였으니 이것은 argument;
--> 실제 사용 할떄의 값은 argument; 
--> 실제로 사용되는 값. 논리.