์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
- IntelliJ
- ํด๋ฆฐ์ฝ๋
- JavaScript
- ์ฃผ๋์ด๊ฐ๋ฐ์
- ์ฑ ๋๋
- ํค๋ํผ์คํธ๋์์ธํจํด
- ๋ ์
- ์ฑ์
- ์ฑ์๋ง์ง
- ์ง์ฅ์ธ์ ์ฌ
- ์ฑ ์ฝ๊ธฐ
- ํค๋ํผ์คํธ
- ์ฑ์๋ณผ๊ฑฐ๋ฆฌ
- JAVA๊ฐ๋ฐ์
- ๊นจ๋ํ์ฝ๋
- ์ฑ์์ง์ฅ์ธ
- ๊ฐ์ฒด์งํฅ
- ์ง์ฅ์ธ
- ๊ฐ์ฒด์งํฅํ๋ก๊ทธ๋๋ฐ
- ๊ฐ๋ฐ์
- DesignPattern
- ์ฝ๋ฉ
- ์์
- Linux
- ๋์์ธํจํด
- ์ฑ์ํซํ
- Java
- ๋ ์์ผ์ง
- docker
- ์ค๋ธ์ ํธ
- Today
- Total
๋ชฉ๋กJavaScript (9)
๋ญ๋ฐ๊ฐ๋ฐ
1. window.onload 1) ํธ์ถ ์์ - ํ์ด์ง์ ๋ชจ๋ ์์๋ค์ด ๋ก๋๋ ์ดํ์ ํธ์ถ 2) ํน์ง - ํ์ด์ง์ ๋ชจ๋ ์์๋ค์ด ๋ก๋๋์ด์ผ ํธ์ถ๋๋ค. - ํ ํ์ด์ง์์ ํ๋์ window.onload()ํจ์๋ง ์ ์ฉ๋๋ค. - ๊ฐ์ฅ ๋์ค์ ํธ์ถ๋ ํจ์๋ง ์ ์ฉ 2. $(document).ready() 1) ํธ์ถ ์์ - DOM์ด ๋ก๋๋ ์์ 2) ํน์ง - ์ธ๋ถ ๋ฆฌ์์ค ๋ฐ ์ด๋ฏธ์ง ๋ก๋ฉ๊ณผ ์๊ด์์ด DOM๋ง ๋ก๋๋๋ฉด ๋ฐ๋ก ์คํ๋๋ค. - ์ค๋ณต ์ฌ์ฉํด๋ ์์๋๋ก ๋ชจ๋ ์คํ๋๋ค.
์ ๋ฌธ์ง ์ฃผ๋ถ // value๋ value๊ฐ function changeJob() { var jobSelect = document.getElementById("job"); var selectedJob = jobSelect.options[jobSelect.selectedIndex].value; // 1 } // text๋ text๊ฐ function changeJob() { var jobSelect = document.getElementById("job"); var selectedJob = jobSelect.options[jobSelect.selectedIndex].text; // ์ ๋ฌธ์ง }
let๊ณผ var์ JavaScript์์ ๋ณ์๋ฅผ ์ ์ธํ๋ ๋ฐ ์ฌ์ฉ๋๋ ๋ ๊ฐ์ง ํค์๋ ๋ ํค์๋๋ ์ค์ฝํ ๋ฐ ํธ์ด์คํ ๊ณผ ๊ด๋ จํ์ฌ ์ค์ํ ์ฐจ์ด๊ฐ ์์ต๋๋ค. ์ค์ฝํ: var๋ ํจ์ ์ค์ฝํ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ฆ, ๋ณ์๊ฐ ์ ์ธ๋ ํจ์ ๋ด์์๋ง ์ ํจํ๋ฉฐ ํจ์ ์ธ๋ถ์์๋ ์ ๊ทผํ ์ ์์ต๋๋ค. let์ ๋ธ๋ก ์ค์ฝํ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๋ธ๋ก ๋ด์์ ์ ์ธ๋ ๋ณ์๋ ๋ธ๋ก ๋ด์์๋ง ์ ํจํ๋ฉฐ ๋ธ๋ก ์ธ๋ถ์์๋ ์ ๊ทผํ ์ ์์ต๋๋ค. function example() { if (true) { var x = 5; // ํจ์ ์ค์ฝํ let y = 10; // ๋ธ๋ก ์ค์ฝํ } console.log(x); // 5 console.log(y); // ReferenceError: y is not defined } 2. ํธ์ด์คํ : var๋ ..

์ถ์ฒ : https://semicolon-dev.tistory.com/48 ์ํ๋ ๊ฐ๋ฐ ๋ฐฉํฅ 1. ํ ์ด๋ธ์ ๋ชจ๋ ์ค์ ์ ์ฅ ๋ฒํผ์ด ์์ 2. ์ ์ฅ ๋ฒํผ์ ๋๋ ์ ๋ ํด๋น ์ค์ ์๋ ๊ฐ์ jQuery ์์์ ๋ถ๋ฌ์์ผ ํจ ์ฐ์ ํด๋น ๊ฐ๋ฐ ๋ฐฉํฅ๋๋ก ๊ฐ๋ฐ์ ์งํํ๊ธฐ ์ํด ์๋์๊ฐ์ ํ ์ด๋ธ์ ์์ฑํ์์ต๋๋ค. ์ฃผ์ ์ค๋ช ์ ์ฅ๋ฒํผ ์ ์ฅ ์ ์ฅ ์ ์ฅ $('.saveBtn').on('click', function() { //ํ์ฌ row์ ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ var thisRow = $(this).closest('tr'); //์ฃผ์ input ๊ฐ ๊ฐ์ ธ์ค๊ธฐ var addr = thisRow.find('td:eq(0)').find('input').val(); //์ฆ์ก input ๊ฐ ๊ฐ์ ธ์ค๊ธฐ var txt = thisRow.find(..

forEach() MDN์ฐธ์กฐ ์ฃผ์ด์ง ํจ์๋ฅผ ๋ฐฐ์ด ์์ ๊ฐ๊ฐ์ ๋ํด ์คํํจ. array1.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c" for ๋ฐ๋ณต๋ฌธ์ forEach()๋ก ๋ฐ๊ฟ ์ ์๋ค const items = [ 'item1', 'item2', 'item3' ]; const copy = []; // ๋ฐ๋ณต๋ฌธ for (let i =0; i { if (Array.isArray(i)) { result.push(...flatten(i)) } else { result.push(i) } }) return result } // Usage const nested =..
Javascript์์ ๋ฌธ์์ด ์ค ๋ฐ๊ฟํ๋ 2๊ฐ์ง ๋ฐฉ๋ฒ! escape ๋ฌธ์ ์ฌ์ฉํ๊ธฐ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด(Template literals) ์ฌ์ฉํ๊ธฐ 1. escape ๋ฌธ์ ์ฌ์ฉํ๊ธฐ ๋ฌธ์์ด์ New Line์ ๋ปํ๋ '\n' ์ด์ค์ผ์ดํ ๋ฌธ์๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ์ค๋ฐ๊ฟ๋ฉ๋๋ค. const str = 'a\nb\nc\n'; document.getElementById("result").innerHTML=str; 2. ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด(Template literals) ์ฌ์ฉํ๊ธฐ const str =`a b c`; document.getElementById("result").innerHTML=str; ๋ฌธ์์ด ์์ escape๋ฌธ์์ธ '\n'์ ์ฌ์ฉํ๋ฉด, ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋ ๋จ์ ์ด ์์ต๋๋ค. ๋ฌธ์์ด์ ์ ์ํ ๋ ๋ฐ์ดํ( ' ๋๋ " )๋ฅผ ์ฌ..
splice ํจ์๋ฅผ ์ฌ์ฉํ๋ค. array.splice(start, deleteCount [, item1 [, item2 [, ...] ] ]) start : ๊ธฐ์ค์ด ๋๋ ๋ฐฐ์ด์ index deleteCount : splice ํจ์๋ ๋ฐฐ์ด ์ค๊ฐ์ ๊ฐ์ ์ญ์ ํ ๋๋ ์ฌ์ฉํ๋ค. ๊ฐ์ ์ญ์ ํ ๋๋ start์ ์ค์ ํ index๋ก ๋ถํฐ ๋ช ๊ฐ์ ์์๋ฅผ ์ ๊ฑฐํ ์ง ์ง์ ํ๋ค. ๊ฐ์ ์ถ๊ฐํ๋ ๊ฒฝ์ฐ์๋ ‘0’์ผ๋ก ์ค์ . item : ์ค์ ํ ๊ฐ
true && expression ํญ์ expression false && expression ํญ์ false ๋ฐ๋ผ์ && ๋ค์ element๋ ์กฐ๊ฑด์ด true์ผ ๋ ์ถ๋ ฅ๋๋ค. ์กฐ๊ฑด์ด false๋ผ๋ฉด react๋ ๋ฌด์ํ๊ณ ๊ฑด๋ ๋. ์ถ์ฒ https://ko.reactjs.org/docs/conditional-rendering.html ์กฐ๊ฑด๋ถ ๋ ๋๋ง – React A JavaScript library for building user interfaces ko.reactjs.org

๋๋ ๋ฆฌ์กํธ์์ ๋ ๋๋ง ์ด์ผ๊ธฐ๋ง ๋์ค๋ฉด ์ง๋ ๊ฒ์ ๋จน๋๋ค. ๊ฐ์ฅ ์ด๋ ค์ด ๋ถ๋ถ์ด๊ธฐ ๋๋ฌธ์ด๋ค. [์ํฉ] ๋ถ๋ชจ - ์์ ์ปดํฌ๋ํธ๊ฐ ์์ผ๋ฉด ๋ถ๋ชจ์์ ๋ฒํผ ํด๋ฆญ ์, ์์ ์ปดํฌ๋ํธ๊ฐ ๋ฐ๋์ด์ผ ํ๋ค. ๊ทธ๋ฐ๋ฐ ๋ ๋๋ง์ด ์๋๊ณ ์์ ์ปดํฌ๋ํธ๊ฐ ๋ฐ๋ก ๋ฐ๋์ง ์์. ์ฐ๋ฆฌ๋ ๋ ๋๋ง์ด ํ์ํ ์ํฉ! ๊ทธ๋ฐ๋ฐ ๊ตฌ๊ธ๋ง ํด๋ณด๋ฉด ๋ค ๋ ๋๋ง์ ๋ง๋ ๊ธ๋ค ๋ฟ์ด์๋ค. ํด๊ฒฐํ ๋ฐฉ๋ฒ์ ์ฌ์ด ๋ฐฉ๋ฒ. [ํด๊ฒฐ] ๋ณด์ฌ์ค ๊ฐ์ด ๋ฐ๋์๋ค๋๊ฑธ ์์ ์ปดํฌ๋ํธ๊ฐ ์ ์ ์๋๋ก "๊ฐ์ด ๋ฐ๋"์ state๋ก ๊ด๋ฆฌํ๋ค. // ๋ถ๋ชจ๊ฐ ์์์๊ฒ ์ฐ๋ฆฌ ๋ณํ์ด! ๋ผ๊ณ ์๋ ค์ค ํํธ const [initPage, setInitPage] = useState(false); useLayoutEffect(() => { setInitPage(true); }); if(์์ ์ด ์ฑ๊ณตํ๋ฉด)..