html
๊ฐ๋ ฅํ ๋ก๊ทธ์ธ ์์คํ ๊ตฌ์ถ: Token Handling ๋ฐ Local Storage๋ฅผ ์ฌ์ฉํ React
๋ชฉ์ฐจ
- ์๊ฐ
- ๋ก๊ทธ์ธ ๊ธฐ๋ฅ ์ดํด
- ๋คํธ์ํฌ ํธ์ถ์ ํตํ ๋ก๊ทธ์ธ ํฅ์
- ๋ก์ปฌ ์คํ ๋ฆฌ์ง ์ฌ์ฉํ๊ธฐ
- ์ธ์ฆ ํ ํฐ ์ฒ๋ฆฌํ๊ธฐ
- ๋ก๊ทธ์ธ ์ ์ค๋ฅ ์ฒ๋ฆฌ
- react-router-dom์ ์ฌ์ฉํ ๋ด๋น๊ฒ์ด์ ๊ตฌํ
- React์์ ํ๊ฒฝ ๋ณ์
- ๊ฒฐ๋ก
์๊ฐ
์น ๊ฐ๋ฐ์ ์ญ๋์ ์ธ ํ๊ฒฝ์์ ์์ ํ๊ณ ํจ์จ์ ์ธ ๋ก๊ทธ์ธ ์์คํ ์ ๊ตฌ์ถํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด ์ ์์ฑ ์ React๋ฅผ ์ฌ์ฉํ ๊ฐ๋ ฅํ ๋ก๊ทธ์ธ ๋ฉ์ปค๋์ฆ ๊ตฌ์ถ์ ๋ณต์กํ ๋ถ๋ถ์ ํ๊ณ ๋ค๋ฉฐ, Token Handling ๋ฐ Local Storage์ ์ค์ ์ ๋ก๋๋ค. ๋น๋ฐ๋ฒํธ ๋ฐ ์ด๋ฉ์ผ ๊ฒ์ฆ, axios๋ฅผ ์ฌ์ฉํ ๋คํธ์ํฌ ํธ์ถ, ์ธ์ฆ ํ ํฐ ๊ด๋ฆฌ, ์ค๋ฅ ์ฒ๋ฆฌ, ํ๊ฒฝ ๋ณ์ ํ์ฉ๊ณผ ๊ฐ์ ํ์ ๊ตฌ์ฑ ์์๋ฅผ ํ๊ตฌํ ๊ฒ์ ๋๋ค. ์ด ๊ฐ์ด๋๊ฐ ๋๋ ๋ฌด๋ ต, ์ด๋ณด์์ ๊ธฐ๋ณธ ์ง์์ ๊ฐ์ง ๊ฐ๋ฐ์ ๋ชจ๋์๊ฒ ๋ง์ถคํ๋ ์์ ํ ๋ก๊ทธ์ธ ์์คํ ๊ตฌํ์ ๋ํ ํฌ๊ด์ ์ธ ์ดํด๋ฅผ ๊ฐ๊ฒ ๋ ๊ฒ์ ๋๋ค.
๋ก๊ทธ์ธ ๊ธฐ๋ฅ ์ดํด
๋น๋ฐ๋ฒํธ ๋ฐ ์ด๋ฉ์ผ ๊ฒ์ฆ
๋ชจ๋ ๋ก๊ทธ์ธ ์์คํ ์ ๊ธฐ๋ณธ์ ์ธ ์ธก๋ฉด์ ์ฌ์ฉ์ ์๊ฒฉ ์ฆ๋ช ์ด ์ ํจํ๊ณ ์์ ํ์ง ํ์ธํ๋ ๊ฒ์ ๋๋ค. ๋น๋ฐ๋ฒํธ ๋ฐ ์ด๋ฉ์ผ ํ๋ ๋ชจ๋์ ๋ํ ๊ฒ์ฆ๊ธฐ๋ฅผ ๊ตฌํํ๋ ๊ฒ์ ๋ฐ์ดํฐ ๋ฌด๊ฒฐ์ฑ์ ์ ์งํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๋ฐ ์ค์ํฉ๋๋ค.
ํต์ฌ ๊ฐ๋ :
- ์ด๋ฉ์ผ ๊ฒ์ฆ: ์ ๋ ฅ๋ ์ด๋ฉ์ผ์ด ํ์ค ์ด๋ฉ์ผ ํ์์ ์ค์ํ๋์ง ํ์ธํฉ๋๋ค.
- ๋น๋ฐ๋ฒํธ ๊ฒ์ฆ: ๊ธธ์ด, ๋ฌธ์ ๋ค์์ฑ ๋ฐ ์ผ๋ฐ์ ์ธ ํจํด์ ๋ถ์ฌ๋ฅผ ํฌํจํ ๋น๋ฐ๋ฒํธ ๊ฐ๋๋ฅผ ํ์ธํฉ๋๋ค.
์ฅ์ :
- ์ทจ์ฝํ ์๊ฒฉ ์ฆ๋ช ์ ๋ฐฉ์งํ์ฌ ๋ณด์์ ๊ฐํํฉ๋๋ค.
- ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํต๋๋ค.
๋จ์ :
- ๊ณผ๋ํ๊ฒ ์๊ฒฉํ ๊ฒ์ฆ์ ์ฌ์ฉ์๋ฅผ ์ข์ ์ํฌ ์ ์์ต๋๋ค.
- ์งํํ๋ ๋ณด์ ํ์ค์ ๋ง์ถ์ด ์ ์ง ๊ด๋ฆฌ๊ฐ ํ์ํฉ๋๋ค.
์ฌ์ฉ์ ๋ก๊ทธ์ธ ์ฒ๋ฆฌ
์ฌ์ฉ์ ๋ก๊ทธ์ธ์ ์ฒ๋ฆฌํ๋ ๊ฒ์ ์ฌ์ฉ์ ์ ๋ ฅ์ ์บก์ฒํ๊ณ , ์ด๋ฅผ ๊ฒ์ฆํ๋ฉฐ, ์ธ์ฆ ํ๋ก์ธ์ค๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๊ธฐ์๋ ๊ฐ๋จํ ํผ์ด ์ด๋ฉ์ผ๊ณผ ๋น๋ฐ๋ฒํธ๋ฅผ ์บก์ฒํ๋ฉฐ, ์ด๋ ์ดํ ์ฒ๋ฆฌ๋์ด ์ฝ์์ ํ์๋ฉ๋๋ค.
ํ์ฌ ๊ตฌํ:
- ๋น๋ฐ๋ฒํธ ๋ฐ ์ด๋ฉ์ผ์ ๋ํ ๋ ๊ฐ์ ๊ฒ์ฆ๊ธฐ.
- ์ ์ฒด ๋ก๊ทธ์ธ ํ๋ก์ธ์ค ์ฒ๋ฆฌ.
- ์ฝ์์ ์ฌ์ฉ์ ์ด๋ฆ(์ด๋ฉ์ผ ๋ฐ ๋น๋ฐ๋ฒํธ) ํ์.
๋ค์ ๋จ๊ณ:
- ์ฝ์ ๋ก๊น ์์ ์ค์ ์ธ์ฆ ๋ฉ์ปค๋์ฆ์ผ๋ก ์ ํ.
- ์๊ฒฉ ์ฆ๋ช ์ ๋ฐฑ์๋ ์๋น์ค์ ๊ฒ์ฆํ๊ธฐ ์ํ ๋คํธ์ํฌ ํธ์ถ ๊ตฌํ.
๋คํธ์ํฌ ํธ์ถ์ ํตํ ๋ก๊ทธ์ธ ํฅ์
Axios๋ก ๋คํธ์ํฌ ํธ์ถํ๊ธฐ
์ฌ์ฉ์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ธ์ฆํ๊ธฐ ์ํด ๋คํธ์ํฌ ํธ์ถ์ ํตํฉํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. Promise ๊ธฐ๋ฐ HTTP ํด๋ผ์ด์ธํธ์ธ Axios๋ ํ๋ก ํธ์๋์ ๋ฐฑ์๋ ๊ฐ์ ํต์ ์ ์ํํ๊ฒ ํฉ๋๋ค.
๊ตฌํ ๊ฐ์:
1 2 3 4 5 6 7 8 |
<pre> javascript import axios from 'axios'; // ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ์์ ํจ์ const fetchGetData = (url) => { return axios.get(url); }; |
ํต์ฌ ํฌ์ธํธ:
- Axios: ๋ค์ดํฐ๋ธ fetch๋ณด๋ค HTTP ์์ฒญ์ ๋จ์ํํ๊ณ ๋ ๋์ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- Promises: ๋น๋๊ธฐ ์์ ์ ์ํํ๊ฒ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
ํด๋ผ์ด์ธํธ ์ ๋ฐ์ดํธ
ํด๋ผ์ด์ธํธ๋ฅผ ํฅ์์ํค๋ ๊ฒ์ ๋คํธ์ํฌ ํธ์ถ์ ๊ด๋ฆฌํ๊ณ ๊ตฌ์กฐํํ๋ ๋ฐฉ์์ ๊ฐ์ ํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ HTTP ๋ฉ์๋๋ฅผ ์กฐ์งํ๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ์ฑ์ ์ํด ํด๋ผ์ด์ธํธ๋ฅผ ์ค์ ํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค.
ํด๋ผ์ด์ธํธ ์์ :
- ๋ถํ์ํ ๋คํธ์ํฌ ํธ์ถ ์ ๊ฑฐ.
- GET ์์ฒญ๊ณผ ํจ๊ป POST ์์ฒญ์ ์ฒ๋ฆฌํ ์ ์๋๋ก ํด๋ผ์ด์ธํธ ์ ๋ฐ์ดํธ.
์์ :
1 2 3 4 5 6 7 8 9 10 |
<pre> // client.js import axios from 'axios'; const baseURL = process.env.REACT_APP_BASE_URL; const fetchGetData = (uri) => axios.get(`${baseURL}${uri}`); const fetchPostData = (uri, payload) => axios.post(`${baseURL}${uri}`, payload); export { fetchGetData, fetchPostData }; |
BaseURL ๋ฐ URI๋ก API URL ๊ด๋ฆฌํ๊ธฐ
API ์๋ํฌ์ธํธ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ ํ์ฅ์ฑ๊ณผ ์ ์ง ๊ด๋ฆฌ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. BaseURL ๋ฐ URI ๊ฐ๋ ์ ํ์ฉํ๋ฉด API ํธ์ถ์ด ์ผ๊ด๋๊ณ ๋ค์ํ ํ๊ฒฝ์ ์ ์ํ ์ ์์ต๋๋ค.
BaseURL vs. URI:
- BaseURL: ๋ฐฑ์๋ ์๋ฒ์ ๋ฃจํธ ์ฃผ์(์:
http://localhost:8080
). - URI: ํน์ ์๋ํฌ์ธํธ ๊ฒฝ๋ก(์:
/api/v1/auth/token
).
๊ตฌํ:
1 2 3 4 |
<pre> const baseURL = process.env.REACT_APP_BASE_URL; const uri = '/api/v1/auth/token'; const fullURL = `${baseURL}${uri}`; |
์ฅ์ :
- ์ ์ฐ์ฑ: ๊ฐ๋ฐ ๋ฐ ํ๋ก๋์ ํ๊ฒฝ ๊ฐ ์ฝ๊ฒ ์ ํํ ์ ์์ต๋๋ค.
- ๋ช ํ์ฑ: ์๋ฒ ์ฃผ์์ ์๋ํฌ์ธํธ ๊ฒฝ๋ก๋ฅผ ๋ถ๋ฆฌํ์ฌ ๊ฐ๋ ์ฑ์ ํฅ์์ํต๋๋ค.
๋ก์ปฌ ์คํ ๋ฆฌ์ง ์ฌ์ฉํ๊ธฐ
๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ๊ฐ๋
๋ก์ปฌ ์คํ ๋ฆฌ์ง๋ ๊ฐ๋ฐ์๊ฐ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์ ํค-๊ฐ ์์ ์ ์ฅํ ์ ์๋ ์น ์คํ ๋ฆฌ์ง ๋ฉ์ปค๋์ฆ์ ๋๋ค. ์ฟ ํค์ ๋ฌ๋ฆฌ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ ๋งค๋ฒ ์์ฒญ๊ณผ ํจ๊ป ์๋ฒ๋ก ์ ์ก๋์ง ์์ผ๋ฏ๋ก ํ ํฐ์ ์ ์ฅํ๊ธฐ์ ์์ ํ ์ ํ์ ๋๋ค.
์ฅ์ :
- ์ง์์ฑ: ๋ช ์์ ์ผ๋ก ์ง์์ง ๋๊น์ง ๋ฐ์ดํฐ๊ฐ ์ ์ง๋ฉ๋๋ค.
- ์ฉ๋: ์ฟ ํค์ ๋นํด ๋ ๋ง์ ์ ์ฅ ๊ณต๊ฐ์ ์ ๊ณตํฉ๋๋ค.
- ๋ณด์: HTTP ์์ฒญ๊ณผ ํจ๊ป ์๋์ผ๋ก ์ ์ก๋์ง ์์ต๋๋ค.
๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ํ ํฐ ์ ์ฅํ๊ธฐ
์ธ์ฆ์ ์ฑ๊ณตํ ํ, ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ํ ํฐ์ ์ ์ฅํ๋ฉด ์ฌ์ฉ์์ ์ธ์ ์ด ๋ธ๋ผ์ฐ์ ์๋ก ๊ณ ์นจ ๋ฐ ์ธ์ ๊ฐ์ ์ ์ง๋ฉ๋๋ค.
์์ ๊ตฌํ:
1 2 3 4 5 6 7 8 9 10 11 12 |
<pre> javascript const handleLogin = async (credentials) => { try { const response = await fetchPostData('/auth/token', credentials); const { token } = response.data; localStorage.setItem('token', token); // ๋์๋ณด๋ ๋๋ ํ์ผ๋ก ์ด๋ } catch (error) { console.error('๋ก๊ทธ์ธ ์คํจ:', error); } }; |
ํต์ฌ ํฌ์ธํธ:
- ์์ดํ
์ค์ :
localStorage.setItem('key', 'value')
. - ์์ดํ
๊ฐ์ ธ์ค๊ธฐ:
localStorage.getItem('key')
. - ์์ดํ
์ ๊ฑฐ:
localStorage.removeItem('key')
.
๋ณด์ ๊ณ ๋ ค์ฌํญ:
- ํ ํฐ ์ธ์ ๋ฏผ๊ฐํ ์ ๋ณด๋ฅผ ์ ์ฅํ์ง ๋ง์ญ์์ค.
- ํ ํฐ ์ ์ถ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ ์ ํ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ๊ตฌํํ์ญ์์ค.
์ธ์ฆ ํ ํฐ ์ฒ๋ฆฌํ๊ธฐ
API์์ ํ ํฐ ๊ฐ์ ธ์ค๊ธฐ
์ธ์ฆ์ ์ฑ๊ณตํ๋ฉด ๋ฐฑ์๋๋ ์ผ๋ฐ์ ์ผ๋ก ํ๋ก ํธ์๋๊ฐ ์ดํ ์ธ์ฆ๋ ์์ฒญ์ ์ํด ์ฌ์ฉํ๋ ํ ํฐ(JWT ๋ฑ)์ ๋ฐํํฉ๋๋ค.
์์ ์๋ต:
1 2 3 4 5 |
<pre> json { "token": "eyJhbGciOiJIUzI1NiIsInR..." } |
ํ ํฐ ์ฒ๋ฆฌ:
1 2 3 4 |
<pre> javascript const { token } = response.data; localStorage.setItem('token', token); |
ํ ํฐ ์ ์ฅ ๋ฐ ๊ด๋ฆฌํ๊ธฐ
ํ ํฐ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋ฉด ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ ์์ ํ ํต์ ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
๋ชจ๋ฒ ์ฌ๋ก:
- ์ ์ฅ: ์ง์์ฑ์ ์ํด ๋ก์ปฌ ์คํ ๋ฆฌ์ง๋ฅผ ์ฌ์ฉํ์ฌ ํ ํฐ์ด ๋ธ๋ผ์ฐ์ ์๋ก ๊ณ ์นจ์ ๊ฒฌ๋ ์ ์๋๋ก ํฉ๋๋ค.
- ๊ฐฑ์ : ์ธ์ ์ ํจ์ฑ์ ์ ์งํ๊ธฐ ์ํด ํ ํฐ ๊ฐฑ์ ๋ฉ์ปค๋์ฆ์ ๊ตฌํํฉ๋๋ค.
- ์ทจ์: ๋ก๊ทธ์์ ๋๋ ๋ณด์ ์นจํด ์ ํ ํฐ์ ๋ฌดํจํํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
์์ ์ฌ์ฉ๋ฒ:
1 2 3 4 5 6 7 8 9 10 |
<pre> javascript const getToken = () => localStorage.getItem('token'); const authenticateRequest = () => { const token = getToken(); return axios.create({ headers: { Authorization: `Bearer ${token}` } }); }; |
๋ก๊ทธ์ธ ์ ์ค๋ฅ ์ฒ๋ฆฌ
๊ฒ์ฆ ์ค๋ฅ ํ์ํ๊ธฐ
ํจ๊ณผ์ ์ธ ์ค๋ฅ ์ฒ๋ฆฌ๋ ์ ๋ ฅ ๋ฌธ์ ์ ๋ํ ๋ช ํํ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํต๋๋ค.
๊ตฌํ ๋จ๊ณ:
- ์ค๋ฅ ์ด๊ธฐํ: ์๋ก์ด ์ ๋ ฅ์ ๊ฒ์ฆํ๊ธฐ ์ ์ ๊ธฐ์กด ์ค๋ฅ๋ฅผ ์ง์๋๋ค.
- ์ค๋ฅ ์ค์ : ๊ฒ์ฆ ์คํจ์ ๋ฐ๋ผ ํน์ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ ๋นํฉ๋๋ค.
- ์ค๋ฅ ํ์: UI์ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ์กฐ๊ฑด๋ถ๋ก ๋ ๋๋งํฉ๋๋ค.
์์ ์ฝ๋:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<pre> javascript const handleLogin = async (credentials) => { setLoginError(null); try { // ๋ก๊ทธ์ธ ์๋ } catch (error) { setLoginError('์๋ชป๋ ์ด๋ฉ์ผ ๋๋ ๋น๋ฐ๋ฒํธ์
๋๋ค.'); } }; // JSX {loginError && <div className="error">{loginError}</div>} |
๋คํธ์ํฌ ์ค๋ฅ ์ฒ๋ฆฌํ๊ธฐ
๋คํธ์ํฌ ์ค๋ฅ๋ ์๋ฒ ๋ค์ดํ์ ๋๋ ์ฐ๊ฒฐ ๋ฌธ์ ์ ๊ฐ์ ๋ค์ํ ์ด์ ๋ก ๋ฐ์ํ ์ ์์ต๋๋ค. ์ ์ ํ ์ฒ๋ฆฌ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ฒฌ๊ณ ํ๊ฒ ์ ์ง๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ค๋ฅ ์ฒ๋ฆฌ ์ ๋ต:
- Try-Catch ๋ธ๋ก: ๋คํธ์ํฌ ํธ์ถ์ try-catch๋ก ๊ฐ์ธ ์ค๋ฅ๋ฅผ ์บก์ฒํฉ๋๋ค.
- ์ฌ์ฉ์ ํผ๋๋ฐฑ: ๊ธฐ์ ์ ์ธ ์ธ๋ถ ์ฌํญ์ ๋ ธ์ถํ์ง ์๊ณ ๋ฌธ์ ๋ฅผ ์ฌ์ฉ์์๊ฒ ์๋ฆฝ๋๋ค.
- ๋ก๊น : ๋๋ฒ๊น ๋ฐ ๋ชจ๋ํฐ๋ง ๋ชฉ์ ์ผ๋ก ์ค๋ฅ๋ฅผ ๊ธฐ๋กํฉ๋๋ค.
์์ ๊ตฌํ:
1 2 3 4 5 6 7 8 9 |
<pre> javascript try { const response = await fetchPostData('/auth/token', credentials); // ์ฑ๊ณต ์ฒ๋ฆฌ } catch (error) { console.error('๋คํธ์ํฌ ์ค๋ฅ:', error); setLoginError('์ฐ๊ฒฐํ ์ ์์ต๋๋ค. ๋์ค์ ๋ค์ ์๋ํ์ญ์์ค.'); } |
react-router-dom์ ์ฌ์ฉํ ๋ด๋น๊ฒ์ด์ ๊ตฌํ
๋ฆฌ๋ค์ด๋ ์ ์ ์ํ navigate ์ฌ์ฉํ๊ธฐ
์ธ์ฆ ํ ์ฌ์ฉ์๋ฅผ ์ ์ ํ ํ์ด์ง๋ก ๋ฆฌ๋ค์ด๋ ํธํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ํ๋ฆ๊ณผ ๋ณด์์ด ํฅ์๋ฉ๋๋ค.
๊ตฌํ ์์ :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<pre> javascript import { useNavigate } from 'react-router-dom'; const Login = () => { const navigate = useNavigate(); const handleLogin = async (credentials) => { // ๋ก๊ทธ์ธ ์ฑ๊ณต ํ navigate('/dashboard'); }; // ... }; |
react-router-dom ์ค์น ๋ฐ ํ์ฉํ๊ธฐ
react-router-dom์ React ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ผ์ฐํ ์ ์ํ ํ์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก, ๋ค์ํ ๊ตฌ์ฑ ์์ ๊ฐ์ ๋ด๋น๊ฒ์ด์ ์ ์ํํ๊ฒ ํฉ๋๋ค.
์ค์น:
1 2 3 |
<pre> bash npm install react-router-dom |
๊ธฐ๋ณธ ์ค์ :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<pre> javascript import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Login from './Login'; import Dashboard from './Dashboard'; const App = () => ( <Router> <Routes> <Route path="/login" element={<Login />} /> <Route path="/dashboard" element={<Dashboard />} /> </Routes> </Router> ); |
์ฅ์ :
- ์ ์ธ์ ๋ผ์ฐํ : ๊ฒฝ๋ก๋ฅผ ๊ตฌ์ฑ ์์ ๊ตฌ์กฐ์ ์ผ๋ถ๋ก ์ ์ํ ์ ์์ต๋๋ค.
- ๋์ ๋ผ์ฐํ : ์ฌ์ฉ์ ์ธ์ฆ ์ํ์ ๋ฐ๋ผ ๊ฒฝ๋ก๋ฅผ ์กฐ์ ํ ์ ์์ต๋๋ค.
- ์ค์ฒฉ ๋ผ์ฐํธ: ๋ณต์กํ ๋ผ์ฐํ ๊ตฌ์กฐ๋ฅผ ํจ์จ์ ์ผ๋ก ์กฐ์งํ ์ ์์ต๋๋ค.
React์์ ํ๊ฒฝ ๋ณ์
ํ๊ฒฝ ๋ณ์ ์ค์ ํ๊ธฐ
ํ๊ฒฝ ๋ณ์๋ ์ฝ๋๋ฒ ์ด์ค ์ธ๋ถ์ ๊ตฌ์ฑ ๊ฐ์ ์ ์ฅํ์ฌ ๋ณด์์ฑ๊ณผ ์ ์ฐ์ฑ์ ํฅ์์ํต๋๋ค.
๊ตฌ์ฑ ๋จ๊ณ:
- .env ํ์ผ ์์ฑ: ํ๋ก์ ํธ์ ๋ฃจํธ ๋๋ ํ ๋ฆฌ์ ๋ฐฐ์นํฉ๋๋ค.
- ๋ณ์ ์ ์: Create React App์ ๊ฒฝ์ฐ ๋ณ์ ์ด๋ฆ์
REACT_APP_
์ผ๋ก ์ ๋์ด ์ฌ์ฉ. - ๋ณ์ ์ ๊ทผ: ์ฝ๋ ๋ด์์
process.env.REACT_APP_VARIABLE_NAME
์ ์ฌ์ฉ.
์์ .env ํ์ผ:
1 2 3 |
<pre> env REACT_APP_BASE_URL=http://localhost:8080/api/v1 |
API ํธ์ถ์์ process.env ํ์ฉํ๊ธฐ
API ํธ์ถ์ ํ๊ฒฝ ๋ณ์๋ฅผ ํตํฉํ๋ฉด ์ฝ๋ ๋ณ๊ฒฝ ์์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ค์ํ ํ๊ฒฝ์ ์ ์ํ ์ ์์ต๋๋ค.
๊ตฌํ ์์ :
1 2 3 4 5 6 |
<pre> javascript const baseURL = process.env.REACT_APP_BASE_URL; const uri = '/auth/token'; const fullURL = `${baseURL}${uri}`; axios.post(fullURL, credentials); |
์ฅ์ :
- ๋ณด์: 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์ ์ํด ์์ฑ๋์์ต๋๋ค.