TIL

[TIL] 20210729

lado 2021. 7. 30. 00:22

๐ŸŽฏ ์–ด์ œ, ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

  • [Node.js] MySQL, Sequelize ORM ์ด์šฉํ•ด User ์—”ํ‹ฐํ‹ฐ ์ƒ์„ฑ
  • [Node.js] ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… REST api ๊ตฌํ˜„
  • [Node.js] express-validator๋ฅผ ์ด์šฉํ•œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ
  • [Node.js] Bcrypt๋กœ ๋น„๋ฐ€๋ฒˆํ˜ธ ์•”ํ˜ธํ™”ํ•˜๊ธฐ
  • [Node.js] JWT ํ† ํฐ ์ƒ์„ฑ
  • [Node.js] dotenv์™€ config ํŒŒ์ผ์„ ์ด์šฉํ•ด ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•
  • [Node.js] ๋ฏธ๋“ค์›จ์–ด๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” Auth ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • [React] ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ์„ค๊ณ„ ๋ฐ ํ™ˆ ํ™”๋ฉด Router ๊ตฌ์„ฑ

๐Ÿ“š ๋ณด์ถฉํ•ด์•ผ ํ•  ๊ฒƒ

  • [React] ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… UI ๋งˆํฌ์—… ๋ฐ axios ๊ตฌํ˜„
  • [React] ํšŒ์›๊ฐ€์ž… ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๋ฐ ์ด๋ฉ”์ผ ์ค‘๋ณต ๊ฒ€์‚ฌ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • [React] ํ”„๋ก ํŠธ ๊ถŒํ•œ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • [React] jwt ํ† ํฐ ๊ฐ’์„ ์ฟ ํ‚ค๋กœ ์ „๋‹ฌํ•˜๊ธฐ for XSS ์–ดํƒ ๋Œ€์‘
  • [Node.js] CORS ์„ค์ • ์ถ”๊ฐ€, CSRF ์–ดํƒ ๋Œ€์‘

