본문 바로가기

JS

[인프런x코드캠프] 훈훈한 Javascript_8_디데이 카운터 완성

오늘 수업을 통해서 D-Day-Counter 를 완성했다.

 

 

 

 

 

 

함수에 인자를 활용하고 localStorage를 통해 브라우저를 종료해도, 또는 컴퓨터를 꺼도 계속 실행되는 D-Day-Counter가 완성됐다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

함수 내부에서 인자를 받은 함수를 사용할 때 : 화살표 함수 사용 (익명 함수)


ex)  
const intervalId = setInterval(counterMaker(targetDateInput), 1000);  X
const intervalId = setInterval(() => counterMaker(targetDateInput), 1000);  O

 

Web Storage
1. Session Storage : key-value 형태 저장 , 로컬 환경에 데이터 저장
세션 단위로 구분되며 활용
세션: 사용자의 웹 페이지 접속 상태에 따른 단위
브라우저, 탭을 종료하면 영구 삭제
2. Local Storage : key-value 형태 저장 , 로컬 환경에 데이터 저장 
도메인 단위로 구분되며 활용
브라우저 자체를 종료해도 존재

 

truthy : data가 존재하는 지 여부
falsy : undefined, null, 0, "", NaN

 

localStorage.setItem(key, value) : localStorage에 저장하는 메소드
localStorage.getItem(key, value) : localStorage에서 가져오는 메소드
localStorage.removeItem(key) : localStorage에서 지워주는 메소드

 

이번 강의까지 들으면서 디데이 카운터를 끝냈다.

수업을 따라가면서 이해가 안되는 부분은 없었지만, 강의 없이 처음부터 만들어보라고 한다면 막히는 부분이 많을 것 같다.

시간 날 때, 강의 없이 천천히 만들어봐야겠다.

 

Js에서의 함수 사용법, html의 값을 바꾸는 법, <div>를 다루는 법, localStorage를 통해 도메인에 값을 저장하는 법 등을 배웠다. 어려운 기능을 가진 카운터는 아니지만 무사히 따라갔다는 것에 대해서 나름 뿌듯하다.

 

이 강의의 1부가 끝난 느낌이다. 나머지 수업도 잘 따라가서 똑똑해져야겠다.