📌 오늘의 생각

오늘은 localstorage를 활용한 학습이 가장 기억에 남는다. 이제 휘발성 페이지를 벗어나 로컬스토리지를 통해 데이터를 저장하고 꺼내 지속적인 작업이 가능하게 되었다.

---

📒 목차

• for문
• while문
• for-of
• for-in
• setInterval(콜백함수, 시간)
• clearInterval(변수)
• 변수의 참조영역
• 매개변수
• 전달인자
• 브라우저의 저장소 (Web Storage)
• localStorage.setItem()
• localStorage.getItem()
• 추가학습

---

CSS

1️⃣ for문

• 최초식 : let i = 0
• 조건식 : i < 10
• 증감문 : i = i+1  or i++

for(최초식; 조건식; 증감문){
	// 반복을 수행할 코드
}
let arr = ["가", "나", "다", "라"]
for (let i = 0; i < arr.length; i++){
	console.log(arr[i]);
}
// "가", "나", "다", "라"

---

2️⃣ while문

• ❗종료조건을 제대로 설정하지 않으면 무한 루프에 빠지게 된다!!

최초식
while( 조건식 ){
	// 반복을 수행할 코드
	증감식
}

let num = 0;
while (num < 10) {
	console.log(num)
	num++;
}
// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

---

3️⃣ for-of

• 배열에서 사용
• 배열의 각 요소가 나타난다

const arr = [1, 2, 3, 4, 5]

for(let 변수명 of arr) {
    console.log(변수명)
}
// 1
// 2
// 3
// 4
// 5

---

4️⃣ for-in

• 객체에서 사용
• 해당 객체의 key를 나타낸다

const obj = {
    name : "otter",
    gender : "male"
}

for(let 변수명 in obj) {
    console.log(변수명)
}
// name
// gender

---

5️⃣ setInterval(콜백함수, 시간)

• 지정한 시간마다 반복해서 실행한다
• 시간은 ms단위이다
• setInterval() 실행될 때마다 고유 id값을 반환한다

let interval = setInterval(func, 1000);

function func() {
	console.log('반복');
}

// 1초(100ms)마다 func함수가 반복된다

---

6️⃣ clearInterval(변수)

• setInterval() 함수를 통해 생성된 interval을 종료해주는 함수
• setInterval() 실행될 때마다 고유 id값을 반환한다
• 해당 id값을 clearInterval()함수의 괄호안에 넣으면 interval이 종료된다

let interval = setInterval(func, 1000);

function func() {
	console.log('반복');
}
clearInterval(interval) // interval 종료

---

7️⃣ 변수의 참조영역

• 함수, 변수 → 정의되어 있는 영역에서만 존재
• 해당영역에서 선언되면 그 밖에서 참조할 수 없다!
• 함수에서는 return을 사용하여 데이터를 함수 밖으로 건네줄 수 있다

---

8️⃣ 매개변수

• 함수는 데이터를 밖으로 건네주거나, 외부의 데이터를 받아올 수 있다
• 매개변수를 활용하여 위와 같은 기능 수행한다
• 매개변수는 해당 함수 내부에서만 존재한다

---

9️⃣ 전달인자

• 함수 호출 과정에서 전달인자를 건네줄 수 있다
• ❗전달인자를 담아주는 순서에 따라 매개변수에 담길 값이 정해진다

---

🔟 브라우저의 저장소 (Web Storage)

• 브라우저에 데이터를 저장할 수 있는 기술이다

---

1️⃣1️⃣ localStorage.setItem()

• window.localStorage 로컬 스토리지 접근
• window 생략 가능
• 첫번째 인자 : key
• 두번째 인자 : value

localStorage.setItem()

localStorage.setItem('data-key', 'data-value')

• localStorage 확인 경로
  - 개발자 도구 → Application탭 → Local Storage 토글

---

1️⃣2️⃣ localStorage.getItem()

• localStorage에 존재하는 데이터를 꺼내오기

localStorage.getItem()

localStorage.getItem(’data-key’)

---

1️⃣3️⃣ 추가학습

✅ js에서 html의 특정 태그 안보이게 하기

• 실제로 없어지는 것이 아니라 존재는 하는데 눈에 안보이게 하는 것이다.

.style.display = "none";

const container = document.querySelector("#d-day-container");
container.style.display = "none";

✅ textContent

• 태그에 텍스트 넣기

const messageContainer = document.querySelector("#d-day-message");
messageContainer.textContent = "D-Day를 입력해 주세요";

✅ innerHTML

• 태그 안에 태그 넣기
• 기존에 해당 태그 안에 있던 것을 없애고 새로 만든 태그로 저장된다

const messageContainer = document.querySelector("#d-day-message");
messageContainer.innerHTML = "<h3>D-Day를 입력해 주세요</h3>";

✅ localStorage.setItem()

• 새로운 정보를 setItem하게 되면 정보가 갱신된다
• (이전 데이터는 사라진다)