728x90
๋ฐ˜์‘ํ˜•

Front-End/์—๋Ÿฌ์‚ฌํ•ญ 5

ESLint: Expected an assignment or function call and instead saw an expression

์—๋Ÿฌ ๋ฐœ์ƒ ์ฝ”๋“œ type ? (ref.current.style.marginTop = '0vh') : (ref.current.style.marginTop = '4vh'); type ๋”ฐ๋ผ์„œ marginTop์„ ์ปจํŠธ๋กคํ•˜๊ฒŒ ํ–ˆ๋Š”๋ฐ, ESLint: Expected an assignment or function call and instead saw an expression ํ•ด๋‹น ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํ•ด๊ฒฐ ์ฝ”๋“œ if (type) ref.current.style.marginTop = '0vh'; else ref.current.style.marginTop = '4vh'; ์‚ผํ•ญ์—ฐ์‚ฐ์ž๊ฐ€ ์•„๋‹Œ if๋ฌธ์œผ๋กœ ํ•ด๊ฒฐํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์›๋ž˜ ์œ„์— if๋ฌธ์œผ๋กœ ์กฐ๊ฑด์ด ์ถ”๊ฐ€๋กœ ์žˆ์—ˆ๋Š”๋ฐ, ์•„๋งˆ ๊ทธ๊ฑฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•œ ์—๋Ÿฌ์ด์ง€ ์•Š์„๊นŒ ์‹ถ์Šต๋‹ˆ๋‹ค.

ESLint: Expected to return a value at the end of arrow function.(consistent-return)

ESLint์— ์˜ํ•ด ๋ฐœ์ƒํ•œ ์—๋Ÿฌ์ž…๋‹ˆ๋‹ค. ๋ฌธ์ œ useEffect(() => { if (!response) { return setLoading(false); } api(); ... } useEffect ํ›…์—์„œ return setState๋ฅผ ์คฌ๋”๋‹ˆ ํ•จ์ˆ˜ ์ž์ฒด์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ณต์‹ ๋ฌธ์„œ ์ฐพ์•„๋ณด๋‹ˆ, ํ•ด๋‹น ๋ฌธ์ œ์˜ ๋ฐœ์ƒ์›์ธ์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค return ๋ฌธ์€ ์ข…๋ฃŒํ•˜๊ธฐ ์ „์— ์‹คํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. (it does not execute a return statement before it exits) ๊ฐ’์„ ๋ช…์‹œ์ ์œผ๋กœ ์ง€์ •ํ•˜์ง€ ์•Š์€ return๋ฌธ์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. (it executes return which does not specify a value explicitly) ์ •์˜๋˜์ง€ ์•Š์€ return์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. (it ..

TS2367: This comparison appears to be unintentional because the types '"A"' and '"B"' have no overlap.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋ฐœ์ƒํ•œ ์—๋Ÿฌ์ž…๋‹ˆ๋‹ค. ๋ฌธ์ œ {(response === 'A' && response !== 'B' ? !show : loading) && ( Thinking )} &&์—ฐ์‚ฌ์ž๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋‘ ๊ฐœ์˜ ์กฐ๊ฑด์„ ๊ฑธ์—ˆ๋Š”๋ฐ ์ œ๋ชฉ๊ณผ ๊ฐ™์€ ํƒ€์ž…์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๊ฒฐ๋ฐฉ์•ˆ {(response !== 'B' && response === 'A' ? !show : loading) && ( Thinking )} ๋‹จ์ˆœํžˆ ์ˆœ์„œ์˜ ์ฐจ์ด๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์›น์Šคํ†ฐ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ๊ฑฐ๊ธฐ์„œ ๋‚˜์˜ค๋Š” ํ•ด๊ฒฐ๋ฐฉ์•ˆ์œผ๋กœ ์œ„์™€ ๊ฐ™์ด ์ˆœ์„œ๋ฅผ ๋ฐ”๊พธ๋‹ˆ๊น ์—๋Ÿฌ๊ฐ€ ์‚ฌ๋ผ์กŒ์Šต๋‹ˆ๋‹ค. (vscode๋„ ๋˜‘๊ฐ™์„ ๊บผ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.) TypeScript์—๋Ÿฌ๋ผ ์‚ฌ์‹ค ๋™์ž‘ํ•˜๋Š” ๋ฐ๋Š” ์ƒ๊ด€์—†์ง€๋งŒ, build ํ•  ๋•Œ ์—๋Ÿฌ๋„ ๋‚  ํ…Œ๊ณ , TS์‚ฌ์šฉํ•˜๋Š”๋ฐ ๊ทœ์น™์„ ์ง€ํ‚ค..

ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label)

ํ•ด๋‹น ์—๋Ÿฌ๋Š” ESLint ์„ค์ •์œผ๋กœ ์ธํ•ด ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ์ž…๋‹ˆ๋‹ค. (์ €๋Š” Ariabnb๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.) ์—๋Ÿฌ๊ฐ€ ๋ฐœ๊ฒฌํ•œ ๊ณณ์€ button ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. ๋ฌธ์ œ ๋ฒ„ํŠผํƒœ๊ทธ ์•ˆ์—๋Š” ๋‚ด์šฉ์ด ์—†๊ณ , className์— ์žˆ๋Š” ์ด๋ฏธ์ง€๋กœ ๋ฒ„ํŠผ์„ ๋Œ€์ฒดํ•˜๋„๋ก ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋  ๊ฒฝ์šฐ, ๋ฒ„ํŠผ์— ๋Œ€ํ•œ ์„ค๋ช…? ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ํ•ด๊ฒฐ ๋ฐฉ์•ˆ aria-label ์†์„ฑ์„ ์ถ”๊ฐ€ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์–ด๋–ค ๋ฒ„ํŠผ์ธ์ง€ ๋„ฃ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์•„๋‹ˆ๋ฉด ์•„๋ž˜ ๊นƒํ—ˆ๋ธŒ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ eslint์„ค์ •์— ignoreElements๋ฅผ ์ถ”๊ฐ€ํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label..

Error] formํƒœ๊ทธ submit ์‹œ, ํŽ˜์ด์ง€ ์ด๋™ ๋ง‰๊ธฐ

