์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- ๊น๋ฏธ๊ฒฝ์๋งํ์์
- JavaScript
- css
- html
- database
- ๋ฐ์ดํฐ๋ฒ ์ด์ค
- Python
- ์ํ
- ๋ง์ผ๋ด๊ฐ์ธ์์๋ค์์ฐ๋ค๋ฉด
- ์ฅํธ์์ค
- ๊นํ๋จ
- ์๋ฐ
- ์นํ์ด์ง๋ง๋ค๊ธฐ
- ๊ฐ๋ฐ
- ํ์ด์ฌ
- ์ฑ
- ๋ฐ์ํ
- ์ปดํจํฐ๊ณผํ
- K๋ฐฐํฐ๋ฆฌ
- ๊น๋ฏธ๊ฒฝ
- K๋ฐฐํฐ๋ฆฌ๋ ๋ณผ๋ฃจ์
- ์ค๋ผํด
- ๋ผํ๋ผ์ค์๋ง๋
- ์นํผ๋ธ๋ฆฌ์ฑ
- ์๋ฐ์คํฌ๋ฆฝํธ
- Java
- ComputerScience
- ํ๋ก๊ทธ๋๋ฐ
- ๋ ์
- ์ฝ๋ฉ
- Today
- Total
๋ชฉ๋กfull stack/JavaScript (12)
JiYoung Dev ๐ฅ
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cDDP06/btsdQJEoIMG/ijwJhRbddxkQAKPkYgJ2q1/img.png)
jQuery : JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ ์ ๊ทผ → $(css์ ํ์) ๊ธฐ๋ฅ ์ถ๊ฐ → .๋ฉ์๋() ๋ด์ฉ๋ง → .text() ํ๊ทธ๊น์ง → .html() ์คํ์ผ์ ์ด → .css() ํ์ค์ฉ ์ ๋ ฅ $('h1').css('์์ฑ1','๊ฐ1') $('h1').css('์์ฑ2','๊ฐ2') $('h1').css('์์ฑ3','๊ฐ3') chain ๋ฐฉ์ $('h1').css('์์ฑ1','๊ฐ1').css('์์ฑ2','๊ฐ2').css('์์ฑ3','๊ฐ3') ๊ฐ์ฒด ๋ฐฉ์ $('h1').css({ '์์ฑ1' : '๊ฐ1', '์์ฑ2' : '๊ฐ2', '์์ฑ3' : '๊ฐ3', }) ๐ ๋์ ์ด๋ฒคํธ ๋ฐ์ธ๋ฉ ๐ ์ด๋ฒคํธ ๋ฐ์ด๋ฉ JS์ฝ๋์ jQuery์ฝ๋๋ ๋๋ถ๋ถ ์ด๋ฒคํธ(event)์ ์ํด ๋์ํจ ์ด๋ฒคํธ๋ ๋ํ์ ์ผ๋ก ํด๋ฆญ, ํค๋ณด๋ ์ ๋ ฅ ๋ฑ ์ฌ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/tZBva/btsdOCFqDo2/QMIZ3aM9sL8OnpUDnkwLLk/img.png)
๐ CallBackํจ์ ์ฝ๋๋ฅผ ํตํด ๋ช ์์ ์ผ๋ก ํธ์ถํ๋ ํจ์๊ฐ ์๋๋ผ ์ด๋ค ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ฑฐ๋ ํน์ ์์ ์ ๋๋ฌํ์ ๋ ์์คํ ์์ ํธ์ถํ๋ ํจ์ (๋ช ์์ ํธ์ถ X) ๊ตฌ์กฐ์์ผ๋ก๋ ํจ์ ์์ ํ๋ผ๋ฏธํฐ๋ก ํจ์๊ฐ ๋ค์ด๊ฐ๋ ๊ตฌ์กฐ Click! ์ฝ๋ฐฑํจ์ ์ค์ต Click! ๐ JQuery ๐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ vs ํ๋ ์์ํฌ ๊ณตํต์ : ํจ์(์ฝ๋)๋ฅผ ๊ต์ฅํ ๋ง์ด ๋ชจ์๋์ ๊ฒ ์ฐจ์ด์ : ๋๊ฐ ์ ์ด๋ฅผ ํ๋๊ฐ? - ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ด(๊ฐ๋ฐ์)๊ฐ ์ฃผ์ฒด๊ฐ ๋์ด ํ์ํ ์์ค๋ฅผ ๊ฐ์ ธ๋ค ์ฌ์ฉํ๋ ๊ฒ → ๋ด๊ฐ ์ํ๋ ๋๊ตฌ๋ฅผ ์ ํํด์ ์ฌ์ฉํ๋ ๊ฒ (์ : ๊ณต๊ตฌํจ) - ํ๋ ์์ํฌ๋ ์ฃผ์ด์ง ํ๊ฒฝ ์์์ ๊ท์น์ ๋ง์กฑ์ํค๋ฉด์ ์ฌ์ฉ (์ : ์ค๊ณ๋) โ๏ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ํํธ์จ์ด๋ฅผ ๊ฐ๋ฐํ ๋ ์ปดํจํฐ ํ๋ก๊ทธ๋จ์ด ์ฌ์ฉํ๋ ๋นํ๋ฐ์ฑ ์์์ ๋ชจ์. ์ฆ, ํน์ ๊ธฐ๋ฅ์..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/E8m4N/btsdgTaWduJ/zdk4IwZQheB5gyCary3ho1/img.png)
๐ ์ฌ์ฉ์๋ก๋ถํฐ ์ ๋ ฅ๋ฐ์ ๊ฐ ๊ฐ์ ธ์ค๊ธฐ input, select, textarea ๊ฐ์ด ์ ๋ ฅ๋ฐ์ ๊ฐ์ ๊ฐ์ ธ์ค๊ธฐ ์ํด์๋ value ์์ฑ์ ์ฌ์ฉํด์ผ ํจ ํด๋ฆญ innerTEXT๋ก๋ ๊ฐ์ ๋ฐ์ ์ฌ ์ ์์ why? innerTEXT๋ ์์ํ๊ทธ์ ๋ํ๊ทธ ์ฌ์ด์ ์ฝํ ์ธ ๋ฅผ ๋ฐ์์ค๋ ๊ฒ์ด๋ฏ๋ก ๐ input ์ค์ต ์ ๋ ฅํ ๊ฐ์ h1ํ๊ทธ๋ก ์ถ๋ ฅํด๋ณด๊ธฐ h1ํ๊ทธ ์ถ๋ ฅ Question. ๋ณ์์ .value ์์ฑ ์ถ๊ฐ์ ๋ฐ์ํ๋ ๋ฌธ์ ์ ๋ ฅํ ๊ฐ์ h1ํ๊ทธ๋ก ์ถ๋ ฅํด๋ณด๊ธฐ h1ํ๊ทธ ์ถ๋ ฅ let inputVal = document.getElementById('inputTag').value; ์์ ๊ฐ์ด ๋ณ์ ์ง์ ์ inputVal = ''; ์ ๋๋ก ์๋ํ์ง ์์ inputVal์ ํ ๋น๋ ๊ฐ์ ํด๋น ์์์ ํ์ฌ ๊ฐ์ ๋ณต์ฌํ๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฌ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/y5RZF/btsdi1Z8J3d/u7pkt87KqhjZcG1QGOwke1/img.png)
๐ DOM (Document Object Model) HTML ๋ฌธ์์ ์์์ ์ ๊ทผํ์ฌ ์ ์ดํ ์ ์๋๋ก ๊ฐ์ฒด๋ก ๋ชจ๋ธ๋ง ๋ฌธ์ ๋ด์ ๋ชจ๋ ์์๋ฅผ ์ ์ํ๊ณ , ๊ฐ๊ฐ์ ์์์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณต ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)์ HTML, XML ๋ฌธ์์ ํ๋ก๊ทธ๋๋ฐ ์ธํฐํ์ด์ค์. DOM์ ๋ฌธ์์ ๊ตฌ์กฐํ๋ ํํ์ ์ ๊ณตํ๋ฉฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ DOM ๊ตฌ์กฐ์ ์ ๊ทผํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ๊ทธ๋ค์ด ๋ฌธ์ ๊ตฌ์กฐ, ์คํ์ผ, ๋ด์ฉ ๋ฑ์ ๋ณ๊ฒฝํ ์ ์๊ฒ ๋์. ์นํ์ด์ง๋ ์ผ์ข ์ ๋ฌธ์(document)์. ์ด ๋ฌธ์๋ ์น๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ๊ทธ ๋ด์ฉ์ด ํด์๋์ด ์น ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ๋ํ๋๊ฑฐ๋ HTML ์์ค ์์ฒด๋ก ๋ํ๋จ. ๐ HTML ๋ฌธ์์ ํธ๋ฆฌ๊ตฌ์กฐ Document ๊ฐ์ฒด๋ ์น ํ์ด์ง ๊ทธ ์์ฒด๋ฅผ ์๋ฏธํจ. ์น ํ์ด์ง์ ์กด์ฌํ๋ HTML ์์์ ์ ๊ทผํ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/c5ELdL/btsdcsklF0z/0fuP1Xp2aQ8KgiDN61mok0/img.png)
๐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด(object) ์ฌ๋ฌ ์์ฑ(property)์ ํ๋์ ๋ณ์์ ์ ์ฅํ ์ ์๋๋ก ํด์ฃผ๋ ๋ฐ์ดํฐ ํ์ ๋ฐ์ดํฐ(์์ฑ)๊ณผ ๊ทธ ๋ฐ์ดํฐ์ ๊ด๋ จ๋๋ ๋์(์ ์ฐจ, ๋ฐฉ๋ฒ, ๊ธฐ๋ฅ)์ ๋ชจ๋ ํฌํจํ ๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ ํ์ (data type)์ ๊ฐ์ฒด(object) ๊ฐ์ฒด๋ ์ด๋ฆ(name ํน์ key)๊ณผ ๊ฐ(value)์ผ๋ก ๊ตฌ์ฑ๋ ํ๋กํผํฐ(property)์ ์ ๋ ฌ๋์ง ์์ ์งํฉ ํ๋กํผํฐ์ ๊ฐ์ผ๋ก ํจ์๊ฐ ์ฌ ์ ์๋ ์์ (์ด๋ฅผ ๋ฉ์๋๋ผ๊ณ ํจ) ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ์ซ์, ๋ฌธ์์ด, ๋ถ๋ฆฌ์ธ, undefined ํ์ ์ ์ ์ธํ ๋ชจ๋ ๊ฒ์ด ๊ฐ์ฒด ๐ ๊ฐ์ฒด์ ๊ธฐ๋ณธ ๊ตฌ์กฐ ๐ ๊ฐ์ฒด์ ์์ฑ๊ณผ ์ ๊ทผ ๋ฐ ์์ // ๊ฐ์ฒด : ์ฌ๋ฌ ๋ฐ์ดํฐ๋ฅผ ํ๋์ ๋ณ์์ ์ ์ฅํ ์ ์๋ ๋ฐ์ดํฐ ํ์ // ๊ตฌ์กฐ -> {key1 : value1, ke..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bJUavV/btscSo3nvaP/fnUTZVZVNUD2cQWrctEdI1/img.png)
๐ ๋ฐฐ์ด ์ค์ต ๐ ํจ์ ํน์ ๊ธฐ๋ฅ์ ์ํํ๋ ์์ค ์ฝ๋๋ฅผ ํ๋๋ก ๋ฌถ์ด ํ์ํ ๋๋ง๋ค ํธ์ถํ์ฌ ์ฌ์ฉํ๊ธฐ ์ํ ๊ตฌ์กฐ // ํจ์ : ํน์ ๊ธฐ๋ฅ์ ์ํํ๋ ์์ค ์ฝ๋๋ฅผ ํ๋๋ก ๋ฌถ์ด์ // ํ์ํ ๋๋ง๋ค ์ฌ์ฉํ๊ธฐ ์ํ ๊ตฌ์กฐ // ํจ์ ์ ์ธ function intro() { console.log('์๋ ํ์ธ์. ์ ๋ ์ ์ง์์ ๋๋ค๐ฉ'); } // ํจ์ ํธ์ถ intro(); // ๋งค๊ฐ๋ณ์ function lunch(menu) { console.log(`์ ์ฌ์ผ๋ก๋ ${menu} ๋จน์์ต๋๋ค๐ฅฐ`); } lunch('๊ฐ์ธ ๋'); // ๋งค๊ฐ๋ณ์ + return๋ฌธ function dinner(menu){ return `์ ๋ ์ผ๋ก๋ ${menu} ๋จน์ ๊ฑฐ์์!๐ธ`; } console.log(dinner('๋ผ๋ฉด')); ์์ ๊ฐ์ด ํจ์๋ฅผ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bPyUzA/btscSotTl1g/KAuwhKvmZOoAyJdnbXIdhK/img.png)
๐ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ๋ณต๋ฌธ ์ค์ต for๋ฌธ ์ค์ต // 1. ์ฌ์ฉ์๋ก๋ถํฐ ์์ ์ซ์์ ๋ง์ง๋ง ์ซ์๋ฅผ ์ ๋ ฅ ๋ฐ๋๋ค. // 1-1. ์ ๋ ฅ์ฐฝ์ ์ ๋ ฅ : prompt ** ๋ฆฌํดํ์ String // 1-2. String -> Number : ํ๋ณํ // 1-3. ์ด๋๊ฐ์ ์ ์ฅ : ๋ณ์ let startNum = Number(prompt('์์ํ ์ซ์๋ฅผ ์ ๋ ฅํ์์ค.')); let endNum = Number(prompt('๋ง์ง๋ง ์ซ์๋ฅผ ์ ๋ ฅํ์์ค.')); // 2. ์์~๋ง์ง๋ง ์ซ์๊น์ง์ ํฉ์ ๊ตฌํ๋ค. let sum = 0; for(let i = startNum ; i > sum ์ถ๋ ฅ console.log(`${startNum}๋ถํฐ ${endNum}๊น์ง์ ํฉ์? >> ${sum}`); while๋ฌธ ์ค์ต ์๋ฐ์คํฌ๋ฆฝํธ์์ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/yB7SV/btsczKx7VG0/Buh1mK05ASKgo5AjZGCl3K/img.png)
๐ ๋ณ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๊ณต๊ฐ ์๋ฐ์ ๋ฌ๋ฆฌ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋์จํ๊ฒ ์๋ฃํ์ ์ฒดํฌํ๋ค. → ์๋ฐ์์๋ ๋ณ์๋ช ์์ ์๋ฃํ์ ์์ฑํ์ฌ ๋ณ์ ์ ์ธ์ ํ์ง๋ง → ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ์๋ฃํ์ ๊ด๊ณ ์์ด ๋ณ์์ ์ธ ํค์๋(let)์ ์ฌ์ฉํ์ฌ ๋ณ์๋ฅผ ์ ์ธํ๋ค. ๐ ๋ณ์ ์ ์ธ ํค์๋ 3๊ฐ์ง โ๏ธ var ๋ณ์ ์ฌ์ ์ธ ๊ฐ๋ฅ ๋ณ์ ์ฌํ ๋น ๊ฐ๋ฅ โ๏ธ let ๋ณ์ ์ฌ์ ์ธ ๋ถ๊ฐ๋ฅ ๋ณ์ ์ฌํ ๋น ๊ฐ๋ฅ โ๏ธ const ๋ณ์ ์ฌ์ ์ธ ๋ถ๊ฐ๋ฅ ๋ณ์ ์ฌํ ๋น ๋ถ๊ฐ๋ฅ // ๋ณ์ : ๋ฐ์ดํฐ๋ฅผ ๋ด์ ๊ณต๊ฐ let num = 3; // let -> ๋ณ์ ์ ์ธ ํค์๋ // num -> ๋ณ์ ์ด๋ฆ // 3 -> ๋ณ์์ ํ ๋น๋ ๊ฐ // ์ฌ์ ์ธ : ๊ฐ์ ๋ณ์ ์ด๋ฆ์ผ๋ก ๋ค์ ๋ณ์๋ฅผ ์ ์ธํ๋ ๊ฒ // ์ฌํ ๋น : ์ ์ธ๋ ๋ณ์์ ๋ค์ ๊ฐ์ ํ ๋นํ๋ ๊ฒ // var :..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/WYZLc/btscjjOVnrQ/kA0k8rwsJczrR3tDu7Gl11/img.png)
๐ JavaScript๋? ์น ํ์ด์ง๋ฅผ ํ๋ก๊ทธ๋๋ฐ์ ์ผ๋ก ์ ์ดํ๊ธฐ ์ํด์ ๊ฐ๋ฐ๋ ์ธ์ด ๊ฐ์ฒด(object) ๊ธฐ๋ฐ์ ์คํฌ๋ฆฝํธ ์ธ์ด HTML๋ก๋ ์น์ ๋ด์ฉ์ ์์ฑํ๊ณ , CSS๋ก๋ ์น์ ๋์์ธํ๋ฉฐ, ์๋ฐ์คํฌ๋ฆฝํธ๋ก๋ ์น์ ๋์์ ๊ตฌํ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฃผ๋ก ์น ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉ๋๋, Node.js์ ๊ฐ์ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ฒ์ธก ํ๋ก๊ทธ๋๋ฐ์์๋ ์ฌ์ฉํ ์ ์์ ๐ ECMAScript (ES1, 2,... ) ํ์คํ๋ ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์คํํ๊ธฐ ์ํด ๋ง๋ค์ด์ง ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ์ธ์ด๋ฅผ ๋ง๋ค ๋ ๋ฌธ๋ฒ์ ์ธ ์ฌํญ๋ค์ ์ ๋ฆฌํ ๋ฌธ์ ๐ ์๋ฐ์คํฌ๋ฆฝํธ ์์ฑ ๋ฐฉ์ ์น ๋ธ๋ผ์ฐ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ค๋ฅผ ์ฝ๊ณ ์ฒ๋ฆฌํ๋ ํด์๊ธฐ(JavaScript Interpreter)๊ฐ ์์. ๋ฐ๋ผ์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ค๋ ์น ๋ฌธ์..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/BRuxT/btrZGXEu5sf/GE71jN075OHUnglnrCAZLK/img.png)
์์(constant) ๋ณํ์ง ์๋ ๋ณ์๋ฅผ ์ ์ธํ ๋ let ๋์ const ์ฌ์ฉ const๋ก ์ ์ธํ ๋ณ์๋ฅผ '์์(constant)'๋ผ๊ณ ํจ ์์๋ ์ฌํ ๋นํ ์ ์์ผ๋ฏ๋ก ์์๋ฅผ ๋ณ๊ฒฝํ๋ ค๊ณ ํ๋ฉด ์๋ฌ ๋ฐ์ ์์๋ ๋๋ฌธ์์ ๋ฐ์ค๋ก ๊ตฌ์ฑ๋ ์ด๋ฆ์ผ๋ก ๋ช ๋ช ์ ์ด๋ฌธ if๋ฌธ else๋ฌธ์ ์ ํํด์ ์ฌ์ฉ else ๋ค์ ์ด์ด์ง๋ ์ฝ๋ ๋ธ๋ก์ ์กฐ๊ฑด์ด ๊ฑฐ์ง์ผ ๋ ์คํ๋จ ๋ง์ฝ ์กฐ๊ฑด์ด ๊ฑฐ์ง์ด๊ณ , else๋ฌธ์ ์ฐ์ง ์๋๋ค๋ฉด ์ฝ์์ ์๋ฌด๊ฒ๋ ํ๊ธฐ๋์ง ์์ else if๋ก ๋ณต์ ์กฐ๊ฑด ์ฒ๋ฆฌํ๊ธฐ ๋ฌธ์ ํ์ด point 1. ์ฒ์ ์ฝ๋ ์์ฑ์ return ๋์ console.log() ์ฌ์ฉ. ๊ทธ๋ ๊ฒ ํ ๊ฒฝ์ฐ ์๋์ undefined ์ถ๋ ฅ๋จ. result์ ๋ฐํ๋ ๊ฐ์ด ๋ค์ด๊ฐ์ผ ํ๋๋ฐ console.log๊ฐ ๋ค์ด๊ฐ 34๋ฒ ํ์ console...