JavaScript 기본 및 사용하기

📒 왜? (사용 이유)

◼ JavaScript를 쓰는 가장 큰 이유는 HTML 조작이 목적이다.

◼ 그 외로, 서버와 통신 가능, 클릭 및 타이핑 감지, 비동기 처리, 자료 다루기 등의 목적으로도 사용된다.

---

📒 JavaScript

◼ JavaScript는 Call Stack이 하나로, single thread로 동작한다.

◼ event loop를 이용해서 비동기 방식으로 동시성을 지원하는데, 이는 자바스크립트 엔진에서 지원하는 것이 아닌, 브라우저나 node.js에서 지원된다.

 

✔ JavaScript 구조

◼ Heap & Call Stack: V8과 같은 JavaScript 엔진의 구성요소이다.

   ❗ Heap: JavaScript의 객체의 주소 값, 구조화되지 않은 메모리 영역이 쌓인다.

   ❗ Call Stack: 일반적으로 우리가 호출하는 함수들이 쌓인다.

◼ Web API: 브라우저에서 제공되는 API, 비동기 작업을 실행하며 결과를 Task Queue로 넘겨준다.

◼ Task Queue: Call Stack이 비어 있어야 실행되며, 그 전까지는 Event Loop를 돈다.

 

✔ JavaScript 동작 과정

setTimeout(() => console.log(20), 1000);
console.log(30);

◼ 위와 같은 코드가 있을 때, 실행 흐름은 다음과 같다.

◼ setTimeout function이 Call Stack에 들어갔다가, Web API로 옮겨진다.

◼ 1초 후, Web API에서 콜백되어 Task Queue에서 받는다.

◼ console.log(30);이 Call Stack에 들어가서 실행된다.

◼ Call Stack이 비어 Task Queue의 console.log(20)이 실행된다.

---

📒 JavaScript 문법

✔ 변수

❗ var 키워드

var a = 10;
var a = 100;
function test() {
  var b = 10;
}
console.log(a); // 100
console.log(b); // undefined

◼ var 키워드를 사용해서 변수를 선언할 수 있다.

◼ var 키워드는 중복 사용을 검사하지 않아서 문제가 발생할 수 있다.

◼ var 키워드의 스코프는 함수의 코드 블록으로, 함수가 아닌 다른 곳에서 선언 시 전역 변수로 설정된다.

 

❗ let 키워드

◼ let 키워드를 사용해서 변수를 선언할 수 있다.

◼ let 키워드는 중복 사용을 검사하기 때문에, 동일한 변수명으로 사용 시 에러가 발생한다.

◼ let 키워드의 스코프는 블록 레벨이다.

◼ var 키워드보다 let 키워드를 사용해서 변수를 선언하는 것이 좋다.

 

❗ const 키워드

◼ const 키워드를 사용해서 상수를 선언할 수 있다.

◼ 변수의 재할당이 불가능하다.

◼ const 키워드의 스코프는 블록 레벨이다.

✔ 호이스팅

console.log(foo); // undefined
var foo = 10;
console.log(foo); // 10

console.log(bar); // ReferenceError
let bar = 10;

◼ var 키워드를 사용하여 선언한 변수나 function을 사용한 메서드를 해당 스코프 선두로 옮긴 것 처럼 동작하는 특성을 말한다.

◼ var 키워드의 선언과 초기화(undefined)가 console.log(foo) 이전에 일어나기 때문에, 변수 선언 전 undefined가 발생하고, let 키워드는 호이스팅이 이루어지지 않아 RferenceError가 발생한다. 

✔ function

function {이름}() {
}

◼ 긴 코드를 짧은 단어로 축약해서 사용할 수 있다.

◼ {이름}()으로 사용할 수 있다.

◼ 재사용성이 늘어난다.

◼ function 작명은 구체적 + 영어 + 시작은 소문자 + camelCase를 사용하는 것이 좋다.

 

✔ if-else

◼ 조건문

 

✔ for

for (let i = 0; i < 횟수; i++) {
}

◼ 반복문

 

✔ 중요한 비교 연산자

1 == '1' // true
1 === '1' // false

◼ == (느슨한 비교, 값만 같으면 된다.)

◼ === (엄격한 비교, 타입과 값이 같아야 한다.)

 

✔ 문자가 포함되어 있는지 검사하기

console.log("abc".includes("a")); // true
console.log("abc".includes("ab")); // true

◼ includes 함수를 사용하여 해당 문자, 문자열이 존재하는지 확인할 수 있다.

◼ 한글이 존재하는지, 영어가 존재하는지 등의 세부적인 검사에는 적합하지 않다.

 

✔ 정규식 검사

console.log(/a/.test("abcd")); // true

// 범위 지정
console.log(/[a-z]/.test("abcd")); // a부터 z까지 1개가 포함되어 검사 (true)
console.log(/[a-zA-Z]/.test("abcd")); // 아무 알파벳이나 1개가 포함되어 검사 (true)
console.log(/[ㄱ-ㅎ가-힣]/.test("abcd")); // 아무 한글이나 1개가 포함되어 검사 (false)

// 표현식
console.log(/\S/.test("abcd")); // 아무 문자나 1개가 포함되어 검사 (true)
console.log(/^a/.test("abcd")); // a로 시작하는지 검사 (true)
console.log(/a|b/.test("abcd")); // a 또는 b가 존재하는지 검사 (true)

// 이메일 검사 정규식
/[a-zA-Z]+@[a-zA-Z]+\.[a-zA-Z]+/.test("aasdasd@casehc.com") // true

◼ /{정규식}/.test({검사할 문자/문자열})을 사용하여 검사할 수 있다.

◼ 이메일 검사 정규식에서 \S는 한 글자만 검사하므로 +를 붙여서 반복 검사를 진행하고 .은 정규식 문법이기 때문에 \를 앞에 붙여서 사용한다.

 

✔ 반올림 하기

console.log((5555 * 1.1).toFixed(2)); // 6110.50

◼ toFixed({반올림이 적용되어 남은 소수점 자리 수})를 사용하여 반올림을 할 수 있다.

 

✔ 연산자 특징

console.log('1' + 1) // '11'

◼ 숫자 1과 문자 1을 더하면 "11" 문자열이 된다.

 

✔ Array

let carName = "소나타";
let price = 50000;
let carColor = "white";

// Array 사용하기
let car = ["소나타", 50000, "white"];

◼ Array를 사용하면 여러 자료를 변수 하나에 저장 가능하다.

◼ 자료형은 string, number 상관 없이 한 번에 넣을 수 있다.

◼ car[0]은"소나타", car[1]은 50000, car[2]은 "white"가 출력된다.

◼ Array에 자료를 추가하는 방법은 car[3] = {원하는 값}

◼ Array에서 자료를 수정하는 방법은 car[2] = "black"

◼ 순서가 존재하여, car.sort()로 정렬이 가능하고 car.slice({시작 Idx}, {종료 Idx})로 중간에 배열을 자를 수 있다.

 

✔ Object

let carName = "소나타";
let price = 50000;
let carColor = "white";

// Object 사용하기
let car = {
  name: "소나타",
  price: 50000,
  color: "white",
};

◼ Object에 값을 넣기 위해서는 {}을 사용하고, {key}: {value}로 값을 기입한다.

◼ car.name은 "소나타", car.price는 50000, car.color는 "white"가 출력된다.

◼ car의 색깔을 "black"으로 수정하기 위해서는 car.color = "black"으로 수정할 수 있다.

◼ car.{key} = {value}를 사용하면 새로운 값을 저장할 수 있다. 

 

✔ 정렬하기

let arr = [7, 4, 6, 30, 20];
arr.sort() // 20, 30, 4, 6, 7

◼ arr.sort()의 결과로 4, 6, 7, 20, 30을 기대했지만, 20, 30, 4, 6, 7 순으로 출력되는데, 이는 sort() 사용 시 string 정렬이 이루어지기 때문이다.

 

let arr = [7, 4, 6, 30, 20];
arr.sort((a, b) => {
  return a - b;
}); // 4, 6, 7, 20, 30

◼ compareFunction을 정의해서 숫자 정렬이 이루어지도록 한다.

 

// 문자열 내림차순 정렬 
// 1번
let strs = ["b", "a", "c"];
strs.sort().reverse();
console.log(strs) // "c", "b", "a"

// 2번
let strs = ["b", "a", "c"];
strs.sort((a, b) => {
  if (a < b) {
    return 1;
  } else if (a > b) {
    return -1;
  } else {
    return 0;
  }
});
console.log(strs);

◼ 내림차순 정렬은 위와 같이 2가지 방법이 있다.

---

📒 Web Browser API 사용하기

✔ 원하는 태그 찾기

◼ document.getElementById("{Id 값}"): Id 값으로 해당하는 태그 찾기, Id 값은 고유하므로 id 값에 해당하는 태그 1개 반환

◼ document.getElementsByClassName("{Class 값}"): Class 값으로 해당하는 태그 찾기, 동일한 Class 값이 존재할 수 있어 뒤에 [{인덱스 값}]을 붙여 HTML 맨 위에서부터 원하는 요소를 선택할 수 있다.

◼ document.querySelector("#{Id 값}"): Id 값으로 해당하는 태그 찾기, HTML 맨 위에서부터 첫 번째 태그를 찾는다.

◼ document.querySelector(".{Class 값}"): Class 값으로 해당하는 태그 찾기, HTML 맨 위에서부터 첫 번째 태그를 찾는다.

◼ document.querySelectorAll(".{Class 값}"): Class 값으로 해당하는 태그 찾기, 뒤에 [{인덱스 값}]을 붙여 HTML 맨 위에서부터 원하는 요소를 선택할 수 있다.

◼ 그냥 값은 태그, # ->  id, . -> class를 의미한다.

 

✔ Timeout

setTimeout(() => {
  document.getElementById("5-alert").style.display = "none";
}, 5000);

◼ setTimeout({handler}, {milliSec})을 사용하여, milliSec 후 실행할 handler를 지정할 수 있다.

◼ "5-alert"라는 Id를 가진 태그의 Css에 5초 후, display: none을 추가하는 코드이다.

 

✔ Interval

setInterval(() => {
  console.log("안녕");
}, 1000);

◼ setInterval({handler}, {milliSec})을 사용하여, milliSec 마다 실행할 handler를 지정할 수 있다.

◼ 1초마다 "안녕"을 출력한다.

 

✔ alert

◼ alert({message})를 사용해서 알림창을 띄울 수 있다.

---

📒 JavaScript로 UI 만들기

1.  HTML/CSS로 미리 디자인한다.

2. 필요할 때 보여주는 JavaScript 코드를 작성한다.

---

📒 HTML 안에서 JavaScript 사용하기

✔ 기본으로 사용하기

<body>
  <h1 id="hello">안녕하세요</h1>

  <script>
    document.getElementById("hello").innerHTML = "안녕";
    document.getElementById("hello").style.fontSize = "50px";
  </script>
</body>

◼ script 태그를 사용한다.

◼ h1 태그의 "안녕하세요"를 "안녕"으로 바꾸고 폰트 크기를 50px로 바꾼다.

💥 script 태그는 아래에 사용하는 것이 좋다. (HTML 파일을 읽을 때, 위에서부터 차례대로 읽기 때문에 HTML 태그를 미리 읽어놔야 JavaScript가 잘 동작하기 때문이다.)

✔ eventListener 사용하기

/* addEventListener 사용 전 */
<button
  class="alter-btn"
  onclick="alterBnt('none')"
>

/* addEventListener 사용 후 */
<button
  id="close"
>
<script>
  document
  .getElementById("close")
  .addEventListener(
    "click",
    () => (document.getElementById("alter").style.display = "none")
  );
</script>

◼ addEventListener({type}, {function})를 사용해서 쓸 수 있다. event에 대한 감시자 역할로 사용한다.

◼ event는 클릭, 키입력, 스크롤, 드래그  등의 기능을 의미한다. (click, keydown, scroll, mouseover...)

◼ 파라미터를 2개 입력해서 사용한다. ('type', 'function')

◼ type이 "click"일 경우, 해당 태그를 클릭하면 event가 발생한다.

◼ type이 "input"일 경우, input 태그의 값이 변경되면 event가 발생한다.

◼ type이 "chabge"일 경우, input 태그에 값을 입력하다가 mouse로 다른 곳을 클릭하면 event가 발생한다.

◼ 찾은 태그가 img 이거나, window일 경우이면서, type이 "load"일 경우, DOM이 생성되었으면서, 이미지, css, js 파일이 로드 되었는지 체크가 가능하다.  -> image가 load 되었을 때, 이벤트가 발생하기 때문이다.

💥 addEventListener()의 function을 입력할 때, 람다식을 넣는 것이 아닌, 이미 작성한 function()을 넣으면 해당 function이 초기에 한 번 실행된다. 

💥 addEventListener를 사용할 때마다 Ram 용량을 차지하기 때문에 여러 개가 아닌 1개만 쓰도록 구현하는 것이 좋다.

✔ HTML class 속성에 새로운 요소 추가하기

<script>
  document
    .getElementById("sub-menu-button")
    .addEventListener("click", () => {
      document
        .getElementById("sub-menu-list")
        .classList.toggle("nav-sub-menu-show");
    });
</script>

◼ document.getElementById("{id 값}"): HTML 문서에서 id 값에 해당하는 태그 가져오기

◼ .classList: 해당 태그의 class 속성의 요소 리스트 가져오기

◼ .toggle("{class 이름}"): class 이름이 이미 있으면 제거하고 없으면 추가하기

 

✔ Scroll 사용하기

◼ Window는 Document보다 더 큰 범위이다.

◼ window.addEventListener("scroll", {function})를 사용하여 스크롤을 조작할 때마다 실행할 함수를 작성한다.

◼ window.scrollY를 통해 유저가 스크롤을 어느정도 내렸는지 확인할 수 있다.

◼ window.scrollTo({x 좌표}, {y 좌표})를 통해 원하는 좌표로 스크롤을 강제 이동시킬 수 있다.

◼ window.scrollBy({x 좌표}, {y 좌표})를 통해 원하는 좌표로 현재 위치에 더해서 강제 이동시킬 수 있다.

◼ window.scrollTop({y 좌표})를 통해 Y 좌표로 스크롤을 강제 이동시킬 수 있다.

◼ document.getElementById({Id 값}).scrollTop을 통해 태그에서 어느정도 스크롤 했는지 알 수 있다.

◼ document.getElementById({Id 값}).scrollHeight를 통해 태그의 스크롤 총 Height을 알 수 있다.

◼ scrollTop과 scrollHeight는 위 그림과 같은 차이가 있어 사용자가 스크롤한 위치와 스크롤의 총 길이를 비교하기 위해서는 div의 height 만큼 scrollTop에 더하고 오차를 생각해서 계산해야 한다.

◼ document.getElementById({Id 값}).clientHeight을 통해 div의 height을 알 수 있다.

💥 Scroll EventListener는 1초에 60번 이상 실행되기 때문에, 적절하게 사용해야 한다. 

💥 중복 실행될 수 있기 때문에, 중복 방지 코드도 필요하다.

 

✔ JavaScript 코드 import 하기

<script src={javaScript 경로}></script>

◼ src 속성에 javaScript 경로를 넣어주면 import 해서 사용할 수 있다.

 

✔ JavaScript 로 HTML에 요소 추가하기

let pTag = document.createElement("p");
pTag.innerHTML = "Test!";
document.querySelector("#test").appendChild(pTag);

◼ document.createElement("{태그}")로 태그를 생성한다.

◼ 원하는 태그를 찾고 .appendChild({만들어진 태그})를 사용하면, 원하는 태그의 자식으로 삽입된다.

 

let tag = "<p> 안녕 </p>";
document.querySelector("#test").insertAdjacentHTML("beforeend", tag);

◼ 넣고자 하는 태그를 문자열로 작성하고 .insertAdjacentHTML("{position}", "{태그}")를 사용하면 원하는 태그에 자식으로 삽입할 수 있다.

 

💥 createElement()를 사용하는 것이 성능상 더 좋다. (그러나 지금은 거의 무시해도 좋을 정도이다.)

---

📒 jQuery 사용하기

✔ 왜? (사용 이유)

◼ JavaScript를 사용하여 HTML을 조작하면 코드가 길어지고 가독성이 떨어진다.

◼ jQuery는 HTML 조작 문법을 쉽게 바꿔주는 라이브러리이다.

 

✔ jQuery 설치하기

1. jQuery CDN을 검색한 후, 해당 사이트에서 가장 최신 버전의 minified를 선택하여 script를 복사한다.

https://releases.jquery.com/

jQuery CDN

2. 복사한 script를 header 태그에 붙여 넣어서 사용한다.

✔ jQuery 문법

/* JavaScript 사용 */
document.querySelector(".navbar-button").addEventListener("click", () => {
    document
      .getElementById("sub-menu-list")
      .classList.toggle("nav-sub-menu-show");
  });
    
/* JQuery 사용 */
$(".navbar-button").click(() => {
    $(".list-group").toggleClass("nav-sub-menu-show");
  });

◼ document.querySelector()를 $로 사용할 수 있다.

◼ addEventListener()를 on()으로 사용할 수 있다.

◼ addEventListener('click', {function})을 .click()으로 사용할 수 있다.

◼ .classList.toggle()을 .toggleClass()로 사용할 수 있다.

 

$("#hello").html("바보").css("color", "red");

◼ hello라는 id를 가지고 있는 HTML 문서 중 맨 처음 태그의 값을 "바보"로, 색상을 red로 변경한다.

 

$(".hello").html("바보").css("color", "red");

◼ hello class를 가지고 있는 HTML 문서 중 맨 처음 태그의 값을 "바보"로, 색상을 red로 변경한다.

 

$("#id1").hide();
$("#id1").fadeOut();
$("#id1").slideUp();

◼ hide(): display: none과 같은 역할을 한다.

◼ fadeOut() 같이 간단한 애니메이션 효과를 줄 수 있다.

◼ 애니메이션을 JavaScript로 주면 성능상 안 좋기 때문에, CSS로 구현하는 것이 좋다.

 

💥 주의: $("셀렉터")로 찾으면 jQuery 함수만 붙일 수 있다.

---

📒 이벤트 버블링이란?

모든 브라우저는 이벤트 버블링이 발생하는데, 이는 이벤트가 상위 html(요소)로 퍼지는 현상을 의미한다.

다르게 말하면, 상위 요소를 클릭해도 하위 요소를 클릭한 것과 같다.

✔ 상황

<body>
  <div id="modal" class="black-bg">
    <div class="white-bg">
      <h4>로그인하세요</h4>
      <form id="login-form" action="form-success.html">
        <div>
          <input id="username" type="text" />
        </div>
        <div>
          <input id="password" type="password" />
        </div>
        <button type="submit">전송</button>
        <button type="button" onclick="clickModalCloseBtn()">닫기</button>
      </form>
    </div>
  </div>
</body>

<script>
document.getElementById("modal").addEventListener("click", () => {
  document.getElementById("modal").classList.remove("show-modal");
});
</script>

◼ 검은색 배경을 클릭하면 모달창이 사라지도록 javaScript 코드를 작성한다.

◼ 위 코드에서, "modal"이라는 Id 값을 가진 태그(검은색 배경)를 클릭하면, show-modal 클래스를 없애서 모달창을 종료한다.

◼ 실제로 동작해보면, 하얀색 부분을 클릭해도 모달창이 종료된다.

◼ 이는 "white-bg" class를 가진 div 태그가 "mode" id를 가진 태그 자식으로 포함되어 있고, 이벤트 버블링에 의해 자식에서 발생한 이벤트가 부모에게 전파되기 때문에, 하얀색 배경을 클릭해도 모달창이 종료된다.

 

✔ 해결 방법

.addEventListener("click", (event) => {
  event.target;
  event.currentTarget;
  event.preventDefault();
  event.stopPropagation();
}

◼ 유용한 이벤트 관련 함수들을 사용해서 해결한다.

◼ event.target: 이벤트가 발생한 곳, 유저가 실제로 누른 태그가 출력된다.

◼ event.currentTarget: 이벤트 리스너가 달린 곳, .addEventListener 앞의 태그가 출력된다.

◼ event.preventDefault(): 이벤트 기본 동작을 막아준다. addEventListener의 type(여기서는 "click")에 해당하는 동작이 안 눌렸던 것처럼 행동한다.

◼ event.stopPropagation(): 내 상위 요소로 이벤트 버블링되는 것을 막아준다.

 

따라서, 다음과 같이 코드를 작성해서 검은색 배경을 클릭했을 경우에만 모달창을 닫는다.

<script>
  document.getElementById("modal").addEventListener("click", (event) => {
    if (event.target === event.currentTarget) {
      document.getElementById("modal").classList.remove("show-modal");
    }
  });
</script>

---

📒 SSR / CSR

✔ SSR

server-side-rendering으로 서버가 html을 다 만들어서 클라이언트 서버에 제공한다.

✔ CSR

client-side-rendering으로 서버는 데이터만 전송하고 클라이언트 서버 측에서 데이터 바인딩을 진행한다.

💥 데이터 바인딩이란, 서버로부터 받은 데이터를 바탕으로 HTML 태그에 값을 넣는 작업

 

📒 fetch

◼ ES6부터 JavaScript 내장 라이브러리로 들어온 함수로, Promise 기반으로 만들어져서 데이터를 다루는데 유리하다.

◼ 내장 라이브러리라는 장점으로 인해 사용하기 편리하며, 코드 역시 간단한다.

✔ GET 요청 보내기

fetch("{url}")
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  })
  .catch(() => {
    console.log("실패");
  });

