localstroage

  • ์ด ์ฃผ์ œ์—๋Š” 2๊ฐœ ๋‹ต๋ณ€, 2๋ช… ์ฐธ์—ฌ๊ฐ€ ์žˆ์œผ๋ฉฐ codingapple๊ฐ€ 3 ๋…„, 7 ์›” ์ „์— ์ „์— ๋งˆ์ง€๋ง‰์œผ๋กœ ์—…๋ฐ์ดํŠธํ–ˆ์Šต๋‹ˆ๋‹ค.
3 ๊ธ€ ๋ณด์ž„ - 1 ์—์„œ 3 ๊นŒ์ง€ (์ด 3 ์ค‘์—์„œ)
  • ๊ธ€์“ด์ด
    ๊ธ€
  • #72634

    ์‹ฌํ˜„์„
    ์ฐธ๊ฐ€์ž
    useEffect(() => {
    let ๊บผ๋‚ธ๊ฑฐ = localStorage.getItem("watched");
     ๊บผ๋‚ธ๊ฑฐ = JSON.parse(๊บผ๋‚ธ๊ฑฐ);
     console.log(๊บผ๋‚ธ๊ฑฐ);
     ๊บผ๋‚ธ๊ฑฐ.push(์ฐพ์€์ƒํ’ˆ.id);
    // set์€ ์ค‘๋ณต ์—†์• ์ฃผ๋Š” ํ•จ์ˆ˜
    // set ์œผ๋กœ ์ค‘๋ณต์„ ์ œ๊ฑฐํ•œ ๊ฒƒ๋“ค์„ ๋‹ค์‹œ array ๋กœ ๋ณ€ํ™˜์‹œ์ผœ์ค˜์•ผํ•จ
     ๊บผ๋‚ธ๊ฑฐ = new Set(๊บผ๋‚ธ๊ฑฐ);
     ๊บผ๋‚ธ๊ฑฐ = Array.from(๊บผ๋‚ธ๊ฑฐ);
     localStorage.setItem("watched", JSON.stringify(๊บผ๋‚ธ๊ฑฐ));
     }, []);
    
    
    ์ค‘๋ณต์ œ๊ฑฐ๋ฅผ set ์ž๋ฃŒํ˜• ํ•จ์ˆ˜ ๋ง๊ณ  if๋ฌธ์œผ๋กœ ํ•˜๊ณ ์‹ถ๋‹ค๋ฉด ๊บผ๋‚ธ๊ฑฐ(array)์•ˆ์— ์ฐพ์€์ƒํ’ˆ id๊ฐ€ ์žˆ๋ƒ๋ฅผ if ๋ฌธ์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ๋  ๊ฑฐ ๊ฐ™์€๋ฐ find/findIndex ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ ๊นŒ์š” ?
    #72642

    ์‹ฌํ˜„์„
    ์ฐธ๊ฐ€์ž
    ๋ฒˆ์™ธ๋กœ ๊ถ๊ธˆํ•œ๊ฒŒ ํ•˜๋‚˜ ๋” ์žˆ์–ด์„œ ์งˆ๋ฌธ๋“œ๋ฆฝ๋‹ˆ๋‹ค
    
    App.jsx ์— ์žˆ๋Š” useEffect(() => {
     localStorage.setItem("watched", JSON.stringify([]));
     }, []);
    ์ฝ”๋“œ๋กœ ์ธํ•ด ๋กœ์ปฌ์ŠคํŠธ๋ฆฌ์ง€์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋“ค์ด  ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ์‹œ  [] ์ฒ˜๋ฆฌ๋˜์–ด์„œ 
    ์œ„์— ์ฝ”๋“œ๋ฅผ ์ง€์›Œ๋ดค๋”๋‹ˆ 
    
    useEffect(() => {
    let ๊บผ๋‚ธ๊ฑฐ = localStorage.getItem("watched");
     ๊บผ๋‚ธ๊ฑฐ = JSON.parse(๊บผ๋‚ธ๊ฑฐ);
     console.log(๊บผ๋‚ธ๊ฑฐ);
     ๊บผ๋‚ธ๊ฑฐ.push(์ฐพ์€์ƒํ’ˆ.id);
    // set์€ ์ค‘๋ณต ์—†์• ์ฃผ๋Š” ํ•จ์ˆ˜
    // set ์œผ๋กœ ์ค‘๋ณต์„ ์ œ๊ฑฐํ•œ ๊ฒƒ๋“ค์„ ๋‹ค์‹œ array ๋กœ ๋ณ€ํ™˜์‹œ์ผœ์ค˜์•ผํ•จ
     ๊บผ๋‚ธ๊ฑฐ = new Set(๊บผ๋‚ธ๊ฑฐ);
     ๊บผ๋‚ธ๊ฑฐ = Array.from(๊บผ๋‚ธ๊ฑฐ);
     localStorage.setItem("watched", JSON.stringify(๊บผ๋‚ธ๊ฑฐ));
     }, []);
    
    ์ด ์ฝ”๋“œ๋กœ ๋กœ์ปฌ์ŠคํŠธ๋ฆฌ์ง€์— ์žˆ๋Š” ์ƒํ’ˆ id ๋“ค์ด ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜์—ฌ๋„ ์‚ฌ๋ผ์ง€์ง€ ์•Š๊ณ  ์ž˜ ๋ณด์กด๋ฉ๋‹ˆ๋‹ค
    
    app.jsx ์— ๊ตณ์ด if๋ฌธ์„ ์ด์šฉํ•ด useEffect ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•˜๋Š” ์ด์œ ๊ฐ€ ์žˆ์„๊นŒ์š” ? 
    useEffect ๊ฐ€ ์—†์–ด๋„ ์ž˜ ์ž‘๋™ํ•ด์„œ ๊ถ๊ธˆํ•ด์„œ ์—ฌ์ญค๋ด…๋‹ˆ๋‹ค !
    #72682

    codingapple
    ํ‚ค ๋งˆ์Šคํ„ฐ
    findIndex์“ฐ๋ฉด array์•ˆ์—์žˆ๋Š”๊ฑฐ ๋ช‡๋ฒˆ์งธ์ธ์ง€ ์ฐพ์•„์ค๋‹ˆ๋‹ค
    ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์— watchedํ•ญ๋ชฉ์ด ์•„์˜ˆ ์—†์œผ๋ฉด ์ด์ƒํ•˜๊ฒŒ ๋™์ž‘ํ•˜๊ฑฐ๋‚˜ ๊ทธ๋Ÿด์ˆ˜๋„์š”
