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

๋…ธ๋งˆ๋“œ์ฝ”๋”32

[TIL] ๐Ÿ’ก Day 4 - HTML๊ณผ JS ์—ฐ๊ฒฐ, ์กฐ์ž‘ ๋ฐฉ๋ฒ• โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๐Ÿ“‘ ๋ณธ๊ฒฉ์ ์œผ๋กœ HTML๊ณผ JS๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ, JS์—์„œ HTML์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค.๐Ÿ˜† ๐ŸŒฑ JS ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  โ“ ๐Ÿ‘‰ HTML๊ณผ ์ƒํ˜ธ์ž‘์šฉ ํ•˜๊ธฐ ์œ„ํ•ด์„œ - JS๋Š” HTML์˜ element๋“ค์„ ์ž์‹ ์˜ ๋ฐฉ์‹์œผ๋กœ ์กฐ์ž‘ ๊ฐ€๋Šฅํ•˜๋‹ค. - JS๋กœ HTML์„ ์กฐ์ž‘ํ•˜๋ฉด ์›๋ž˜ HTML ํŒŒ์ผ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ณ  ๋…๋ฆฝ์ ์œผ๋กœ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค. ๐ŸŒฑ Document๋Š” Object โ— ๐Ÿ‘‰ document๋Š” ๋ธŒ๋ผ์šฐ์ €์— ์ด๋ฏธ ์กด์žฌํ•˜๋Š” Object ์ฝ˜์†” ์ฐฝ์— document๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๊ธด object์ž„์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. html์„ JS์˜ ํ˜•ํƒœ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. = JS์—์„œ HTML document Object๋กœ๋ถ€ํ„ฐ.. 2022. 3. 13.
[TIL] ๐Ÿ’กDay 3 - function, argument, return, prompt, typeof, ์กฐ๊ฑด๋ฌธ โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ์•ž์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ๋“ค์„ ๋ณต์Šตํ•˜๊ณ , function(ํ•จ์ˆ˜), argument(์ธ์ˆ˜), return(๋ฐ˜ํ™˜ ๊ฐ’), prompt, typeof, ์กฐ๊ฑด๋ฌธ์— ๋Œ€ํ•ด ๋ฐฐ์› ๋‹ค. ๐ŸŒฑ Function ๐Ÿ‘‰ ๊ณ„์† ๋ฐ˜๋ณตํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ ์กฐ๊ฐ, ์–ด๋–ค ์ฝ”๋“œ๋ฅผ ์บก์Šํ™”ํ•ด์„œ ์‹คํ–‰์„ ์—ฌ๋Ÿฌ ๋ฒˆ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ค€๋‹ค. function ์—†์„ ๋•Œ ๐Ÿ™…‍โ™€๏ธ // ๋ถˆ ํ•„์š”ํ•œ ๋ฐ˜๋ณต ๋„ˆ๋ฌด ๋งŽ๋‹ค.console.log("Hello my name is ์ด๋ฆ„2"); console.log("Hello my name is ์ด๋ฆ„1"); console.log("Hello my name is ์ด๋ฆ„3"); console.log("Hello my nam.. 2022. 3. 12.
[TIL] ๐Ÿ’กDay 2 - JS์˜ ๋ณ€์ˆ˜, ํƒ€์ž…, Array, Object โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๐Ÿ“‘ JS์˜ ๋ณ€์ˆ˜, ํƒ€์ž…, Array, Object์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค. ๊ฒŒ์œผ๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด์„œ ๋…ธ๋ ฅํ•˜์ž → ๋ฐ˜๋ณต ์ค„์ด๊ธฐ!๐Ÿ‘ฉ‍๐Ÿ’ป ๐ŸŒฑ ๋ณ€์ˆ˜ ๐Ÿ‘‰ variable, ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ˆ˜ ex. 2 + 3 or 2 * 3 ๊ฐ™์€ ์—ฐ์‚ฐ ์‹œ ์ˆซ์ž๋ฅผ ๋ฐ”๊ฟ”์•ผ ํ•  ์ผ์ด ์ƒ๊ธฐ๋ฉด ๋งค๋ฒˆ ์ˆ˜์ •ํ•ด์•ผ ๋˜๋Š”๋ฐ ์ด ๊ฒƒ์€ ๋น„ ํšจ์œจ์ ์ด๋‹ค!๐Ÿค” ์ด๋•Œ ๋ณ€์ˆ˜์— ์ˆซ์ž๋ฅผ ์ €์žฅํ•˜๊ณ  a + b ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ๊ณ„์‚ฐ์„ ํ•˜๋ฉด ๋ณ€์ˆ˜๋งŒ ๋ฐ”๊พธ๋ฉด ๋˜๋‹ˆ๊นŒ ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋‹ค!๐Ÿค— const, let์„ ํ†ตํ•ด์„œ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ๋‹ค. ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ์„ฑ X → const / ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ์„ฑ ์žˆ๋Š” ๊ฒƒ → let => ์ด๊ฒƒ๋งŒ ๋ด๋„ ์ž‘์„ฑ์ž์˜ ์˜๋„๊ฐ€ ํŒŒ์•… ๊ฐ€๋Šฅํ•˜๋‹ค. JS๋Š” 10์ผ ๋งŒ์— ๋งŒ๋“ค์–ด์„œ.. 2022. 3. 11.
[TIL] ๐Ÿ’กDay 1 - JavaScript์˜ ์œ ๋ž˜์™€ ํ™•์žฅ๊ฐ€๋Šฅ์„ฑ โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๐Ÿ“‘ JavaScript์˜ ์œ ๋ž˜์™€ ํ™•์žฅ ๊ฐ€๋Šฅ์„ฑ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค. JS์˜ ์œ ๋ž˜ ๐Ÿ” 1995๋…„ Brendan Eich์ด ๋‹จ 10์ผ ๋งŒ์— ๋งŒ๋“  ์–ธ์–ด, ๋ฌดํ•œํ•œ ํ™•์žฅ์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ( = ์˜ค๋ฅ˜๋„ ๋งŽ์•˜์Œ) JS๋Š” ์ˆ˜ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์“ฐ๋Š” ์–ธ์–ด์ด๊ณ , ๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ๋”ฐ๋กœ ์„ค์น˜ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค BE์˜ ์–ธ์–ด๋Š” ๋งค์šฐ ๋‹ค์–‘ํ•˜์ง€๋งŒ, FE์—์„œ๋Š” JS๋งŒ ์•Œ๋ฉด ์ปค๋ฒ„ ๊ฐ€๋Šฅ! JS์˜ ํ™•์žฅ๊ฐ€๋Šฅ์„ฑ โœจ๋ธŒ๋ผ์šฐ์ €๋Š” HTML, CSS, JS๋งŒ ์ฝ์„ ์ˆ˜ ์žˆ๋‹ค. ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ console์„ ์ž˜ ํ™œ์šฉํ•˜๋„๋ก ํ•˜์ž JS์™€ CSS๋งŒ์œผ๋กœ๋Š” ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ์‹œํ•  ์ˆ˜ ์—†๋‹ค glue์—ญํ• ์„ ํ•˜๋Š” html์ด ๊ผญ ํ•„์š”ํ•˜๋‹ค! cmd์—์„œ ํด๋” ์ƒ์„ฑํ•˜.. 2022. 3. 11.
๋ฐ˜์‘ํ˜•