localStorage is not defined" in Next.js
ReferenceError: localStorage is not defined
window
, document
๊ฐ์ ๋ธ๋ผ์ฐ์ ์ ์ญ ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ ์ ์๋ค. => ๋ฐ๋ผ์, ํ์ด์ง๊ฐ client์ ๋ก๋๋๊ณ window
๊ฐ์ฒด๊ฐ ์ ์๋ ๋๊น์ง localStorage
์ ์ ๊ทผํ ์ ์๋ค.
typeof window !== 'undefined'
localStorage
์ ๊ทผํด์ผํ๋ค. window
๊ฐ์ฒด๊ฐ ์ฐธ์กฐ๋์ง ์์ ๊ฒฝ์ฐ, undefined
๋ฅผ ๋ฐํํ๋ค.localStorage
์ ์ ๊ทผํ๊ธฐ ์ ์ localStorage
๊ฐ ์ ์๋๋ค.if (typeof window !== 'undefined') {
// Perform localStorage action
const item = localStorage.getItem('key');
}
useEffect
useEffect
๋ ๋ ๋๋ง ์ ์คํ๋๋ฏ๋ก, ์ด๊ธฐ ์๋ฒ ๋น๋ ์ useEffect
๋ด๋ถ ์ฝ๋๋ ์คํ๋์ง ์์useEffect
๋ client side์์๋ง ์คํ๋๋ฏ๋ก localStorage
์ ์์ ํ๊ฒ ์ ๊ทผ ๊ฐ๋ฅimport { useEffect } from "react";
useEffect(() => {
// Perform localStorage action
const item = localStorage.getItem('key')
}, [])
์ฐธ๊ณ ๋งํฌ
npm i js-cookie
# yarn์ผ๋ก ์ค์นํ ๊ฒฝ์ฐ
yarn add js-cookie
npm install --save @types/js-cookie
# yarn์ผ๋ก ์ค์นํ ๊ฒฝ์ฐ
yarn add @types/js-cookie
import Cookies from 'js-cookie'
Cookies.set('foo', 'bar')
ES Module
- ES6์ ๋์ ๋ ๋ชจ๋ ์์คํ
- import, export๋ฅผ ์ฌ์ฉํด ๋ถ๋ฆฌ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ผ๋ฆฌ ์๋ก ์ ๊ทผํ ์ ์๋ค.
- ์ฐธ๊ณ ๋งํฌ: ES Modules ์ ๋ฆฌํ๊ธฐ
=> ES Module ๋ด์ฉ ์ ๋ฆฌํ๊ธฐ
// ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
Cookies.set('name', 'value')
// ๋ง๋ฃ ๊ธฐ๊ฐ ์ค์ : ์ง๊ธ๋ถํฐ 7์ผ ํ ๋ง๋ฃ
Cookies.set('name', 'value', { expires: 7 })
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
// ๋ชจ๋ ์ฟ ํค ๊ฐ์ ธ์ค๊ธฐ
Cookies.get() // => { name: 'value' }
Cookies.remove('name')
Cookies.set('name', 'value', { secure: true })
Cookies.get('name') // => 'value'
Cookies.remove('name')
const router = useRouter();
// ์ ์ฅ๋ token์ด ์์ ๊ฒฝ์ฐ (๋ก๊ทธ์ธ ์ํ์ธ ๊ฒฝ์ฐ)
if (Cookies.get('token')) {
// ํ์ผ๋ก ์ด๋
router.push('/home');
}
// submit button ํด๋ฆญ
const onSubmit = handleSubmit(async (userData) => {
const { data } = await axios(`${API_ENDPOINT}/user/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: JSON.stringify({
user: {
email: userData.email,
password: userData.password,
},
}),
});
// error message๊ฐ ์์ ๊ฒฝ์ฐ,
if (data.message) {
// ์๋ฌ ๋ฉ์์ง๋ฅผ ๋ณด์ฌ์ค๋ค.
setLoginError('์ด๋ฉ์ผ ๋๋ ๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.');
} else {
// ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ์ ์ ์ accountname, token์ ์ฟ ํค์ ์ ์ฅ
Cookies.set('accountname', data.user.accountname);
Cookies.set('token', data.user.token);
}
});
์ด์ฌํ ํ๋ก์ ํธ ํ์๋ ๋ณด๋ฆฌ๋๐
๋ฉ์์ด์! ํ์ดํฑ~!