[TIL] 240401

Geehyun(장지현)·2024년 4월 2일
TIL

TIL

목록 보기
52/70
post-thumbnail

Today

  • 웹 스토리지

    • 웹 브라우저에 자료를 저장하기 위한 기능으로 로컬 스토리지와 세션 스토리지로 나뉜다.
    • 기존의 쿠키와 비슷한 기술이지만 일부 차이가 있음 / 세션 스토리지 ≠ 세션
    • 저장하려는 데이터마다 유일한 이름(Key)를 같이 저장 함
    • 저장하려는 데이터의 종류에는 제한이 없으며, 저장시에는 문자열로 저장 됨
      • 로컬 스토리지 : 영구 보관 (쿠키와의 차이점)
      • 세션 스토리지 : 브라우저가 종료될 때까지 보관
    • Same Origin Policy 정책이 적용 됨 => 동일한 도메인에서만 사용가능 - 예외설정 가능
    • W3C는 Same Origin Policy에 따라 도메인당 5MB를 권장하며, 추가 용량이 필요한 경우 사용자의 동의를 얻어 용량 확장 가능
    • window 객체 내에 존재하는 주요 멤버
      => window.localStorage / window.sessionStorage
      • length : key/value 쌍의 개수
      • key(index) : 숫자형 인덱스에 해당하는 key를 리턴
      • getItem(key) : 해당 키에의 값 추출
      • setItem(key, value) : 해당 키에 해당 값을 저장
      • removeItem(key) : 해당 키에 해당하는 값을 삭제
      • onstorage : 로컬 스토리지의 내용이 변경될 때마다 발생되는 이벤트로 변경사항을 모니터링 하는 것이 가능
        [StorageEvent 객체의 주요 속성]
        • key : 추가, 삭제, 변경된 키 이름
        • oldValue : 업데이트되기 전 값 (새로 추가된 값이면 null)
        • newValue : 새로 업데이트된 값 (기존 값을 삭제한 경우면 null)
        • url : 변경사항이 발생된 페이지의 url
      • 저장
        localStorage.myKey = "myValue";
        localStorage["myKey"] = "myValue";
        localStorage.setItem(myKey, myValue);
      • 읽기
        localStorage.myKey;
        localStorage["myKey"];
        localStorage.getItem(myKey);
      • 삭제
        delete localStorage.myKey;
        delete localStorage["myKey"];
        localStorage.removeItem(myKey);
    • 실습1 : 기본 사용법
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>로컬 스토리지에 데이터 저장 및 출력하기</h1>
  <script>
    // 로컬스토리지에 값 저장하는 부분은 JS Script로 처리 함.
    localStorage.setItem("weekDay1", "월요일");
    localStorage.setItem("weekDay2", "화요일");
    localStorage.setItem("weekDay3", "수요일");
    localStorage.setItem("lunch1", "샌드위치");
    console.log("로컬스토리지에 있는 weekDay1 값 : " + localStorage.getItem("weekDay"));
    console.log("로컬스토리지에 있는 Key의 개수 : " + localStorage.length);
    localStorage.removeItem("weekDay1");
    console.log("로컬스토리지에 있는 Key의 개수 : " + localStorage.length);
    let key, value;
    for(let i=0; i < localStorage.length; i++) {
      key = localStorage.key(i);
      value = localStorage.getItem(key);
      console.log("key : " + key + ", value : " + value);
    }
    // 실제 사용 시는 주로 일회성 데이터를 저장할 때 사용 함
    // 개발자도구(F12) > Application > Stroage > LocalStorage > 해당 도메인 별로 저장되어있는걸 확인할 수 있음.
  </script>
</body>
</html>
    • 실습 2 :
      prompt 를 이용하여, Key 따로 value 따로 입력 받고,
      localStorage에 학년과 이름을 저장하는 로직을 작성하시오.
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>실습 2</title>
</head>
<body>
  <script>
    let key = prompt("학년을 입력하세요.");
    let value = prompt("이름을 입력하세요.");

    localStorage.setItem(key, value);

    if (key != null && value != null) {
      let element = document.createElement('p');
      element.innerText = key + " : " + localStorage[key];
      document.body.append(element);
    }
  </script>
</body>
</html>
    • 실습 3 : 세션스토리지 이용하기
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>세션 스토리지</title>
</head>
<body>
  <h1>세션스토리지에서 데이터 저장하고 읽기</h1>
  <h2>콘솔에서 확인하세요~~</h2>
  <script>
    sessionStorage.setItem("food1", "치킨");
    sessionStorage.setItem("food2", "피자");
    sessionStorage.setItem("food3", "파닭");

    console.log("세션스토리지에 저장된 키의 개수 : " + sessionStorage.length);

    let key, value;
    for(let i=0; i < sessionStorage.length; i++) {
      key = sessionStorage.key[i];
      value = sessionStorage.getItem(key);
      console.log("key :" + key + ", value : " + value);
    }

    // 세션스토리지 : 사용법은 로컬 스토리지와 동일하나, 브라우저가 닫히면 전부 삭제된다는 점이 다름.
  </script>
