ํฐ์คํ ๋ฆฌ ๋ทฐ
Question
ํ ๊ธ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํ ๋ง(๋คํฌ ๋ชจ๋/๋ผ์ดํธ ๋ชจ๋)๋ฅผ ์ค์ ํ๋ฉด ํ ๋ง๊ฐ ๋ทฐ์ ๋ฐ์๋๋๋ก ๊ตฌํํ๊ณ ์ ํ๋ค.ํ ๋ง๋ ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ์ ์ฅํ์ฌ ์นํ์ด์ง๋ฅผ ๋ฆฌ๋ก๋ํ๊ฑฐ๋ ๋ค์ ์ ๊ทผํ์ ๋ ์ ์ฅ๋ ํ ๋ง๋ฅผ ์ ์ฉํ๋๋ก ํ๋ค.
Solution
document.addEventListener('DOMContentLoaded', () => {
const theme = localStorage.getItem('theme');
if(!theme) localStorage.setItem('theme', 'white');
if(theme === 'dark') document.body.classList.add('dark');
else document.body.classList.remove('white');
document.body.style.visibility = 'visible';
})
document.querySelector('.toggle-button').onClick = e => {
const theme = localStorage.getItem('theme');
if(theme === 'dark') localStorage.setItem('theme', 'light');
else localStorage.setItem('theme', 'dark');
document.body.classList.toggle('dark');
}
Issue
1. ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋์ด ์๋ ํ ๋ง(key๊ฐ)์ value๋ฅผ ์ฐธ์กฐํ๊ธฐ ์ํด์ setItem()๊ณผ getItem() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์๋ค.
2. ํ ๋ง์ value(dark/white)๊ฐ์ ๋ฐ๋ผ body ํ๊ทธ์ dark ํด๋์ค๋ฅผ ๋์ ์ผ๋ก ์ถ๊ฐ ๋ฐ ์ ๊ฑฐํ์ฌ ๋ฐฐ๊ฒฝ ํ ๋ง ์์์ ๋ฐ๊พธ์๋ค.
3. add()๋ remove()๊ฐ ์๋ toggle() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ฃผ์ด์ง ํด๋์ค๋ฅผ ์ ๊ฑฐํ๊ฑฐ๋ ๋ฐํํ๋๋ก ํ์๋ค.
4. ๋ฆฌ๋๋๋ง ์ ๊น๋นก์ ํ์(flash of incorrect theme, FOIT)์ ๋ง๊ธฐ ์ํด ์คํ์ผ ์ ์ฉ ์ด์ ๊น์ง body ํ๊ทธ์ css ์์ฑ ์ค
visibility์ 'hidden'์ผ๋ก ์ค์ ๋์๋ ๊ฒ์ ๋์ ์ผ๋ก 'visible' ์์ฑ์ผ๋ก ๋ฐ๊พธ์ด ์ฃผ์๋ค.
Refactoring
document.addEventListener('DOMContentLoaded', () => {
const theme = localStorage.getItem('theme');
if(!theme) localStorage.setItem('theme', 'white');
document.body.classList.toggle('dark', theme === 'dark');
setTimeout(() => {
document.body.style.visibility = 'visible';
}, 300);
})
document.querySelector('.toggle-button').onClick = e => {
const theme = localStorage.getItem('theme');
localStorage.setItem('theme', `${theme === 'dark' ? 'white' : 'dark'}`);
document.body.classList.toggle('dark');
}
1. ์กฐ๊ฑด๋ฌธ ๋์ ์ toggle() ๋ฉ์๋ ๋ ๋ฒ์งธ ์ธ์๋ก ์กฐ๊ฑด๋ฌธ์ ํฌํจ์์ผ ์กฐ๊ฑด์ ๋ฐ๋ฅธ ๋จ๋ฐฉํฅ ์ ์ฉ ์์ ์ผ๋ก ์ ํ์ผ ํ์๋ค.
2. toggle-button css ์์ฑ ์ค transition์ด ์๊ณ duration์ด .3s๋ก ์ค์ ๋์ด ์์ด ๋ฆฌ๋๋๋ง ์ ์ฌ์ ํ ๊น๋นก์ ํ์์ด ๋ฐ์ ํ์๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด setTimeout() ํจ์๋ฅผ ์จ์ .3s ์ดํ์ ๋ชจ๋ ์์๋ค์ด ๋ณด์ด๋๋ก ์์ ํ์๋ค.
3. if๋ฌธ์ ์ข ์์ฑ์ ๋ฒ์ด๋๊ธฐ ์ํด seItem() ๋ฉ์๋ ๋ ๋ฒ์งธ ์ธ์์ ์ผํญ์ฐ์ฐ์๋ฅผ ํตํด theme์ value ๊ฐ์ ์๋ณํ์๋ค.
'JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
stopwatch (0) | 2021.07.05 |
---|---|
window.matchMedia ๋ฉ์๋ (0) | 2021.07.02 |
Intersection Observer API๋ฅผ ํตํ ์ด๋ฒคํธ ์ต์ ํ (0) | 2021.07.01 |
Debounce ํจ์๋ก ์ด๋ฒคํธ ์ฒ๋ฆฌ ์ต์ ํ (0) | 2021.07.01 |
Infinite Scroll (0) | 2021.07.01 |