[인프런x코드캠프] 훈훈한 Javascript_11日

오늘은 등록한 todoList를 더블클릭 시 취소되는 기능, 전체 삭제 기능을 구현했다.

또, 개발자 도구의 디버거를 통해서 scope의 의미와 실제로 js가 어떤 순서로 실행되는지, for문이 어떻게 돌아가는 지에 대해서 직접 확인해봤다.

1. 더블클릭 시, 태그 삭제

newLi.addEventListner("dblclick", () => {
	newLi.remove();
}

newLi로 지정한 태그를 더블클릭("dblclick") 하면은 remove() 함수가 실행돼서 newLi태그가 삭제된다.

이 기능을 통해서 해당 todo를 더블클릭 시 삭제하는 기능을 구현했다.

 

2. 전체 삭제

const deleteAll = function() {
	const liList = document.querySelectAll('li');
    for(let i=0; i < liList.length; i ++) {
    	liList[i].remove();
    }
}

전체삭제는 li들의 배열을 구한 뒤, for문을 통해서 remove() 함수를 실행시켜 삭제해줬다.

처음 나온 .querySelectAll은 'li' 태그를 모두 선택하는 기능을 가진 메소드다.

 

3. scope ( 변수 참조의 유효범위 )

• 전역 스코프
• 지역 스코프
• 함수 레벨 스코프

const sum = function () {
   var x = 0;
   let y = 0;
} 
console.log(x); // 오류 발생
console.log(y); // 오류 발생

• 블록 레벨 스코프

if () {
   var x = 0;
   let y = 0;
}
console.log(x);  // 오류없이 작동 됨
console.log(y); // 오류 발생

 

위와 같은 이유로 var는 지양해야 한다.

var를 사용하면 global scope로 올라가기 때문에 중요한 변수의 값이 변경될 수도 있고, 개발자가 예측할 수 없는 오류들을 많이 만날 수 있다.

 

크롬의 개발자도구를 사용해서 디버그를 해봤다. IntelliJ에서 쓰던 디버그 기능과 크게 다르지 않아서 쉽게 알아들을 수 있었다. 새로웠던 점은 함수 내부를 들어가기 위해서는 특정 버튼을 통해서 들어가는 점이 새로웠다.

 

다음 강의에서는 localStorage에 todoList객체를 저장하는 법을 배운다.

D-day-counter에서는 단순한 키:값 하나를 저장했지만, 이번 todoList에서는 객체를 저장해야 한다.

 

일전에 scope개념에 대해서 설명한 영상을 봤었다. 그 당시에는 그러려니 했지만, 실제로 디버깅을 해보니 영상에서 설명하고자 하는 것과 왜 var를 지양해야하는지에 대해서 직접 느낄 수 있었다.

 

[인프런x코드캠프] 훈훈한 Javascript - 인프런 | 강의

 

어제보다 오늘 더 춥다. 진짜진짜 춥다! 날씨가 이상하다!