๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
[D+43] JS ์˜ˆ์™ธ์ฒ˜๋ฆฌ, ์ƒ์„ฑ์ž, ๊ฐ์ฒด์˜ ์ƒ์„ฑ ๋ฐฉ๋ฒ• ๊ตญ๋น„์ง€์› D+43 - JS ์˜ˆ์™ธ์ฒ˜๋ฆฌ, ์ƒ์„ฑ์ž, ๊ฐ์ฒด์˜ ์ƒ์„ฑ ๋ฐฉ๋ฒ• - JS ์˜ˆ์™ธ์ฒ˜๋ฆฌ ์˜ˆ์™ธ๋ผ๋Š” ๊ฒƒ์€ ๋ฌธ๋ฒ•์ ์œผ๋กœ ์ด์ƒ์€ ์—†์ง€๋งŒ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ๋˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. Java์™€๋Š” ๋‹ฌ๋ฆฌ JavaScript๋Š” ์›ฌ๋งŒํ•˜๋ฉด ๊ฒฐ๊ณผ๊ฐ’์„ ๋‚ด๋ณด๋‚ด๋ ค๋Š” ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ์˜ˆ์™ธ์ฒ˜๋ฆฌ์—๋Š” ์ธ์ƒ‰ํ•œ ํŽธ์ด๊ธฐ๋•Œ๋ฌธ์— ์ด์ ์„ ์ฃผ์˜ํ•ด์„œ ์˜ˆ์™ธ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค. • ์กฐ๊ฑด๋ฌธ์„ ์‚ฌ์šฉํ•ด ์˜ˆ์™ธ์ฒ˜๋ฆฌํ•˜๊ธฐ let h1Elem = document.querySelector('h1'); if(h1Elem === null) { // ๋ฐฉ๋ฒ•1) ์‚ฌ์šฉ์ž์—๊ฒŒ ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ์ฝ˜์†”๋กœ ๋„์›Œ์ค€๋‹ค. console.log('[์˜ˆ์™ธ๋ฐœ์ƒ] ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.'); // ๋ฐฉ๋ฒ•2) element๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด์ค€๋‹ค. h1Elem = document.createElement('.. 2022. 11. 21.
[D+42] ๋ฌธ์„œ๊ฐ์ฒด ์†์„ฑ, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ๊ตญ๋น„์ง€์› D+42 - ๋ฌธ์„œ๊ฐ์ฒด ์†์„ฑ, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ - ๋ฌธ์„œ๊ฐ์ฒด ์†์„ฑ • ์†์„ฑ์˜ ์กฐ์ž‘ - ๊ฐ์ฒด.setAttribute() : ์†์„ฑ์„ ์„ค์ • - ๊ฐ์ฒด.getAttribute() : ์†์„ฑ์„ ๊ตฌํ•จ • ๊ธ€์ž ์กฐ์ž‘ - ๊ฐ์ฒด.textContent : ์ž…๋ ฅ๋œ ๋ฌธ์ž์—ด์„ ํ•ด์„ ์—†์ด ๊ทธ๋Œ€๋กœ ์ž…๋ ฅ - ๊ฐ์ฒด.innerHTML : ์ž…๋ ฅ๋œ ๋ฌธ์ž์—ด์„ ํ•ด์„ ํ•˜์—ฌ HTMLํ˜•์‹์œผ๋กœ ์ž…๋ ฅ • ์Šคํƒ€์ผ์˜ ์กฐ์ž‘ - CSS์—์„œ ์Šคํƒ€์ผ ์‚ฌ์šฉ์‹œ '-'๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋‚˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์นด๋ฉœ์Šคํƒ€์ผ๋กœ ์Šคํƒ€์ผ์„ ์ฒ˜๋ฆฌํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. - h1.style['background-color'] ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•ด ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค. • ๋ฌธ์„œ ๊ฐ์ฒด์˜ ์ƒ์„ฑ ๋ฐ ์ถ”๊ฐ€ - ๋ฌธ์„œ๊ฐ์ฒด์˜ ์ƒ์„ฑ : document.createElement() - ๋ฌธ์„œ๊ฐ์ฒด์˜ ์ถ”๊ฐ€.. 2022. 11. 18.
[D+41] ์ด๋ฒคํŠธ์™€ ๋ฉ”์‹œ์ง€, sort์˜ ์›๋ฆฌ ๊ตญ๋น„์ง€์› D+41 - ์ด๋ฒคํŠธ์™€ ๋ฉ”์‹œ์ง€, sort์˜ ์›๋ฆฌ - ์ด๋ฒคํŠธ์™€ ๋ฉ”์‹œ์ง€ • ์ด๋ฒคํŠธ - ์ด๋ฒคํŠธ๋Š” ์ƒํƒœ๊ฐ€ ๋ฐ”๋€Œ๋Š” ์‚ฌ๊ฑด์„ ์˜๋ฏธํ•œ๋‹ค. - ์›น์€ ์ด๋ฒคํŠธ ๋ฉ์–ด๋ฆฌ์ธ๋ฐ ์šฐ๋ฆฌ๊ฐ€ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒ๋˜์—ˆ๋‹ค๊ณ  ์ˆœ๊ฐ„์— ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒƒ์€ ๊ทธ๋งŒํผ ์ปดํ“จํ„ฐ ์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. - ์ด๋ฒคํŠธ๋Š” ๋ฐœ์ƒํ• ๋•Œ๋งˆ๋‹ค ํ•ด๋‹น๋˜๋Š” ๋ฉ”์‹œ์ง€๊ฐ€ ํŠ€์–ด ๋‚˜์˜จ๋‹ค. ex) event : ๋งˆ์šฐ์Šค๋ฅผ ์›€์ง์ธ๋‹ค → message : ๋งˆ์šฐ์Šค๋ฅผ ์›€์ง์ด๋Š” ์œ„์น˜์— ๋Œ€ํ•œ ์ขŒํ‘œ๊ฐ’ • ๋ฉ”์‹œ์ง€ - ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด์„œ ๋‚˜์˜ค๋Š” ๊ฐ’์„ ๋ฉ”์‹œ์ง€๋ผ๊ณ  ํ•˜๋Š”๋ฐ ๋ฉ”์‹œ์ง€๊ฐ’์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์›น์ด ๋Œ์•„๊ฐ„๋‹ค. ์˜ˆ๋“ค๋“ค์–ด ์„ค๋ช…ํ•˜์ž๋ฉด, ๋งŒ์•ฝ A์‚ฌ์ดํŠธ์— ์žˆ๋Š” 3๋ฒˆ์งธ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๊ณ  ์‹ถ๋‹ค. ๊ทธ๋ž˜์„œ ๋งˆ์šฐ์Šค๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋งˆ์šฐ์Šค๋ฅผ ํด๋ฆญํ•œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๊ณ  ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒ๋˜๋Š” ๋™์‹œ์— ๋งˆ์šฐ์Šค ์ขŒํ‘œ๊ฐ’์— ๋Œ€ํ•œ ๋ฉ”์‹œ์ง€๊ฐ€ ๋‚˜.. 2022. 11. 17.
[D+40] ๋ฌธ์„œ-๊ฐ์ฒด ๋ชจ๋ธ DOM ๊ตญ๋น„์ง€์› D+40 - ๋ฌธ์„œ-๊ฐ์ฒด ๋ชจ๋ธ DOM - ์›น๋ธŒ๋ผ์šฐ์ €๋Š” ํฌ๊ฒŒ browsing-system๊ณผ ์ •๋ณด๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ง•์‹œ์Šคํ…œ์€ ํ•ญ์ƒ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž๊ฐ€ ํ˜ธ์ถœํ•˜๊ธฐ๋งŒ์„ ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ๋‹ค. ์ •๋ณด๋Š” HTML์—์„œ๋Š” Document๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š”๋ฐ ๋ฌธ์„œ-๊ฐ์ฒด๋ชจ๋ธ DOM์— ๋Œ€ํ•ด์„œ ์ข€ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ DOM • Object Model Object Model์€ 3๊ฐ€์ง€๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š”๋ฐ ๋ฐ”๋กœ DOM, BOM, JS์ด๋‹ค. DOM ์ž์„ธํžˆ ์•Œ๊ธฐ์ „์— ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ๋“ค์ด ์–ด๋– ํ•œ ๊ฐ์ž ์–ด๋–ค ์—ญํ• ์„ ํ•˜๊ณ ์žˆ๋Š”์ง€์™€ Objectํ˜•์‹์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ ์žˆ์–ด์•ผ ์ดํ•ดํ•˜๊ธฐ ํŽธํ•˜๋‹ค. • DOM ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” HTML ํŽ˜์ด์ง€์— ์žˆ๋Š” Element๋“ค์„ ํŠธ๋ฆฌํ˜•์‹์œผ๋กœ ๋ฉ”๋ชจ๋ฆฌ์— ๋กœ๋”ฉํ•œ๋‹ค. ์ด๋•Œ์˜ ๊ฐ ๋…ธ๋“œ๋“ค์„ d.. 2022. 11. 16.
[D+39] ์Šค์ฝ”ํ”„, ํด๋กœ์ €, JSON ๊ตญ๋น„์ง€์› D+39 - ์Šค์ฝ”ํ”„, ํด๋กœ์ €, JSON - ์Šค์ฝ”ํ”„ - ๋ณ€์ˆ˜๊ฐ€ ์œ ํšจ์„ฑ์„ ๊ฐ€์ง€๋Š” ๋ฒ”์œ„๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉฐ, ์ด๋•Œ์˜ ์œ ํšจ์„ฑ์€ ์ฝ๊ฑฐ๋‚˜ ์“ธ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. - ํ”„๋กœ์„ธ์Šค ๋ฉ”๋ชจ๋ฆฌ ๋งต์˜ ๊ตฌ์กฐ์— ์˜์กด์ ์ด๋‹ค. - ์„ ์–ธ๋œ ์œ„์น˜์— ๋”ฐ๋ผ์„œ ์Šค์ฝ”ํ”„๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค. - ๊ฐ™์€ ์ด๋ฆ„์„ ๊ฐ€์ง„ ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ ๋œ ๊ฒฝ์šฐ ์Šคํฌํฌ๊ฐ€ ๊ฒน์น  ์ˆ˜ ์žˆ๋‹ค. • ์Šค์ฝ”ํ”„์˜ ์ข…๋ฅ˜ ์Šค์ฝ”ํ”„์˜ ์ข…๋ฅ˜๋Š” ์ „์—ญ ์Šค์ฝ”ํ”„์™€ ์ง€์—ญ์Šค์ฝ”ํ”„๋กœ ๋‚˜๋‰˜๋Š”๋ฐ ์ „์—ญ์Šค์ฝ”ํ”„์—์„œ ์œ ํšจํ•œ ์˜์—ญ์€ ๋‚ด์˜ ์ „์ฒด์ด๋ฉฐ, ์ง€์—ญ์Šค์ฝ”ํ”„์—์„œ ์œ ํšจํ•œ ์˜์—ญ์€ ํ•จ์ˆ˜ ์ž์‹ ๊ณผ ๊ทธ ์•ˆ์— ์žˆ๋Š” ํ•˜์œ„ ์˜์—ญ์ด๋‹ค. ์ด๋•Œ ์šฐ๋ฆฌ๊ฐ€ ๊ธฐ์–ตํ•ด์•ผํ•  ๊ฒƒ์€ ์ „์—ญ ์Šค์ฝ”ํ”„์™€ ์ง€์—ญ ์Šค์ฝ”ํ”„๋Š” ๋‘˜์ด ๊ฒน์น ์ˆ˜ ๋ฐ–์— ์—†๋‹ค๋Š” ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ์Šค์ฝ”ํ”„๋Š” ๊ฐ€๊นŒ์šด ๊ฒƒ์ด ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ฐ€์ง„๋‹ค. var a = 'a'; // ์ „์—ญ ์Šค์ฝ”ํ”„ const func1 = .. 2022. 11. 16.
[D+38] ํ•จ์ˆ˜ ๊ณ ๊ธ‰, ๊ฐ์ฒด ๊ตญ๋น„์ง€์› D+38 - ํ•จ์ˆ˜ ๊ณ ๊ธ‰, ๊ฐ์ฒด - ํ•จ์ˆ˜๊ณ ๊ธ‰ • Arrow ํ•จ์ˆ˜ - ํ™”์‚ดํ‘œํ•จ์ˆ˜๋ผ๊ณ ๋„ ๋ถˆ๋ฆฌ๋ฉฐ ์ „ํ†ต์ ์ธ ํ•จ์ˆ˜ ํ‘œํ˜„๋ฐฉ์‹์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“  ์Šˆ๊ฐ€์ฝ”๋“œ์ด๋‹ค. - ํ™”์‚ดํ‘œํ•จ์ˆ˜๋Š” ํ‘œํ˜„๋ฐฉ์‹์ด์ง€ ๋ฉ”์†Œ๋“œ๊ฐ€ ์•„๋‹ˆ๋‹ค. // ๊ธฐ๋ณธ ํ•จ์ˆ˜ ํ‘œํ˜„๋ฐฉ์‹ const numbers = [ 10, 20, 30, 40, 50]; const newNumbers = numbers.map(function(value, index, array) { return value + 5; }); console.log(newNumbers); // ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ํ‘œํ˜„๋ฐฉ์‹ const numbers = [10, 20, 30, 40, 50]; const newNumbers = numbers.map((value, index, array) => value + 5); con.. 2022. 11. 15.