###

1. localStorage

윈도우에서 정보를 저장해놓기 위한 방법으로 사용된다.

  • setItem(key,value)
    localStorage에 데이터를 저장하는 법
  • getItem(key)
    localStorage에서 데이터를 꺼내는 법

JSON 라이브러리에는 Object 와 Json 간의 변환을 도와주는 function이 존재합니다.

2. JSON.stringify

이 함수는 Object를 String 형태로 변환해주는 메소드 입니다. LocalStorage.setItem()을 통해서 데이터를 넣을 때 Object형태로 넣을 수 없기 때문에 String형태로 변환해야 합니다. 그 과정에서 이 메소드를 사용하면 Object -> String을 손쉽게 할 수 있습니다.

3. JSON.parse

이 함수는 String형식의 파일을 Object 형태로 변환해줍니다. LocalStorage에 저장해야하는 데이터들은 객체(Object)가 아니라 String 형태여야 하기 때문에 LocalStorage에서 데이터를 꺼내면 String 형태입니다. 그것을 Object로 사용해야할 때가 많은데 그 때 이 메소드를 사용하면 Stirng -> Object를 할 수 있습니다.

4. a tag로 png파일 다운로드 하기

a태그는 다운로드를 할때도 사용할 수 있습니다. 제가 다운로드 받을 파일은 캔버스로 그린 그림입니다. canvas의 그림에 대한 URL은 toDataURL()로 구할 수 있습니다. 그리고 atag를 만들고 그 a tag에 link 와 download를 추가해줘야 합니다. link 는 위에서 toDataURL로 구한 URL주소입니다. download는 다운로드 받아질 때의 파일명입니다. 마지막으로 a 태그 객체인 link를 강제로 click해주는 트릭을 이용하면 해당함수로 파일을 다운로드 할 수 있습니다.

function saveFile(event){
    const image = canvas.toDataURL();
    console.log(image);
    const link = document.createElement('a');
    link.href = image;
    link.download = 'picture';
    console.log(link);
    link.click();
}

5. Callback 문법

event에 달려있는 callback 함수가 언제 호출되는지 알아보려고 합니다.

5.1 올바른 CallBack 문법

  function handleResize(){
    console.log("resize!!!!");
  }
  window.addEventListener("resize",handleResize);

위와 같이 코드를 작성하면 화면이 새로고침되어도 console이 찍히지 않고 화면 크기가 조정될 때만 console에 resize!!!! 가 찍힌다.

5.2 잘못된 CallBack 문법

  function handleResize(){
    console.log("resize!!!!");
  }
  window.addEventListener("resize",handleResize());

이렇게 작성하면 화면이 새로고침 되자마자 console에 resize!!!! 가 찍히는 것을 볼 수 있다.
그리고 이렇게 작성하면 callback 형식이 아니라서 화면크기가 바뀌어도 console에 찍히지 않는다.

6. addEventListener

원하는 태그에 이벤트를 추가해야할 일은 필수이다. 그럴땐 addEventListener를 사용하자.

아래 코드는 id가 title인 tag에 click event를 추가하는 코드입니다. 역시 콜백에는 ()를 붙히지 않습니다.

  const title = document.querySelector("#title");
  function handleClick(){
    title.style.color = "red";
  }
  title.addEventListener("click",handleClick);

color를 colsole에 찍으면 rgb(41, 128, 185) 형태로 나오니까 값이 적용이 안되는 것들은 console찍어보기!

7. event.preventDefault();

이벤트가 호출되었을 때 input값이 사라지는 것을 막아줄 수 있음. 이것을 하지않으면 event호출이 document까지 올라가기 때문에

  function handleSubmit(event){
      event.preventDefault();
      const currentValue = input.value;
      saveName(currentValue);
      printGreeting(currentValue);
  }

　

8. console.dir();

위 코드로 해당태그에 모든 정보를 볼 수 있음.

9. querySelector();

인자로는 css selector와 동일하며 첫번째를 가져오겠다는 의미.