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

Lect & Tip101

์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด JS ์†Œ์ˆ˜ ์ฐพ๊ธฐ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋งŒ๋“ค๊ธฐ ์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด: ์ˆ˜ํ•™๊ณผ ์ปดํ“จํ„ฐ ๊ณผํ•™์—์„œ์˜ ์ค‘์š”์„ฑ ์ˆ˜ํ•™๊ณผ ๊ณ ๋Œ€ ์—ญ์‚ฌ์—์„œ์˜ ์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด ์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด๋Š” ๊ณ ๋Œ€ ๊ทธ๋ฆฌ์Šค ์ˆ˜ํ•™์ž ์—๋ผํ† ์Šคํ…Œ๋„ค์Šค๊ฐ€ ๋ฐœ๊ฒฌํ•œ ์†Œ์ˆ˜๋ฅผ ์ฐพ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ, ๊ฐ„๋‹จํ•˜๋ฉด์„œ๋„ ํšจ์œจ์ ์ธ ์•Œ๊ณ ๋ฆฌ์ฆ˜์œผ๋กœ ์•Œ๋ ค์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์€ ์ •ํ•ด์ง„ ๋ฒ”์œ„ ์•ˆ์˜ ๋ชจ๋“  ์†Œ์ˆ˜๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด, 2๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๊ทธ ๋ฐฐ์ˆ˜๋ฅผ ์ง€์›Œ๋‚˜๊ฐ€๋Š” ๊ณผ์ •์„ ๋ฐ˜๋ณตํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, 2์˜ ๋ฐฐ์ˆ˜๋ฅผ ๋ชจ๋‘ ์ง€์šฐ๊ณ , ๋‹ค์Œ์œผ๋กœ ๋‚จ์€ ๊ฐ€์žฅ ์ž‘์€ ์ˆ˜์ธ 3์˜ ๋ฐฐ์ˆ˜๋ฅผ ์ง€์›๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ณผ์ •์„ ๋ฐ˜๋ณตํ•˜๋ฉด ๊ฒฐ๊ตญ ๋‚จ๋Š” ์ˆ˜๋“ค์ด ๋ฐ”๋กœ ์†Œ์ˆ˜๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ์ด ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ ๋‹จ์ˆœํ•จ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋งค์šฐ ์ค‘์š”ํ•œ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์†Œ์ˆ˜๋Š” ์ˆ˜ํ•™์˜ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์•”ํ˜ธํ•™์—์„œ๋„ ๋งค์šฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ํšจ์œจ์ ์œผ๋กœ ์†Œ์ˆ˜๋ฅผ ์ฐพ๋Š” ๋ฐฉ๋ฒ•์€ ๊ณ ๋Œ€๋ถ€ํ„ฐ ํ˜„๋Œ€์— ์ด๋ฅด.. 2023. 11. 10.
css,html ์ด์˜๊ฒŒ ์ •๋ฆฌ ์‚ฌ์ดํŠธ c style,json,js javascript beautifier Tabifier css, html ์ด์˜๊ฒŒ ์ •๋ฆฌ ์‚ฌ์ดํŠธ c style, json, js javascript beautifier Tabifier ์›น์‚ฌ์ดํŠธ ์†Œ๊ฐœ ์›น ๊ฐœ๋ฐœ ๋ฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ž‘์—…์—์„œ ๊ฐ€๋…์„ฑ ์ข‹๊ณ  ์ฒด๊ณ„์ ์œผ๋กœ ์ •๋ฆฌ๋œ ์ฝ”๋“œ๋Š” ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์€ ๊ฐœ๋ฐœ์ž์˜ ๊ธฐ๋ณธ ์†Œ์–‘ ์ค‘ ํ•˜๋‚˜์ด๋ฉฐ, ์ด๋ฅผ ๋•๋Š” ๋‹ค์–‘ํ•œ ์˜จ๋ผ์ธ ๋„๊ตฌ๋“ค์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” HTML, CSS, JavaScript, C์–ธ์–ด ์Šคํƒ€์ผ, JSON, SQL ๋“ฑ ๋‹ค์–‘ํ•œ ์–ธ์–ด์˜ ์ฝ”๋“œ๋ฅผ ์•„๋ฆ„๋‹ต๊ฒŒ ์ •๋ฆฌํ•ด ์ฃผ๋Š” ์œ ์šฉํ•œ ์›น์‚ฌ์ดํŠธ๋“ค์„ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋‹ˆ ๊ทผ๋ฐ, vscode๋“ , ์ดํด๋ฆฝ์Šค๋“  IDE์‚ฌ์šฉํ•˜๋ฉด ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๋ทฐํ‹ฐํŒŒ์ด์–ด ์ง€์›ํ•˜๋Š”๋ฐ ์ด๋Ÿฐ ์‚ฌ์ดํŠธ ์™œ ํ•„์š”ํ•จ? ์ด๋ผ๊ณ  ๋ฌด์„ ์‹ ๋‹ค๋ฉด... ๋‚ด ์ปด์ด ์•„๋‹Œ ๋ฐ์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฉ”๋ชจ์žฅ์—์„œ ์ฝ”๋“œ ์งœ์„œ ๋ง‰ FBIํ•ดํ‚นํ•˜.. 2023. 11. 8.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ”์ธ๋”ฉ: ํ™œ์šฉ๊ณผ ์ฃผ์˜์  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ”์ธ๋”ฉ: ํ™œ์šฉ๊ณผ ์ฃผ์˜์  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ”์ธ๋”ฉ(binding)์ด๋ž€, ํŠน์ • ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋‚˜ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉ๋˜๋Š” this์˜ ๊ฐ’์„ ๊ณ ์ •ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” this๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฐ์ฒด๊ฐ€ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŠน์„ฑ ๋•Œ๋ฌธ์— ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. this์˜ ๋™์ ์ธ ํŠน์„ฑ์€ ์œ ์šฉํ•  ๋•Œ๋„ ์žˆ์ง€๋งŒ, ์˜ˆ๊ธฐ์น˜ ์•Š์€ ๋ฌธ์ œ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ธฐ์— ๋ฐ”์ธ๋”ฉ์„ ํ†ตํ•ด ์•ˆ์ •์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ”์ธ๋”ฉ์˜ ํ•„์š”์„ฑ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ๋˜๋Š” ๋ฐฉ์‹์— ๋”ฐ๋ผ this ๊ฐ’์ด ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฉ”์„œ๋“œ๋กœ ํ˜ธ์ถœ๋  ๋•Œ๋Š” this๊ฐ€ ๊ทธ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค์ง€๋งŒ, ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœ๋  ๋•Œ๋Š” this๊ฐ€ ์ „์—ญ ๊ฐ์ฒด(๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” window, Node.js์—์„œ๋Š” global)๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ฑฐ๋‚˜ un.. 2023. 11. 7.
๋ฆฌ์•กํŠธ ํด๋” ๊ตฌ์กฐ React JS Folder Structure RJSFS ๋ฆฌ์•กํŠธ ํด๋” ๊ตฌ์กฐ React JS Folder Structure RJSFS ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์—, ์ฒด๊ณ„์ ์ด๊ณ  ํšจ์œจ์ ์ธ ํด๋” ๊ตฌ์กฐ๋ฅผ ์„ธ์šฐ๋Š” ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐœ๋ฐœ์˜ ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๊ณ , ํŒ€์› ๊ฐ„์˜ ํ˜‘์—…์„ ์šฉ์ดํ•˜๊ฒŒ ํ•˜๋ฉฐ, ํ”„๋กœ์ ํŠธ์˜ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐ ๋„์›€์„ ์ค๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํ•œ ํด๋” ๊ตฌ์กฐ์— ๋Œ€ํ•œ ๊ถŒ์žฅ ์‚ฌํ•ญ๊ณผ ํŒ์„ ์ œ๊ณตํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ์— ๋”ฐ๋ฅธ ๊ตฌ์กฐํ™” ์†Œ๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ ์†Œ๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ, ๋ณต์žกํ•œ ํด๋” ๊ตฌ์กฐ๋ณด๋‹ค๋Š” ๊ฐ„๋‹จํ•˜๊ณ  ๋ช…ํ™•ํ•œ ๊ตฌ์กฐ๊ฐ€ ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์ปดํฌ๋„ŒํŠธ์™€ ๊ด€๋ จ ํŒŒ์ผ๋“ค์„ ๊ธฐ๋Šฅ๋ณ„๋กœ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. src components Header Header.js Header.css Footer Footer.js Footer.css p.. 2023. 10. 27.
๋ถ€ํŠธ์ŠคํŠธ๋žฉ width grid incorrect ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ํ™œ์šฉํ•œ ์›น ๋””์ž์ธ์—์„œ ๊ฐ€๋กœ ํญ ์กฐ์ ˆ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋•Œ๋•Œ๋กœ, ํŠนํžˆ ์ƒˆ๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ถ„๋“ค์—๊ฒŒ๋Š” ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์ด๋‚˜ ์ปจํ…Œ์ด๋„ˆ ์‚ฌ์šฉ์— ์žˆ์–ด ํ˜ผ๋ž€์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ฐ€๋กœ ํญ(width) ๊ด€๋ จ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ ์ดํ•ด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์€ ์ปจํ…Œ์ด๋„ˆ, ํ–‰(row), ๊ทธ๋ฆฌ๊ณ  ์—ด(column) ์„ธ ๊ฐ€์ง€ ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋“ค์€ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์„œ๋กœ ํ•จ๊ป˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ, .row ํด๋ž˜์Šค๋Š” ๊ฐ€๋กœ ๋ฐฉํ–ฅ์˜ ์—ฌ๋ฐฑ์„ ๋งŒ๋“ค์–ด๋‚ด๋Š”๋ฐ, ์ด๋Š” ์—ด๋“ค์ด ์ ์ ˆํ•œ ๊ฐ„๊ฒฉ์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ์—ฌ๋ฐฑ์€ .row๊ฐ€ ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฒฝ๊ณ„๋ฅผ ๋ฒ—์–ด๋‚˜.. 2023. 10. 22.
CSS ํ…์ŠคํŠธ ๋„ค์˜จ์‚ฌ์ธ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• CSS ํ…์ŠคํŠธ ๋„ค์˜จ์‚ฌ์ธ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• ๋„ค์˜จ ํ…์ŠคํŠธ๋Š” ์›น ์‚ฌ์ดํŠธ์— ๋ฉ‹์ง„ ๋ฏธ๋ž˜์ ์ธ ๋Š๋‚Œ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. CSS์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํ™œ์šฉํ•˜๋ฉด ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ํ…์ŠคํŠธ์— ๋น›๋‚˜๋Š” ํšจ๊ณผ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํฌ์ŠคํŒ…์—์„œ๋Š” CSS ํ…์ŠคํŠธ ๋„ค์˜จ์‚ฌ์ธ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ํ…์ŠคํŠธ์— ๊ธ€๋กœ์šฐ ํšจ๊ณผ ์ถ”๊ฐ€ ๋จผ์ € ํ…์ŠคํŠธ์— ๊ธ€๋กœ์šฐ(๋น›๋‚˜๋Š”) ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” CSS์˜ text-shadow ์†์„ฑ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด CSS๋ฅผ ์ž‘์„ฑํ•˜์—ฌ ๊ธ€๋กœ์šฐ ํšจ๊ณผ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. .neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px.. 2023. 10. 7.