WeCode 그룹 리뷰를 통해 새로 배운 것들을 정리한다.

1. Object.entries()

Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점이다).

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed

2. Array.prototype.find()

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

찾은 요소의 값 대신 인덱스를 반환하는 findIndex() 메서드도 있다. 배열 요소의 위치를 찾고자 하는 경우에는 Array.prototype.indexOf()를 사용한다. 배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에 Array.prototype.indexOf() 또는 Array.prototype.includes()를 사용한다.

3. Sort a Table

한번 클릭시 순서대로 테이블이 정렬되고, (A to Z) 다시 한번 클릭시는 역순대로 정렬된다 (Z to A).

<table id="myTable2">
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
...

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

4. localStorage

localStorage 는 개인이 사용하는 웹브라우저에 값을 저장하는 것이다. 서버가 없음에도 불구하고 정보를 저장할 수 있다. 읽기 전용 localStorage속성은 사용자 로컬의 Storage 객체에 접근하게 해준다. localStorage는 sessionStorage와 비슷하지만 sessionStorage에 저장된 데이터는 세션이 끝나면 (브라우저가 종료되면) 지워지는 반면 localStorage에 저장된 데이터는 만료기간이 없다는 차이점이 있다.

localStorage또는 sessionStorage에 저장될 데이터는 프로토콜 페이지에 명시되어 있다.

모든 key와 value는 항상 string으로 저장된다. (object와 integer 들은 string으로 자동 변환된다!)

문법

myStorage = window.localStorage;

예제

1. localStorage.setItem('myCat', 'Tom');
   이 코드는 사용자 현재 도메인의 로컬 Storage객체에 접근해 Storage.setItem()를 사용하여 데이터를 추가합니다.
   

2. var cat = localStorage.getItem('myCat');
localStorage 아이템 읽기

3. localStorage.removeItem('myCat');
localStorage 아이템 삭제

4. localStorage.clear();
localStorage 아이템 전체 삭제

수정된 코드

localStorage 를 활용하여 브라우저를 종료하더라도 Todo list 기록이 남아있도록 만들었다. 하단 trash 아이콘을 누르면 리스트가 모두 삭제되고, 모두 삭제된 채로 브라우저를 종료시 예시 list가 다시 나타난다.

// 클릭해서 TODO 가로선 그리기
var list = document.querySelector("ul");

list.addEventListener("click", function(event){
	if (event.target.tagName === "LI") {
		event.target.classList.toggle("completed");
		store();
	}
}, false);

// span 클릭시 TODO 삭제하기
list.addEventListener("click", function(event){
	if (event.target.tagName === "SPAN") {
		var parent = event.target.parentNode;
		parent.remove();
		store();
	}
})

// input 설정
var input = document.querySelector("input[type='text']")

input.addEventListener("keypress", function(event){
	if (event.which === 13){
		console.log("new list")
		// input 에서 텍스트 가져오기
		var todoText = this.value;
		// 새로운 li 추가하기
		var newLi = "<li><span><i class=\"fa fa-trash-alt\"></i></span> " + todoText +"</li>";
		list.innerHTML += newLi;
		store();
		input.value = "";
	}
})

// + 아이콘 토글
var plus = document.querySelector(".fa-plus")

plus.addEventListener("click", function(event){
	if (input.style.display === "none") {
		input.style.display = "block";
		event.target.classList.toggle("rotated")
	} else {
		input.style.display = "none";
		event.target.classList.toggle("rotated")
	}
})

// delete all Todos
var clear = document.querySelector(".fa-trash")

clear.addEventListener("click", function(event){
	console.log("clear the list")
	while (list.hasChildNodes()) {
		list.removeChild(list.firstChild);
	}
	store();
}, false);

// localStorage 활용하기
function store() {
	window.localStorage.myitems = list.innerHTML;
}

function getValues() {
	var storedValues = window.localStorage.myitems;
	if(storedValues) {
		list.innerHTML = storedValues;
	}
}
getValues();

참고자료 : https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage