⚛️ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…: CRA vs Vite

โš›๏ธ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…: CRA vs Vite

๐Ÿ›ก️ API ํ†ต์‹  ๋ณด์•ˆ A to Z:OAuth 2.0 ๋ฐ JWT ์ธ์ฆ ์ „๋žต

๋งค์ผ ์‚ฌ์šฉํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋‚˜ ์•ฑ์—์„œ '๋กœ๊ทธ์ธ' ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ, ์—ฌ๋Ÿฌ๋ถ„์˜ ์ •๋ณด๋Š” ์–ด๋–ป๊ฒŒ ๋ณดํ˜ธ๋˜๊ณ  ์žˆ์„๊นŒ์š”?
๋‹จ์ˆœํžˆ ์•„์ด๋””์™€ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ, ๊ทธ ๋’ค์—๋Š” ๋ณต์žกํ•˜๊ณ  ์ •๊ตํ•œ ๋ณด์•ˆ ์ ˆ์ฐจ๊ฐ€ ์ˆจ์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
์˜ค๋Š˜์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋‹ˆ๋”๋ผ๋„ ๊ผญ ์•Œ์•„๋‘๋ฉด ์ข‹์€, ๋‚ด ์†Œ์ค‘ํ•œ ์ •๋ณด๋ฅผ ์ง€ํ‚ค๋Š” IT ๋ณด์•ˆ์˜ ํ•ต์‹ฌ ๊ธฐ์ˆ ์„ ์•„์ฃผ ์‰ฝ๊ฒŒ ํ’€์–ด๋“œ๋ฆฌ๋ ค ํ•ฉ๋‹ˆ๋‹ค.
ํŠนํžˆ ์š”์ฆ˜ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” OAuth 2.0๊ณผ JWT๊ฐ€ ๋ฌด์—‡์ธ์ง€, ๋งˆ์น˜ ๋†€์ด๊ณต์› ์ž…์žฅ๊ถŒ์ฒ˜๋Ÿผ ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•ด ๋“œ๋ฆด๊ฒŒ์š”.

๐Ÿ’ก ์˜ค๋Š˜์˜ ํ•ต์‹ฌ ์งˆ๋ฌธ

"๊ตฌ๊ธ€ ์•„์ด๋””๋กœ ๋กœ๊ทธ์ธํ•˜๊ธฐ๋Š” ์™œ ํŽธ๋ฆฌํ•˜๋ฉด์„œ๋„ ์•ˆ์ „ํ• ๊นŒ?"
"๋กœ๊ทธ์ธ ํ›„์—๋Š” ์™œ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ๊ณ„์† ์ž…๋ ฅํ•˜์ง€ ์•Š์•„๋„ ๋ ๊นŒ?"


๐Ÿ”‘ 1. OAuth 2.0: ๋””์ง€ํ„ธ ์„ธ๊ณ„์˜ '๋ฐœ๋ ›ํŒŒํ‚น' ํ‚ค

๋จผ์ € OAuth 2.0์ด๋ผ๋Š” ์šฉ์–ด๋ถ€ํ„ฐ ์•Œ์•„๋ณผ๊นŒ์š”?
์–ด๋ ต๊ฒŒ ๋“ค๋ฆฌ์ง€๋งŒ, ์‚ฌ์‹ค ์šฐ๋ฆฌ๊ฐ€ ๋งค์ผ ์“ฐ๋Š” '์นด์นด์˜คํ†ก์œผ๋กœ ๋กœ๊ทธ์ธ', '๋„ค์ด๋ฒ„๋กœ ๋กœ๊ทธ์ธ'์ด ๋ฐ”๋กœ ์ด ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค.
์‰ฝ๊ฒŒ ๋งํ•ด, ๋‚ด ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ง์ ‘ ์‚ฌ์ดํŠธ์— ๋„˜๊ฒจ์ฃผ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๊ฒ€์ฆ๋œ ๋Œ€๋ฆฌ์ธ(๊ตฌ๊ธ€, ์นด์นด์˜ค ๋“ฑ)์„ ํ†ตํ•ด ์‹ ๋ถ„์„ ์ฆ๋ช…ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

