오늘 수업을 통해서 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부가 끝난 느낌이다. 나머지 수업도 잘 따라가서 똑똑해져야겠다.
'JS' 카테고리의 다른 글
[인프런x코드캠프] 훈훈한 Javascript_10日 (5) | 2023.01.25 |
---|---|
[인프런x코드캠프] 훈훈한 Javascript_9日 (2) | 2023.01.20 |
[인프런x코드캠프] 훈훈한 Javascript_7日 (0) | 2023.01.16 |
[인프런x코드캠프] 훈훈한 Javascript_6日 (0) | 2023.01.11 |
[인프런x코드캠프] 훈훈한 Javascript_5日 (0) | 2023.01.10 |