S03L02 – ๋กœ๊ทธ์ธ, ํ† ํฐ ์ฒ˜๋ฆฌ ๋ฐ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€

html

๊ฐ•๋ ฅํ•œ ๋กœ๊ทธ์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•: Token Handling ๋ฐ Local Storage๋ฅผ ์‚ฌ์šฉํ•œ React

๋ชฉ์ฐจ

  1. ์†Œ๊ฐœ
  2. ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ์ดํ•ด
    1. ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ฐ ์ด๋ฉ”์ผ ๊ฒ€์ฆ
    2. ์‚ฌ์šฉ์ž ๋กœ๊ทธ์ธ ์ฒ˜๋ฆฌ
  3. ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ์„ ํ†ตํ•œ ๋กœ๊ทธ์ธ ํ–ฅ์ƒ
    1. Axios๋กœ ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœํ•˜๊ธฐ
    2. ํด๋ผ์ด์–ธํŠธ ์—…๋ฐ์ดํŠธ
    3. BaseURL ๋ฐ URI๋กœ API URL ๊ด€๋ฆฌํ•˜๊ธฐ
  4. ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€ ์‚ฌ์šฉํ•˜๊ธฐ
    1. ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์˜ ๊ฐœ๋…
    2. ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ํ† ํฐ ์ €์žฅํ•˜๊ธฐ
  5. ์ธ์ฆ ํ† ํฐ ์ฒ˜๋ฆฌํ•˜๊ธฐ
    1. API์—์„œ ํ† ํฐ ๊ฐ€์ ธ์˜ค๊ธฐ
    2. ํ† ํฐ ์ €์žฅ ๋ฐ ๊ด€๋ฆฌํ•˜๊ธฐ
  6. ๋กœ๊ทธ์ธ ์‹œ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ
    1. ๊ฒ€์ฆ ์˜ค๋ฅ˜ ํ‘œ์‹œํ•˜๊ธฐ
    2. ๋„คํŠธ์›Œํฌ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ
  7. react-router-dom์„ ์‚ฌ์šฉํ•œ ๋‚ด๋น„๊ฒŒ์ด์…˜ ๊ตฌํ˜„
    1. ๋ฆฌ๋‹ค์ด๋ ‰์…˜์„ ์œ„ํ•œ navigate ์‚ฌ์šฉํ•˜๊ธฐ
    2. react-router-dom ์„ค์น˜ ๋ฐ ํ™œ์šฉํ•˜๊ธฐ
  8. React์—์„œ ํ™˜๊ฒฝ ๋ณ€์ˆ˜
    1. ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ์„ค์ •ํ•˜๊ธฐ
    2. API ํ˜ธ์ถœ์—์„œ process.env ํ™œ์šฉํ•˜๊ธฐ
  9. ๊ฒฐ๋ก 

์†Œ๊ฐœ

์›น ๊ฐœ๋ฐœ์˜ ์—ญ๋™์ ์ธ ํ™˜๊ฒฝ์—์„œ ์•ˆ์ „ํ•˜๊ณ  ํšจ์œจ์ ์ธ ๋กœ๊ทธ์ธ ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด ์ „์ž์ฑ…์€ React๋ฅผ ์‚ฌ์šฉํ•œ ๊ฐ•๋ ฅํ•œ ๋กœ๊ทธ์ธ ๋ฉ”์ปค๋‹ˆ์ฆ˜ ๊ตฌ์ถ•์˜ ๋ณต์žกํ•œ ๋ถ€๋ถ„์„ ํŒŒ๊ณ ๋“ค๋ฉฐ, Token Handling ๋ฐ Local Storage์— ์ค‘์ ์„ ๋‘ก๋‹ˆ๋‹ค. ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ฐ ์ด๋ฉ”์ผ ๊ฒ€์ฆ, axios๋ฅผ ์‚ฌ์šฉํ•œ ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ, ์ธ์ฆ ํ† ํฐ ๊ด€๋ฆฌ, ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ, ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ํ™œ์šฉ๊ณผ ๊ฐ™์€ ํ•„์ˆ˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํƒ๊ตฌํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ๊ฐ€์ด๋“œ๊ฐ€ ๋๋‚  ๋ฌด๋ ต, ์ดˆ๋ณด์ž์™€ ๊ธฐ๋ณธ ์ง€์‹์„ ๊ฐ€์ง„ ๊ฐœ๋ฐœ์ž ๋ชจ๋‘์—๊ฒŒ ๋งž์ถคํ™”๋œ ์•ˆ์ „ํ•œ ๋กœ๊ทธ์ธ ์‹œ์Šคํ…œ ๊ตฌํ˜„์— ๋Œ€ํ•œ ํฌ๊ด„์ ์ธ ์ดํ•ด๋ฅผ ๊ฐ–๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.


๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ์ดํ•ด

๋น„๋ฐ€๋ฒˆํ˜ธ ๋ฐ ์ด๋ฉ”์ผ ๊ฒ€์ฆ

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

ํ•ต์‹ฌ ๊ฐœ๋…:

  • ์ด๋ฉ”์ผ ๊ฒ€์ฆ: ์ž…๋ ฅ๋œ ์ด๋ฉ”์ผ์ด ํ‘œ์ค€ ์ด๋ฉ”์ผ ํ˜•์‹์„ ์ค€์ˆ˜ํ•˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
  • ๋น„๋ฐ€๋ฒˆํ˜ธ ๊ฒ€์ฆ: ๊ธธ์ด, ๋ฌธ์ž ๋‹ค์–‘์„ฑ ๋ฐ ์ผ๋ฐ˜์ ์ธ ํŒจํ„ด์˜ ๋ถ€์žฌ๋ฅผ ํฌํ•จํ•œ ๋น„๋ฐ€๋ฒˆํ˜ธ ๊ฐ•๋„๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

์žฅ์ :

  • ์ทจ์•ฝํ•œ ์ž๊ฒฉ ์ฆ๋ช…์„ ๋ฐฉ์ง€ํ•˜์—ฌ ๋ณด์•ˆ์„ ๊ฐ•ํ™”ํ•ฉ๋‹ˆ๋‹ค.
  • ์ฆ‰๊ฐ์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

๋‹จ์ :

  • ๊ณผ๋„ํ•˜๊ฒŒ ์—„๊ฒฉํ•œ ๊ฒ€์ฆ์€ ์‚ฌ์šฉ์ž๋ฅผ ์ขŒ์ ˆ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ง„ํ™”ํ•˜๋Š” ๋ณด์•ˆ ํ‘œ์ค€์— ๋งž์ถ”์–ด ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž ๋กœ๊ทธ์ธ ์ฒ˜๋ฆฌ

์‚ฌ์šฉ์ž ๋กœ๊ทธ์ธ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์บก์ฒ˜ํ•˜๊ณ , ์ด๋ฅผ ๊ฒ€์ฆํ•˜๋ฉฐ, ์ธ์ฆ ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์ดˆ๊ธฐ์—๋Š” ๊ฐ„๋‹จํ•œ ํผ์ด ์ด๋ฉ”์ผ๊ณผ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์บก์ฒ˜ํ•˜๋ฉฐ, ์ด๋Š” ์ดํ›„ ์ฒ˜๋ฆฌ๋˜์–ด ์ฝ˜์†”์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

ํ˜„์žฌ ๊ตฌํ˜„:

  • ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ฐ ์ด๋ฉ”์ผ์— ๋Œ€ํ•œ ๋‘ ๊ฐœ์˜ ๊ฒ€์ฆ๊ธฐ.
  • ์ „์ฒด ๋กœ๊ทธ์ธ ํ”„๋กœ์„ธ์Šค ์ฒ˜๋ฆฌ.
  • ์ฝ˜์†”์— ์‚ฌ์šฉ์ž ์ด๋ฆ„(์ด๋ฉ”์ผ ๋ฐ ๋น„๋ฐ€๋ฒˆํ˜ธ) ํ‘œ์‹œ.

๋‹ค์Œ ๋‹จ๊ณ„:

  • ์ฝ˜์†” ๋กœ๊น…์—์„œ ์‹ค์ œ ์ธ์ฆ ๋ฉ”์ปค๋‹ˆ์ฆ˜์œผ๋กœ ์ „ํ™˜.
  • ์ž๊ฒฉ ์ฆ๋ช…์„ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค์™€ ๊ฒ€์ฆํ•˜๊ธฐ ์œ„ํ•œ ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ ๊ตฌํ˜„.

๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ์„ ํ†ตํ•œ ๋กœ๊ทธ์ธ ํ–ฅ์ƒ

Axios๋กœ ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœํ•˜๊ธฐ

์‚ฌ์šฉ์ž๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ธ์ฆํ•˜๊ธฐ ์œ„ํ•ด ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ์„ ํ†ตํ•ฉํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค. Promise ๊ธฐ๋ฐ˜ HTTP ํด๋ผ์ด์–ธํŠธ์ธ Axios๋Š” ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๊ฐ„์˜ ํ†ต์‹ ์„ ์›ํ™œํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

๊ตฌํ˜„ ๊ฐœ์š”:

ํ•ต์‹ฌ ํฌ์ธํŠธ:

  • Axios: ๋„ค์ดํ‹ฐ๋ธŒ fetch๋ณด๋‹ค HTTP ์š”์ฒญ์„ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ๋” ๋‚˜์€ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • Promises: ๋น„๋™๊ธฐ ์ž‘์—…์„ ์›ํ™œํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํด๋ผ์ด์–ธํŠธ ์—…๋ฐ์ดํŠธ

ํด๋ผ์ด์–ธํŠธ๋ฅผ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๊ฒƒ์€ ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ์„ ๊ด€๋ฆฌํ•˜๊ณ  ๊ตฌ์กฐํ™”ํ•˜๋Š” ๋ฐฉ์‹์„ ๊ฐœ์„ ํ•˜๋Š” ๊ฒƒ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” HTTP ๋ฉ”์†Œ๋“œ๋ฅผ ์กฐ์งํ•˜๊ณ  ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅ์„ฑ์„ ์œ„ํ•ด ํด๋ผ์ด์–ธํŠธ๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

ํด๋ผ์ด์–ธํŠธ ์ˆ˜์ •:

  • ๋ถˆํ•„์š”ํ•œ ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ ์ œ๊ฑฐ.
  • GET ์š”์ฒญ๊ณผ ํ•จ๊ป˜ POST ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํด๋ผ์ด์–ธํŠธ ์—…๋ฐ์ดํŠธ.

์˜ˆ์ œ:

BaseURL ๋ฐ URI๋กœ API URL ๊ด€๋ฆฌํ•˜๊ธฐ

API ์—”๋“œํฌ์ธํŠธ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ํ™•์žฅ์„ฑ๊ณผ ์œ ์ง€ ๊ด€๋ฆฌ์— ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. BaseURL ๋ฐ URI ๊ฐœ๋…์„ ํ™œ์šฉํ•˜๋ฉด API ํ˜ธ์ถœ์ด ์ผ๊ด€๋˜๊ณ  ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์— ์ ์‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