OAuth 2.0 Concept Diagram (Valet Parking Analogy)

๐Ÿš— ๋ฐœ๋ ›ํŒŒํ‚น ๋น„์œ ๋กœ ์ดํ•ดํ•˜๊ธฐ

  • ์ง„์งœ ์—ด์‡ (๋น„๋ฐ€๋ฒˆํ˜ธ): ์ฐจ์˜ ๋ชจ๋“  ๋ฌธ์„ ์—ด๊ณ  ์‹œ๋™๋„ ๊ฑธ ์ˆ˜ ์žˆ๋Š” ๋งˆ์Šคํ„ฐํ‚ค์ž…๋‹ˆ๋‹ค.
    ๋‚จ์—๊ฒŒ ํ•จ๋ถ€๋กœ ์ฃผ๋ฉด ์ ˆ๋Œ€ ์•ˆ ๋˜๊ฒ ์ฃ ?
  • ๋ฐœ๋ › ํ‚ค(OAuth ํ† ํฐ): ์ฐจ ๋ฌธ๋งŒ ์—ด๊ฑฐ๋‚˜, ์‹œ๋™๋งŒ ๊ฑธ ์ˆ˜ ์žˆ๊ฒŒ ๊ถŒํ•œ์ด ์ œํ•œ๋œ ํ‚ค์ž…๋‹ˆ๋‹ค.
    ํŠธ๋ ํฌ๋‚˜ ๊ธ€๋Ÿฌ๋ธŒ ๋ฐ•์Šค๋Š” ์—ด ์ˆ˜ ์—†๋„๋ก ์„ค์ •๋˜์–ด ์žˆ์–ด ์•ˆ์ „ํ•ฉ๋‹ˆ๋‹ค.

์ฆ‰, OAuth 2.0์€ ์—ฌ๋Ÿฌ๋ถ„์˜ ์ง„์งœ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ๊ณต์œ ํ•˜์ง€ ์•Š๊ณ ๋„, ์„œ๋น„์Šค ์ด์šฉ์— ํ•„์š”ํ•œ ์ตœ์†Œํ•œ์˜ ๊ถŒํ•œ๋งŒ ๋นŒ๋ ค์ฃผ๋Š” ์•ˆ์ „ํ•œ ๋ณด์•ˆ ํ‘œ์ค€์ž…๋‹ˆ๋‹ค.


๐ŸŽซ 2. JWT: ์œ„๋ณ€์กฐ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•œ '๋””์ง€ํ„ธ ์ž…์žฅ๊ถŒ'

๋กœ๊ทธ์ธ์„ ์„ฑ๊ณตํ–ˆ๋‹ค๋ฉด, ์ด์ œ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์ด์šฉํ•ด์•ผ๊ฒ ์ฃ ?
์ด๋•Œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ JWT(Json Web Token)์ž…๋‹ˆ๋‹ค.
์„œ๋ฒ„๋Š” ๋กœ๊ทธ์ธ์— ์„ฑ๊ณตํ•œ ์‚ฌ์šฉ์ž์—๊ฒŒ JWT๋ผ๋Š” ์•”ํ˜ธํ™”๋œ ํ† ํฐ(์ž…์žฅ๊ถŒ)์„ ๋ฐœ๊ธ‰ํ•ด ์ค๋‹ˆ๋‹ค.

๊ธฐ์กด ๋ฐฉ์‹ (์„ธ์…˜)

๋†€์ด๊ณต์› ์ž…๊ตฌ์—์„œ ๋ช…๋ถ€์— ์ด๋ฆ„์„ ์ ๊ณ , ํƒˆ ๋•Œ๋งˆ๋‹ค ์ง์›์ด ๋ช…๋ถ€๋ฅผ ํ™•์ธํ•˜๋Š” ๋ฐฉ์‹.
์‚ฌ๋žŒ์ด ๋งŽ์•„์ง€๋ฉด ํ™•์ธํ•˜๋Š” ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฝ๋‹ˆ๋‹ค.

