๐Ÿ“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๐Ÿ”‘
    ๋”ฐ๋ผ์„œ ํ† ํฐ์„ ์žฅ๊ธฐ๊ฐ„ ๋…ธ์ถœํ•ด์„œ๋Š” ์•ˆ๋œ๋‹ค.
    ํ•ด๊ฒฐ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•
  1. ephemeral๋กœ ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•, ๋Ÿฐํƒ€์ž„์—์„œ๋งŒ ํ† ํฐ์„ ์ €์žฅํ•˜๋„๋ก
  2. In httpOnly์— ์ €์žฅํ•˜์—ฌ javascript๋กœ ์ ‘๊ทผํ•˜์ง€ ๋ชปํ•˜๋„๋ก
  3. session Id์— ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•
    => ์ค‘์š”ํ•œ ์ •๋ณด๋Š” ์„œ๋ฒ„์—์„œ๋งŒ ๊ด€๋ฆฌํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ๋Š” ์„ธ์…˜ ํ‚ค๋งŒ ์ œ๊ณตํ•˜์ž!
    ์„œ๋ฒ„์— ์„ธ์…˜ ๊ฐ์ฒด ์ƒ์„ฑ ํ›„ ํ‚ค๋ฅผ ๋งŒ๋“ค์–ด ์†์„ฑ๋ช…์„ ์‚ฌ์šฉํ•˜์—ฌ ์†์„ฑ ๊ฐ’์— ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ณ  uniqueint๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ๋ณด๋‚ด๋Š” ๋ฐฉ์‹
  • ์ˆ˜์ •๋œ ์ฝ”๋“œ

- ๋ชจ๋ฅด๋Š” ์ 

  • token์„ cookie,localstorage, session์— ์ €์žฅํ•  ๋•Œ์˜ ๊ฐ๊ฐ์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด์„œ
  • ์„ธ์…˜์ด ํ•„์š”ํ•œ ์ด์œ ์— ๋Œ€ํ•ด์„œ

- ๋ฐฐ์šด์ 

  • ๋ณด์•ˆ ์ธก๋ฉด์—์„œ์˜ JWT
    ์ฟ ํ‚ค๋‚˜ ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€์— JWT ํ† ํฐ์„ ์ €์žฅํ•˜๋Š”๊ฑด ์•ˆ์ „ํ•˜์ง€ ๋ชปํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค. ์™œ๋ƒ๋ฉด ์–ด๋–ค ์•…์„ฑ ์Šคํฌ๋ฆฝํŠธ์— ์˜ํ•ด์„œ ์‰ฝ๊ฒŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค
  1. 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>
  1. ์„œ๋ฒ„์—์„œ 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

  1. express-session npm ์„ค์น˜ํ•ด์„œ ์œ ์ € ์ •๋ณด ๊ธฐ์–ตํ•˜๊ธฐ
  2. ๋ฆฌ๋ทฐ๋ฐ›๊ณ  ๋ฐ˜์˜ํ•˜๊ธฐ

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