React์—์„œ formํƒœ๊ทธ ์ž‘์„ฑ ํ›„, button type์„ submit์„ ์ฃผ๊ณ  ์‹คํ–‰ํ–ˆ๋Š”๋ฐ ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ๋กœ์ง๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š๊ณ , formํƒœ๊ทธ ์•ˆ์— inputํƒœ๊ทธ๋“ค์˜ ๊ฐ’๋“ค์€ ์ดˆ๊ธฐํ™”๋˜๊ณ , ํŽ˜์ด์ง€๋Š” ๊ทธ๋Œ€๋กœ ์žˆ๋Š” ํ˜„์ƒ์„ ๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค. ์›์ธ formํƒœ๊ทธ์—์„œ submit์ด ์ž‘๋™ํ•˜๋ฉด, action์†์„ฑ์— ์ง€์ •๋œ url๋กœ request ํ•˜์—ฌ ํ•ด๋‹น ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ์ด ๊ธฐ๋ณธ ๋™์ž‘์ž…๋‹ˆ๋‹ค. React ๊ฐœ๋ฐœ์ž(SPA)๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ ๋˜๋Š” ํ˜„์ƒ์„ ์ตœ์†Œํ™”ํ•˜๊ธฐ ์œ„ํ•ด ์ง์ ‘ ์ž‘์„ฑํ•œ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ๋กœ์ง์ด ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์„ ์›ํ•  ๊ฒ๋‹ˆ๋‹ค. ํ•ด๊ฒฐ๋ฐฉ๋ฒ• ์œ„์—์„œ ์„ค๋ช…ํ•œ submit๊ธฐ๋ณธ๋™์ž‘์€ ํ•„์š” ์—†์Œ์œผ๋กœ event.preventDefault()๋ฅผ ์ค˜์„œ request๋ฅผ ๋ง‰์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ submit ๋™์ž‘์„ ๋ง‰์•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ตฌํ˜„ํ•œ ๋Œ€๋กœ ๋™..

728x90
๋ฐ˜์‘ํ˜•