JavaScript - 6

---

 

 

 

 

 

 

1 . Todo 앱 만들기

 

 

 

 

 

• html파일, css파일, js파일을 각각 만들어서 연결

 

 

 

 

 

• html파일

 

 

 

 

• css파일

 

 

 

 

• js파일

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

2 . localStorage

 

 

 

 

 

 

• 브라우저가 제공하는 웹 스토리지 기능 중 하나
• 자바스크립트를 통해 키/값 형태의 데이터를 브라우저에 영구적으로 저장할 수 있는 저장소
• 브라우저별로 약 5MB 내외 저장 제한이 있음
• 문자열만 저장 가능
• 같은 도메인에서만 접근 가능
• 민감한 정보(비밀번호, 토큰 등)는 저장하면 안 됨 -> 누구나 열어서 확인할 수 있음  

 

 

 

 

 

• 데이터 저장

 

localStorage.setItem("키", "값")

 

 

 

 

• 데이터 불러오기

 

const value = localStorage.getItem("키", "값")

 

 

 

• 일부 데이터 삭제하기

 

localStorage.removeItem("키", "값")

 

 

 

• 전체 데이터 삭제하기

 

localStorage.clear()

 

 

 

 

• ex)

 

=> 실행 후 개발자모드 -> Application -> Local storage에 들어가 보면 키, 값으로 내용이 들어가 있는 걸 확인할 수 있음

 

 

 

 

 

 

 

 

 

JSON

 

 

 

• JavaScript Object Notation의 약자
• 데이터를 저장하거나 주고받기 위한 텍스트 형식
• 주로 웹 API에서 서버와 클라이언트가 데이터를 주고받을 때 사용
• "키": "값" 형태로 사용
• 파이썬의 딕셔너리, 자바스크립트의 객체와 비슷한 형태를 가지고 있음

 

 

• ex)

00 = {
     "name": "Kim",

     "age": 20,

}

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

3 . localStorage를 활용해 테마 변경하기

 

 

 

 

 

 

 

조건

 

• 실행 후 버튼을 누르면 배경색이 검은색으로 바뀌어야 함
• 창을 껐다 다시 켜도 바뀐 배경색이 유지되어야 함
• 버튼을 다시 누르면 배경색이 원래대로(하얀색) 바뀌어야 함

 

 

 

 

 

 

 

 

• 상향 연산자 또는 조건 연산자 사용
• 형식 : 조건식 ? 값1 : 값2
• true -> 값1, false -> 값2

 

 

• setItem과 getItem을 사용해 값 저장, 불러오기 사용

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

4 . sessionStorage

 

 

 

 

 

 

 

 

 

• 브라우저가 제공하는 웹 스토리지 중 하나
• 탭(세션) 단위로 데이터를 임시 저장하는 저장소
• 페이지를 새로고침해도 데이터는 유지되지만 브라우저 탭이나 창을 닫는 순간 자동으로 삭제됨
• 같은 사이트라도 다른 탭과 데이터가 유지되지 않음
• 저장 용량은 5MB
• 문자열만 저장 가능
• 보안 필요한 민감 정보는 저장하지 않는 것이 원칙
• localStorage와 비슷한 특징들을 가지고 있음

 

 

 

 

 

 

• 데이터 저장

sessionStorage.setItem("키", "값")

 

 

 

 

• 데이터 불러오기

const value = sessionStorage.getItem("키", "값")

 

 

 

 

• 일부 데이터 삭제

 

sessionStorage.removeItem("키", "값")

 

 

 

 

• 전체 데이터 삭제

 

sessionStorage.clear()

 

 

 

 

 

 

 

• ex)

 

 

=> 실행하면 페이지에 "이 탭에서 방문한 횟수: 1번"이 뜸

=> 새로고침시 횟수가 1회씩 올라감

=> 페이지를 닫고 새로 실행하거나 주소를 복사해 새 창에서 열면 다시 1번이 뜸

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

5 . 쿠키(cookie)

 

 

 

 

 

 

 

 

• 윁 브라우저가 사용자 정보를 작은 텍스트 데이터 형태로 저장해 두었다가 이후 같은 웹사이트에 요청을 보낼 때마다 자동으로 서버에 함께 전송하는 저장 방식
• 저장 용량이 약 4KB로 매우  작고 모든 요청에 포함되어 전송되기 때문에 보안과 성능 측면에서 주의가 필요함

 

 

 

 

 

 

• 쿠키 저장

document.cookie = "userid=apple"

 

 

=> "userid=apple" : 쿠키 이름= 값

 

 

 

 

• 만료 시간 설정

const date = new Date()

date.setDate(date.getDate() + 7)

document.cookie = "userid=apple; expires=" + date.toUTCString()

 

 

=> 1. const date = new Date() : 현재 날짜 + 시간을 가져옴

      2. date.setDate(date.getDate() + 7) : 가져온 현재 날짜에 7일을 더함

      - expires= : 쿠키의 만료 시간을 지정하는 옵션 

      - date.toUTCString() : Date 객체를 쿠키가 이해할 수 있는 문자열로 변환

      -  "userid=apple; expires=" 와 date.toUTCString() 사이의 +는 문자 이어 붙이기 위함

     3. 즉 3번째 코드는 userid 쿠키를 만들고 아래에 적을 날짜가 되면 삭제하라는 뜻

 

     

 

 

• 쿠키 읽기

console.log(document.cookie)

 

 

 

 

• 쿠키 삭제

expires 값을 과거 날짜로 설정하면 자동으로 삭제됨

 

 

ex) date.setDate(date.getDate() -1)

 

 

 

 

 

• ex)

 

 

 

 

• todo앱을 만들 때 사용했던 type="checkbox"는 실행 시 텍스트[체크박스] 형태로 되어있어 체크박스를 클릭해야만 실행됐음
• <label>로 해당 체크박스를 감싸거나 멀리서 <label for="">로 지정할 시에 체크박스 앞의 텍스트를 클릭해도 실행됨

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

6 .  Promise

 

 

 

 

 

 

 

 

• 자바스크립트에서 비동기 작업의 결과를 미래의 값으로 표현하는 객체
• 시간이 걸리는 작업이 성공적으로 완료되었는지 또는 실패했는지 나중에 알려주기 위해 사용

 

 

 

 

 

 

콜백지옥

 

 

• 자바스크립트에서 비동기 작업을 콜백 함수로 계속 중첩해 처리하다 보니 코드가 오른쪽으로 깊게 들여 쓰기되며 복잡해지고 흐름을 한 눈에 이해하기 어려워지는 문제를 말함

 

 

 

=> 오른쪽으로 깊게 들여쓰기 된 모습의 예시

 

 

 

 

 

 

 

 

• Promise 기본 구조

 

 

 

 

 

 

 

 resolve, reject

 

• promise 안에서 결과를 밖으로 전달하는 함수
• 자바스크립트가 자동으로 넣어주는 함수 자리이기 때문에 이름은 바꿔도 되지만 순서와 역할은 지켜야 함
• (1, 2) 기준으로 1(resolve)는 성공, 2(reject)는 실패 구조임

 

 

 

 

 

• ex 1)

 

=> const success = true로 이미 성공으로 정했기 때문에 "성공: 서버에서 데이터를 성공적으로 받아왔습니다" -> "작업완료"가 출력됨

 

=> const cuccess = false 였다면 "실패 : 서버 요청 실패" -> "작업 완료"가 뜸

 

 

 

 

 

 

• ex 2)

 

=> const availableMenu = [ ]로 이미 메뉴를 적은 상태, orderCoffee에서  [ ]에 없는 메뉴 주문 시 false 처리되어 "죄송합니다. 녹차는 판매하지 않습니다" -> "주문이 완료되었습니다" 출력

 

=> includes() : 배열이나 문자열 안에 특정 값이 포함되어 있는지 확인하는 함수 -> 있으면 true 없으면 false

 

 

 

 

 

 

 

 

 

 

 

 

 

---