12월 26일 복기

트위틀러를 처음부터 하는데 백지에 쓸라고 하니까

뭘 해야하는지 참 막막했다..

그래서 고민을 조금 많이 했다.

해야할 일을 적어 보는 수도 코드를 만들었다.

처음에는 input box에 적힌 콘텐츠를 가져와야 한다.

그다음에 이거를 새로 만들어서 밑에다가 붙여야한다.

그다음에 구현할게

check new tweet을 누르면 랜덤하게

구현되는 것을 만들어야한다.

append와 appendChild

  저는 함수 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; 
--> 실제로 사용되는 값. 논리.