전체 개념문제를 다시한번 풀어보면서 개념을 좀더 재대로 잡아보고, 어제 못만든 못만든 삭제 버튼을 만들어 보려고 한다.
그리고 부자계산기(?)를 만들어 보려고 한다 !

Scope

Scope 정말 중요한 부분이다. 여기서 정말 필자를 애먹인 부분이 있었으니.. 함수가 실행이 안됬는데 왜 함수내에 재할당 부분이 적용되는가 였는데..바보였던 것이다. ㅎㅎ
문제의 부분은 다음과 같았다.

let fruit = 'apple';
let color = 'red'

function outerFn() {
  fruit = 'tomato'
  function innerFn() {
    color = 'green'
    return color
  }
  
  return innerFn()
}

const innerFn = outerFn();

//이때!! fruit 은뭔가가 문제였는데 필자의 답은  함수 outerFn이 실행 되지 않았으니 'apple'이겠지였는데 답은 'tomato'였다.
//정말 한참을 고민했던거 같다 함수가 실행됬다면 재할당되서 당연한 결과인데 왜저럴까...하고
//답은 간단한데 const innnerFn = outerFn() 여기!! 이코드는 innerFn에 outerFn함수의 실행결과를 할당하는 것이다. 때문에 이부분에서 outerFn이 실행이 되는거였다. 
console.log(fruit)
// > 'tomato'!!, 너무 당연한 결과인데 아직 코드 보는게 익숙지 않는거 같다.

this

따라서 호출될 때마다 어떠한 객체의 method일 텐데, 그 '어떠한 객체'를 묻는 것이 this입니다.
현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수 바로 바깥 범위에서 this를 찾습니다.

assign
from

삭제 버튼 만들기!

어제에 이어서..
아래처럼 구현해 보고자 한다.

먼저 summit을 누를때 버튼을 하나 생성한다.

생성된 버튼에 값으로 '✖️' 추가하고, class = delete를 만든다.
그리고 버튼을 생성된 newList 내부에 추가시킨다.!

function set() {
  const newList = document.createElement('li');
  newList.textContent = `${submitText.value}`;
  newList.setAttribute('class', 'ok');

  const deleteList = document.createElement('button');
  // 버튼생성
  deleteList.textContent = `✖️`; // 버튼이름추가
  deleteList.classList.add('deleteList'); // 버튼 class 추가

  list.append(newList);
  newList.append(deleteList); //newList에 삭제 버튼 추가!
  submitText.value = '';
}

버튼모양을 좀 이쁘게 꾸며준다.

.deleteList {
  margin-left: 0.6rem;
  border: 0px;
  background-color: rgba(0, 0, 0, 0);
}
.deleteList:hover { // 마우스올리면 빨간색으로 변하도록 hover 효과 추가!
  color: red;
}

결과!!
마우스올리면 버튼이 빨게 진다.

목표로 했떤 삭제 버튼은 만들었는데 삭제기능은 구현을 못했다. 생성된리스트마다 특정한 클래스나, 주소같음 뭔가를 만들어줘야 삭제를 클릭한 리스트를 지울수있을텐데 그걸 구현하는 법을 공부해봐야겠다. 다음엔 삭제버튼 클릭시 해당 리스트가 지워지는걸 구현하는 것이다.!