
๊ฐ์ฒด ์งํฅ ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ์ด๋? ํ๋์ ์ฒญ์ฌ์ง์ ๋ง๋ค๊ณ ๊ทธ ์ฒญ์ฌ์ง์ ๋ฐํ์ผ๋ก, ์ฆ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ class๋ฅผ ๋ฐํ์ผ๋ก ํ๋ ํ๋์ ๊ฐ์ฒด, ์ฆ instance๋ฅผ ๋ง๋๋ ํ๋ก๊ทธ๋๋ฐ ํจํด์ ์๋ฏธํ๋ค. โ๏ธ ํด๋์ค์ ์ธ์คํด์ค ํด๋์ค๋ ์์ฑ๊ณผ ๋ฉ์๋๋ฅผ ์ ์ํ๋ ๊ณต๊ฐ์ด๊ณ ์ธ์คํด์ค๋ ํด๋์ค์์ ์ ์๋ ์ ๋ณด๋๋ฅผ ๊ฐ์ ธ์ ์ด์ฉํ๋ ๊ฐ์ฒด์ด๋ค. ์์ฑ์ ํด๋์ค์ ํฌํจ๋๋ ๋ณ์๋ฅผ ์๋ฏธํ๊ณ , ๋ฉ์๋๋ ํด๋์ค์ ํฌํจ๋๋ ํจ์๋ฅผ ์๋ฏธํ๋ค. ํด๋์ค๋ฅผ ์ ์ํ๋ ๋ฐ์๋ 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค. ํจ์๋ก ์ ์ (ES5 ๋ฌธ๋ฒ) function Introduce(name, age, favorite) { // ์ธ์คํด์ค ๋ง๋ค์ด์ง ๋ ์คํ๋๋ ์ฝ๋ } class ํค์๋๋ก ์ ์ (ES6 ๋ฌธ๋ฒ) class Introduce { constructor(..

๊ณ ์ฐจ ํจ์ ๊ณ ์ฐจ ํจ์๋? ๊ณ ์ฐจ ํจ์๋ 1. ํจ์๋ฅผ arguments๋ก ๋ฐ์ ์ ์๊ฑฐ๋ 2. ํจ์๋ฅผ returnํ ์ ์๊ฑฐ๋ 3. ๋๋ ์ ๋ ๊ฐ์ง ์ฌํญ์ ๋ชจ๋ ํด๋นํ๋ ํจ์๋ฅผ ์๋ฏธํ๋ค. // ๋ค๋ฅธ ํจ์๋ฅผ arguments๋ก ๋ฐ๋ ๊ฒฝ์ฐ function double(num) { return num * 2; } function doubleNum(func, num) { return func(num); } let output = doubleNum(double, 4); // return๊ฐ์ด ํจ์์ธ ๊ฒฝ์ฐ function adder(added) { return function (num) { return num + added; }; } let output = adder(5)(3); // ๋๋ ์ ๋ ๊ฐ์ง์ ๋ชจ๋ ํด๋นํ๋..

DOM ๊ธฐ์ด DOM์ด๋? Document Object Model์ ์ฝ์๋ก, HTML ์์๋ฅผ JavaScript ๊ฐ์ฒด์ฒ๋ผ ์กฐ์ํ ์ ์๋ ๋ชจ๋ธ์ ๋งํ๋ค. โ๏ธ HTML์ JavaScript ์ ์ฉํ๊ธฐ HTML์ JavaScript์์ ์กฐ์ํ๊ธฐ ์ํด์๋ HTML ๋ฌธ์์ JavaScript ๋ฌธ์๋ฅผ ์ฐ๊ฒฐํด์ฃผ์ด์ผ ํ๋ค. ์ด ๋ HTML ๋ฌธ์ ๋ด์ ํ๊ทธ ์์ ํ๊ทธ๋ฅผ ์ถ๊ฐํ ๊ฒฝ์ฐ, ํ๊ทธ ๋ด๋ถ๋ฅผ ํด์ํ๊ณ ํ๊ทธ๋ฅผ ํด์ํ๊ธฐ ๋๋ฌธ์ JavaScript์์ ํ๊ทธ ๋ด๋ถ ์์๋ฅผ ์ฐธ์กฐํด๋ ์ฝ์ ์ ์๋ค. ํ๊ทธ ์์ ํ๊ทธ๋ฅผ ์ถ๊ฐํ ๊ฒฝ์ฐ, ์ฌ์ฉ์๊ฐ ์น ๋ธ๋ผ์ฐ์ ์ ๋ด์ฉ์ ๋น ๋ฅด๊ฒ ํ์ธํ ์ ์์ผ๋ HTML ์ฝ๋๊ฐ js์ ์์กด์ ์ด๋ผ๋ฉด ์๋ฏธ์๋ ํ๋ฉด์ ๋ณด๊ธฐ๊น์ง๋ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆด ์ ์๋ค. Hello JavaScript! ํ๊ทธ ๋ด์ defer..

์์ ์๋ฃํ๊ณผ ์ฐธ์กฐ ์๋ฃํ โ๏ธ ์์ ์๋ฃํ ์์ ์๋ฃํ์ด๋? ๊ฐ์ฒด๊ฐ ์๋๋ฉด์ method๋ฅผ ๊ฐ์ง์ง ์๋ ์๋ฃํ์ผ๋ก ๋ณ์์ ํ๋์ ๋ฐ์ดํฐ๋ง ์ ์ฅํ ์ ์๊ณ ํด๋น ๋ฐ์ดํฐ๋ ๊ฐ ์์ฒด์ด๋ค. ์์ ์๋ฃํ ์ข ๋ฅ 6๊ฐ์ง string, number, bigint, boolean, undefined, symbol, (null) "hello world!" "hello september!" // "hello world"์ "hello september!"์ ๋ชจ๋ ๋ณ๊ฒฝํ ์ ์๋ ๊ณ ์ ๋ ๊ฐ์ด๋ค. let word = "hello world!" word = "hello september!" // word๋ผ๋ ๋ณ์์ ์ฌํ ๋น์ ํ์ฌ ๋ณ์์ ๋ด๊ธด ๋ด์ฉ์ ๋ณ๊ฒฝํ๋ ๊ฒ์ ๊ฐ๋ฅํ๋ค. โ๏ธ ์ฐธ์กฐ ์๋ฃํ ์ฐธ์กฐ ์๋ฃํ์ด๋? ์์ ์๋ฃํ์ด ์๋..

๋ฐฐ์ด ๋ฐฐ์ด์ด๋? ์์๊ฐ ์๋ ๊ฐ์ผ๋ก ์ด๋ ์์๋ ์ธ๋ฑ์ค(index), ๊ฐ์ ์์(element)๋ผ๊ณ ๋ถ๋ฅธ๋ค. ์ธ๋ฑ์ค๋ 0๋ถํฐ ์์ํ๋ค. ๋ฐฐ์ด์ ์ ์ธํ ๋, ๋๊ดํธ๋ก ๋ฐฐ์ด์ ๋ง๋ค๊ณ ๊ฐ ์์๋ ์ผํ๋ก ๊ตฌ๋ถํ๋ค. let myEmoji = ['๐ฐ', '๐', '๐ฐ', '๐', '๐']; // myEmoji์ 3๋ฒ ์ธ๋ฑ์ค๋ฅผ ์กฐํํ ๊ฒฝ์ฐ myEmoji[3]; // '๐' // myEmoji์ 3๋ฒ ์ธ๋ฑ์ค๋ฅผ ๋ณ๊ฒฝํ ๊ฒฝ์ฐ myEmoji[3] = '๐'; console.log(myEmoji); // ['๐ฐ', '๐', '๐ฐ', '๐', '๐'] ๋ฐฐ์ด์ ๋ฐฐ์ด ๋ด๋ถ์ ๋ฐฐ์ด์ ๋ง๋ค์ด 2์ฐจ์, 3์ฐจ์์ ๋ฐฐ์ด ์ ์ธ๋ ๊ฐ๋ฅํ๋ค. โ๏ธ ๋ฐฐ์ด์ ๊ธฐ์ด ์์ฑ๊ณผ ๋ฉ์๋ ์์ฑ length: ๋ฐฐ์ด์ ๊ธธ์ด๋ฅผ ์ ์ ์๋ค. myEmoji.leng..

Command-Line Interface CLI๋? Command-Line Interface์ ์ฝ์๋ก GUI๊ฐ ๊ฐ๋ฐ๋๊ธฐ ์ ์ปดํจํฐ๋ฅผ ์กฐ์ํ๊ธฐ ์ํด ์ฌ์ฉ๋ ์ธํฐํ์ด์ค๋ก, ํฐ๋ฏธ๋์ ์ด์ฉํด ํค๋ณด๋๋ก ์ ๋ ฅ / ๋ชจ๋ํฐ๋ก ์ถ๋ ฅ์ ํ์ฌ ๋ชจ๋ ์์ ์ด ๊ฐ๋ฅํ๋ค. โ๏ธ macOS์์ ํฐ๋ฏธ๋ ์คํํ๊ธฐ ๋ฐ์นํจ๋ ์ด์ฉ a. ๋ (dock)์์ ๋ฐ์นํจ๋๋ฅผ ํด๋ฆญํ๋ค. b. ๋ฐ์นํจ๋ ์๋จ์ ๊ฒ์์ฐฝ์ 'terminal'์ ์ ๋ ฅํ๊ณ ์คํํ๋ค. (์ง์ ์ฐพ์๋ ๋๋ค.) ์คํฌํธ๋ผ์ดํธ ์ด์ฉ a. ๋ชจ๋ํฐ ํ๋ฉด ์ต์๋จ์ ์ํ๋ฐ์์ ๋๋ณด๊ธฐ ํด๋ฆญ (command + space) b. 'terminal'์ ์ ๋ ฅํ๊ณ ์คํํ๋ค. ์์ ํ๋ฉด์์ ํค๋ณด๋ ์ ๋ ฅ์ ํ์ธํ๊ณ ํธ์งํ ์ ์๋ ํ ์ค์ ๊ณต๊ฐ์ ํ๋กฌํํธ(prompt)๋ผ๊ณ ํ๊ณ , ํ๋กฌํํธ์ ์ ๋ ฅํ ๋ช ๋ น์ด๋ฅผ..

Flexbox Flexbox๋? flex๋ ์ ์ฐํ, ์ ๊ตฌ๋ถ๋ฌ์ง๋ ์ด๋ผ๋ ๋ป์ผ๋ก ๋ฐ์ค๋ฅผ ์ ์ฐํ๊ฒ ๋๋ฆฌ๊ฑฐ๋ ์ค์ฌ ๋ ์ด์์์ ์ก๋ ๋ฐฉ๋ฒ์ ๋งํ๋ค. โ๏ธ ๋ถ๋ชจ์ ์ ์ฉํด์ผ ํ๋ flexbox ์์ฑ display: flex : ์์ ๋ฐ์ค์ ๋ฐฉํฅ๊ณผ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ ํ๋ค. flex-direction : ์ ๋ ฌ ์ถ์ ์ ํ๋ค. ๊ฐ์ผ๋ก๋ row(๊ธฐ๋ณธ๊ฐ), column, row-reverse, column-reverse๊ฐ ์๋ค. flex-wrap : ํ์ ์์์ ํฌ๊ธฐ๊ฐ ์์ ์์์ ํฌ๊ธฐ๋ฅผ ๋์ผ๋ฉด ์๋์ผ๋ก ์ค๋ฐ๊ฟ์ ํ ๊ฒ์ธ์ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋ค. ๊ฐ์ผ๋ก๋ nowrap(๊ธฐ๋ณธ๊ฐ), wrap, wrap-reverse๊ฐ ์๋ค. justify-content : ์ถ์ ์ํ๋ฐฉํฅ ์ ๋ ฌ ๋ฐฉ๋ฒ์ ๊ฒฐ์ ํ๋ค. ๊ฐ์ผ๋ก๋ flex-start, flex-end,..

CSS ๊ธฐ์ด CSS๋? Cascading Style Sheets์ ์ฝ์๋ก, ์นํ์ด์ง์ ์คํ์ผ ๋ฐ ๋ ์ด์์์ ์ ์ํ๋ ์คํ์ผ์ํธ ์ธ์ด์ด๋ค. ๊ฐ๋ฐ์๋ CSS๋ก ๋ค์๊ณผ ๊ฐ์ ์์ ์ ์ํํ ์ ์๋ค. UI(์ฌ์ฉ์ ์ธํฐํ์ด์ค, User Interface)์ UX(์ฌ์ฉ์ ๊ฒฝํ, User eXperience) ์ปดํฌ๋ํธ๋ฅผ ๊ธฐ๋ฅ๋ณ๋ก ๋ฌถ์ด์ ์ ์ ๊ตต์ ๊ธ์จ์ ๊ฐ์ ํ์ดํฌ๊ทธ๋ํผ์ ์์ ์ ์ฉ โ๏ธ CSS ์คํ์ผ ์์ฑ๋ฒ CSS๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์๋ 3๊ฐ์ง๊ฐ ์๋ค. ์ธ๋ผ์ธ ์คํ์ผ : HTML ๋ฌธ์ ๋ด์ style ์์ฑ์ ์ฌ์ฉํด ์์ฑํ๋ค. - ํ ๋ฒ ์ค์ ๋ ์คํ์ผ์ ๋ณ๊ฒฝํ๊ธฐ ๋งค์ฐ ์ด๋ ต๋ค. ํ๋์ ๋ด๋ถ ์คํ์ผ ์ํธ : HTML ๋ฌธ์์ h2 { color: blue; } โ๏ธ CSS ์ฝ๋ ์์ฑ๋ฒ /*์ ๋ ํฐ*/ body { /*์ ์ธ๋ธ๋ก*..

์น ๊ฐ๋ฐ ์ดํดํ๊ธฐ HTML : ์นํ์ด์ง์ ๊ตฌ์กฐ๋ฅผ ๋ด๋นํ๋ ๋งํฌ์ ์ธ์ด CSS : ์นํ์ด์ง์ ๋์์ธ ์์๋ฅผ ์๊ฐํํ๋ ์คํ์ผ์ํธ ์ธ์ด JavaScript : ์นํ์ด์ง์ ๊ธฐ๋ฅ์ ์์๊ฐ ์ ์ ์ ์ํธ์์ฉํ ์ ์๊ฒ ๋ง๋๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด HTML ๊ธฐ์ด HTML์ด๋? HyperText Markup Language์ ์ฝ์๋ก ์นํ์ด์ง์ ๋ด์ฉ๊ณผ ๊ตฌ์กฐ๋ฅผ ์ด๋ฃจ๋ ์ธ์ด์ด๋ค. HTML5๋ 2014๋ 10์ 28์ผ ํ์ ๋ ์ฐจ์ธ๋ ์น ํ์ค์ผ๋ก, ๋ฐ๋์ ์ผ๋ก ์์ํด ๋ฌธ์ ํ์์ HTML5๋ก ์ง์ ํด์ผํ๋ค. ์ค์ง์ ์ธ HTML ๋ฌธ์๋ ๊ณผ ์ฌ์ด์ ๊ธฐ์ ํ๋ค. ์ฌ์ด์๋ ๋ฌธ์ ์ ๋ชฉ, ์ธ๋ถ ํ์ผ ์ฐธ์กฐ, ๋ฉํ๋ฐ์ดํฐ ์ค์ ๋ฑ์ด ์์นํ๊ณ ์ด ์ ๋ณด๋ ๋ธ๋ผ์ฐ์ ์ ํ์๋์ง ์๋๋ค. ๋ธ๋ผ์ฐ์ ์ ํ์๋๋ ์ ๋ณด๋ ์ ์ฌ์ด์ ์์นํ๋ค. โ๏ธ HTML ๊ธฐ๋ณธ ์์ ..

1. ์กฐ๊ฑด๋ฌธ ์กฐ๊ฑด๋ฌธ์ด๋? ์ด๋ค ์กฐ๊ฑด์ ํ๋ณํ๋ ๊ธฐ์ค์ ๋ง๋๋ ๊ฒ์ผ๋ก, ๋ฐ๋์ ๋น๊ต ์ฐ์ฐ์ ๋๋ ๋ ผ๋ฆฌ ์ฐ์ฐ์๊ฐ ํ์ํ๋ค. โ๏ธ ๋น๊ต ์ฐ์ฐ์ ๋น๊ต ์ฐ์ฐ์๋ ํผ์ฐ์ฐ์๋ฅผ ์๋ก ๋น๊ตํ๊ณ , ๋น๊ต ๊ฒฐ๊ณผ๊ฐ ์ฐธ์ธ์ง ๊ฑฐ์ง์ธ์ง์ ๋ฐ๋ผ ๋ ผ๋ฆฌ๊ฐ์ธ true ๋๋ false๋ฅผ ๋ฐํํ๋ค. ํผ์ฐ์ฐ์๋ก๋ Number, String, Boolean, ๊ฐ์ฒด ๊ฐ์ ์ฌ์ฉํ ์ ์๋ค. ๋น๊ต ์ฐ์ฐ์์ ์ข ๋ฅ - ๋๋ฑ (==) - ๋ถ๋ฑ (!=) - ์ผ์น (===) - ๋ถ์ผ์น (!==) - ํผ (>) - ํฌ๊ฑฐ๋ ๊ฐ์ (>=) - ์์ (

1. ๋ณ์ ๋ณ์๋? ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ์ ํ๋ ๋ณด๊ดํจ์ ์ด๋ฆ์ด๋ค. โ๏ธ ๋ณ์์ ์ ์ธ ๋ณด๊ดํจ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ๊ณต๊ฐ์ ํ๋ณดํ๋ ํ์์ด๋ค. // let ๋ณ์์ด๋ฆ; let date; โ๏ธ ํ ๋น ํ๋ณดํ ๋ณด๊ดํจ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ํ์์ด๋ค. // ๋ณ์์ด๋ฆ = ๊ฐ; date = 20220822; /* ์ ์ธ๊ณผ ๋์์ ํ ๋นํ๋ ๊ฒฝ์ฐ let ๋ณ์์ด๋ฆ = ๊ฐ; */ let date = 20220822; ์ด ๋ = ๋ ์ํ์ ์๋ฏธ์ '๊ฐ๋ค'๊ฐ ์๋, '๋์ ํ๋ค'์ ์๋ฏธ์ด๋ค. ๐ ๋ณ์ ์ ์ธ ์ ์ฃผ์์ฌํญ ๐ ๋ณ์๋ช ์๋ ๊ณต๋ฐฑ์ ์ฐ์ง ๋ชปํ๋ฏ๋ก, ๋ณดํต ๋จ์ด์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ์์ฑํ๋ CamelCase๋ฅผ ์ฌ์ฉํ๋ค. ์ด๋ฏธ ์ ์ธํ ๋ณ์๋ฅผ ๋ค์ ์ ์ธํ ๋๋ let์ ์ฐ์ง ์๋๋ค. 2. ํ์ ํ์ ์ด๋? ์ ์ฅ๋ ๊ฐ์ ์ข ๋ฅ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ ๊ฒ..