Today I Learned #7

loopbacksealยท2021๋…„ 1์›” 4์ผ
0

Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
7/16
post-thumbnail

<li>๋ฅผ Local Storage์— ์ €์žฅํ•˜๊ธฐ

์ง€๋‚œ TIL์—์„œ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์ด submit๋œ ๊ฒฝ์šฐ paintToDo()๋ฅผ ํ†ตํ•ด ํ™”๋ฉด์— ์ถœ๋ ฅ๋˜๋„๋ก ํ•˜์˜€๋‹ค. ํ•˜์ง€๋งŒ ์ถœ๋ ฅ๋œ ๊ณ„ํš๋“ค์€ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์–ด์•ผํ•˜๋Š” ๋ถˆํŽธํ•จ์ด ์žˆ๊ณ , ์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„์„ ์ €์žฅํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ Local Storage๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ €์žฅํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

paintToDo(text) ์ˆ˜์ •

์ด์ „๊นŒ์ง€์˜ ์ž‘์—…์œผ๋กœ ์ธํ•ด submit์‹œ ์ถœ๋ ฅ์€ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, paintToDo(text)์—์„œ ๊ธฐ์กด์˜ ์ฝ”๋“œ๋Š” ๊ทธ๋Œ€๋กœ ๋‘” ์ฑ„๋กœ, LS๋กœ์˜ ์ €์žฅ์„ ์ถ”๊ฐ€ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ ๊ฐ€์žฅ ๋จผ์ € ํ•˜๋Š” ๊ฒƒ์€ Divide์ด๋‹ค. const toDos = [];๋กœ ์„ ์–ธ๋œ array์•ˆ์— ์ž…๋ ฅ๋“ค์„ ๋„ฃ์–ด์ฃผ๊ณ , ์ƒˆ๋กœ์šด submit์ด ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ํ•ด๋‹น toDos๋ฅผ LS์— ์ €์žฅํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰ํ•  ์˜ˆ์ •์ด๋‹ค. ๋˜ํ•œ toDos๋ฅผ ์„ ์–ธํ•จ์œผ๋กœ์„œ ๊ธฐ์กด์˜ ์ฝ”๋“œ์—์„œ ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋จ๊ณผ ๋™์‹œ์— ์ž‘๋™ํ•˜๋˜ function toDos()๋ฅผ loadedToDos()๋กœ ์ˆ˜์ •ํ•ด์ฃผ์—ˆ๋‹ค.

์ดํ›„ toDoObj๋ผ๋Š” object๋ฅผ text,id๋ฅผ ๊ฐ–๊ฒŒ ํ•จ์œผ๋กœ์„œ ๋ช‡๋ฒˆ์งธ To Do List์ธ์ง€(id), ์–ด๋–ค ๋‚ด์šฉ์ธ์ง€(text)๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€๋‹ค. id๋Š” ๊ธฐ์กด์— ์„ ์–ธ๋œ toDos์˜ ๊ธธ์ด๋ฅผ ๋ฐ˜ํ™˜ํ•œ ๊ฐ’์— +1์„ ํ•ด์ฃผ์—ˆ๋‹ค. ์ตœ์ดˆ ์„ ์–ธ์‹œ toDos๋Š” ๋น„์–ด์žˆ๋Š” array์ด๊ธฐ ๋•Œ๋ฌธ์— length๊ฐ’์ด 0์ด๊ณ , ๊ฑฐ๊ธฐ์— 1์„ ๋”ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์ฒซ๋ฒˆ์งธ toDoObj์˜ id๋Š” 1์ด๊ณ , ์ด toDoObj๊ฐ€ ์ถ”๊ฐ€๋˜๋ฉด ์ž์—ฐ์Šค๋ ˆ id๊ฐ€ 2๋กœ ๋„˜์–ด๊ฐ€๋Š” ๋ฐฉ์‹์ด๋‹ค.

