Today I Learned #5

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

Javascript

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

์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„์„ form์„ ํ†ตํ•ด ๋ฐ›์•„์˜ค๊ธฐ

TIL#4์—์„œ, Local Storage์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๋ฉฐ Local Storage์— currentUser ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๊ณ , ์žˆ๋‹ค๋ฉด Hello (currentUser)!๊ฐ€ ์ถœ๋ ฅ๋˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•˜์˜€๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ ์ถœ๋ ฅ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ Local Storage๋ฅผ ํŽธ์ง‘ํ•˜์˜€๋Š”๋ฐ, ์˜ค๋Š˜์€ form์„ submitํ•˜์—ฌ ์ •๋ณด๋ฅผ Local Storage๋กœ ๋ณด๋‚ด๋„๋ก ํ•˜๋Š” ์—ฐ์Šต์„ ํ•ด๋ณด์ž.

Divide & Conquer

function loadName() {
    const currentUser = localStorage.getItem(USER_LS)
    if(currentUser === null){
        askForName();
    } else {
        paintGreeting(currentUser);
    }
}

#4์˜ ์ฝ”๋“œ์—์„œ๋Š” ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ currentUser๋ฅผ ์ง€์ •ํ•ด์ฃผ์—ˆ๊ณ , else์— ํ•ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„์ด ์ •์ƒ ์ž‘๋™ ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•˜์˜€๊ณ , ์˜ค๋Š˜์€ currentUser === null์ธ ์ƒํ™ฉ์—์„œ askForName()์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„์„ ํŽ˜์ด์ง€๋ฅผ ํ†ตํ•ด ์ž…๋ ฅ๋ฐ›์•„ ์ €์žฅํ•˜๋„๋ก ํ–ˆ๋‹ค.

submit

function askForName() {
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

currentUser === null์ธ ๊ฒฝ์šฐ ์ž‘๋™ํ•˜๋Š” ํ•จ์ˆ˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ์ผ๋‹จ, form์˜ classList์— "showing"์„ ์ถ”๊ฐ€ํ•ด์คŒ์œผ๋กœ์„œ display: none;์„ display: block์œผ๋กœ ๋ฐ”๊พธ์–ด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์ด๋„๋ก ํ•˜์˜€๊ณ , eventListener๋ฅผ ํ†ตํ•ด "submit"์ด ๋ฐœ์ƒํ•˜๋ฉด handleSubmit์ด ๋™์ž‘ํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด "submit"์ด ๋ฐœ์ƒํ•˜๋ฉด ์ž‘๋™ํ•˜๋Š” handleSubmit์—์„œ๋Š” ์–ด๋–ค ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ์–ด์•ผ ํ• ๊นŒ?

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
}

handelSubmit์˜ ์ฒซ ์ค„์—๋Š” event.preventDefault();๋ผ๋Š” ์ƒ์†Œํ•œ ์ฝ”๋“œ๊ฐ€ ์žˆ๋Š”๋ฐ, ์ด ์ฝ”๋“œ๊ฐ€ ์‚ฌ์šฉ๋œ ์ด์œ ๋ฅผ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” submit์ด๋ผ๋Š” event์— ๋Œ€ํ•œ ์„ค๋ช…์ด ํ•„์š”ํ•˜๋‹ค. MDN์˜ submit ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด, form ๋‚ด๋ถ€์—์„œ enter๋ฅผ ์ž…๋ ฅํ•  ๊ฒฝ์šฐ ๋ฐœ์ƒ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ๋˜ํ•œ ์ค‘์š”ํ•œ ์ ์€, Cancelable ์†์„ฑ์ด yes๋ผ๋Š” ์ ์ด๋‹ค.
w3school์˜ preventDefault() ๋ฌธ์„œ๋ฅผ ๋ณด๋ฉด,

_The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.
_

์ด๋ผ๋Š” ๋ฌธ๊ตฌ๊ฐ€ ์กด์žฌํ•˜๋Š”๋ฐ, ์ด๊ฒƒ์— ๋Œ€ํ•œ ์†์„ฑ์ด ๋ฐ”๋กœ Cancelable์ด๊ณ , submit event๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด form ๋‚ด๋ถ€์˜ item์„ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ „์†กํ•˜๊ณ , ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๋กœ๋“œํ•˜๋Š”๋ฐ, ๊ทธ ๊ณผ์ •์„ ์ค‘๋‹จํ•˜๋„๋ก preventDefault() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

๋‘๋ฒˆ์งธ ์ค„์€ ์ด์ „๊ณผ ๊ฐ™์ด form ํƒœ๊ทธ๊ฐ€ ๋ณด์ด๋„๋ก className.add()์„ ์‚ฌ์šฉํ•ด์ฃผ์—ˆ๊ณ , ์„ธ๋ฒˆ์งธ ์ค„์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ input์— ์ž…๋ ฅํ•œ ๋‚ด์šฉ์„ currentValue๋กœ ์ €์žฅํ•˜๋„๋ก ํ•˜์˜€๊ณ , ์ด currentValue๋ฅผ ์ธ์ž๋กœ paintgreeting()ํ•จ์ˆ˜๊ฐ€ ์ž‘๋™ํ•˜๋„๋ก ํ•จ์ˆ˜๋ฅผ ๊ตฌ์„ฑํ•˜์˜€๋‹ค.

๋‹ค์‹œ, Local Storage

์•ž์„  ํ•จ์ˆ˜๋ฅผ ์ €์žฅํ›„์— ์‹คํ–‰ํ•˜๋ฉด, ์ •์ƒ์ ์œผ๋กœ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ๋ฐ›์•„ ํ•ด๋‹น ์ด๋ฆ„์— ์ธ์‚ฌ๋ฅผ ํ•˜๋Š” ๊ฒƒ๊นŒ์ง€ ์‹คํ–‰์ด ๋˜์ง€๋งŒ, ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๋ฉด ๋‹ค์‹œ ์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„์„ ๋ฌผ์–ด๋ณด๋Š” ์ƒํ™ฉ์ด ๋ฐœ์ƒํ•œ๋‹ค. ์ด์œ ๋Š” Local Storage์— currentValue๋ฅผ currentUser๋กœ์„œ ์ €์žฅํ•œ ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ, ์ด๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๊ฐ„๋‹จํ•˜๋‹ค.

๋จผ์ € saveName(currentValue);๋ฅผ handleSubmit() ํ•จ์ˆ˜์˜ ๋งˆ์ง€๋ง‰ ์ค„์— ์ถ”๊ฐ€ํ•˜๊ณ , ๋‹ค์Œ๊ณผ ๊ฐ™์ด saveName() ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

function saveName(text) {
    localStorage.setItem(USER_LS, text);
}

์ด ๊ณผ์ •๊นŒ์ง€ ๋งˆ์นœ ํ›„, ์‹คํ–‰ํ•ด๋ณด๋ฉด,,,

Local Stroage์˜ currentUser๋กœ ๋‚˜์˜ ์ž…๋ ฅ์ด ์ €์žฅ๋˜๊ณ ,

์ƒˆ๋กœ๊ณ ์นจ ํ›„์—๋„ ์ถœ๋ ฅ๋จ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

profile
CAU Business Administration

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