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

๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ206

๊ตฌ๊ธ€ ์Šคํ”„๋ ˆ๋“œ์‹œํŠธ ์ค‘๋ณต๊ฐ’ ์ฐพ๊ธฐ, ์ œ๊ฑฐ, ํ™•์ธํ•˜๊ธฐ Remove Duplicates ๋ถ€๊ฐ€๊ธฐ๋Šฅ ์ €๋ฒˆ ์‹œ๊ฐ„์—๋Š” ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ ์—‘์…€์—์„œ ์ค‘๋ณต ๊ฐ’ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ดค์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ €๋Š” ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ ์—‘์…€๋„ ์ž์ฃผ ์“ฐ์ง€๋งŒ, ๋…ธํŠธ๋ถ์œผ๋กœ ์ž‘์—…ํ•  ๋•Œ๋Š” ํด๋ผ์šฐ๋“œ ์ž‘์—…์ด ๋” ์šฉ์ดํ•œ ๊ตฌ๊ธ€ ๋“œ๋ผ์ด๋ธŒ์˜ ์Šคํ”„๋ ˆ๋“œ ์‹œํŠธ๋ฅผ ์ž์ฃผ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค. ์–ธ์ œ ์–ด๋””์„œ๋‚˜ ๊บผ๋‚ด ์“ธ ์ˆ˜ ์žˆ๊ณ , ๋ฌด์—‡๋ณด๋‹ค ๋ฌด๋ฃŒ๋ผ ๋งˆ์Œ ๋†“๊ณ  ์“ธ ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋Œ€์‹  ์—‘์…€์—์„œ๋Š” ์†์‰ฝ๊ฒŒ ๋˜๋Š” ๊ธฐ๋Šฅ์ด ์—†๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ข…์ข… ์žˆ์–ด์„œ ๋ถˆํŽธํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์ค‘๋ณต ๊ฐ’ ์ œ๊ฑฐ ๊ฐ™์€ ๊ธฐ๋Šฅ์€ ๊ธฐ๋ณธ ์ œ๊ณต์ด ์•ˆ๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ถ€๊ฐ€๊ธฐ๋Šฅ์œผ๋กœ addon์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ตฌ๊ธ€ ์Šคํ”„๋ ˆ๋“œ์‹œํŠธ ๋ถ€๊ฐ€๊ธฐ๋Šฅ ๋ฉ”๋‰ด๋ฅผ ์—ด๋ฉด ๋ถ€๊ฐ€๊ธฐ๋Šฅ ์—ด๊ธฐ ํ•ญ๋ชฉ์ด ๋ณด์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์ด๋ฏธ Remove Duplicates ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์„œ ๋ณด์ด์ง€๋งŒ, ์„ค์น˜ ์•ˆ๋œ ๋ถ„๋“ค์€ ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Remove Duplicat.. 2021. 3. 24.
ReactJS input, select disabled ์ œ์–ด. Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? ReactJS Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? ReactJS input, select disabled ์ œ์–ด. index.js:1 Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? at input at td at tr at tbody at t.. 2021. 3. 23.
๋ฆฌ์•กํŠธ Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>. ๋ฆฌ์•กํŠธ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์ค‘์— select๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ jquery๋ฅผ ์“ฐ๋˜ ์Šต์„ฑ๋Œ€๋กœ ์ฝ”๋”ฉ์„ ํ•˜๋‹ค ๋ณด๋ฉด ๋ฐ˜๋“œ์‹œ ๋งŒ๋‚˜๊ฒŒ ๋˜๋Š” ํ”ํ•œ ์˜ค๋ฅ˜ ์ค‘์˜ ํ•˜๋‚˜๊ฐ€ ๋ฐ”๋กœ selected๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋ง๋ผ๋Š” ๊ฒฝ๊ณ ๋‹ค. Warning: Use the `defaultValue` or `value` props on instead of setting `selected` on . 'selected'๋Œ€์‹ ์— select์— defaultValue ๋˜๋Š” value props๋ฅผ ์‚ฌ์šฉํ•˜๋ผ๋Š” ๋œป์ด๋‹ค. ์ž˜๋ชป ์“ด ๋ฆฌ์•กํŠธ ์…€๋ ‰ํŠธ ์‚ฌ์šฉ๋ฒ• ์„ ํƒ์•ˆํ•จ ๊ฐ€๋งน ํ•ด์ง€ ; ์•„๋ž˜์™€ ๊ฐ™์ด ์“ฐ๋ฉด ๊ฐ„๋‹จํ•˜๋‹ค. ์„ ํƒ์•ˆํ•จ ๊ฐ€๋งน ํ•ด์ง€ ref props๋Š” ํ•„์š”์— ๋”ฐ๋ผ ์‚ฌ์šฉ๋œ ๊ฒƒ์ด๋‹ˆ ์‹ ๊ฒฝ์“ฐ์ง€ ์•Š์•„๋„ ๋ฌด๋ฐฉํ•˜๋‹ค. ๋งŒ์•ฝ select์—์„œ ๋ฉ€ํ‹ฐํ”Œ ์…€๋ ‰ํŠธ๋กœ ์„ ํƒํ•  ๊ฒฝ์šฐ์—๋Š” value๋ฅผ ๋ฐฐ์—ด๋กœ ์ฃผ๋ฉด .. 2021. 2. 27.
์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฆฌ์•กํŠธ ๋ฉ€ํ‹ฐ ๋ ˆ์ด์•„์›ƒ connected-react-router multi layout ์ ์šฉํ•˜๊ธฐ ๋ฆฌ์•กํŠธ๋ฅผ ๋ณ„๋กœ ์ข‹์•„ํ•˜์ง€ ์•Š๋Š” 1์ธ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์–ด์ฉ” ์ˆ˜ ์—†์ด ๋ฆฌ์•กํŠธ ํ”Œ์ ์„ ํ•ด์•ผ ํ•ด์„œ ํผ๋ธ”๋ฆฌ์…” ๊ฒธ ํ”„๋ŸฐํŠธ ์—”๋“œ๋กœ ์ฐธ์—ฌ ์ค‘์ด๋‹ค. jquery๋ผ๋ฉด ๋‹จ๋ฐ•์— ๋๋‚ผ ๋ฌธ์ œ์— ๊ณ ๋ฏผํ•˜์ง€ ์•Š์•„๋„ ๋  ๋ฌธ์ œ๋“ค์ด ๋ฆฌ์•กํŠธ์—๋Š” ๋„˜์ณ๋‚œ๋‹ค. ์™œ ์“ฐ๋Š”์ง€๋Š” ์—ฌ์ „ํžˆ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ๊นŒ๋ผ๋‹ˆ๊นŒ ๊น๋‹ค. ์ผ๋‹จ SPA ์‚ฌ์ดํŠธ์—์„œ ๋ฆฌ์•กํŠธ๊ฐ€ ํŽธํ•œ ๊ฒƒ์€ ๋Œ€์ถฉ ์ง์ž‘์€ ๋œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ SPA์‚ฌ์ดํŠธ๋ผ๊ณ ๋Š” ํ•ด๋„, ํ•œ ์‚ฌ์ดํŠธ์— ์„œ๋กœ ๋‹ค๋ฅธ ๋ ˆ์ด์•„์›ƒ์ด ์—ฌ๋Ÿฟ ์‚ฌ์šฉํ•ด์•ผ ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค. ๋‹จ์ ์œผ๋กœ GNB, LNB๊ฐ€ ์—†๋Š” IntroํŽ˜์ด์ง€, LoginํŽ˜์ด์ง€ ๊ทธ๋ฆฌ๊ณ  ์‚ฌ์šฉ์ž ํ™”๋ฉด๊ณผ ๋‹ค๋ฅธ ๊ด€๋ฆฌ์ž ํ™”๋ฉด์˜ ๋ ˆ์ด์•„์›ƒ์€ ์„œ๋กœ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋‹ค. ์•„๋‹ˆ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋Š” ์ •๋„๊ฐ€ ์•„๋‹ˆ๋ผ ๋Œ€์ฒด๋กœ ๋‹ค๋ฅด๋‹ค. ๊ทธ๋Ÿด ๋•Œ ๋ฆฌ์•กํŠธ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ ˆ์ด์•„์›ƒ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๊ฝค ๋‹ค์–‘ํ•˜์ง€๋งŒ ์ง๊ด€์ ์ด๊ณ  ์‰ฌ์šด ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๊ฒ ๋‹ค... 2021. 2. 10.
โœˆ CSS3 text-shadow ํ…์ŠคํŠธ ์‰๋„์šฐ ๋ฐฐ๊ฒฝ BG์—๋„ ์ž˜ ๋ณด์ด๋Š” ๊ธ€์ž ๊ตญ์–ด์ฒญ ์ธ์‚ฌ๋ง ํผ๋ธ”๋ฆฌ์‹ฑ ์ž‘์—… ์ค‘์ธ๋ฐ... 2016. 9. 8. 17:35 ๋””์ž์ด๋„ˆ๊ฐ€ ์›์ƒ‰ ์ฐฌ์—ฐํ•œ BG๋ฅผ ๊น”์•˜๋‹ค. PC ํ™”๋ฉด์—์„œ๋ผ๋ฉด ๋ฌธ์ œ๊ฐ€ ์—†์ง€๋งŒ... ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋ชจ๋ฐ”์ผ ํ™”๋ฉด์ด ๋˜๋ฉด, ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์ด๋ฏธ์ง€์™€ ํ…์ŠคํŠธ๊ฐ€ ๊ฒน์น˜๊ฒŒ ๋˜๋Š”๋ฐ... ๊ธ€์”จ๊ฐ€ ๋ฐฐ๊ฒฝ ๋•Œ๋ฌธ์— ์ž˜ ์•ˆ๋ณด์ผ ์ˆ˜๊ฐ€ ์žˆ๋‹ค. ์ด๋Ÿด ๋•Œ ์„ ํƒ์€ 3๊ฐ€์ง€๋‹ค. 1. ๋ชจ๋ฐ”์ผ ์ƒํƒœ์—์„œ BG๋ฅผ ๋‚ ๋ ค๋ฒ„๋ฆฐ๋‹ค. (ํ™”๋ฉด์ด ๊ต‰์žฅํžˆ ์‹ฌ์‹ฌํ•ด์ง„๋‹ค.) 2. ํ…์ŠคํŠธ์™€ BG๋ ˆ์ด์–ด๋ฅผ absolute๋กœ ๋„์›Œ์„œ ๋ชจ๋ฐ”์ผ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์ผ ๋•Œ๋Š” BG๋ ˆ์ด์–ด์—๋งŒ opacity๋ฅผ ๋จน์ธ๋‹ค. (๋ฐฐ๊ฒฝ ํ๋ ค์ง ํšจ๊ณผ) 3. BG์—๋„ ์ž˜ ๋ณด์ด๋Š” ๊ธ€์ž๊ฐ€ ๋˜๊ฒŒ๋” ํ…์ŠคํŠธ์— ์ŠคํŠธ๋กœํฌ๋ฅผ ์”Œ์šด๋‹ค. CSS์— ์ŠคํŠธ๋กœํฌ๊ฐ€ ์—†์œผ๋‹ˆ text-shadow๋ฅผ ์‘์šฉํ•œ๋‹ค. ํ…์ŠคํŠธ์˜ css์†์„ฑ์œผ๋กœ text-shadow:#fff 0 0 2px 2p.. 2021. 1. 29.
React Js - Global CSS ์„ค์ • + styled reset. classNames/bind :global local css ๋™์‹œ ์ ์šฉ react module.css :global local css ๋™์‹œ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•. classNames/bind๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์„ ๋•Œ className={cx("label","labelTst")} .labelTst๋Š” app.module.css์— ๋“ฑ๋ก. React Js - Global CSS ์„ค์ • + styled reset css ์ดˆ๊ธฐํ™”๋ฅผ ์œ„ํ•ด styled-reset ์„ค์น˜ styled-components๋Š” local๋กœ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— global ํ•œ css๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด GlobalStyles.js ์ƒ์„ฑ ์„ค์น˜ NPM์„ค์น˜ : npm install styled-reset styled-components ์–€ ์‚ด์น˜: yarn add styled-reset styled-components ์‚ฌ์šฉ Components/G.. 2021. 1. 14.