◼ fetch() 함수를 사용해서 GET 요청을 보낼 수 있다.

◼ then()으로 응답 데이터를 처리할 수 있다.

◼ catch()로 에러를 처리할 수 있다.

 

✔ POST 요청 보내기

const url = "{url}"
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'test',
    age: 10
  })

fetch(url, options)
  .then(res => console.log(res))

◼ fetch(url, {method, headers, body})로 POST 요청을 보낼 수 있다.

◼ Http Method, Http Header, Http Body를 정해 요청에 함께 보낼 수 있다.

---

📒 AJax

◼ 새로고침 없이 GET, POST 요청을 할 수 있는 기능

◼ form 태그를 사용해서 GET, POST 요청 시 브라우저가 새로고침된다.

✔ 순수 AJax 사용하기

let req = new XMLHttpRequest();
let serverAddress = "{url}";

req.addEventListener("load", (res) => {
  console.log(res.currentTarget.response);
});
req.open("GET", serverAddress);
req.send();

◼ XMLHttpRequest()를 사용하여 요청을 보내고, eventListener를 사용해서 응답을 처리한다.

✔ JQuery로 AJax 사용하기

<script>
  $.get("{url}").done((res) => {
    console.log(res);
  })
  .fail(() => {
    console.log("실패");
  });
  
  $.post("{url}", {데이터}).done((res) => {
    console.log(res);
  })
  .fail(() => {
    console.log("실패");
  });
</script>

◼ JQuery와 AJax를 같이 사용하면 간편하게 사용할 수 있다.

◼ $.get()으로 GET 요청을 할 수 있다.

◼ $.post()로 POST 요청을 할 수 있다.

◼ done({callback})을 사용하여 요청이 성공했을 때, 응답 데이터를 받아 처리할 수 있다.

◼ fail({callback})을 사용하여 요청이 실패했을 때, 처리할 수 있다.

---

📒 LocalStorage / SesstionStorge

◼ .js 파일이나, script 태그 안에 선언된 변수는 브라우저를 새로고침하면 사라진다.

◼ LocalStorage / SesstionStorge 를 사용하면 반영구적으로 데이터를 저장할 수 있다.

◼ key : value 형태로 데이터를 저장할 수 있다.

◼ 용량은 5MB, 문자 / 숫자만 저장할 수 있다.

◼ LocalStorage는 사이트를 재접속해도 데이터가 유지되지만, SesstionStorage는 사이트를 나가면 자동으로 삭제된다.

✔ LocalStorage 사용하기

localStorage.setItem("{key}", "{value}")
localStorage.getItem("{key}")
localStorage.removeItem("{key}");

// Array, Object 저장하기
let testArray = [1, 2, 3];
let testObject = {
  name: "test",
  age: 10,
};
localStorage.setItem("Array", JSON.stringify(testArray));
localStorage.setItem("Object", JSON.stringify(testObject));

// Array, Object 가져와서 사용하기
let localStorageArray = localStorage.getItem("Array");
console.log(JSON.parse(localStorageArray));

◼ localStorage.setItem()으로 데이터를 저장할 수 있다.

◼ localStorage.getItem()으로 데이터를 가져올 수 있다.

◼ localStorage.removeItem()으로 데이터를 삭제할 수 있다.

◼ 배열을 저장하고 싶다면 JSON.stringify()를 사용하여 JSON으로 변경 후 저장한다.

◼ JSON을 가져와서 원래 형태로 사용하고 싶다면, JSON.parse()를 사용하면 된다.

 

✔ SessionStorage 사용하기

sessionStorage.setItem("{key}", "{value}")
sessionStorage.getItem("{key}")
sessionStorage.removeItem("{key}");

// Array, Object 저장하기
let testArray = [1, 2, 3];
let testObject = {
  name: "test",
  age: 10,
};
sessionStorage.setItem("Array", JSON.stringify(testArray));
sessionStorage.setItem("Object", JSON.stringify(testObject));

// Array, Object 가져와서 사용하기
let sessionStorageArray = sessionStorage.getItem("Array");
console.log(JSON.parse(sessionStorageArray));

◼ LocalStorage와 사용법이 동일하고, sessionStorage를 붙여서 사용하면 된다.