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

๐ŸŒŒ | WEB DEV/React - Experience3

[React] TypeError: destroy is not a function ์›์ธ๊ณผ ํ•ด๊ฒฐ๋ฒ• ์›์ธ์šฐ์„  ํ•ด๋‹น ์—๋Ÿฌ๋Š” useEffect์™€ ๊ด€๋ จ์ด ์žˆ๋‹ค. ์ž์„ธํ•˜๊ฒŒ ์›์ธ์„ ํŒŒ์•…ํ•˜๊ธฐ ์ „์—์•„๋งˆ ์ด ๊ธ€์„ ๋ณด๊ฒŒ๋œ ๋ถ„๋“ค์ด ํ•œ ์‹ค์ˆ˜๋Š” ์•„๋ž˜์˜ 2๊ฐ€์ง€์ผ ํ™•๋ฅ ์ด ๋†’๋‹ค!1. useEffect์—์„œ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ๊ฒƒ์„ ๋ฐ˜ํ™˜2. useEffect(async()=>{},[]) 2๊ฐ€์ง€ ์‹ค์ˆ˜๋Š” ๋ชจ๋‘ useEffect์˜ ์ž˜๋ชป๋œ ์‚ฌ์šฉ์ด๋‹ค. ํ•ด๊ฒฐ๋ฒ•๊ณผ ์ž์„ธํ•œ ์ด์œ - useEffect์—์„œ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ๊ฒƒ์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒฝ์šฐ beforeuseEffect(() => myFunction());useEffect(() => { return myFunction() }); afteruseEffect(() => { myFunction() }); ์ด์œ useEffect(() => { ์ดํŽ™ํŠธ ํ•จ์ˆ˜ return { ํด๋ฆฐ์—… ํ•จ์ˆ˜ };}, [์˜.. 2024. 12. 16.
[React/JS] setTimeout, setInterval ์€ ์ „ํ˜€ "์‹œ๊ณ„" ํ•˜์ง€ ์•Š์•„ (setTimeout, setInterval ์˜ค๋ฅ˜) ํ”„๋กœ์ ํŠธ์— ์‚ฝ์ž…ํ•  ์Šคํ†ฑ์›Œ์น˜ ๋งŒ๋“ค์–ด ๋†“์•˜๋‹ค.6์ดˆ๋ฅผ ์„ธ์–ด๋ณด๋Š”๋ฐ ์ด์ƒํ•˜๊ฒŒ ์ฒด๊ฐ ์ƒ 8์ดˆ๋Š” ๋˜๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค.์•„ ์ด๊ฑฐ ์ด์ƒํ•œ๋ฐ?? 1. setInetval์„ ํ™œ์šฉํ•œ ํƒ€์ด๋จธ1) ์ž‘์„ฑ ์ฝ”๋“œ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋Š” setInterval์„ ์ด์šฉํ•˜์—ฌ ์ฃผ๊ธฐ์ ์œผ๋กœ ์‹œ๊ฐ„state๋ฅผ ์ฆ๊ฐ€์‹œํ‚ค๋Š” ๋ฐฉ์‹์ด๋‹ค.const [run, setRun] = useState(); //์Šคํ†ฑ์›Œ์น˜start์ƒํƒœconst [time, setTime] = useState(0); //์‹œ๊ฐ„stateconst intervalRef = useRef();//์‹œ์ž‘์ƒํƒœ ๊ฐ์ง€useEffect(()=>{ if(props.start){ setRun(true); } else{ clearInterval(intervalRef.current) setRun(false.. 2024. 1. 6.
[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_poli.. 2023. 6. 30.