JWT ๋ฐฉ์‹ (ํ† ํฐ)

์†๋ชฉ์— ์ž์œ ์ด์šฉ๊ถŒ ๋ (JWT)๋ฅผ ๋‘๋ฅด๋Š” ๋ฐฉ์‹.
์ง์›์€ ๋ ๋งŒ ํ™•์ธํ•˜๋ฉด ๋˜๋ฏ€๋กœ ์ฒ˜๋ฆฌ๊ฐ€ ๋งค์šฐ ๋น ๋ฅด๊ณ  ๊ฐ„ํŽธํ•ฉ๋‹ˆ๋‹ค.

JWT Structure Diagram

JWT๋Š” ๋‹จ์ˆœํ•œ ๋ฌธ์ž์—ด์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ, ๊ทธ ์•ˆ์—๋Š” ์‚ฌ์šฉ์ž ์ •๋ณด(๋ˆ„๊ตฌ์ธ์ง€)์™€ ์œ ํšจ ๊ธฐ๊ฐ„(์–ธ์ œ๊นŒ์ง€์ธ์ง€), ๊ทธ๋ฆฌ๊ณ  ์œ„์กฐ ๋ฐฉ์ง€ ๋„์žฅ(์„œ๋ช…)์ด ์ฐํ˜€ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ˆ„๊ตฐ๊ฐ€ ์ด ํ† ํฐ์„ ์กฐ์ž‘ํ•˜๋ ค๊ณ  ํ•˜๋ฉด, ์œ„์กฐ ๋ฐฉ์ง€ ๋„์žฅ์ด ๊นจ์ง€๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„๊ฐ€ ์ฆ‰์‹œ ์•Œ์•„์ฑŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ›ก️ 3. ๋‚ด ์ •๋ณด๋Š” ์–ด๋””์— ์ €์žฅํ•ด์•ผ ์•ˆ์ „ํ• ๊นŒ?

์ด ์ค‘์š”ํ•œ ๋””์ง€ํ„ธ ์ž…์žฅ๊ถŒ(JWT)์„ ๋ธŒ๋ผ์šฐ์ € ์–ด๋””์— ๋ณด๊ด€ํ•ด์•ผ ํ• ๊นŒ์š”?
์ด๊ฒƒ์ด ๋ฐ”๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ณด์•ˆ ์ „๋žต์˜ ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค.
์ผ๋ฐ˜์ ์œผ๋กœ ๋‘ ๊ฐ€์ง€ ์žฅ์†Œ๊ฐ€ ๊ฑฐ๋ก ๋˜๋Š”๋ฐ, ๊ฐ๊ฐ ์žฅ๋‹จ์ ์ด ๋šœ๋ ทํ•ฉ๋‹ˆ๋‹ค.

์ €์žฅ ์žฅ์†Œ ํŠน์ง• (๋น„์œ ) ๋ณด์•ˆ ์ˆ˜์ค€
๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€
(LocalStorage)
๋‚ด ์ฃผ๋จธ๋‹ˆ ์† ์ง€๊ฐ‘
(๊บผ๋‚ด๊ธฐ ์‰ฝ์ง€๋งŒ ์†Œ๋งค์น˜๊ธฐ ์œ„ํ—˜)
์œ„ํ—˜
(XSS ๊ณต๊ฒฉ ์ทจ์•ฝ)
์ฟ ํ‚ค
(HttpOnly Cookie)
์€ํ–‰ ๊ฐœ์ธ๊ธˆ๊ณ 
(์ง์ ‘ ๋ชป ๊บผ๋‚ด๊ณ  ์€ํ–‰์›๋งŒ ์ ‘๊ทผ ๊ฐ€๋Šฅ)
์•ˆ์ „
(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ ‘๊ทผ ๋ถˆ๊ฐ€)

๊ฐœ๋ฐœ์ž๋“ค์€ ๋ณดํ†ต 'HttpOnly ์ฟ ํ‚ค'๋ผ๋Š” ๋ฐฉ์‹์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.
์ด ๋ฐฉ์‹์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž๋™์œผ๋กœ ์„œ๋ฒ„์— ํ† ํฐ์„ ๋ณด์—ฌ์ฃผ์ง€๋งŒ, ํ•ด์ปค๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋กœ ํ† ํฐ์„ ํ›”์ณ๊ฐ€๋Š” ๊ฒƒ์„ ์›์ฒœ์ ์œผ๋กœ ์ฐจ๋‹จํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
์—ฌ๋Ÿฌ๋ถ„์ด ์•ˆ์ „ํ•œ ์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•  ๋•Œ, ์•Œ๊ฒŒ ๋ชจ๋ฅด๊ฒŒ ์ด ๊ธฐ์ˆ ์ด ์—ฌ๋Ÿฌ๋ถ„์˜ ์ •๋ณด๋ฅผ ์ง€ํ‚ค๊ณ  ์žˆ๋Š” ์…ˆ์ด์ฃ .

Storage Security Comparison Infographic



๐ŸŽ“ ๋งˆ์น˜๋ฉฐ: ํŽธ๋ฆฌํ•จ ๋’ค์— ์ˆจ๊ฒจ์ง„ ๊ฒฌ๊ณ ํ•œ ๋ฐฉํŒจ

์˜ค๋Š˜ ์šฐ๋ฆฌ๋Š” OAuth 2.0๊ณผ JWT๋ผ๋Š” ๋ณด์•ˆ ๊ธฐ์ˆ ์„ ํ†ตํ•ด, ์›น์‚ฌ์ดํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ์šฐ๋ฆฌ์˜ ์ •๋ณด๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๋‹ค๋ฃจ๋Š”์ง€ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค.
์–ด๋ ต๊ฒŒ๋งŒ ๋А๊ปด์กŒ๋˜ IT ๋ณด์•ˆ ์šฉ์–ด๋“ค์ด ์กฐ๊ธˆ์€ ์นœ์ˆ™ํ•ด์ง€์…จ๋‚˜์š”?

๐Ÿ“Œ ์š”์•ฝ ์ •๋ฆฌ
  • OAuth 2.0: ๋น„๋ฐ€๋ฒˆํ˜ธ ๋Œ€์‹  ๊ถŒํ•œ๋งŒ ๋นŒ๋ ค์ฃผ๋Š” '๋ฐœ๋ › ํ‚ค' ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.
  • JWT: ์œ„์กฐ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•œ ๋””์ง€ํ„ธ '์ž์œ ์ด์šฉ๊ถŒ'์ž…๋‹ˆ๋‹ค.
  • ๋ณด์•ˆ ์ „๋žต: ์†Œ์ค‘ํ•œ ํ† ํฐ์€ ํ•ด์ปค๊ฐ€ ๊ฑด๋“ค์ง€ ๋ชปํ•˜๋„๋ก 'HttpOnly ์ฟ ํ‚ค'์— ๋ณด๊ด€ํ•˜๋Š” ๊ฒƒ์ด ์•ˆ์ „ํ•ฉ๋‹ˆ๋‹ค.

์•ž์œผ๋กœ "๊ตฌ๊ธ€๋กœ ๋กœ๊ทธ์ธ" ๋ฒ„ํŠผ์„ ๋ณผ ๋•Œ๋งˆ๋‹ค, '์•„, ๋‚ด ๋น„๋ฐ€๋ฒˆํ˜ธ ๋Œ€์‹  ์•ˆ์ „ํ•œ ํ† ํฐ์ด ์˜ค๊ณ  ๊ฐ€๊ฒ ๊ตฌ๋‚˜'๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
๋ณด์•ˆ์€ ๋ฉ€๋ฆฌ ์žˆ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์šฐ๋ฆฌ ์ผ์ƒ์˜ ํด๋ฆญ ํ•œ ๋ฒˆ์— ๋ชจ๋‘ ๋‹ด๊ฒจ ์žˆ์œผ๋‹ˆ๊นŒ์š”.


๋Œ“๊ธ€ ์“ฐ๊ธฐ