12월 30일 복기

오늘은 클로저 함수 공부하기 전에

addEventListener 랑 filter해보려고 한다...

너무 어렵다... ㅠㅠㅠ

const container = document.querySelector('#list-container')



function makeTweet(DATA) {
  
  const liTag = document.createElement('li');
  liTag.classList.add('tweet-content');
  
  const titleDiv = document.createElement('div');
  titleDiv.classList.add('list-info');
  liTag.appendChild(titleDiv);
  
  const iconTag = document.createElement('i');
  iconTag.classList.add('far','fa-address-card');
  titleDiv.appendChild(iconTag);
  
  
  const usernameSpan = document.createElement('span');
  usernameSpan.classList.add('list-username');
  usernameSpan.textContent = DATA.user;
  titleDiv.appendChild(usernameSpan);
  
  const dateSpan = document.createElement('span');
  dateSpan.classList.add('list-date');
  dateSpan.textContent= DATA.created_at;
  titleDiv.appendChild(dateSpan);
  
  const contentDiv = document.createElement('div');
  contentDiv.classList.add('list-content');
  contentDiv.textContent = DATA.message;
  liTag.appendChild(contentDiv);
  
  return liTag;
}


function printAllTweet (DATA) {
  for (let i =0; i <DATA.length; i++) {
    let tweetList = makeTweet(DATA[i]);
    container.appendChild(tweetList); 
  }
}

printAllTweet(DATA);



function removeTweet () {
  const container = document.querySelector('#list-container');
  while (container.firstChild) {
  container.removeChild(container.firstChild);
}
}


const tweetBtn = document.querySelector('.tweet-register');

tweetBtn.onclick = addNewTweet;

function addNewTweet () {
  let username = document.querySelector('.username-box');
  let comment= document.querySelector('.comment-box')
  if(username.value && comment.value) {
    let newTweet = { 
      user : username.value,
      message: comment.value,
      created_at : new Date().format()
    }

    DATA.unshift(newTweet);

    removeTweet();

    printAllTweet(DATA);

    username.value ='';
    comment.value ='';
    console.log(DATA)
  }
}



const randomBtn = document.querySelector('.new-tweet-button');

randomBtn.onclick = printRandomTweet;

function printRandomTweet() {

  let randomTweet = generateNewTweet ();

  DATA.unshift(randomTweet)
  
  removeTweet();

  printAllTweet(DATA);
  console.log(DATA);
}

좀 깔끔하게 만들어보았다. 어려웠다..

그래도 이름으로 filter하는 것은 못만들었다....

유효성 검사도 해야되는데 음...

필터를만들어보았다...

tag가 많을때 연결을 어떻게 하는지 고민을 했다.

filter라는 고차함수로 해결하게 되었다.

const userNames = document.querySelectorAll('.list-username');
  
for(let i =0; i <userNames.length; i++) {
  userNames[i].onclick = function (event) {
    
    const clickedUserName =event.target.textContent;
    console.log(clickedUserName);

    const sortedUser = DATA.filter(el => el.user === clickedUserName);
    console.log(sortedUser)

    removeTweet();
    printAllTweet(sortedUser)
  }
}

근데 왜 구현이 안되냐...

오늘은 클로저 함수에 대해서 공부를 해보려고 한다.

클로저의 정의: 클로저는 외부함수의 컨텍스트에 접근할 수 있는 내부함수를 뜻합니다. 외부함수의 실행이 종료된
후에도, 클로저는 외부함수의 스코프를 참조할 수 있습니다.
클로저 사용 예시: 클로저를 통해 커링(cuying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각
인자를 받게 하는 방법), 클로저 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을
막는 방법) 등의 패턴을 구현할 수 있습니다.
클로저의 단점: 일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고 자료: MDN '자바스크립트의 메모리 관
리') 대상이 되었을 객체가, 클로저 패턴에서는 메모리 상에 남아 있게 됩니다. 외부 함수 스코프가 내부함수에 의
해 언제든지 참조될 수 있기 때문입니다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있습니다.
자바스크립트는 가비지 컬렉션을 통해 메모리 관리를 합니다. 객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해
자동으로 메모리 할당이 해제됩니다
                                 

function 폰번호(value){
	let _numbers = value;
	return{
		getNumber: function(){
			return _numbers;
		}
		setNumber: function(value){
			_numbers = value.replaceAll("-","");
		}
	}
}
010-1234-5678,  01012345678

예시

function OuterFn() {
    let num = 123;
    console.log("num(outer)>>" + num);
    function InnerFn() {
      let num = 10;
      console.log("num+1(inner)>>" + num++);
    }
    return InnerFn;
}

결과

let callFn = OuterFn(); //num(inner)>>10
callFn(); //num+1(inner)>>10
callFn(); //num+1(inner)>>10

https://refactoring.guru/design-patterns/decorator

function(x, y){
  let x, y;
  return x + y;
}
_.delay = function (func, wait, ...arg){
  setTimeout(function(...arg){
    func(...arg);
  }, wait);
};
_.delay = function (func, wait, ...arg) {
  setTimeout(function() {
    func(...arg)
  }, wait);
};