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

๐ŸŒŒ | WEB DEV/React22

[React] 10. ๋ผ์šฐํŒ…-2 (useNavigate, 404page, Nested Routes, Outlet) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2023. 7. 10.
[React] 9. ๋ผ์šฐํŒ…-1 (react-router-dom์„ธํŒ…, Routes, Route, Link) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2023. 7. 9.
[React] 8. ๋‹ค๋ฅธ ํŒŒ์ผ์—์„œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2023. 7. 6.
[React] 7. ์ด๋ฏธ์ง€ ์‚ฝ์ž…ํ•˜๊ธฐ(css, html, publicํด๋”์—์„œ ๊ฐ€์ ธ์˜ค๊ธฐ) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2023. 7. 3.
[React] CORS ์—๋Ÿฌ ํ•ด๊ฒฐํ•˜๊ธฐ (http-proxy-middleware) ์™ธ์ฃผ ์ž‘์—… ๋„์ค‘ api์— ์š”์ฒญ์„ ํ•  ๋•Œ CORS ์—๋Ÿฌ๋ฅผ ๋งˆ์ฃผํ•˜์˜€๋‹ค! ๋Œ€๋žต ์œ„์™€ ๊ฐ™์€ ์—๋Ÿฌ ๋ฉ”์„ธ์ง€๋ฅผ ์ฝ˜์†”์ฐฝ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. 1. CORS (Cross Origin Resource Sharing) 1) CORS๋ž€? https://developer.mozilla.org/ko/docs/Web/HTTP/CORS/Errors CORS(๊ต์ฐจ ์ถœ์ฒ˜ ๋ฆฌ์†Œ์Šค ๊ณต์œ )๋Š” ๋‹ค๋ฅธ ์ถœ์ฒ˜ ๊ฐ„์˜ ์ž์› ๊ณต์œ ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๊ณ  http ํ—ค๋”๋ฅผ ์ด์šฉํ•˜์—ฌ ์‹คํ–‰ ์ค‘์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋‹ค๋ฅธ ์ถœ์ฒ˜(Origin)์˜ ์ž์›์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜๋„๋ก ๋ธŒ๋ผ์šฐ์ €์— ์•Œ๋ ค์ฃผ๋Š” ์ฒด์ œ์ด๋‹ค. 2) SOP (Same Origin Policy) https://developer.mozilla.org/ko/docs/Web/Security/Same-origin.. 2023. 6. 30.
[React] 6. props ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2023. 5. 29.
[React] 5. ๋ฐ˜๋ณต๋˜๋Š” ๋ถ€๋ถ„ ์ถ•์•ฝํ•˜๊ธฐ (map) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2023. 5. 28.
[React] 4. ๋™์ ์ธ UI ์ œ์ž‘ํ•˜๊ธฐ ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) ์ „ ํฌ์ŠคํŒ…์—์„œ ๋‹ค๋ฃจ์—ˆ๋˜ ์ปดํฌ๋„ŒํŠธ์˜ ์˜ˆ์‹œ๋กœ ๋ชจ๋‹ฌ(Modal)์ฐฝ์„ ์ œ์ž‘ํ•˜.. 2023. 5. 28.
[React] 3. ์ปดํฌ๋„ŒํŠธ (Component) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 1. Component ๋ฌธ๋ฒ• html์„ ์ž‘์„ฑํ•˜๋‹ค๋ณด๋ฉด ๋ฐ˜๋ณต์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ๋ธ”๋ก ๋‹จ์œ„๋กœ ์ œ์ž‘ํ•˜๊ณ  ์‹ถ์€ ๋ถ€๋ถ„์ด ์žˆ๋‹ค. React์—์„œ๋Š” ๊ธด HTML ๋ธ”๋ก์„ ํ•˜๋‚˜์˜ ๋‹จ์–ด๋กœ ์น˜ํ™˜ํ•˜๋„๋ก ํ•˜๋Š” ๋ฌธ๋ฒ•์„.. 2023. 5. 28.