Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🌚 닀크λͺ¨λ“œ κ΅¬ν˜„μ— μ•Œμ•„μ•Ό ν•  지식듀 #16

Open
leemember opened this issue Jul 4, 2022 · 0 comments
Open

🌚 닀크λͺ¨λ“œ κ΅¬ν˜„μ— μ•Œμ•„μ•Ό ν•  지식듀 #16

leemember opened this issue Jul 4, 2022 · 0 comments

Comments

@leemember
Copy link
Owner

leemember commented Jul 4, 2022 •
edited
Loading

🌚 닀크λͺ¨λ“œ κ΅¬ν˜„μ— μ•Œμ•„μ•Ό ν•  지식듀

둜컬 μŠ€ν† λ¦¬μ§€μ— μ €μž₯ν•˜κ³  ν…Œλ§ˆ 여뢀에 따라 닀크λͺ¨λ“œ λ˜λŠ” 라이트λͺ¨λ“œλ‘œ μ„€μ •ν•΄μ£Όμ—ˆλ‹€.

<Helmet>
   <html data-theme={mobx μƒνƒœκ΄€λ¦¬μ—μ„œ μ €μž₯ν•œ ν…Œλ§ˆμ˜ 값을 뢈러옴} />;
</Helmet>

JSX μƒμ—μ„œλŠ” μ΄λΌλŠ” react-helmet 라이브러리λ₯Ό μ‚¬μš©ν•˜μ—¬ 닀크λͺ¨λ“œ ν…Œλ§ˆμ˜ μ„€μ •λœ μƒνƒœκ°’μ„ λΆˆλŸ¬μ˜¨λ‹€.

🌀 react-helmet νŠΉμ§•

  1. μ„œλ²„ μΈ‘ λ Œλ”λ§μ„ μ§€μ›ν•œλ‹€. (즉 SPA의 단점을 κ·Ήλ³΅ν•΄μ€Œ)
  2. 메타 νƒœκ·Έλ₯Ό 각 νŽ˜μ΄μ§€λ§ˆλ‹€ λ‹€λ₯΄κ²Œ μ •μ˜ν•  수 μžˆλ‹€.
  3. SEO(κ²€μƒ‰μ—”μ§„μ΅œμ ν™”) κ°€λŠ₯. 이게 μ€‘μš”ν•œ μ΄μœ λŠ” ν¬λ‘€λŸ¬κ°€ 읽기 쉽도둝 λ©”νƒ€νƒœκ·Έλ₯Ό μ„€μ •ν•˜μ—¬ μ‚¬μ΄νŠΈ 정보λ₯Ό μ œκ³΅ν•˜λŠ” 것이닀.

🌚 localStorage

4가지 λ©”μ„œλ“œκ°€ μžˆλ‹€ (setItem, getItem, clear, remove)

  • setItem : μŠ€ν† λ¦¬μ§€μ— 데이터λ₯Ό λ„£μ–΄μ£ΌλŠ”λ°, λ°˜λ“œμ‹œ key와 valueλ‘œλ„ 이루어진닀. (객체 데이터 λ˜ν•œ μ‚¬μš©μ΄ κ°€λŠ₯ν•˜λ‹€)
    λΈŒλΌμš°μ €κ°€ λ‹«ν˜€λ„ κ·ΈλŒ€λ‘œ μœ μ§€κ°€ λœλ‹€.
    μ„Έμ…˜ μŠ€ν† λ¦¬μ§€μ™€ 차이점은 κ°œλ°œμžκ°€ removeλ‚˜ clearλ₯Ό ν•˜κΈ° μ „κΉŒμ§€ μ‚­μ œκ°€ λ˜μ§€ μ•ŠλŠ”λ‹€.
    setItem의 νŒŒλΌλ―Έν„° λ§€κ°œλ³€μˆ˜ νƒ€μž…μ€ string이기 λ•Œλ¬Έμ— 였브젝트둜 λ˜μ–΄μžˆλŠ” 데이터 값을 JSON.stringityλ₯Ό μ‚¬μš©ν•˜μ—¬ string νƒ€μž…μœΌλ‘œ λ³€ν™˜μ‹œμΌœμ£Όμ–΄μ•Ό ν•œλ‹€.

그리고 쑰회λ₯Ό ν•  λ•ŒλŠ” κ°μ²΄ν˜•μœΌλ‘œ 뢈러 μ™€μ•Όν•˜κΈ° λ•Œλ¬Έμ— stringν™” 된 νƒ€μž…μ„ λ‹€μ‹œ JSON.parse둜 objectμ‹μœΌλ‘œ λ³€ν™˜ν•˜μ—¬ 쑰회(get)ν•œλ‹€.

✨ λ‘œμ»¬μŠ€ν† λ¦¬μ§€ λ©”μ„œλ“œ μ’…λ₯˜

// JSON 으둜 둜컬 μŠ€ν† λ¦¬μ§€ 데이터 생성
localStorage.setItem('key', JSON.stringity({ a: value }));
 
// JSON으둜 μŠ€ν† λ¦¬μ§€ 데이터 쑰회
JSON.parse(localStorage.getItem('key'));
 
// key에 ν•΄λ‹Ήν•˜λŠ” μŠ€ν† λ¦¬μ§€λ§Œ μ‚­μ œ
localStorage.remove('key')
 
// λͺ¨λ“  μŠ€ν† λ¦¬μ§€ μ‚­μ œ
localStorage.clear('key')
@leemember leemember changed the title 🌹 닀크λͺ¨λ“œ 🌚 더보기 / 닀크λͺ¨λ“œ Jul 4, 2022
@leemember leemember changed the title 🌚 더보기 / 닀크λͺ¨λ“œ 🌚 닀크λͺ¨λ“œλ₯Ό κ΅¬ν˜„ν•΄λ³΄μž Feb 3, 2023
@leemember leemember changed the title 🌚 닀크λͺ¨λ“œλ₯Ό κ΅¬ν˜„ν•΄λ³΄μž 🌚 닀크λͺ¨λ“œ κ΅¬ν˜„μ— μ•Œμ•„μ•Ό ν•  지식듀 Feb 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@leemember