</body>
</html>
    • 실습 4 : 간단한 메모장 만들기 (선생님 버전)
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>메모장</title>
  <script>
    let msg, info;
    function pageLoad() {
      msg = document.querySelector("#txtBox");
      msg.value = window.localStorage.getItem("memo");
      info = document.querySelector("#info");

      forEachKey(getKeyInfo);
      displayItemsInfo();

    }
    function saveText() {

      info.style.display = "block";
      window.localStorage.setItem("memo", msg.value);

      forEachKey(getKeyInfo);
      displayItemsInfo();
      console.log("memo : " + localStorage.getItem("memo"));
    }

    function clearText() {
      msg.value = "";
      localStorage.clear();
      info.style.display = "none";
    }

    function getKeyInfo(param) {
      console.log("param : " + param);
    }

    function displayItemsInfo() {
      for(let i = 0 ; i < localStorage.length; i++) {
        console.log("displayItemsInfo : " + localStorage.getItem(localStorage.key(i)));
      }
    }

    function forEachKey(callback) {
      for(let i = 0; i < localStorage.length; i++) 
      callback(localStorage.key(i));
    }
  </script>
</head>
<body onload="pageLoad()">
  <h1>스토리지를 이용한 메모장</h1>
  <h2>메시지</h2>
  <textarea id="txtBox" cols="50" rows="5" onkeyup="saveText()"></textarea>
  <br>
  <input id="clear" type="button" value="메시지 비우기" onclick="clearText()">
  <p id="info" style="display: none;">메모 내용이 저장되었습니다.</p>