์ดํ›„์—๋Š” ์ด Obj๋ฅผ push()๋ฅผ ํ†ตํ•ด์„œ toDos์— ์ถ”๊ฐ€ํ•ด์ฃผ๊ณ , ์ถ”๊ฐ€๋œ ๊ฐ’์„ LS์— ์ €์žฅํ•ด ์ฃผ์–ด์•ผํ•˜๋Š”๋ฐ, ํ•ด๋‹น ๊ธฐ๋Šฅ์€ ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ง„ํ–‰ํ•˜๋„๋ก Divide ํ•˜์˜€๋‹ค.

saveToDos()

์‚ฌ์šฉ์ž์˜ To Do List๋ฅผ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด์„œ ์„ ์–ธ๋œ ํ•จ์ˆ˜ saveToDos()์˜ ๋‚ด๋ถ€์—๋Š” Local Storage์—์˜ ์ €์žฅ์„ ์˜๋ฏธํ•˜๋Š” setItem()์„ ํ†ตํ•ด toDos๋ฅผ TODOS_LS์— ์ €์žฅํ•˜๋„๋ก ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ž‘์„ฑํ•˜์˜€๋‹ค.

function saveToDos() {
    localStorage.setItem(TODOS_LS, toDos);
}

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰์‹œ์ผœ๋ณด์ž, LS์— ๋ฌด์–ธ๊ฐ€๊ฐ€ ์ €์žฅ๋˜๊ธด ํ•˜์˜€์ง€๋งŒ, toDos์˜ value๋กœ ์ €์žฅ๋œ ๊ฐ’์ด {"object":object, "object": object}๋กœ์„œ ์ €์žฅ์ด ๋˜์—ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ˜„์ƒ์ด ๋ฐœ์ƒ๋œ ์›์ธ์€ Local Storage์—๋Š” javascript์˜ object๊ฐ€ ์ €์žฅ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋ฉฐ, JSON์„ ์ด์šฉํ•˜์—ฌ localStorage.setItem(TODOS_LS, JSON.stringify(toDos));๋กœ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด์ฃผ์ž ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ์ €์žฅ์ด ๋˜์—ˆ๋‹ค.

JSON?

๊ทธ๋ ‡๋‹ค๋ฉด ๋ฐฉ๊ธˆ ์‚ฌ์šฉํ•œ JSON.stringify()๋Š” ๋ญ˜๊นŒ?
JSON์ด๋ž€, _JavaScript Object Notation_์œผ๋กœ, MDN ๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด javascript ๊ฐ์ฒด๋ฅผ ๋ฐ์ดํ„ฐ๋กœ์„œ ๋‹ค๋ฃฐ ์ˆ˜ ์—†๋Š” ํ•œ๊ณ„๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด ์ƒ๊ฒจ๋‚œ ํ‘œ์ค€ ํฌ๋ฉง์ž…๋‹ˆ๋‹ค.


saveToDos()์—์„œ ์‚ฌ์šฉํ•œ stringify()๋Š” object๋ฅผ string์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜์—ˆ๋‹ค. ๋‹น์—ฐํ•˜๊ฒŒ๋„, ๋ณ€ํ™˜๋˜์–ด LS์— ์ €์žฅ๋œ string์„ ์ฝ”๋“œ ๋‚ด์—์„œ ๋‹ค์‹œ ํ™œ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” parse()๋ฅผ ํ†ตํ•ด string์„ object๋กœ์„œ ๋ฐ”๊ฟ”์•ผํ•จ์„ ์œ ์ถ”ํ•  ์ˆ˜ ์žˆ๋‹ค.

loadToDos()

