๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Node.js

(4)
Node.js / ํ† ํฐ(Token) JWT(JSON Web Token)์ธํ„ฐ๋„ท ํ‘œ์ค€ ์ธ์ฆ ๋ฐฉ์‹์œผ๋กœ, JSON ๊ฐ์ฒด์— ์ธ์ฆ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ํ† ํฐ์œผ๋กœ ์•”ํ˜ธํ™”ํ•œ ๊ฒƒ* ํ† ํฐ(Token) : ์ถœ์ž…์ฆ ์—ญํ• ์„ ํ•˜๋Š” ๋„๊ตฌ๋กœ, ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์†Œ์ง€ํ•˜๊ณ  ์žˆ์Œ ๊ตฌ์กฐ ๊ฒ€์ฆ ๋ฐฉ์‹Header์™€ Payload๋ฅผ ๊ฐ๊ฐ base64๋กœ ์ธ์ฝ”๋”ฉ์ธ์ฝ”๋”ฉํ•œ Header์™€ Payload๋ฅผ ํ•ฉ์ณ์„œ, Secret(์„œ๋ฒ„๋งŒ ์•Œ๊ณ  ์žˆ๋Š” ๋น„๋ฐ€ ํ‚ค)์œผ๋กœ ์„œ๋ช…(Signature ์ƒ์„ฑ)์„œ๋ฒ„๋Š” ์ „๋‹ฌ๋ฐ›์€ JWT์˜ Signature๊ฐ€ Secret์œผ๋กœ ๋‹ค์‹œ ๊ณ„์‚ฐํ•œ ๊ฒƒ๊ณผ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธ → ์ผ์น˜ํ•˜๋ฉด ์œ„์กฐ๋˜์ง€ ์•Š์€ ์œ ํšจํ•œ ํ† ํฐ์œผ๋กœ ํŒ๋‹จ* ์ด ๋•Œ base64 ์ธ์ฝ”๋”ฉ ๋ฐฉ์‹์€ ์–ผ๋งˆ๋“ ์ง€ ๋””์ฝ”๋”ฉ์ด ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์—, payload์— ๋ฏผ๊ฐํ•œ ์ •๋ณด๋ฅผ ๋„ฃ์ง€ ์•Š๋„๋ก ํ•ด์•ผํ•œ๋‹ค. ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„œ ํ† ํฐ์˜ ์œ ํšจ์„ฑ์„ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ..
Node.js / ์„ธ์…˜(Session) ์„ธ์…˜์‚ฌ์šฉ์ž๊ฐ€ ์ธ์ฆ์— ์„ฑ๊ณตํ•œ ์ƒํƒœ ์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ(Session-based authentication)์‚ฌ์šฉ์ž๊ฐ€ ์ธ์ฆ์— ์„ฑ๊ณตํ•œ ์ƒํƒœ๋ฅผ ์„œ๋ฒ„์— ์ €์žฅํ•ด์„œ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ์‹ ์‹ค์Šต์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ ํ๋ฆ„์„ ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ํ™•์ธํ•ด๋ณด๋Š” ์‹ค์Šต์ด๋‹ค.์ƒ์„ฑํ•  ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ์ƒ์„ฑํ•  ํŒŒ์ผ์€ index.html, style.css, login.js, server.js index.html๋”๋ณด๊ธฐ ๋กœ๊ทธ์ธ ์‹ค์Šต ์•„์ด๋”” ๋น„๋ฐ€๋ฒˆํ˜ธ ๋กœ๊ทธ์ธ ์œ ์ € ์ด๋ฆ„ : ์œ ์ € ์ •๋ณด : ๋กœ๊ทธ์•„์›ƒ style.css๋”๋ณด๊ธฐbody { padding: 0 20px;}label { display: inline..
Node.js / ์ฟ ํ‚ค(Cookie) ์ฟ ํ‚ค(Cookie)์„œ๋ฒ„๊ฐ€ ํด๋ผ์ด์–ธํŠธ์— ์ „์†กํ•˜๋Š” ์ž‘์€ ๋ฐ์ดํ„ฐ ์กฐ๊ฐ.๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ๊ทธ ๋ฐ์ดํ„ฐ ์กฐ๊ฐ๋“ค์„ ์ €์žฅํ–ˆ๋‹ค๊ฐ€ ๋™์ผํ•œ ์„œ๋ฒ„์— ์žฌ ์š”์ฒญ ์‹œ ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๋Š” ์‹์œผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.์ด๋ฅผ ์ด์šฉํ•ด HTTP์˜ ๋ฌด์ƒํƒœ์„ฑ์„ ๋ณด์™„ํ•ด์ค€๋‹ค. ์ฟ ํ‚ค์˜ ํ™œ์šฉ ์‚ฌ๋ก€์„ธ์…˜ ๊ด€๋ฆฌ(Session management) : ์„œ๋ฒ„์— ์ €์žฅํ•ด์•ผ ํ•  ๋กœ๊ทธ์ธ, ์žฅ๋ฐ”๊ตฌ๋‹ˆ, ๊ฒŒ์ž„ ์Šค์ฝ”์–ด ๋“ฑ์˜ ์ •๋ณด ๊ด€๋ฆฌ๊ฐœ์ธํ™”(Personalization) : ์‚ฌ์šฉ์ž ์„ ํ˜ธ, ํ…Œ๋งˆ ๋“ฑ์˜ ์„ธํŒ…ํŠธ๋ž˜ํ‚น(Tracking) : ์‚ฌ์šฉ์ž ํ–‰๋™์„ ๊ธฐ๋กํ•˜๊ณ  ๋ถ„์„ํ•˜๋Š” ์šฉ๋„ ์‹ค์Šต* express๋กœ ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ , axios๋กœ ์„œ๋ฒ„๋ฅผ ์—ฐ๊ฒฐํ•ด ์ฟ ํ‚ค๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์‚ญ์ œํ•˜๋Š” ์‹ค์Šต์ด๋‹ค. ์ƒ์„ฑํ•  ํŒŒ์ผ์€ index.html, cookie.js, server.js index.html ์ฟ ํ‚ค ์ถ”๊ฐ€ ์ฟ ..
Node.js / ๋„คํŠธ์›Œํฌ ๊ธฐ์ดˆ ๋„คํŠธ์›Œํฌ์˜ ์ข…๋ฅ˜ ๋„คํŠธ์›Œํฌ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐ˜๊ฒฝ, ์†๋„์— ๋”ฐ๋ผ LAN, MAN, WAN์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค. LAN(Local Area Network)MAN (Metropolitan Area Network)WAN(Wide Area Network)๋ฒ”์œ„์ข์Œ(์ฃผ๋กœ ์ง‘, ์‚ฌ๋ฌด์‹ค, ๊ฑด๋ฌผ, ์บ ํผ์Šค ๋‚ด์˜ ์ œํ•œ๋œ ์˜์—ญ)๋„์‹œ๋‚˜ ๋Œ€๋„์‹œ์˜ ํ†ต์‹ ๋ง์„ ์˜๋ฏธ๋„“์Œ(๊ตญ๊ฐ€๋‚˜ ๋Œ€๋ฅ™ ๊ฐ„์˜ ๋ฒ”์œ„)๊ตฌ์„ฑ๋‹จ์ˆœ ๋ณต์žก์†๋„๋น ๋ฆ„ ๋А๋ฆผ * LAN : ์ •ํ™•ํžˆ๋Š” ๋™์ผํ•œ Subnet Mask๋ฅผ ์ด์šฉํ•œ๋‹ค๋ฉด ๊ทผ๊ฑฐ๋ฆฌ ํ†ต์‹ ๋ง์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— LAN์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.* MAN : ๋‘ ๊ฐœ ์ด์ƒ์˜ LAN์œผ๋กœ ์—ฐ๊ฒฐ๋˜์–ด ๊ตฌ์„ฑ๋˜๋ฉฐ, ๋ผ์šฐํ„ฐ / ๋ธŒ๋ฆฟ์ง€ ๋“ฑ์œผ๋กœ ์—ฐ๊ฒฐ๋œ๋‹ค. * WAN : ๋„“์€ ์ง€๋ฆฌ์  ์˜์—ญ์— ๊ฑธ์ณ ๋ถ„์‚ฐ๋œ ๋ชจ๋“  ๋Œ€๊ทœ๋ชจ ๋„คํŠธ์›Œํฌ๋ฅผ WAN์ด๋ผ๊ณ  ํ•˜๋ฉฐ, ์ธํ„ฐ..