Lang/Javascript (7) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ JS * ๋ณ์ ์ด๊ธฐํ์ ๋ํ์ฌ... JS ๋ฅผ ์ฐจ๊ทผ์ฐจ๊ทผ ๊ณต๋ถํ ์ฌ๋์๊ฒ๋ ์ด ํฌ์คํ ์ด ์ด์ด ์์์ง๋ ๋ชจ๋ฅด์ง๋ง... ๋ง์์ ์ค๋น ์์ด ๋ฐ๋ก ํฌ์ ๋ ํ์ฌ์ ๋๋ก์จ๋ ์ถฉ๊ฒฉ์ ์ธ ๋ถ๋ถ์ ๋ฐ๊ฒฌํ์ฌ ๊ธฐ๋กํ๋ค... ๋์ค์ ๋ด๊ฐ ์ด ํฌ์คํ ์ ๋ค์ ๋ณด๊ฒ ๋๋ค๋ฉด.. ์๊ณ ์์ง ์์๊น.. ํจ์๋ฅผ ํธ์ถ ํ์ ๋, ์ธ์์ ๊ฐ์ด ์๋ค๋ฉด(=์ธ์๊ฐ ์ด๊ธฐํ ๋๋ค๋ฉด) ํจ์ ๋ด๋ถ์์ ๊ฐ์ ์ด๋ฆ์ ๋ณ์๋ฅผ ์ .์ธ.๋ง ํ์ ๋๋ ์ธ์๋ก ์ ๋ฌ ๋ ๋ณ์๋ฅผ ์ฌ์ฉ(?)ํ๋ค. ์ด๋ป๊ฒ ์ค๋ช ํด์ผ ํ ์ง๋ ๋ง๋งํ๋ฐ.. ์์๋ฅผ ๋ณด๋ฉด ์! ํ ํ ๋ ์์๋ฌธ์ ๋ณด์ ์๋์ ๊ฐ์ ํจ์๋ฅผ ์์ฑํ๊ณ ๋ค์์ ํธ์ถํด๋ณด์. function test(a, b, c){ var a, b, c = true; console.log(`It's test ${a} / ${b} / ${c}`); } test(1); test(1, 2).. JS * Mapbox ์ฌ์ฉํ๊ธฐ ( ๊ธฐ์ด์ฌ์ฉ๋ฒ๋ง! ) ์ค๊ตญ์์๋ google map ์ฌ์ฉ์ด ์ ์๋๋ค๊ณ ํ๋ค. ๋ ์ ์จ๋ด์ ๋ชจ๋ฅด๊ฒ ์ง๋ง.. ์๋ ๋จ๋ค... ๊ทธ๋ฆฌํ์ฌ ์ฌ์ฉํ๊ฒ ๋ Mapbox ! ์ฌ์ค ์์ธํ ๋ด์ฉ์ ์๋ ๋ฌธ์๊ฐ ์ ์ ๋ฆฌ๋์ด ์์ด์ ํํ์ด์ง๋ฅผ ๋ฐฉ๋ฌธ ํ๋๊ฒ ๋น ๋ฅด๋ค. ๊ธฐ๋ณธ ๋ช๊ฐ์ง์ ๋ด์ฉ๋ง ์ ๋ฆฌํด ๋๋ค! Map ๐ Create map object and connect element by id. Clear default bottom-right info button if attributionControl option set false. Marker ๐ Draw marker on the map. const marker = new mapboxgl.Marker({ color: "#FFFFFF" }).setLngLat([-74.5, 40]) .addTo(map.. JS * JSON ๋ฐ์ดํฐ KEY๋ง UpperCase ํ๊ธฐ ! ( ์์ฉํ๋ฉด LowerCase ๋ ๊ฐ๋ฅ! ) JSON ๋ฐ์ดํฐ์ KEY ๋ค์ด๋ฐ์ด ์ ๋ง.. ๋๋ฌด ์์๋๋ผ.. ใ ์ฐพ์๋ณด๋ ์ค ์ข์ ์์ค๋ฅผ ๋ฐ๊ฒฌํ๊ณ ์ผ๋ถ ์์ ํด์ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์ค์นํ ๋งํ ๋ด์ฉ๋ ์๋๊ฑฐ ๊ฐ๊ตฌ.. ์ฝ๋์ ๋ฑ! ํ๊ณ ๋ชจ๋ ๋ด์ฉ์ด ๋ณด์ด๋ ์์ธ๋ด์ฉ์ ์๋ตํฉ๋๋ค :) key๋ฅผ ๋ชจ๋ ์๋ฌธ์๋ก ๋ฐ๊พธ๊ณ ์ถ์ผ์๋ฉด toUpperCase() ๋ถ๋ถ์ toLowerCase()๋ก ๋ฐ๊พธ๋ฉด ๋๊ฒ ์ ธ!! function jsonKeyUpperCase(object){ if(Array.isArray(object)){ // ๋ฆฌ์คํธ ํ์์ผ๋ก ๋์ด์ค๋ ๊ฒฝ์ฐ ์ฒ๋ฆฌ object.forEach((item, index) =>{ object[index] = Object.fromEntries(Object.entries(item).map(([key, value]) => [k.. JQuery * .off() ๊ฐ์ ์ด๋ฒคํธ ์ค์ ํน์ ์ด๋ฒคํธ๋ง ๋ ์๋ ์์๊น? ์ ๋ต์ด ๊ถ๊ธํ ํ ๋ ๊ฐ.๋ฅ.ํ.๋ค ๐ฅณ ๐ฅณ ๐ฅณ Don't shout, just clap!! .off()๋ ์ด๋ฒคํธ๋ฅผ ์ ๊ฑฐํฉ๋๋ค. .off('์ด๋ฒคํธ๋ช ')๋ ํด๋น ์ด๋ฒคํธ์ ๋ํ ๋ชจ๋ ์ด๋ฒคํธ๋ฅผ ์ ๊ฑฐํฉ๋๋ค. .off('์ด๋ฒคํธ๋ช ', ํธ๋ค๋ฌ)๋ ํด๋น ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ํด๋นํ๋ ๋ชจ๋ ์ด๋ฒคํธ๋ฅผ ์ ๊ฑฐํฉ๋๋ค. ์ด๋ ๋ ์ด๋ค ๊ฒ์ ์ญ์ ํด์ผ ํ๋์ง ์๋ ค์ค์ผ ํ๊ธฐ ๋๋ฌธ์ ์ต๋ช ํจ์์ ๊ฒฝ์ฐ ํน์ ์ด๋ฒคํธ ์ ๊ฑฐ๋ฅผ ํ๊ธฐ๋ ์ด๋ ต๋ค. ์๋ ์๋ค๊ณ ๋ด์ผํ๋. ๋์ถฉ ์ค๋ช ์ ์ ๋ ๊ฒ ๋์์๊ณ ๊ทธ๋ ๋ค๋ฉด ํน์ ์ด๋ฒคํธ๋ ์ด๋ป๊ฒ ๋๋ ๊ฑธ๊น? NameSpace ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค! ์ด๋ฒคํธ๋ฅผ ์ง์ ํ ๋ .on('์ด๋ฒคํธ๋ช .๋ค์์คํ์ด์ค', ~); ์๋ ๊ฒ ์ฒ๋ฆฌ๋ฅผ ํ๋ฉด! .off('์ด๋ฒคํธ๋ช .๋ค์์คํ์ด์ค'); ๋ฅผ ์ฌ์ฉํ์ฌ ํน์ ์ด๋ฒคํธ๋ง ๋ ์ ์๋ค! ์ฝ๋๋ก ๋ฐ๋ก ๋ณด๊ธฐ! Se.. JQuery * .one() ์ด๋ฒคํธ ํ๋ฒ๋ง ์ฌ์ฉํ๊ธฐ! ( feat .on() .off() ) ์ต์ด 1ํ๋ง ์ด๋ฒคํธ๋ฅผ ์คํํ๊ณ ์ดํ ์ด๋ฒคํธ ๋์์ ํ์ง ์์ต๋๋ค. ์ฌ์ฉ๋ฐฉ๋ฒ์ .on()๊ณผ ๋์ผํ๋ฉฐ ์์ธ ๋ด์ฉ์ ์๋ Documentation์ ์ฐธ๊ณ ํ์ธ์! .one() | jQuery API Documentation Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type. The .one() method is identical to .on(), except that the handler for a given element and event type is unbound after its first invo api.jquery.com ์ด์ ๋ช.. JS * ๋งค๊ฐ๋ณ์ ๊ฐ์ ํ์ธ ํจ์๋ฅผ ์ ์ํ๋ฉด์ overloading ์ ํ๋ ค๊ณ ํ๋๋ ๋์ง ์์๋ค. ๋งค๊ฐ๋ณ์์ ๊ฐ์์ ์๊ด์์ด ์ ์ผ ํ๋จ์ ์์ฑํ ํจ์๊ฐ ์คํ๋์๋ค. JS ์์๋ overloading ์ด ์๋๋ ๊ฒ์ธ๊ฐ ์ถ์ด์ ์ฐพ์๋ดค๋๋, ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ์์ ๊ฐ์ด ํ๋ฉด ์ ์ผ ์๋์ ์ ์ธํ ํจ์๊ฐ ๊ฐ์ ์ด๋ฆ์ ํจ์๋ฅผ ๋ฎ์ด์์๋ฒ๋ฆฝ๋๋ค. ๋ฐ๋ผ์ ํ๋์ ํจ์๋ก ์ฌ๋ฌ ๊ฐ์ ๋งค๊ฐ๋ณ์ ๋๋ ๋ค์ํ ์๋ฃํ์ ๋งค๊ฐ๋ณ์๋ฅผ ์ฒ๋ฆฌํ๋ ๊ธฐ๋ฒ์ด ํ์ํฉ๋๋ค. ๋ผ๊ณ ํฉ๋๋ค. type ์ ๋ํ ์ฒ๋ฆฌ๋ ๋ค์์ ํด๋ณด๋๋กํ๊ณ , ์ค๋์ ๋งค๊ฐ๋ณ์์ ๊ฐ์๋ฅผ ์์๋ณด๋ ๋ฐฉ๋ฒ์ ์์๋ณด์! arguments.length ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฅํ๋ค! ์ฌ์ฉ๋ฒ์!? function test('a', 'b'){ console.log(arguments.length); } JS * ์ฌ์ฉ์(?) Attribute ๋ง๋ค๊ณ ์ฌ์ฉํ๊ธฐ ( feat. html ) ์ค๋ ์ฝ๋ฉ์ ํ๋ค๊ฐ ์ถฉ๊ฒฉ์ ์ธ ๊ฒ์ ์๊ฒ๋์๋ค. html element์ ๋ด๊ฐ ์ํ๋ attribute๋ฅผ ๋ง๋ค ์ ์์๋ค ๐ฑ. ์ด๋๊น์ง ๊ทธ๊ฒ๋ ๋ชจ๋ฅด๊ณ .. 'input์์ alt์ ์ ๋ณด๋ฅผ ๋ฃ์ด๋์! ๊ทผ๋ฐ.. select box๋ radio๋ ์ด๋ป๊ฒ ํด์ผ ํ์ง'๋ผ๋ ๋ฉ์ถฉ์ด ๊ฐ์ ๊ณ ๋ฏผ์ ํ๊ณ ์์๋ค๋.. ์ญ์ ๊ณต๋ถ๋ง์ด ์ด๊ธธ์ด๋ค. ์ด๋ป๊ฒ ํ๋? html์์ attribute ๋ง๋ค๊ธฐ(?) ๊ทธ๋ฅ ์ ๋ ๊ฒ ์ํ๋ ์ ํธ๋ฆฌ๋ทฐํธ๋ช ์ ์ ๊ณ ๊ฐ์ ์ฃผ๋ฉด ๋์ด๋ค ๐คญ. Attribute ๊ฐ ๊ฐ์ ธ์ค๊ธฐ ์ ์์์์ ์จ๋ฆฌ๋จผํธ-์๋ณ์๋ #mine ์ ํธ๋ฆฌ๋ทฐํธ-์ด๋ฆ์ my-field ๊ฐ ๋๊ฒ ๋ค! Javascript document.querySelector('์จ๋ฆฌ๋จผํธ-์๋ณ์').getAttribute('์ ํธ๋ฆฌ๋ทฐํธ-์ด๋ฆ'); querySelecto.. ์ด์ 1 ๋ค์