๋ชฉ๋ก๋ถ๋ฅ ์ ์ฒด๋ณด๊ธฐ (222)
Hello creators ๐
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ๋ฐ๋ฆ์ด ๋ฐ์ดํฐ๋ก ์ด๋ ๊ฒ ๋ง๋ค๊ธฐ ์ ๋ฐ์ดํธ ๋ฒํผ ๋๋ฅด๋ฉด -> ๋์ค๊ฒ 5๊ฐ ๋ฏธ๋ง์ด๋ฉด -> ๋นจ๊ฐ์ โ ก. ๋ฐ๋ฆ์ด API ๋ฐ์ดํฐ ๊ตฌ์กฐ ํ์ธ 1. ํด๋ด ๋ฐ๋ฆ์ด API http://spartacodingclub.shop/sparta_api/seoulbike ๋ณด๋ฉด์ ํ์ธํ ๊ฒ ์ ์ฒด ๋ฐ์ดํฐ ๊ตฌ์กฐ ํ์ํ ํญ๋ชฉ ์ด๋ฆ ์ฒดํฌ โ ข. ajax ํด์ฆ 1 1. ๊ธฐ๋ณธ ์ ๊ณต ์ฝ๋ jQuery + Ajax์ ์กฐํฉ์ ์ฐ์ตํ์! 2. ์์ธ์ OpenAPI(์ค์๊ฐ ๋ฐ๋ฆ๊ธฐ ํํฉ)๋ฅผ ์ด์ฉํ๊ธฐ ๋ชจ๋ ์์น์ ๋ฐ๋ฆ์ด ํํฉ์ ๋ณด์ฌ์ฃผ์ธ์ ์ ๋ฐ์ดํธ ๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ์ง์ ๋ค ์๋ก ์์ฌ์ ธ์ผ ํฉ๋๋ค. ์ ๋ฐ์ดํธ ๊ฑฐ์น๋ ์์น ๊ฑฐ์น๋ ์ ํ์ฌ ๊ฑฐ์น๋ ๋ฐ๋ฆ์ด ์ 102. ๋ง์์ญ 1๋ฒ์ถ๊ตฌ ์ 22 0 103. ..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ๋ค์ด๋ฒ์์ enter ์น๋ ๊ฒ ์ฒ๋ผ ==javascript ์์ ์ด๋ป๊ฒ ์๋ฒ์ ์์ฒญ ํ๋์ง!== ์์๋ณด๊ธฐ โ ก. (๋ณต์ต) JSON ํ์ผ ํ์ ๋ง๋ณด๊ธฐ 1. ์ด๋ ๊ฒ list, dictionary ํฉ์ณ์ ธ์ ๋ด๋ ค์ค๋ ํ์ = JSON ํ์ผ ํ์ โ ก. Ajax ๊ธฐ๋ณธ 1. ๋์ ์ ==jquery ๊ฐ ์ด๋ฏธ ์ค์น== ๋์ด ์์ด์ผ ํจ 2. ajax ๊ธฐ๋ณธ๊ณจ๊ฒฉ a. ์์ฑ์์น javascript ๋ฅผ ํ์ฉํ๋ ๊ฑฐ๋๊น, ==script ํ๊ทธ== ์ ์์ฑ b. ajax ๊ธฐ๋ณธ๊ณจ๊ฒฉ ์ฝ๋ #ajax_๊ธฐ๋ณธ๊ณจ๊ฒฉ_์์ ์ฝ๋ $.ajax({ type: "GET", url: "์ฌ๊ธฐ์URL์์ ๋ ฅ", data: {}, success: function (response) { console.l..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๋ด๋ ค์ฃผ๋ ==ํํ== ์ดํดํ๊ธฐ โ ก. Jsonview ํ์ฉํด์ JSON ๋ฐ์ดํฐ๋ฅผ ์์๊ฒ ๋ณด๊ธฐ 1. ํด๋ด ์์ธ์ ๋ฏธ์ธ๋จผ์ง openapi http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 ์ด๊ฑธ ์ข ๋ ์์๊ฒ ๋ณด๋ ค๋ฉด -> Jsonview ๋ก #jsonview_ํฌ๋กฌํ์ฅํ๋ก๊ทธ๋จ_์ค์นurl https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ ํด์ -> ์ถ๊ฐ ๊ทธ๋ฌ๋ฉด, ์์๊ฒ ๋ณด์ RealtimeCityAir ์..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ์ง๊ธ๊น์ง ๋ฐฐ์ ๋๊ฑฐ ํ์ฉํด์ ํด์ฆ ํ๊ธฐ โ ก. ํด์ฆ ํ๊ธฐ ์ฌ์ ํ์ผ ๋ง๋ค๊ธฐ 1. ์ด ์ฝ๋ ์ค๋ํซ ๋ณต์ฌํด์ ์์ jQuery + Javascript์ ์กฐํฉ์ ์ฐ์ตํ์! 1. ๋น์นธ ์ฒดํฌ ํจ์ ๋ง๋ค๊ธฐ 1-1. ๋ฒํผ์ ๋๋ ์ ๋ ์ ๋ ฅํ ๊ธ์๋ก ์ผ๋ฟ ๋์ฐ๊ธฐ [์์ฑ๋ณธ]1-2. ๋ฒํผ์ ๋๋ ์ ๋ ์นธ์ ์๋ฌด๊ฒ๋ ์์ผ๋ฉด "์ ๋ ฅํ์ธ์!" ์ผ๋ฟ ๋์ฐ๊ธฐ ํด๋ฆญ 2. ์ด๋ฉ์ผ ํ๋ณ ํจ์ ๋ง๋ค๊ธฐ 2-1. ๋ฒํผ์ ๋๋ ์ ๋ ์ ๋ ฅ๋ฐ์ ์ด๋ฉ์ผ๋ก ์ผ๋ฟ ๋์ฐ๊ธฐ 2-2. ์ด๋ฉ์ผ์ด ์๋๋ฉด(@๊ฐ ์์ผ๋ฉด) '์ด๋ฉ์ผ์ด ์๋๋๋ค'๋ผ๋ ์ผ๋ฟ ๋์ฐ๊ธฐ [์์ฑ๋ณธ]2-3. ์ด๋ฉ์ผ ๋๋ฉ์ธ๋ง ์ผ๋ฟ ๋์ฐ๊ธฐ ํด๋ฆญ 3. HTML ๋ถ์ด๊ธฐ/์ง์ฐ๊ธฐ ์ฐ์ต 3-1. ์ด๋ฆ์ ์ ๋ ฅํ๋ฉด ์๋ ๋์ค๊ฒ ํ๊ธฐ [์์ฑ..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ '๊ธฐ๋กํ๊ธฐ' ๋ฒํผ์ ๋๋ฅด๋ฉด -> 'posting ๋ฐ์ค' ๊ฐ ๋์ด '๋ซ๊ธฐ' ๋ฒํผ์ ๋๋ฅด๋ฉด -> 'posting ๋ฐ์ค' ๊ฐ ๋ค์ด๊ฐ โ ก. ํจ์ ๋ง๋ค์ด์ ๋ถ์ฌ๋ณด๊ธฐ 1. ์ ๋ต 1) ์ฌ์ด ํจ์๋ก ๊ธฐ๋ณธ logic ์ ์์ฑ = [๋ผ๋ ์์ฑ] 2) ์ข ๋ ๋ณต์กํ ํจ์๋ก ์ํ๋ [๋ํ ์ผ ์์ฑ] 2. [๋ผ๋ ์์ฑ] open_box, close_box ํจ์ ๋ง๋ค์ด์ -> ๊ธฐ๋กํ๊ธฐ ๋ฐ ๋ซ๊ธฐ ๋ฒํผ์ ๋ถ์ด๊ธฐ 1) ํจ์ ๋ง๋ค๊ธฐ 2) ๊ธฐ๋กํ๊ธฐ ๋ฒํผ์ ๋ถ์ด๊ธฐ ๋ด ์์ ์ต๊ณ ์ ์ํ๋ค ๐ฌ ์ํ ๊ธฐ๋กํ๊ธฐ โ๏ธ 3) ๋ซ๊ธฐ ๋ฒํผ์ ๋ถ์ด๊ธฐ ๊ธฐ๋กํ๊ธฐ๐ ๋ซ๊ธฐ๐ 4) ๊ฒฐ๊ณผ๋ฌผ 3. [๋ํ ์ผ ์ถ๊ฐ] 1) jQuery ์ฌ์ฉํด์ ๋์ผ ํจ์์..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ํ๊ณ ์ ํ๋ ๊ฒ jQuery ==์์ฃผ ์ฐ๋ ๊ฒ== ํ์ต input ๋ฐ์ค์ ๊ฐ์ ๊ฐ์ ธ์๋ณด๊ธฐ div ๋ณด์ด๊ธฐ / ์จ๊ธฐ๊ธฐ ํ๊ทธ ๋ด html ์ ๋ ฅํ๊ธฐ โ ก. input ๋ฐ์ค์ ๊ฐ์ ๊ฐ์ ธ์๋ณด๊ธฐ 1. ๋ญ ํ๊ฑฐ์ผ? input box ์ ์๋ URL ๊ฐ ๊ฐ์ ธ์ค๊ธฐ ๋๋ ์ ๋ ฅํ๊ธฐ 2. ์ด๋ป๊ฒ ์ ๊ทผํ ๊ฑฐ์ผ? URL ๊ฐ ์ ๊ฐ์ ธ์ค๋ ค๋ฉด -> URL ์ '์ง์นญ' ํ ์ ์์ด์ผ ํจ. '์ง์นญ' = ์ด๋ฆํ, ์งฑ๊ตฌ์ ๋ฐ์ง์์ ์งฑ๊ตฌ! =='CSS== ์์ ์ง์นญ' ์ =='Class'== ๋ก ํ์ ==jQuery== ์์๋ =='id'== ๋ก ์ง์นญ ํจ โญโญโญโญโญ ์ํ URL ๊ฐ์ ๊ฐ์ ธ์ค๊ธฐ ์ํด ID ๋ฅผ url ๋ก ์ค์ ๊ทผ๋ฐ ๊ถ๊ธํ..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ํ๊ณ ์ ํ๋ ๊ฒ jQuery ์์ ๋ฐ ํ์์ฑ ## โ ก. jQuery ์ดํด --- 1. ์์ ==HTML ์์๋ฅผ ์กฐ์== ํ๋ javascript ๋ฅผ ๋ฏธ๋ฆฌ ์์ฑํด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. Cf. ๋ถํธ์คํธ๋ฉ์ CSS ๋ผ์ด๋ธ๋ฌ๋ฆฌ! ์๋ฅผ ๋ค๋ฉด ์ด๋ ๊ฒ ์ง๊ด์ ์. ๋ญ๊ฐ ๊ฐ์ถ๋ผ! -> hide ๋ฅผ ์ด๋ค. โ ข. ์ฌ์ฉํด๋ณด๊ธฐ jQuery CDN ๋ถ๋ถ ์ฐธ๊ณ ํด์ ์ํฌํธํ๊ธฐ #code_snipet โญโญโญ ํด๋น URL ์ ์ : https://www.w3schools.com/jquery/jquery_get_started.asp ์ด๊ฑฐ ํ์ค ์ถ๊ฐ ํ๋ฉด ๋ผ ๐ ๋ค๋ง, ๋ถํธ์คํธ๋ฉ 5.0 ํ ํ๋ฆฟ ์๋ ์ด๋ฏธ jQuery ๊ฐ ์ถ๊ฐ๋์ด ์์. ๐ญ What i learned ๋ถํธ์คํธ๋ฉ 5.0 ํ ํ๋ฆฟ์ ์ค์นํ๋ฉด -..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ํ๊ณ ์ ํ๋ ๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ํํ์ด์ง '์์ง์' ์ ์ฃผ๊ธฐ ex) ๋ฒํผ ํด๋ฆญ ํ์ ๋ > ๋์๋ค ๋ค์ด๊ฐ๋ค. ex) ์์ธ์ ๋ฐ์ดํฐ ๋ฐ์์์ > ๋ด ํํ์ด์ง์ ์ด์ฉํ๊ธฐ ์๋ฐ ์คํฌ๋ฆฝํธ ๋ณต์ต โ ก. ์๋ฐ์คํฌ๋ฆฝํธ ๋ณต์ต : ํ์ง ํจ์ ๋ง๋ค๊ธฐ ํด๋ณด๊ธฐ ๋๋ ์ ๋ ๋ง๋ค -> 'ํ' ์ง' 'ํ' '์ง' ๋์ค๊ฒ ํ๊ธฐ ์์ฑํ ์ฝ๋ ๐ ๋ด ์์ ์ต๊ณ ์ ์ํ๋ค ๐ฌ ์ํ ๊ธฐ๋กํ๊ธฐ โ๏ธ ๊ฒฐ๊ณผ๋ฌผ ์ถ๊ฐ์ ์ผ๋ก ๋ฐฐ์ธ ๊ฒ ๋ฒํผ ์๊น ๋ฐ๊พธ๊ณ ์ถ์ ๋ ํ์ํ๊ฒ -> jQuery div ๋ฐ์ค ํ๋ ๊ฐ์ถ๊ณ ์ถ์ผ๋ฉด ํ์ํ๊ฒ -> jQuery ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๐ญ What i learned ์์ด๋ฅผ ์ฝ๋ ๊ฒ ์ฒ๋ผ, ํด์์ด ๋๋ ๋๋์ด ์ค์ํ๋ค. ๋ด๊ฐ..
์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) ์ดํด ํ๊ณ ์ ํ๋ ๊ฒ 'html, css, Javascript ๋ฌธ๋ฒ' ์ ๋ํ ์ดํด ๋ถํธ์คํธ๋ฉ ์ฐ๊ธฐ ๋ง๋ค๊ณ ์ ํ๋ ๊ฒ ํฌ๋ช ๋ก ์์ 1๏ธโฃ ์ฌ์ ์ค๋น homework.html ํ์ผ ๋ง๋ค๊ธฐ ๋ถํธ์คํธ๋ฉ ์์ ํ ํ๋ฆฟ ๋ฃ๊ธฐ ๋ถํธ์คํธ๋ฉ ์์ ํ ํ๋ฆฟ ์ฝ๋๐ ์ด๊ฑธ๋ก ์์ํด๋ณด์ฃ ! 2๏ธโฃ ์ด์ ์์ ๊ฒฐ๊ณผ๋ฌผ์์ ๊ฐ์ ธ์ค๊ธฐ ์คํ๋ฅดํํผ๋์ ์์ ๊ฐ์ ธ์ค๊ธฐ ํ์ ์๋ ๊ธฐ๋ฅ๋ค ์ญ์ ํต์ฌ์ ์ธ์์ ์ฐ๋๊ฒ ์๋๋ผ ๊ฐ์ ธ์์, ๊ตฌ์กฐ ํ์ ํ๊ณ , ํ์ํ๊ฑฐ, ๋ฐ๊ฟ ๋ผ๋๊ฑฐ โญโญโญโญโญโญโญโญ ํ์น์ฝ ์ฌ์ง ํ๊ณ ์ถ์ผ๋๊น, ๊ทธ๊ฑธ๋ก ๋ฐ๊พธ๋๊ฑฐ โญโญโญโญโญ ๐ DJ ์์ ์์ โ ์ฌ์ง ๋ฐ๊พธ๊ธฐ background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0..
์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) ์ดํด ํ๊ณ ์ ํ๋ ๊ฒ 'Javascript ๋ฌธ๋ฒ' ์ ๋ํ ์ดํด ๋ง๋ค๊ณ ์ ํ๋ ๊ฒ ๋ฏธ์ธ๋จผ์ง๊ฐ 40 ๋ฏธ๋ง์ธ ์ง์ญ๋ง ๋ฝ์๋ด๊ธฐ Javascript ์์ฃผ ๋์ค๋ ํจํด ์ตํ๊ธฐ ์์ฃผ ๋์ค๋ ํจํด ํ์ต์ ์์ด, ์์ฃผ ๋์ค๋ ๊ฒ์ ๊ต์ฅํ ์ค์ํจ. 1๏ธโฃ console.log ๋ฅผ ํตํด ๋ฐ์ดํฐ๊ฐ ์ด๋ป๊ฒ ์๊ฒผ๋์ง ํ์ ํ๊ธฐ let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "๋์ฌ๊ถ", MSRSTE_NM: "์ค๊ตฌ", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "์ข์", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: ..