createElement
SessionStorage๋ฅผ ์ด์šฉํ•ด ์บ์‹œ ๊ตฌํ˜„ํ•˜๊ธฐ
createElement
createElement
createElement
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (14)
    • Javascript (7)
    • React (1)
    • Algorithm (5)
    • Web (1)
    • CS (0)
    • Webpack (0)
    • Error (0)
    • ํšŒ๊ณ  (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • prototype chaining
  • ์ •๋‹ต
  • ๋ฐฑ์ค€
  • ์ธ๊ฐ€ ์ฝ”๋“œ
  • 13699
  • netlify
  • ์†Œ์…œ ๋กœ๊ทธ์ธ
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • javascript
  • ๋ฌธ์ œํ•ด์„ค
  • ๋ฐ๋ธŒ์ฝ”์Šค
  • js
  • ์ฝ”๋“œ
  • ์นด์นด์˜ค ๋กœ๊ทธ์ธ ๊ตฌํ˜„
  • prototype
  • ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ
  • ์ฝ”ํ…Œ
  • ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ด๋‹
  • ํ”„๋กœํ† ํƒ€์ž…
  • 11652
  • documentFragment
  • 18428
  • React
  • sessionStorage
  • useRef
  • infinite scroll
  • prototype chain
  • Intersection Observer
  • ๊ฐ์ฒด

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
Javascript

SessionStorage๋ฅผ ์ด์šฉํ•ด ์บ์‹œ ๊ตฌํ˜„ํ•˜๊ธฐ

2022. 11. 23. 01:26
๋ชฉ์ฐจ
  1. ๐Ÿค” ์บ์‹œ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ์ด์œ 
  2. ๐Ÿ–ฑ๏ธ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•

๐Ÿค” ์บ์‹œ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ์ด์œ 

ํŠน์ • ๊ฐ’์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•ด๋‘๋ฉด ์ดํ›„์— ๊ทธ ํŠน์ • ๊ฐ’์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•  ๊ฒฝ์šฐ, ์š”์ฒญ์„ ๋ณด๋‚ด์ง€ ์•Š๊ณ  ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  ๋ถˆํ•„์š”ํ•œ ์š”์ฒญ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ด์ ์ด ์žˆ๋‹ค.

 

๐Ÿ–ฑ๏ธ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•

ํŠน์ • ๊ฐ’์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ SessionStorage์— ์ €์žฅํ•˜์—ฌ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. SessionStorage๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ซํžˆ๊ธฐ ์ „๊นŒ์ง€ ๋ฐ์ดํ„ฐ๊ฐ€ ์œ ์ง€๋œ๋‹ค. ๋งŒ์•ฝ ์˜๊ตฌ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด LocalStoage๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


๊ตฌํ˜„์€ ์ •๋ง ๊ฐ„๋‹จํ•˜๋‹ค!!!

import { getItem, setItem } from "./storage.js";

const $root = document.querySelector(".root");
const $input = document.createElement("input");
$root.appendChild($input);

const cache = getItem("cache_dog", {});

$input.addEventListener("input", (e) => {
  const breed = e.target.value.trim();

  if (breed.length > 1) {
    fetchData(breed);
  }
});

const fetchData = async (breed) => {
  try {
    if (cache[breed]) { // cache์— ์ด๋ฏธ breed์— ํ•ด๋‹น๋˜๋Š” ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ
      console.log(cache[breed]);
    } else { // cache์— breed์— ํ•ด๋‹น๋˜๋Š” ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ
      const response = await fetch(
        `https://dog.ceo/api/breed/${breed}/images/random`
      );

      if (!response.ok) {
        throw new Error("API ์—๋Ÿฌ");
      }

      const dogData = await response.json();
      cache[breed] = dogData.message;
      
      setItem("cache_dog", cache); // sessionStorage์— ์ €์žฅ
      console.log(cache[breed]);
    }
  } catch (e) {
    console.error(e);
  }
};

 

 

1. cache์— ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ๋Š” cache์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.

    ์•„๋ž˜ ์‚ฌ์ง„์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋“ฏ์ด ์ด๋ฏธ mix์˜ ๋ฐ์ดํ„ฐ๋Š” cache_dog์— ์ €์žฅ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด์ง€ ์•Š๋Š”๋‹ค.

 

 

2. ๋งŒ์•ฝ cache์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ ํ•ด๋‹น ๊ฐ’์— ๋Œ€ํ•ด ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ cache์— ์ €์žฅํ•œ๋‹ค.

    ํ•˜์ง€๋งŒ cache_dog์— ์—†๋Š” ๋ฐ์ดํ„ฐ์˜ ๊ฒฝ์šฐ ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

 

 

 

'Javascript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Vanilla Javascript] ๋ฌดํ•œ ์Šคํฌ๋กค(infinite scroll) ๊ตฌํ˜„ํ•˜๊ธฐ  (0) 2022.11.25
[JS] DocumentFragment, Template tag  (0) 2022.10.26
[JS] ํด๋กœ์ €(Closures) ์ดํ•ดํ•˜๊ธฐ  (0) 2022.10.18
spread์™€ rest ๋น„๊ตํ•˜๊ธฐ  (0) 2022.07.28
ํ”„๋กœํ† ํƒ€์ž…(Prototype) ์ดํ•ดํ•˜๊ธฐ 2  (0) 2022.07.17
  • ๐Ÿค” ์บ์‹œ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ์ด์œ 
  • ๐Ÿ–ฑ๏ธ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•
'Javascript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Vanilla Javascript] ๋ฌดํ•œ ์Šคํฌ๋กค(infinite scroll) ๊ตฌํ˜„ํ•˜๊ธฐ
  • [JS] DocumentFragment, Template tag
  • [JS] ํด๋กœ์ €(Closures) ์ดํ•ดํ•˜๊ธฐ
  • spread์™€ rest ๋น„๊ตํ•˜๊ธฐ
createElement
createElement
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.