์ง€๊ธˆ๊นŒ์ง€์˜ ์ง„ํ–‰์„ ์ •๋ฆฌํ•˜์ž๋ฉด, submit์ด ๋ฐœ์ƒํ–ˆ์„๋•Œ, paintToDo()์—์„œ ๋‹จ์ˆœํžˆ ์ถœ๋ ฅ์„ ํ•ด์ฃผ๋˜ ๊ธฐ๋Šฅ์— Local Storage์—๋„ ์ €์žฅํ•˜๋„๋ก ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด์ฃผ์—ˆ๊ณ , ๊ทธ ๊ธฐ๋Šฅ์€ saveToDo()๋ผ๋Š” ํ•จ์ˆ˜์˜ ๋‚ด๋ถ€์—์„œ ์ง„ํ–‰๋˜๋ฉฐ, object๋กœ์„œ ์‚ฌ์šฉ๋˜๋˜ toDos๋ฅผ JSON.stringify()๋ฅผ ํ†ตํ•ด string์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ LS์— ์ €์žฅ์„ ํ•ด์ฃผ์—ˆ๋‹ค. ์ด์ œ ํ•ด์•ผํ•  ์ผ์€ ์ด ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋“ค์„ ์‚ฌ์šฉ์ž๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•œ ์ดํ›„์—๋„ ์ถœ๋ ฅ๋œ ์ƒํƒœ๋กœ ๋ณด์—ฌ์ฃผ๋„๋ก ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด์•ผํ•˜๋Š”๋ฐ, ์ด ๊ธฐ๋Šฅ์„ init()์ดํ›„ ๊ฐ€์žฅ ๋จผ์ € ์‹คํ–‰๋˜๋Š” loadToDos()์— ๊ตฌํ˜„ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.

๊ฐ€์žฅ ๋จผ์ € LS์— ์ €์žฅ๋œ toDos๋ฅผ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.

const loadedToDos = localStorage.getItem(TODOS_LS);

๋งŒ์•ฝ loadedToDos๊ฐ€ null์ด๋ผ๋ฉด, ์ถœ๋ ฅํ•ด์•ผํ•  ๋‚ด์šฉ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์•„๋ฌด๊ฒƒ๋„ ์‹คํ–‰ํ•˜์ง€ ์•Š๊ณ  ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ๊ธฐ๋‹ค๋ฆฌ๊ณ , null์ด ์•„๋‹Œ ๊ฒฝ์šฐ์—๋งŒ LS์— ์กด์žฌํ•˜๋Š” toDos๋ฅผ ์ถœ๋ ฅํ•˜๋ฉด ๋œ๋‹ค. ๋”ฐ๋ผ์„œ,

if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
        parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        });
    }

์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์˜€๋‹ค. ์•ž์„œ JSON์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ, string ํ˜•ํƒœ์˜ ๋ฐ์ดํ„ฐ๋ฅผ object๋กœ์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ JSON.parse()๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , ์ด ๊ฐ’์„ forEach(function)๋ผ๋Š” **callback ํ•จ์ˆ˜**๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ array๋‚ด๋ถ€์˜ ๊ฐ ์›์†Œ์— function์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

callback function forEach()๋ž€ array์— ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ ๊ฐ์ข… ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ for๋ฌธ์„ ํ†ตํ•ด lengh๋งŒํผ ๋ฐ˜๋ณตํ•˜๋ฉฐ ๊ฐ index์˜ ์›์†Œ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ์‹๊ณผ ๊ฐ™์€ ์ž‘๋™์„ ํ•˜๋Š” ํ•จ์ˆ˜์ด๊ณ , ์ธ์ž๋กœ์„œ function์„ ๋ฐ›์•„ ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ๊ฐ ์›์†Œ์— ์ž‘๋™ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ loadToDos()์—์„œ๋Š” LS์— ์กด์žฌํ•˜๋Š” toDos์˜ value๋ฅผ objectํ™” ํ•˜์—ฌ array๋กœ์„œ ์ €์žฅ๋œ parsedToDos์˜ ๊ฐ ์›์†Œ๋ฅผ forEach()ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ๋ถˆ๋Ÿฌ์˜ค๊ณ , ๊ทธ ์•ˆ์˜ ํ•จ์ˆ˜๋กœ toDo๋ฅผ ์ธ์ž๋กœ ํ•˜๊ณ , toDo.text๋ฅผ paintToDo(toDo.text)ํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

profile
CAU Business Administration

0๊ฐœ์˜ ๋Œ“๊ธ€