3 ๊ธ€ ๋ณด์ž„ - 1 ์—์„œ 3 ๊นŒ์ง€ (์ด 3 ์ค‘์—์„œ)
  • ๋‹ต๋ณ€์€ ๋กœ๊ทธ์ธ ํ›„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

About

ํ˜„์žฌ ์›” 700๋ช… ์‹ ๊ทœ์ˆ˜๊ฐ•์ค‘์ž…๋‹ˆ๋‹ค.

  (09:00~20:00) ๋น ๋ฅธ ์ƒ๋‹ด์€ ์นดํ†ก ํ”Œ๋Ÿฌ์Šค์นœ๊ตฌ ์ฝ”๋”ฉ์• ํ”Œ (๋งํฌ)
  admin@codingapple.com
  ์ด์šฉ์•ฝ๊ด€, ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ
โ“’ Codingapple, ๊ฐ•์˜ ์˜ˆ์ œ, ์˜์ƒ ๋ณต์ œ ๊ธˆ์ง€
top

ยฉ Codingapple, All rights reserved. ์Šˆํผ๋กœ์ผ“ ์—๋“€์ผ€์ด์…˜ / ์„œ์šธํŠน๋ณ„์‹œ ๊ฐ•๋™๊ตฌ ๊ณ ๋•๋กœ 19๊ธธ 30 / ์‚ฌ์—…์ž๋“ฑ๋ก๋ฒˆํ˜ธ: 212-26-14752 ์˜จ๋ผ์ธ ๊ต์œกํ•™์›์—… / ํ†ต์‹ ํŒ๋งค์—…์‹ ๊ณ : ์ œ 2017-์„œ์šธ๊ฐ•๋™-0002 ํ˜ธ / ๊ฐœ์ธ์ •๋ณด๊ด€๋ฆฌ์ž: ๋ฐ•์ข…ํ  / ๋Œ€ํ‘œ์ž๋ช…: ๋ฐ•ํ•ด์œค