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

Frontend Dev/๐Ÿฅ ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  FE ๋ถ€ํŠธ์บ ํ”„

(78)
Section2 Unit1 JavaScript ๊ณ ์ฐจ ํ•จ์ˆ˜ Section2 Unit1 [JavaScript] ๊ณ ์ฐจ ํ•จ์ˆ˜ ๐Ÿ“Œ Chapter1. ๊ณ ์ฐจ ํ•จ์ˆ˜ • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋Š” ์ผ๊ธ‰ ๊ฐ์ฒด๋กœ ์ทจ๊ธ‰๋˜๋ฏ€๋กœ ๋‹ค๋ฅธ ํ•จ์ˆ˜์— ์ „๋‹ฌ๋  ์ˆ˜ ์žˆ๋‹ค. ํ•จ์ˆ˜๋Š” ๋ณ€์ˆ˜์— ํ• ๋‹น๋  ์ˆ˜ ์žˆ๊ณ , ๊ฐ์ฒด ์†์„ฑ์œผ๋กœ ์ €์žฅ๋  ์ˆ˜ ์žˆ๋‹ค. • ๊ณ ์ฐจ ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌ์ธ์ž๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ณ , ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜์ด๋‹ค. ↓ ๊ณ ์ฐจํ•จ์ˆ˜ ๊ฐœ๋…์ด ์ข€ ์–ด๋ ต๋‹ค๊ณ  ์ƒ๊ฐ์ด๋˜์–ด ๋ณต์Šตํ•˜๋ฉด์„œ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค. ๊ณ ์ฐจ ํ•จ์ˆ˜(higher order function)๋ž€ ๋ฌด์—‡์ผ๊นŒ? ๐Ÿ‘พ ๊ณ ์ฐจํ•จ์ˆ˜(higher order function)๋ž€? ๊ณ ์ฐจ ํ•จ์ˆ˜๋Š” โ‘  ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌ์ธ์ž(argument)๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ณ , โ‘ก ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜์ด๋‹ค. โœ”๏ธ 1. ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›๋Š” ๊ฒฝ์šฐ ๋‹ค๋ฅธ ํ•จ์ˆ˜(caller)์˜ ์ „๋‹ฌ์ธ fay..
Section1 ํšŒ๊ณ , ๋ถ€ํŠธ์บ ํ”„๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ๋ฒŒ์จ ํ•œ ๋‹ฌ์ด ํ˜๋ €๋‹ค. Section1 ํšŒ๊ณ , ๋ถ€ํŠธ์บ ํ”„๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ๋ฒŒ์จ ํ•œ ๋‹ฌ์ด ํ˜๋ €๋‹ค. Section1์„ ๋งˆ๋ฌด๋ฆฌํ•˜๋ฉฐ, ์ด๋ฒˆ ์ฑ•ํ„ฐ์—์„œ ํ•™์Šตํ•œ ๋‚ด์šฉ์„ ํ† ๋Œ€๋กœ ๊ธฐ์ˆ  ๋ฉด์ ‘ ์ค€๋น„ํ•˜๊ธฐ ์ฑ•ํ„ฐ๊ฐ€ ์žˆ์—ˆ๋‹ค. (์˜ค์ „์—๋Š” ์ด๋ ฅ์„œ ์ž‘์„ฑ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ปค๋ฆฌ์–ด ์„ธ์…˜๋„ ์žˆ์—ˆ๋‹ค.) ๊ธฐ์ˆ  ๋ฉด์ ‘ ๋Œ€๋น„๋กœ ๋‹ค์–‘ํ•œ ์งˆ๋ฌธ๋“ค์ด ์žˆ์—ˆ๊ณ , ์ด์— ๋Œ€ํ•œ ๋‹ต๋ณ€์„ ๋งํ•ด๋ณด๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค. ๋ผ์ด๋ธŒ ์„ธ์…˜์—์„œ ๊ฐ•์กฐํ–ˆ๋˜ ๋ถ€๋ถ„์€, ๊ธฐ์ˆ  ๋ฉด์ ‘์‹œ ์ฒซ ํ•œ๋ฌธ์žฅ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ๋งํ•˜์ž๋Š” ๊ฒƒ. ์˜ค๋Š˜์˜ TIL์€ ๋‹ค๋ฅธ ๋‚ด์šฉ์€ ์ œ์™ธํ•˜๊ณ  Section1์„ ๋งˆ๋ฌด๋ฆฌํ•ด๋ณผ๊นŒ ํ•œ๋‹ค. ์ฝ”๋“œ์Šคํ…Œ์ด์ธ ์—์„œ ์ œ์•ˆํ•œ ๋ฐฉ๋ฒ•์€ KPT๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ํšŒ๊ณ ์˜€๊ณ , ์ฒ˜์Œ์—” ๋ญ˜ ์จ์•ผํ• ์ง€ ์ƒ๊ฐ์ด ๋”ฑํžˆ ์ž˜ ์•ˆ๋‚˜์„œ ๋ณ„ ์ƒ๊ฐ์—†์ด ์ž‘์„ฑํ–ˆ์—ˆ๋Š”๋ฐ ์“ฐ๋‹ค๋ณด๋‹ˆ ๋‚ด๊ฐ€ ํ•ด์•ผ ํ•  ๊ฒƒ๋“ค์ด ๋ช…ํ™•ํ•ด์ง€๋Š” ๋Š๋‚Œ์ด ๋“ค์–ด์„œ ๋‚˜๋ฆ„ ์—ด์‹ฌํžˆ(?) ์ƒ๊ฐํ•ด์„œ ์ž‘์„ฑํ–ˆ๋‹ค. ๐Ÿ“Œ Keep, P..
Section1 Unit11 ์†”๋กœ ํ”„๋กœ์ ํŠธ, ๋‚˜๋งŒ์˜ ์•„๊ณ ๋ผ์Šคํ…Œ์ด์ธ  ๋งŒ๋“ค๊ธฐ Section1 Unit11 [์†”๋กœ ํ”„๋กœ์ ํŠธ] ๋‚˜๋งŒ์˜ ์•„๊ณ ๋ผ์Šคํ…Œ์ด์ธ  ๋งŒ๋“ค๊ธฐ โญ๏ธ ๊ณผ์ œ. ๋‚˜๋งŒ์˜ ์•„๊ณ ๋ผ์Šคํ…Œ์ด์ธ  ๋งŒ๋“ค๊ธฐ โœ”๏ธ ๋ฐฐํฌ๋งํฌ → https://sw2377.github.io/fe-sprint-my-agora-states/ โœ”๏ธ ๋ฐฐ์šด์ : ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ DOM ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์‚ญ์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์› ๊ณ , CSS๋กœ ๋‹คํฌ ํ…Œ๋งˆ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. โœ”๏ธ ์–ด๋ ต๊ฑฐ๋‚˜ ์•„์‰ฌ์› ๋˜ ๋ถ€๋ถ„: ํŽ˜์ด์ง€๋„ค์ด์…˜ ๊ตฌํ˜„ํ•˜๋Š”๊ฒŒ ์–ด๋ ค์›Œ์„œ ๊ตฌ๊ธ€๋ง์œผ๋กœ ์ฐพ๊ธฐ๋Š” ํ–ˆ๋Š”๋ฐ ์ •ํ™•ํžˆ ์ดํ•ด๊ฐ€ ์ž˜๋˜์ง€ ์•Š์•˜๋‹ค. ๊ทธ๋ž˜์„œ ์ฒ˜์Œ์—๋Š” ํŽ˜์ด์ง€ ๋‚ด์—์„œ ๋””์Šค์ปค์…˜ ์ถ”๊ฐ€/์‚ญ์ œ ์‹œ ํŽ˜์ด์ง€๋„ค์ด์…˜์ด ์—…๋ฐ์ดํŠธ ๋˜์ง€ ์•Š๋Š”? ์˜ค๋ฅ˜๊ฐ€ ์žˆ์—ˆ๋‹ค. ๐Ÿ˜ญ โœ”๏ธ ์•ž์œผ๋กœ ๊ฐœ์„ ํ•  ๋ถ€๋ถ„: ํŽ˜์ด์ง€๋„ค์ด์…˜ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ข€ ๋” ์ฐพ์•„๋ณด๊ณ , ์ ์šฉ์‹œํ‚ฌ ์˜ˆ์ •์ด๋‹ค. → ํ˜„์žฌ๋Š” ์˜ค๋ฅ˜ ์ˆ˜์ •ํ–ˆ๊ณ , ํŽ˜์ด..
Section1 Unit11 ์†”๋กœ ํ”„๋กœ์ ํŠธ ์ „, Git์œผ๋กœ ํ˜‘์—…ํ•˜๊ธฐ Section1 Unit11 ์†”๋กœ ํ”„๋กœ์ ํŠธ ์ „, Git์œผ๋กœ ํ˜‘์—…ํ•˜๊ธฐ ๐Ÿ“Œ Chapter1. Git์œผ๋กœ ํ˜‘์—…ํ•˜๊ธฐ Git workflow • ๋กœ์ปฌ(Local) Git ๋ฆฌํฌ์ง€ํ† ๋ฆฌ(Repository): ๋‚ด ์ปดํ“จํ„ฐ์˜ ์ €์žฅ์†Œ # git repository๋ฅผ ์ถ”๊ฐ€ git init # Untracked files๋ฅผ Staging area๋กœ ์ถ”๊ฐ€ git add # staging area์˜ ํŒŒ์ผ ํ™•์ธ git status # staging area์˜ ํŒŒ์ผ์€ commit ๊ฐ€๋Šฅ git commit • ์›๊ฒฉ(Remote) Git ๋ฆฌํฌ์ง€ํ† ๋ฆฌ(Repository): ์›๊ฒฉ ์˜จ๋ผ์ธ ์„œ๋ฒ„ ์ƒ์˜ ์ €์žฅ์†Œ # ๋กœ์ปฌ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์— ์›๊ฒฉ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ์ฃผ์†Œ๋ฅผ ๋“ฑ๋ก git remote add # ๋กœ์ปฌ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์— ๊ธฐ๋กํ•œ ๋‚ด์—ญ์„ ์›๊ฒฉ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋กœ ์ด๋™ g..
Section1 Unit10 JS/๋ธŒ๋ผ์šฐ์ € DOM - ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ Section1 Unit10 [JS/๋ธŒ๋ผ์šฐ์ €] DOM - ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ โญ๏ธ ๊ณผ์ œ. ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ํšŒ์›๊ฐ€์ž… Form์„ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ, ํŠน์ • ์กฐ๊ฑด์— ๋งž๋Š” ๊ฐ’์„ ์ž…๋ ฅํ•˜๋„๋ก ๊ตฌํ˜„ํ•˜๋Š” ์—ฐ์Šต์„ ํ–ˆ๋‹ค. See the Pen ํšŒ์›๊ฐ€์ž… Form (์œ ํšจ์„ฑ๊ฒ€์‚ฌ) by sowon (@hello_FAY) on CodePen. Bare Minimum ์š”๊ตฌ์‚ฌํ•ญ์„ ์™„๋ฃŒ ํ›„ ๋‹ค๋ฅธ ๊ธฐ๋Šฅ๋„ ์ถ”๊ฐ€ํ•ด์„œ ๋„ฃ์–ด๋ณด์•˜๋‹ค. โœ”๏ธ ์•„์ด๋””์™€ ํŒจ์Šค์›Œ๋“œ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ „ํ™”๋ฒˆํ˜ธ, ์ด๋ฉ”์ผ ์˜์—ญ๋„ ์ถ”๊ฐ€ํ•˜์—ฌ ๊ตฌํ˜„ โœ”๏ธ addEventListener ์‚ฌ์šฉ (ํ•™์Šต์ž๋ฃŒ์—๋Š” onkeyup์„ ์‚ฌ์šฉ) โœ”๏ธ ํ•˜๋‹จ์˜ Message๋Š” html์ด ์•„๋‹Œ js์˜ textContent๋กœ ๋‚ด์šฉ ์ถœ๋ ฅ โœ”๏ธ ํšŒ์›๊ฐ€์ž… ๋ฒ„ํŠผ disabled ์กฐ์ž‘ โœ”๏ธ ์•ฝ๊ฐ„์˜ html, css ์ˆ˜์ • ๐ŸŒ™ ์˜ค๋Š˜์˜ ํšŒ๊ณ  ์˜ค๋Š˜..
Section1 Unit10 JS/๋ธŒ๋ผ์šฐ์ € DOM Section1 Unit10 [JS/๋ธŒ๋ผ์šฐ์ €] DOM ๐Ÿ“Œ Chapter1. DOM ๊ธฐ์ดˆ • DOM(Documnet Object Model)์€ HTML ์š”์†Œ๋ฅผ Object(JavaScript Object)์ฒ˜๋Ÿผ ์กฐ์ž‘(Manipulation)ํ•  ์ˆ˜ ์žˆ๋Š” Model์ด๋‹ค. ์ฆ‰, JavaScript๋ฅผ ์‚ฌ์šฉํ•ด DOM์œผ๋กœ HTML์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค. • ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ์—์„œ๋Š”, ์–ด๋””์—์„œ๋‚˜ document ๊ฐ์ฒด๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค. console.log(document.body); console.dir(document.body); → DOM ๊ตฌ์กฐ๋ฅผ ์กฐํšŒํ•  ๋•Œ๋Š” DOM์„ ๊ฐ์ฒด์˜ ๋ชจ์Šต์œผ๋กœ ์ถœ๋ ฅํ•˜๋Š” console.dir๊ฐ€ ์œ ์šฉํ•˜๋‹ค. • Tree ๊ตฌ์กฐ์˜ DOM ๐Ÿ“Œ Chapter2. DOM ๋‹ค๋ฃจ๊ธฐ CRUD(C..
Section1 Unit9 ๊ณผ์ œ JavaScript Koans Section1 Unit9 [JavaScript] JavaScript Koans โญ๏ธ ๊ณผ์ œ. JavaScript Koans ์ด๋ฒˆ ์œ ๋‹›์˜ JavaScript Koans ๊ณผ์ œ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. Javascript Koans๋Š” 1๋ฒˆ ์†Œ๊ฐœ ์ฑ•ํ„ฐ๋ฅผ ์ œ์™ธํ•˜๊ณ , 10๋ฒˆ๊นŒ์ง€ 9๊ฐœ์˜ ์ฑ•ํ„ฐ๋กœ ๋‚˜๋ˆˆ ํŒŒ์ผ์ด ์ œ๊ณต๋˜์—ˆ๋‹ค. (ํƒ€์ž…, ๋ณ€์ˆ˜, ์Šค์ฝ”ํ”„, ํ•จ์ˆ˜, ๋ฐฐ์—ด, ๊ฐ์ฒด, ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ• ๋“ฑ) ํ—ท๊ฐˆ๋ ธ๋˜ ๋ถ€๋ถ„๋“ค์€ ๋”ฐ๋กœ ์ •๋ฆฌํ•˜๊ณ , ๋ฌธ์ œ๋„ ์ตœ๋Œ€ํ•œ ๋‹ค ์ดํ•ดํ•˜๋ ค ํ–ˆ๋‹ค. ์ด๋ฒˆ TIL์—์„œ๋Š” ํ—ท๊ฐˆ๋ ธ๋˜ ๊ฐœ๋…์ด๋ž‘ ๋ฌธ์ œ๋“ค, ๋”ฐ๋กœ ์ฐพ์•„๋ณด๊ธฐ๋ฅผ ๊ถŒ๊ณ ํ–ˆ๋˜ ์‚ฌํ•ญ ์ค‘์— ๋‚ด๊ฐ€ ์ž˜ ๋ชฐ๋ž๋˜ ๋ถ€๋ถ„๋“ค์„ ์œ„์ฃผ๋กœ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณผ๊นŒ ํ•œ๋‹ค ๐Ÿ™‚ • 03_LetConst.js Q. ์žฌํ• ๋‹น๋„ ์•ˆ๋˜๋Š” 'const' ํ‚ค์›Œ๋“œ๋ฅผ ๊ตณ์ด ์จ์•ผํ•˜๋Š”์ง€ ์ดํ•ด๊ฐ€ ์•ˆ..
Section1 Unit9 JavaScript ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ ์ฃผ์š” ๋ฌธ๋ฒ• - ES6 ์‹ ๊ทœ ๋ฌธ๋ฒ• Section1 Unit9 [JavaScript] ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ ์ฃผ์š” ๋ฌธ๋ฒ• - ES6 ์‹ ๊ทœ ๋ฌธ๋ฒ• ๐Ÿ“Œ Chapter4. ES6 ์‹ ๊ทœ ๋ฌธ๋ฒ• ์ด๋ฒˆ ์œ ๋‹›์—์„œ ํ•™์Šตํ•œ ๋‚ด์šฉ๋“ค์€ ์•„๋ž˜์™€ ๊ฐ™์€ ES6 ์‹ ๊ทœ ๋ฌธ๋ฒ•์ด์—ˆ๋‹ค. ๋‹ค๋ฅธ ๋ฌธ๋ฒ•์€ ๋…ธ์…˜์— ์ •๋ฆฌํ•ด๋‘๊ณ , ์ž์ฃผ ์‚ฌ์šฉํ–ˆ๋˜ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ๋ธ”๋กœ๊ทธ์—๋„ ๋”ฐ๋กœ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณด์•˜๋‹ค ๐Ÿ™‚ • spread ๋ฌธ๋ฒ•๊ณผ rest ๋ฌธ๋ฒ• • ๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ES6 ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๊ธฐ๋ณธ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ž€ ํ•จ์ˆ˜ ํ‘œํ˜„์‹๋ณด๋‹ค ๋‹จ์ˆœํ•˜๊ณ  ๊ฐ„๊ฒฐํ•œ ๋ฌธ๋ฒ•์œผ๋กœ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ผ๋Š” ์ด๋ฆ„์€ ๋ฌธ๋ฒ•์˜ ์ƒ๊น€์ƒˆ๋ฅผ ์ฐจ์šฉํ•ด ์ง€์–ด์กŒ๋‹ค. // ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ let func = (arg1, arg2, ...argN) => fay-story.com โญ๏ธ ๊ณผ์ œ. JavaScript Koans ์ด๋ฒˆ ๊ณผ์ œ๋กœ..

๋ฐ˜์‘ํ˜•