</body>
</html>
    • 실습 5 : 색상 / 고객성명 / 전화번호 입력 후 [추가] 클릭 시 리스트에 추가되고 리스트에서 해당 행 클릭 시 행 삭제되도록 구현 ( localStorage 활용 필수 )
      <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습</title>
  </head>
  <body onload="showList()">
    <table>
      <tr>
        <td>
          <label for="color">색상 선택</label>
          <select name="color" id="color">
            <option value="">색상선택</option>
            <option value="red">red</option>
            <option value="orange">orange</option>
            <option value="yellow">yellow</option>
            <option value="green">green</option>
            <option value="blue">blue</option>
            <option value="navy">navy</option>
            <option value="purple">purple</option>
          </select>
        </td>
        <td>
          <label for="nm">고객성명</label>
          <input id="nm" name="nm" type="text" value="" maxlength="30" placeholder="고객성명">
        </td>
        <td>
          <label for="phone">전화번호</label>
          <input id="phone" name="phone" type="text" value="" maxlength="30" placeholder="전화번호">
        </td>
        <td>
          <input type="button" id="add" value="추가" onclick="addStorage()">
          <input type="button" id="del" value="전부 초기화" onclick="deleteAll()">
        </td>
      </tr>
    </table>
    <ul id="list"> 
    </ul>
    <script>
      function addStorage() {
        let color = document.querySelector("#color");
        let nm = document.querySelector("#nm");
        let phone = document.querySelector("#phone");

        let key = nm.value + "\\" + new Date().getTime();
        let value = phone.value + "\\" + color.value;

        if (!color.value) {
          alert("색상을 선택해주세요");
          return false;
        }
        if (!nm.value) {
          alert("이름을 입력해주세요");
          return false;
        }
        if (!phone.value) {
          alert("전화번호를 입력해주세요");
          return false;
        }

        localStorage.setItem(key, value);
        addList(key);
        resetVal();
      }

      function resetVal() {
        color.value = "";
        nm.value = "";
        phone.value = "";
      }

      function addList(key) {
        let list = document.querySelector("#list");
        let element = document.createElement('li');

        let name = key.split("\\")[0];
        let phone = localStorage.getItem(key).split("\\")[0];
        let color = localStorage.getItem(key).split("\\")[1];
        element.innerText = name + " / " + phone;
        element.style.backgroundColor = color;
        element.setAttribute("data-key", key);
        element.setAttribute("onclick", "deleteThis(this)");

        list.append(element);
      }

      function deleteAll() {
        let list = document.querySelector("#list");
        list.innerHTML = "";
        localStorage.clear();
      }

      function deleteThis(element) {
        let list = document.querySelector("#list");
        let key = element.dataset.key;
        list.removeChild(element);
        localStorage.removeItem(key);
      }

      function showList() {
        for(let i = 0; i < localStorage.length; i++) {
          addList(localStorage.key(i));
        }
      }
    </script>
  </body>
  </html>

  • xml / JSON

    • xml 문서

      • xml 선언부를 제외하고는 html 기본 구조와 사용법이 유사
      • xml 선언부
        1) 반드시 맨 앞에 명세, xml 문서 유형을 지정
        2) xml 문서 구조를 정의한 DTD(또는 xml schema) 선언, 스타일을 정의한 css 연결에 대한 선언도 명세
      • 하나의 최상위 엘리멘트의 <시작태그>로 시작하여 </종료태그>로 종료
      • JSON에 비해 용량이 많이나가서, 웹통신에 있어 JSON이 좀 더 유리한 편

    • JSON

      • JavaScript Object Notation으로 xml과 마찬가지로 웹 통신에서 자료를 표현하는 방법
      • 기본적으로 JavaScript 객체 문법을 사용
      • 자료의 종류에 큰 제한이 없으며 기본 자료형으로는 숫자, 문자열, 참/거짓, null, 배열, 객체 등이 있습니다.
      • 장점
        1) 텍스트로 이루어져 있어, 읽고 쓰기 편함
        2) 프로그래밍 언어와 플랫폼에 독립적이며, 서로 다른 시스템 간 객체 전달에 유리
        3) JSON은 개발형 표준이며, 비교적 가벼움

    • JSON에 포함될 수 있는 데이터 타입
      * blob은 객체로 포함 됨.

    • 실습 1 : 위 Storage 실습 4번을 JSON 객체/배열로 Storage에 저장시키기

      • JSON.stringfy(Array 또는 Object) => Array 또는 Object를 String 으로 전환
      • JSON.parse(Stirng) => String을 Array 또는 Object로 전환
      <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>실습</title>
 </head>
 <body onload="showList()">
   <table>
     <tr>
       <td>
         <label for="color">색상 선택</label>
         <select name="color" id="color">
           <option value="">색상선택</option>
           <option value="red">red</option>
           <option value="orange">orange</option>
           <option value="yellow">yellow</option>
           <option value="green">green</option>
           <option value="blue">blue</option>
           <option value="navy">navy</option>
           <option value="purple">purple</option>
         </select>
       </td>
       <td>
         <label for="nm">고객성명</label>
         <input id="nm" name="nm" type="text" value="" maxlength="30" placeholder="고객성명">
       </td>
       <td>
         <label for="phone">전화번호</label>
         <input id="phone" name="phone" type="text" value="" maxlength="30" placeholder="전화번호">
       </td>
       <td>
         <input type="button" id="add" value="추가" onclick="addStorage()">
         <input type="button" id="del" value="전부 초기화" onclick="deleteAll()">
       </td>
     </tr>
   </table>
   <ul id="list"> 
   </ul>
   <script>
     function addStorage() {
       let color = document.querySelector("#color");
       let nm = document.querySelector("#nm");
       let phone = document.querySelector("#phone");

       if (!color.value) {
         alert("색상을 선택해주세요");
         return false;
       }
       if (!nm.value) {
         alert("이름을 입력해주세요");
         return false;
       }
       if (!phone.value) {
         alert("전화번호를 입력해주세요");
         return false;
       }

       let key = nm.value + "\\" + new Date().getTime();
       // String 으로 저장하기 (방법 1)
       // let value = phone.value + "\\" + color.value;
       // localStorage.setItem(key, value);

       // 배열로 저장하기 (방법 2)
       let arr = [];
       arr.push(nm.value);
       arr.push(phone.value);
       arr.push(color.value);
       localStorage.setItem(key,JSON.stringify(arr));

       // JSON.stringify(Array 또는 Object) => array를 string 으로 / JSON.parse(String) => String을 다시 Array 또는 Object로
       addList(key);
       resetVal();
     }

     function resetVal() {
       color.value = "";
       nm.value = "";
       phone.value = "";
     }

     function addList(key) {
       let list = document.querySelector("#list");
       let element = document.createElement('li');

       // String 으로 저장하기 (방법 1) 
       // let name = key.split("\\")[0];
       // let phone = localStorage.getItem(key).split("\\")[0];
       // let color = localStorage.getItem(key).split("\\")[1];

       // element.innerText = name + " / " + phone;
       // element.style.backgroundColor = color;

       // 배열로 저장하기 (방법 2)
       let values = JSON.parse(localStorage.getItem(key));
       let objArr = {
         "name" : values[0],
         "phone" : values[1],
         "color" : values[2]
       };

       element.innerText = objArr.name + " / " + objArr.phone;
       element.style.backgroundColor = objArr.color;

       element.setAttribute("data-key", key);
       element.setAttribute("onclick", "deleteThis(this)");

       list.append(element);
     }

     function deleteAll() {
       let list = document.querySelector("#list");
       list.innerHTML = "";
       localStorage.clear();
     }

     function deleteThis(element) {
       let list = document.querySelector("#list");
       let key = element.dataset.key;
       list.removeChild(element);
       localStorage.removeItem(key);
     }

     function showList() {
       if (localStorage.length > 0) {
         for(let i = 0; i < localStorage.length; i++) {
           addList(localStorage.key(i));
         }
       }
     }
   </script>
 </body>
 </html>

Review

  • 오랜만에 수업진도를 나가니깐 살짝 적응안됨...
  • 화요일까지(4/2 17:50까지) 팀별 최종 보고서 최종 제출이라 수업 중간중간 계속 보고서 작성 함...

TO DO

  • 화요일까지(4/2 17:50까지) 팀별 최종 보고서 최종 제출
  • 정처기 실기 준비 - 이제는 더이상 물러설 곳이 없다.
profile
Geehyun(장지현)
블로그 이전 했습니다. 아래 블로그 아이콘(🏠) 눌러서 놀러오세요
이전 포스트

[TIL] 240318 ~ 240322

다음 포스트

[TIL] 240402

0개의 댓글