๐ŸŽ‡ Reflection

  • ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ณ  ๋‚˜์„œ๋Š” ๋ธ”๋กœ๊ทธ๋„ ๋ธ”๋กœ๊ทธ์ง€๋งŒ ๋…ธ์…˜์— ์ •๋ฆฌํ•˜๋˜ ๊ณต๋ถ€ ์ผ์ง€๋„ ์•ˆ ์ผ๋‹ค. ๋ญ˜ ํ•ด์•ผํ• ์ง€ ๋„ˆ๋ฌด ๋ง‰๋ง‰ํ•œ ๋А๋‚Œ์ด๊ณ ... ๋ง‰ ์ƒˆ๋ฒฝ 4์‹œ์— ์ž๊ณ  ์ด๋Ÿฌ๋‹ˆ๊นŒ ๊ทธ๋Ÿด ์‹œ๊ฐ„ ์žˆ์œผ๋ฉด ์ž ์„ ์ž์ž๋Š” ๋А๋‚Œ? ๊ทผ๋ฐ ๋‚ด์ผ๋ถ€ํ„ฐ ๋ฐ๋ธŒ์ฝ”์Šค๋„ ์‹œ์ž‘ํ•˜๊ณ  ํ•˜๋‹ˆ ๋‹ค์‹œ ์‹ฌ๊ธฐ์ผ์ „ํ•ด์„œ ๋ธ”๋กœ๊ทธ์— ๊ธฐ๋กํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ์‚ฌ์‹ค ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๋Š” TIL์ด ์•„๋‹ˆ๋ฉด ์ด๊ฒŒ ๋ฌด์Šจ ์†Œ์šฉ์ธ๊ฐ€ ํ•˜๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์•„๋ฌด ๊ฒƒ๋„ ๊ธฐ๋ก ์•ˆํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค๋Š” ๋ญ๋ผ๋„ ๊ธฐ๋กํ•˜๋Š” ๊ฒŒ ๋‚ซ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด์„œ ๋‚ด๊ฐ€ ํ•  ์ˆ˜ ์žˆ๋Š” ์ •๋„์—์„œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋ ค๊ณ  ํ•œ๋‹ค.
  • ๊ทธ๋™์•ˆ์˜ ๊ทผํ™ฉ์„ ์ •๋ฆฌํ•˜๋ฉด ๋„์ˆ˜์น˜๋ฃŒ๋ฅผ ๋ฐ›๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ๊ทผ๋ฐ ํ”„๋กœ์ ํŠธ ํ•  ๋•Œ๋Š” ๋„์ €ํžˆ ์ž์„ธ๋ฅผ ๋ฐ”๋ฅด๊ฒŒ ํ•˜๊ณ  ๋ญํ•˜๊ณ  ํ•  ์ •์‹ ์ด ์—†์–ด์„œ ์†”์งํžˆ ํšจ๊ณผ๊ฐ€ ์žˆ์„์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค. ๊ฑฐ์˜ ๋ฐ–์— ์•ˆ ๋‚˜๊ฐ€๊ณ  10์‹œ๊ฐ„ ๋™์•ˆ ์•‰์•„๋งŒ ์žˆ๋Š”๋ฐ... ์ด๋ž˜๋„ ๋ชธ์ด ์ข‹์•„์งˆ ์ˆ˜ ์žˆ์œผ๋ ค๋‚˜? ์ด๋ฒˆ ์ฃผ ์ƒ๋‹ด์—์„œ๋Š” ๋‚˜๋ฅผ ์นจ๋ฒ”ํ•˜๋ ค๊ณ  ํ•˜๋Š” ์‚ฌ๋žŒ์€ ๋‚จ๋“ค์ด ์•„๋‹ˆ๋ผ ์‚ฌ์‹ค ๋‚˜์˜€๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋๋‹ค. ์„ ์ƒ๋‹˜๊ป˜ ํ•œ ์ฃผ ๋™์•ˆ '๋‚จ๋“ค'์ด๋ผ๋Š” ๋ง์„ ๋จธ๋ฆฟ ์†์—์„œ ์ง€์›Œ๋ณด๋ผ๋Š” ๋ฏธ์…˜์„ ๋ฐ›์•˜๋‹ค. ๋ชฐ๋ผ๋„ ๋œ๋‹ค. ์ตœ์„ ์ด๋ž€ ์—†๋‹ค. ๋‚จ๋“ค ์‹ ๊ฒฝ ์“ฐ์ง€ ๋ง๊ณ  ๋‚˜๋ฅผ ์‹ ๊ฒฝ ์“ฐ์ž. ์•ž์œผ๋กœ ์ž๊ธฐ์•”์‹œํ•  ์ฃผ๋ฌธ์ด๋‹ค.
  • TIL์ด๋ฉด ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ๋งŒ ์ ์ง€ ์™œ ์–ด์ œ ๊ณต๋ถ€ํ•œ ๊ฒƒ๊นŒ์ง€ ์ ์—ˆ๋ƒ ํ•˜๋ฉด ์˜ค๋Š˜์€ ์ง„์งœ ๋ณ„๋กœ ํ•œ ๊ฒŒ ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ธ๊ฐ„์ ์œผ๋กœ ์˜ค๋Š˜ ๋กœ๊ทธ์ธ ํ”„๋ก ํŠธ๋ฅผ ๋‹ค ๋๋ƒˆ์–ด์•ผ ํ•˜์ง€ ์•Š๋‹ˆ? ํ•˜์ง€๋งŒ ์ด๊ฒƒ์ด ๋‚˜๋‹ค. ๊ฒฌ๋ŽŒ๋ผ, ๋‚˜์•ผ.
  • Node.js๋Š” ๋“œ๋ฆผ์ฝ”๋”ฉ ๊ฐ•์˜๋ฅผ ๋ณด๊ณ  ์–ด์ฐŒ์ €์ฐŒ ํ–ˆ๋Š”๋ฐ... ์‚ฌ์‹ค ์ด๊ฑธ ๋‚ด๊ฐ€ ํ–ˆ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์„๊นŒ? ๊ทผ๋ฐ ์ง„์งœ ์—˜๋ฆฌ๋‹˜์€ ์ฝ”๋“œ๋ฅผ ์ •๋ง ๊น”๋”ํ•˜๊ฒŒ ์งœ๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๋ฒ ์ŠคํŠธ ํ”„๋ž™ํ‹ฐ์Šค ๊ฐ™์€ ๋А๋‚Œ์ด๋‹ค. ๊ทธ๋ž˜๋„ ์ดํ•ด๋Š” ๋‹ค ๋์œผ๋‹ˆ ์‹œ๊ฐ„ ๋‚  ๋•Œ ๋ธ”๋กœ๊ทธ ์ •๋ฆฌ ํ•œ ๋ฒˆ ํ•˜๊ณ  ๊ทธ๋ƒฅ ์™ธ์šธ ๋•Œ๊นŒ์ง€ ๊ณ„์† ์—ฐ์Šตํ•ด๋ด์•ผ๊ฒ ๋‹ค.
  • React๋Š” ์™œ ์ด๋ ‡๊ฒŒ ๋ง‰๋ง‰ํ•˜์ง€? ๋ง‰๋ง‰ํ•ดํ•˜๋А๋ผ ์‹œ๊ฐ„์„ ๋„ˆ๋ฌด ๋งŽ์ด ๋ฒ„๋ฆฐ ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ƒฅ app.js์— ์ฝ”๋“œ ๋‹ค ๋•Œ๋ ค ๋ฐ•๊ณ  ๋‚˜์ค‘์— ๋ถ„๋ฆฌํ•˜๋”๋ผ๋„ ์ผ๋‹จ ์‹œ์ž‘์„ ํ–ˆ์–ด์•ผ ํ–ˆ๋Š”๋ฐ.... ๋งˆํฌ์—…ํ•˜๋Š” ๊ฒƒ๋„ ๋„ˆ๋ฌด ๊ท€์ฐฎ๋‹ค. ์–ผ๋งˆ๋‚˜ ๋…ธ๊ฐ€๋‹ค ์ž‘์—…์ธ์ง€ ์•Œ์•„์„œ ๋” ํ•˜๊ธฐ ์‹ซ์€ ๊ฒƒ ๊ฐ™๋‹ค.
  • ์˜ฌ๋ฆผํ”ฝ ์†Œ์‹ ๋“ฃ๋Š” ๊ฑฐ ๋„ˆ๋ฌด ๊ฐ€์Šด์ด ์›…์žฅํ•ด์ง€๊ณ  ์ข‹์€๋ฐ... ๊ทธ๋งŒ ๋“ฃ๊ณ  ์‹ถ๋‹ค ใ…  ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ ์˜ค๋Š˜ ํ•˜๋ฃจ๋„ ๊ฑฐ์˜ ์˜ฌ๋ฆผํ”ฝ ๋•Œ๋ฌธ์— ๋‚ ๋ฆฐ ๊ฒƒ ๊ฐ™๋‹ค. ํ•˜์ง€๋งŒ ๋„ˆ๋ฌด ๋ฉ‹์žˆ๋‹ค. ๋‹ค. ์•ˆ์‚ฐ ์„ ์ˆ˜๋Š” ์ •๋ง ๋กค๋ชจ๋ธ์ด๋‹ค. ์›Œ๋„ˆ๋น„ ๋ฉ˜ํƒˆ. ๊น€์—ฐ๊ฒฝ ์„ ์ˆ˜๊ฐ€ 'ํ•ด๋ณด์ž ํ•ด๋ณด์ž ํ•ด๋ณด์ž ํ•ด๋ณด์ž ํ›„ํšŒํ•˜์ง€ ๋ง๊ณ 'ํ•˜๊ณ  ์™ธ์น˜๋Š” ์˜์ƒ ๋ณด๋ฉด์„œ ๋ˆˆ๋ฌผ ํ˜๋ ธ์Œ ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ ์˜ค๋Š˜๋ถ€ํ„ฐ ์ด๊ฑฐ ๋‚ด ์ขŒ์šฐ๋ช…์ด๋‹ค.