๐Day 81(55)์ผ์ฐจ WE_MOTIVATION_DIARY
11938 ๋จ์ด MOTIVATION_DIARYMOTIVATION_DIARY
- ํ๋ก์ ํธ ์งํํํฉ
1. ํ์๊ฐ์
API
- ํ์๊ฐ์
์ค๋ณต ์ด๋ฉ์ผ ์
๋ ฅ์ ์๋ฌ ์ฒ๋ฆฌ
- ํ์๊ฐ์
๋น์ด์๋ ๊ฐ ์๋ฌ ์ฒ๋ฆฌ
- ํ์๊ฐ์
์ ์ฑ๊ณตํ์ ๋
2. ๋ก๊ทธ์ธ API
- ๋ก๊ทธ์ธ ์ ์ ํจํ์ง ์์ ์ด๋ฉ์ผ ์
๋ ฅํ์ ๋
- ๋ก๊ทธ์ธ ์ ์๋ชป๋ ๋น๋ฐ๋ฒํธ ์
๋ ฅ ํ์ ๋
- ๋ก๊ทธ์ธ ์ฑ๊ณต ์ ๋ฉ์ธ์ง์ ํ ํฐ์ ๋ณตํธํํ ๊ฐ
- TODAY I LEARN ERROR ๐ฆ
- ํ ํฐ์ ์ฟ ํค๋ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ๋ณด๊ดํ๋ฉด ๋ณด์์ ๋ฌธ์ ๊ฐ ์๊ธด๋ค.
- ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์ฟ ํค์ ์ ์ฅ๋ ๊ฐ์ ์์๋ก ๋ฐ๊ฟ์ ์ ๊ทผํ๋ ๋์์ง ๊ฐ๋ฅ!
- HOW TO FIX MY ERROR ๐
- ERROR๋ฅผ ํด๊ฒฐํ
session id๐
๋ฐ๋ผ์ ํ ํฐ์ ์ฅ๊ธฐ๊ฐ ๋
ธ์ถํด์๋ ์๋๋ค.
ํด๊ฒฐ ํ ์ ์๋ ๋ฐฉ๋ฒ
- ephemeral๋ก ์ ์ฅํ๋ ๋ฐฉ๋ฒ, ๋ฐํ์์์๋ง ํ ํฐ์ ์ ์ฅํ๋๋ก
- In httpOnly์ ์ ์ฅํ์ฌ javascript๋ก ์ ๊ทผํ์ง ๋ชปํ๋๋ก
- session Id์ ์ ์ฅํ๋ ๋ฐฉ๋ฒ
=> ์ค์ํ ์ ๋ณด๋ ์๋ฒ์์๋ง ๊ด๋ฆฌํ๊ณ ํด๋ผ์ด์ธํธ์๊ฒ๋ ์ธ์
ํค๋ง ์ ๊ณตํ์!
์๋ฒ์ ์ธ์
๊ฐ์ฒด ์์ฑ ํ ํค๋ฅผ ๋ง๋ค์ด ์์ฑ๋ช
์ ์ฌ์ฉํ์ฌ ์์ฑ ๊ฐ์ ์ ๋ณด๋ฅผ ์ ์ฅํ๊ณ uniqueint๋ฅผ ํด๋ผ์ด์ธํธ์ ๋ณด๋ด๋ ๋ฐฉ์
- ์์ ๋ ์ฝ๋
- ๋ชจ๋ฅด๋ ์
- token์ cookie,localstorage, session์ ์ ์ฅํ ๋์ ๊ฐ๊ฐ์ ์ฐจ์ด์ ์ ๋ํด์
- ์ธ์
์ด ํ์ํ ์ด์ ์ ๋ํด์
- ๋ฐฐ์ด์
- ๋ณด์ ์ธก๋ฉด์์์ JWT
์ฟ ํค๋ ๋ก์ปฌ์คํ ๋ฆฌ์ง์ JWT ํ ํฐ์ ์ ์ฅํ๋๊ฑด ์์ ํ์ง ๋ชปํ ๋ฐฉ๋ฒ์ด๋ค. ์๋๋ฉด ์ด๋ค ์
์ฑ ์คํฌ๋ฆฝํธ์ ์ํด์ ์ฝ๊ฒ ์ ๊ทผ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ด๋ค
- front์ ๋ก์ปฌ์คํ ๋ฆฌ์ง์์ ํ ํฐ์ ๊บผ๋ด ์ ์ฅํ๋ ๋ฐฉ์
<script>
handleClick = e => {
const { email, password } = this.state;
e.preventDefault();
fetch('/signin', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
password,
}),
})
.then(res => {
return res.json();
})
.then(data => {
if (data.msg === 'SUCCESS_SIGNIN') {
// this.goToList();
localStorage.setItem('jwt', data.token);
const tokenInLocalStorage = localStorage.getItem('jwt', data.token);
console.log(tokenInLocalStorage);
}
});
};
</script>
- ์๋ฒ์์ res.cookie์ ๋ด์์ ๋ณด๋ด์ค ๋ค ๋ธ๋ผ์ฐ์ ์ cookie์์ ์ ์ฅํ๋ ๋ฐฉ์
res.cookie('jwt', accessToken);
<script>
// node ๋ก๊ทธ์ธ ์ปจํธ๋กค๋ฌ
const signInUser = async (req, res) => {
try {
const { email, password } = req.body;
const accessToken = await signInService.signInUser(email, password);
const decoded = jwt.verify(
accessToken,
process.env.ACCESS_TOKEN_SECRET_KEY
);
res.cookie('jwt', accessToken);
return res.status(201).send({
msg: 'SUCCESS_SIGNIN',
token: accessToken,
decoded,
});
} catch (error) {
const { statusCode, message } = error;
return res.status(400).send({
msg: message,
});
}
};
// node ๋ก๊ทธ์ธ ์ปจํธ๋กค๋ฌ
</script>
- ์ํ ์ ๊ณผ ๊ฐ์ ํ ์
- ์ผ์ฐ ์ ์๋ฆฌ์ ๋ ์ ๊ณผ ์ด๋ ค์ด ๋ด์ฉ์ด ๋์ฌ ๋๋ง๋ค ์ค์ค๋กํ๊ณ๋ฅผ ์ง์ด๋ฒ๋ฆฌ๋ ์ ์ ๊ณ ์น์
- ๋ชฉํ์ ๋ง๊ฐ๊ธฐํ: 2021-10-12
- express-session npm ์ค์นํด์ ์ ์ ์ ๋ณด ๊ธฐ์ตํ๊ธฐ
- ๋ฆฌ๋ทฐ๋ฐ๊ณ ๋ฐ์ํ๊ธฐ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐Day 81(55)์ผ์ฐจ WE_MOTIVATION_DIARY), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://velog.io/@minj9_6/Day-8155์ผ์ฐจ-WEMOTIVATIONDIARY
์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์
๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
1. ํ์๊ฐ์ API
- ํ์๊ฐ์
์ค๋ณต ์ด๋ฉ์ผ ์
๋ ฅ์ ์๋ฌ ์ฒ๋ฆฌ
- ํ์๊ฐ์
๋น์ด์๋ ๊ฐ ์๋ฌ ์ฒ๋ฆฌ
- ํ์๊ฐ์
์ ์ฑ๊ณตํ์ ๋
- ๋ก๊ทธ์ธ ์ ์ ํจํ์ง ์์ ์ด๋ฉ์ผ ์ ๋ ฅํ์ ๋
- ๋ก๊ทธ์ธ ์ ์๋ชป๋ ๋น๋ฐ๋ฒํธ ์ ๋ ฅ ํ์ ๋
- ๋ก๊ทธ์ธ ์ฑ๊ณต ์ ๋ฉ์ธ์ง์ ํ ํฐ์ ๋ณตํธํํ ๊ฐ
- ํ ํฐ์ ์ฟ ํค๋ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ๋ณด๊ดํ๋ฉด ๋ณด์์ ๋ฌธ์ ๊ฐ ์๊ธด๋ค.
- ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์ฟ ํค์ ์ ์ฅ๋ ๊ฐ์ ์์๋ก ๋ฐ๊ฟ์ ์ ๊ทผํ๋ ๋์์ง ๊ฐ๋ฅ!
- ERROR๋ฅผ ํด๊ฒฐํ
session id๐
๋ฐ๋ผ์ ํ ํฐ์ ์ฅ๊ธฐ๊ฐ ๋ ธ์ถํด์๋ ์๋๋ค.
ํด๊ฒฐ ํ ์ ์๋ ๋ฐฉ๋ฒ
- ephemeral๋ก ์ ์ฅํ๋ ๋ฐฉ๋ฒ, ๋ฐํ์์์๋ง ํ ํฐ์ ์ ์ฅํ๋๋ก
- In httpOnly์ ์ ์ฅํ์ฌ javascript๋ก ์ ๊ทผํ์ง ๋ชปํ๋๋ก
- session Id์ ์ ์ฅํ๋ ๋ฐฉ๋ฒ
=>์ค์ํ ์ ๋ณด๋ ์๋ฒ์์๋ง ๊ด๋ฆฌํ๊ณ ํด๋ผ์ด์ธํธ์๊ฒ๋ ์ธ์ ํค๋ง ์ ๊ณตํ์!
์๋ฒ์ ์ธ์ ๊ฐ์ฒด ์์ฑ ํ ํค๋ฅผ ๋ง๋ค์ด ์์ฑ๋ช ์ ์ฌ์ฉํ์ฌ ์์ฑ ๊ฐ์ ์ ๋ณด๋ฅผ ์ ์ฅํ๊ณ uniqueint๋ฅผ ํด๋ผ์ด์ธํธ์ ๋ณด๋ด๋ ๋ฐฉ์
- ์์ ๋ ์ฝ๋
- token์ cookie,localstorage, session์ ์ ์ฅํ ๋์ ๊ฐ๊ฐ์ ์ฐจ์ด์ ์ ๋ํด์
- ์ธ์ ์ด ํ์ํ ์ด์ ์ ๋ํด์
- ๋ณด์ ์ธก๋ฉด์์์ JWT
์ฟ ํค๋ ๋ก์ปฌ์คํ ๋ฆฌ์ง์ JWT ํ ํฐ์ ์ ์ฅํ๋๊ฑด ์์ ํ์ง ๋ชปํ ๋ฐฉ๋ฒ์ด๋ค. ์๋๋ฉด ์ด๋ค ์ ์ฑ ์คํฌ๋ฆฝํธ์ ์ํด์ ์ฝ๊ฒ ์ ๊ทผ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ด๋ค
- front์ ๋ก์ปฌ์คํ ๋ฆฌ์ง์์ ํ ํฐ์ ๊บผ๋ด ์ ์ฅํ๋ ๋ฐฉ์
<script>
handleClick = e => {
const { email, password } = this.state;
e.preventDefault();
fetch('/signin', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
password,
}),
})
.then(res => {
return res.json();
})
.then(data => {
if (data.msg === 'SUCCESS_SIGNIN') {
// this.goToList();
localStorage.setItem('jwt', data.token);
const tokenInLocalStorage = localStorage.getItem('jwt', data.token);
console.log(tokenInLocalStorage);
}
});
};
</script>
- ์๋ฒ์์ res.cookie์ ๋ด์์ ๋ณด๋ด์ค ๋ค ๋ธ๋ผ์ฐ์ ์ cookie์์ ์ ์ฅํ๋ ๋ฐฉ์
res.cookie('jwt', accessToken);
<script>
// node ๋ก๊ทธ์ธ ์ปจํธ๋กค๋ฌ
const signInUser = async (req, res) => {
try {
const { email, password } = req.body;
const accessToken = await signInService.signInUser(email, password);
const decoded = jwt.verify(
accessToken,
process.env.ACCESS_TOKEN_SECRET_KEY
);
res.cookie('jwt', accessToken);
return res.status(201).send({
msg: 'SUCCESS_SIGNIN',
token: accessToken,
decoded,
});
} catch (error) {
const { statusCode, message } = error;
return res.status(400).send({
msg: message,
});
}
};
// node ๋ก๊ทธ์ธ ์ปจํธ๋กค๋ฌ
</script>
- ์ผ์ฐ ์ ์๋ฆฌ์ ๋ ์ ๊ณผ ์ด๋ ค์ด ๋ด์ฉ์ด ๋์ฌ ๋๋ง๋ค ์ค์ค๋กํ๊ณ๋ฅผ ์ง์ด๋ฒ๋ฆฌ๋ ์ ์ ๊ณ ์น์
- express-session npm ์ค์นํด์ ์ ์ ์ ๋ณด ๊ธฐ์ตํ๊ธฐ
- ๋ฆฌ๋ทฐ๋ฐ๊ณ ๋ฐ์ํ๊ธฐ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐Day 81(55)์ผ์ฐจ WE_MOTIVATION_DIARY), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@minj9_6/Day-8155์ผ์ฐจ-WEMOTIVATIONDIARY์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค