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

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..