BaseURL vs. URI:

  • BaseURL: ๋ฐฑ์—”๋“œ ์„œ๋ฒ„์˜ ๋ฃจํŠธ ์ฃผ์†Œ(์˜ˆ: http://localhost:8080).
  • URI: ํŠน์ • ์—”๋“œํฌ์ธํŠธ ๊ฒฝ๋กœ(์˜ˆ: /api/v1/auth/token).

๊ตฌํ˜„:

์žฅ์ :

  • ์œ ์—ฐ์„ฑ: ๊ฐœ๋ฐœ ๋ฐ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ ๊ฐ„ ์‰ฝ๊ฒŒ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ช…ํ™•์„ฑ: ์„œ๋ฒ„ ์ฃผ์†Œ์™€ ์—”๋“œํฌ์ธํŠธ ๊ฒฝ๋กœ๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ฐ€๋…์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€ ์‚ฌ์šฉํ•˜๊ธฐ

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์˜ ๊ฐœ๋…

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €์— ํ‚ค-๊ฐ’ ์Œ์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ์›น ์Šคํ† ๋ฆฌ์ง€ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ž…๋‹ˆ๋‹ค. ์ฟ ํ‚ค์™€ ๋‹ฌ๋ฆฌ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋Š” ๋งค๋ฒˆ ์š”์ฒญ๊ณผ ํ•จ๊ป˜ ์„œ๋ฒ„๋กœ ์ „์†ก๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ํ† ํฐ์„ ์ €์žฅํ•˜๊ธฐ์— ์•ˆ์ „ํ•œ ์„ ํƒ์ž…๋‹ˆ๋‹ค.

์žฅ์ :

  • ์ง€์†์„ฑ: ๋ช…์‹œ์ ์œผ๋กœ ์ง€์›Œ์งˆ ๋•Œ๊นŒ์ง€ ๋ฐ์ดํ„ฐ๊ฐ€ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.
  • ์šฉ๋Ÿ‰: ์ฟ ํ‚ค์— ๋น„ํ•ด ๋” ๋งŽ์€ ์ €์žฅ ๊ณต๊ฐ„์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • ๋ณด์•ˆ: HTTP ์š”์ฒญ๊ณผ ํ•จ๊ป˜ ์ž๋™์œผ๋กœ ์ „์†ก๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ํ† ํฐ ์ €์žฅํ•˜๊ธฐ

์ธ์ฆ์— ์„ฑ๊ณตํ•œ ํ›„, ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ํ† ํฐ์„ ์ €์žฅํ•˜๋ฉด ์‚ฌ์šฉ์ž์˜ ์„ธ์…˜์ด ๋ธŒ๋ผ์šฐ์ € ์ƒˆ๋กœ ๊ณ ์นจ ๋ฐ ์„ธ์…˜ ๊ฐ„์— ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

์˜ˆ์ œ ๊ตฌํ˜„:

ํ•ต์‹ฌ ํฌ์ธํŠธ:

  • ์•„์ดํ…œ ์„ค์ •: localStorage.setItem('key', 'value').
  • ์•„์ดํ…œ ๊ฐ€์ ธ์˜ค๊ธฐ: localStorage.getItem('key').
  • ์•„์ดํ…œ ์ œ๊ฑฐ: localStorage.removeItem('key').

๋ณด์•ˆ ๊ณ ๋ ค์‚ฌํ•ญ:

  • ํ† ํฐ ์™ธ์— ๋ฏผ๊ฐํ•œ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค.
  • ํ† ํฐ ์œ ์ถœ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์ ์ ˆํ•œ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ๋ฅผ ๊ตฌํ˜„ํ•˜์‹ญ์‹œ์˜ค.

์ธ์ฆ ํ† ํฐ ์ฒ˜๋ฆฌํ•˜๊ธฐ

API์—์„œ ํ† ํฐ ๊ฐ€์ ธ์˜ค๊ธฐ

์ธ์ฆ์— ์„ฑ๊ณตํ•˜๋ฉด ๋ฐฑ์—”๋“œ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ์ดํ›„ ์ธ์ฆ๋œ ์š”์ฒญ์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ† ํฐ(JWT ๋“ฑ)์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์ œ ์‘๋‹ต:

ํ† ํฐ ์ฒ˜๋ฆฌ:

ํ† ํฐ ์ €์žฅ ๋ฐ ๊ด€๋ฆฌํ•˜๊ธฐ

ํ† ํฐ์„ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉด ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„์˜ ์•ˆ์ „ํ•œ ํ†ต์‹ ์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋ฒ” ์‚ฌ๋ก€:

  • ์ €์žฅ: ์ง€์†์„ฑ์„ ์œ„ํ•ด ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ† ํฐ์ด ๋ธŒ๋ผ์šฐ์ € ์ƒˆ๋กœ ๊ณ ์นจ์„ ๊ฒฌ๋”œ ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐฑ์‹ : ์„ธ์…˜ ์œ ํšจ์„ฑ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ํ† ํฐ ๊ฐฑ์‹  ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
  • ์ทจ์†Œ: ๋กœ๊ทธ์•„์›ƒ ๋˜๋Š” ๋ณด์•ˆ ์นจํ•ด ์‹œ ํ† ํฐ์„ ๋ฌดํšจํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์ œ ์‚ฌ์šฉ๋ฒ•:


๋กœ๊ทธ์ธ ์‹œ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ

๊ฒ€์ฆ ์˜ค๋ฅ˜ ํ‘œ์‹œํ•˜๊ธฐ

ํšจ๊ณผ์ ์ธ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ๋Š” ์ž…๋ ฅ ๋ฌธ์ œ์— ๋Œ€ํ•œ ๋ช…ํ™•ํ•œ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

๊ตฌํ˜„ ๋‹จ๊ณ„:

  1. ์˜ค๋ฅ˜ ์ดˆ๊ธฐํ™”: ์ƒˆ๋กœ์šด ์ž…๋ ฅ์„ ๊ฒ€์ฆํ•˜๊ธฐ ์ „์— ๊ธฐ์กด ์˜ค๋ฅ˜๋ฅผ ์ง€์›๋‹ˆ๋‹ค.
  2. ์˜ค๋ฅ˜ ์„ค์ •: ๊ฒ€์ฆ ์‹คํŒจ์— ๋”ฐ๋ผ ํŠน์ • ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.
  3. ์˜ค๋ฅ˜ ํ‘œ์‹œ: UI์— ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ์กฐ๊ฑด๋ถ€๋กœ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์ œ ์ฝ”๋“œ:

๋„คํŠธ์›Œํฌ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ

๋„คํŠธ์›Œํฌ ์˜ค๋ฅ˜๋Š” ์„œ๋ฒ„ ๋‹ค์šดํƒ€์ž„ ๋˜๋Š” ์—ฐ๊ฒฐ ๋ฌธ์ œ์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ์ด์œ ๋กœ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ ์ ˆํ•œ ์ฒ˜๋ฆฌ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๊ฒฌ๊ณ ํ•˜๊ฒŒ ์œ ์ง€๋˜๋„๋ก ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ ์ „๋žต:

  • Try-Catch ๋ธ”๋ก: ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ์„ try-catch๋กœ ๊ฐ์‹ธ ์˜ค๋ฅ˜๋ฅผ ์บก์ฒ˜ํ•ฉ๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ์ž ํ”ผ๋“œ๋ฐฑ: ๊ธฐ์ˆ ์ ์ธ ์„ธ๋ถ€ ์‚ฌํ•ญ์„ ๋…ธ์ถœํ•˜์ง€ ์•Š๊ณ  ๋ฌธ์ œ๋ฅผ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•Œ๋ฆฝ๋‹ˆ๋‹ค.
  • ๋กœ๊น…: ๋””๋ฒ„๊น… ๋ฐ ๋ชจ๋‹ˆํ„ฐ๋ง ๋ชฉ์ ์œผ๋กœ ์˜ค๋ฅ˜๋ฅผ ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์ œ ๊ตฌํ˜„:


react-router-dom์„ ์‚ฌ์šฉํ•œ ๋‚ด๋น„๊ฒŒ์ด์…˜ ๊ตฌํ˜„

๋ฆฌ๋‹ค์ด๋ ‰์…˜์„ ์œ„ํ•œ navigate ์‚ฌ์šฉํ•˜๊ธฐ

์ธ์ฆ ํ›„ ์‚ฌ์šฉ์ž๋ฅผ ์ ์ ˆํ•œ ํŽ˜์ด์ง€๋กœ ๋ฆฌ๋‹ค์ด๋ ‰ํŠธํ•˜๋ฉด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ๋ฆ„๊ณผ ๋ณด์•ˆ์ด ํ–ฅ์ƒ๋ฉ๋‹ˆ๋‹ค.

๊ตฌํ˜„ ์˜ˆ์ œ:

react-router-dom ์„ค์น˜ ๋ฐ ํ™œ์šฉํ•˜๊ธฐ

react-router-dom์€ React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ผ์šฐํŒ…์„ ์œ„ํ•œ ํ‘œ์ค€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ๋‹ค์–‘ํ•œ ๊ตฌ์„ฑ ์š”์†Œ ๊ฐ„์˜ ๋‚ด๋น„๊ฒŒ์ด์…˜์„ ์›ํ™œํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

์„ค์น˜:

๊ธฐ๋ณธ ์„ค์ •:

์žฅ์ :

  • ์„ ์–ธ์  ๋ผ์šฐํŒ…: ๊ฒฝ๋กœ๋ฅผ ๊ตฌ์„ฑ ์š”์†Œ ๊ตฌ์กฐ์˜ ์ผ๋ถ€๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋™์  ๋ผ์šฐํŒ…: ์‚ฌ์šฉ์ž ์ธ์ฆ ์ƒํƒœ์— ๋”ฐ๋ผ ๊ฒฝ๋กœ๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ค‘์ฒฉ ๋ผ์šฐํŠธ: ๋ณต์žกํ•œ ๋ผ์šฐํŒ… ๊ตฌ์กฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์กฐ์งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React์—์„œ ํ™˜๊ฒฝ ๋ณ€์ˆ˜

ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ์„ค์ •ํ•˜๊ธฐ

ํ™˜๊ฒฝ ๋ณ€์ˆ˜๋Š” ์ฝ”๋“œ๋ฒ ์ด์Šค ์™ธ๋ถ€์— ๊ตฌ์„ฑ ๊ฐ’์„ ์ €์žฅํ•˜์—ฌ ๋ณด์•ˆ์„ฑ๊ณผ ์œ ์—ฐ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

๊ตฌ์„ฑ ๋‹จ๊ณ„:

  1. .env ํŒŒ์ผ ์ƒ์„ฑ: ํ”„๋กœ์ ํŠธ์˜ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์— ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.
  2. ๋ณ€์ˆ˜ ์ •์˜: Create React App์˜ ๊ฒฝ์šฐ ๋ณ€์ˆ˜ ์ด๋ฆ„์„ REACT_APP_์œผ๋กœ ์ ‘๋‘์–ด ์‚ฌ์šฉ.
  3. ๋ณ€์ˆ˜ ์ ‘๊ทผ: ์ฝ”๋“œ ๋‚ด์—์„œ process.env.REACT_APP_VARIABLE_NAME์„ ์‚ฌ์šฉ.

์˜ˆ์ œ .env ํŒŒ์ผ:

API ํ˜ธ์ถœ์—์„œ process.env ํ™œ์šฉํ•˜๊ธฐ

API ํ˜ธ์ถœ์— ํ™˜๊ฒฝ ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ฉํ•˜๋ฉด ์ฝ”๋“œ ๋ณ€๊ฒฝ ์—†์ด๋„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์— ์ ์‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ตฌํ˜„ ์˜ˆ์ œ:

์žฅ์ :

  • ๋ณด์•ˆ: API URL๊ณผ ๊ฐ™์€ ๋ฏผ๊ฐํ•œ ์ •๋ณด๋ฅผ ์ฝ”๋“œ๋ฒ ์ด์Šค์—์„œ ๋ถ„๋ฆฌํ•˜์—ฌ ๋ณด์•ˆ์„ฑ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  • ์œ ์—ฐ์„ฑ: ๊ฐœ๋ฐœ, ์Šคํ…Œ์ด์ง•, ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ ๊ฐ„ ์‰ฝ๊ฒŒ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๋ก 

์•ˆ์ „ํ•˜๊ณ  ํšจ์œจ์ ์ธ ๋กœ๊ทธ์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•์€ ํ˜„๋Œ€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ดˆ์„์ž…๋‹ˆ๋‹ค. ๊ฐ•๋ ฅํ•œ ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ฐ ์ด๋ฉ”์ผ ๊ฒ€์ฆ์„ ๊ตฌํ˜„ํ•˜๊ณ , axios๋ฅผ ์‚ฌ์šฉํ•œ ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ์„ ํ™œ์šฉํ•˜๋ฉฐ, Local Storage๋ฅผ ํ†ตํ•ด ์ธ์ฆ ํ† ํฐ์„ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•จ์œผ๋กœ์จ ๊ฐœ๋ฐœ์ž๋Š” ์›ํ™œํ•˜๊ณ  ์•ˆ์ „ํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ์™€ ํ™˜๊ฒฝ ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ฉํ•จ์œผ๋กœ์จ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ฒฌ๊ณ ์„ฑ๊ณผ ์ ์‘์„ฑ์„ ๋”์šฑ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›น ๊ธฐ์ˆ ์ด ์ง€์†์ ์œผ๋กœ ๋ฐœ์ „ํ•จ์— ๋”ฐ๋ผ, ์ธ์ฆ ๋ฉ”์ปค๋‹ˆ์ฆ˜์—์„œ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์ ์šฉํ•˜๊ณ  ์ตœ์‹  ์ •๋ณด๋ฅผ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜์ ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

SEO ์ตœ์ ํ™” ํ‚ค์›Œ๋“œ: React login system, Token Handling, Local Storage in React, Axios network calls, Authentication tokens, react-router-dom navigation, Environment Variables React, Error Handling Login, Secure Login React, Frontend Authentication

์ฐธ๊ณ : ์ด ๊ธฐ์‚ฌ๋Š” AI์— ์˜ํ•ด ์ƒ์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.






Share your love