์ ์ผ๊ฐํ ๋ชจ์์ ๋ณ์ ์ฐ์ด๋ณด์ธ์.!codepeneun-hye-kim/embed/wvXqWej?default-tab=html%2Cresult
1 ~ 255 ๊น์ง์ ์์๋ฅผ ๊ตฌํ์ธ์.โป ์์: ์ฝ์๊ฐ 1, ์๊ธฐ์์ ๋ฐ์ ์๋ ์ 1์ ์์๊ฐ ์๋๋๋ค.!codepeneun-hye-kim/embed/dyKNmbd?default-tab=html%2Cresult
2๊ฐ์ ์ ์๋ฅผ ์ ๋ ฅ ๋ฐ์ ์ฌ์น์ฐ์ฐ์ ํ๋ ํจ์๋ฅผ ์์ฑํด์ฃผ์ธ์.!codepeneun-hye-kim/embed/eYKzqGq?default-tab=html%2Cresult
๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ์ฌ 2๋จ๋ถํฐ 9๋จ๊น์ง ๊ตฌ๊ตฌ๋จ์ ์ถ๋ ฅํ์ธ์.!codepeneun-hye-kim/embed/oNyLrmg?default-tab=html%2Cresult
๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ ๋ณ์ฐ๊ธฐ 5์ค์ ์ถ๋ ฅํ์ธ์.console์ ํ์ธํ์ธ์ :)!codepeneun-hye-kim/embed/xxzOopB?default-tab=html%2Cresult
JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฅํ ๋ฌธ๋ฒ์ผ๋ก HTML๋ฌธ๋ฒ๊ณผ ํก์ฌํ ๋ฌธ๋ฒ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ UI ์์ ์ ๋ณด๋ค ์๊ฐ์ ์ผ๋ก ํธ๋ฆฌํ๊ฒ ์์ ์ ํ ์ ์๋ค.!codepeneun-hye-kim/embed/OJZPbON?default-tab=html%2Cresultbabel์ด๋ ์๋ฐ์คํฌ
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fahttps://ko.javascript.info/settimeout-setinterval
Content-Type์ ์๋ต ๋ด์ฉ์ ํ์ ์ด ๋ฌด์์ธ์ง ๋ฐํํ๊ฑฐ๋ POST๋ฅผ ํ ๋ Body์ ๋ฃ๋ ๊ฐ์ด ์ด๋ค ๋ฐ์ดํฐ ํ์ ์ธ์ง๋ฅผ ๋ช ์ํ๋ ๋ฑ ์ปจํ ์ธ ์ ํ์ด ์ค์ ๋ก ๋ฌด์์ธ์ง๋ฅผ ๋ํ๋ด๋ ์ญํ ์ ํ๋ค. ์ด ๊ฐ์ ํ์ค mime-type ์ค ํ๋์ ์ํ๋ค.์คํฐ๋ ํ๋์ ์ํด ๊ธฐ๋ก
๐ก JSON(JavaScript Object Notation)์ด๋? JSON์ ์ฌ๋์ด ์ฝ์ ์ ์๋ ํ ์คํธ ๊ธฐ๋ฐ์ ๋ฐ์ดํฐ ๊ตํ ํ์ค์ ๋๋ค. > JSON์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฅํ์ฌ ๋ง๋ค์ด์ก์ต๋๋ค. JSON์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด ํ๊ธฐ๋ฒ์ ๋ฐ๋ฆ ๋๋ค. JSON์ ์ฌ๋๊ณผ ๊ธฐ๊ณ๊ฐ
์์(Resource): URIํ์(Verb): HTTP Method ๐ํํ(Representations)ํด๋ผ์ด์ธํธ๊ฐ ์น ์๋ฒ์๊ฒ ์ฌ์ฉ์ ์์ฒญ์ ๋ชฉ์ ์ด๋ ์ข ๋ฅ๋ฅผ ์๋ฆฌ๋ ์๋จโญ๏ธ ์ฃผ์ ๋ฉ์๋ 5๊ฐ์งGET : ๋ฆฌ์์ค ์กฐํPOST : ์์ฒญ ๋ฐ์ดํฐ ์ฒ๋ฆฌ, ์ฃผ๋ก ๋ฐ์ดํฐ ๋ฑ๋ก์
MVC(modelโviewโcontroller)๋ ์ํํธ์จ์ด ๊ณตํ์์ ์ฌ์ฉ๋๋ ์ํํธ์จ์ด ๋์์ธ ํจํด์ ๋๋ค.์ด ํจํด์ ์ฑ๊ณต์ ์ผ๋ก ์ฌ์ฉํ๋ฉด, ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ก๋ถํฐ ๋น์ฆ๋์ค ๋ก์ง์ ๋ถ๋ฆฌํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๊ฐ์ ์์๋ ๊ทธ ์ด๋ฉด์์ ์คํ๋๋ ๋น์ฆ๋์ค ๋ก์ง์ ์๋ก ์ํฅ ์์ด
๐คทโโ๏ธ ์ API ์ ๋ณด๊ฐ ๋ณด์ด์ง ์์๊น? https://api.openweathermap.org/data/2.5/weather?lat=37.3900688&lon=127.1140152&appid=2834387742b25d5393a21e88fee8246a !code
parentNode๊ฐ ParentElement๋ณด๋ค ์์ ๊ฐ๋ ์ด๋ค.Node๋ ์๋ฌด DOM ๊ฐ์ฒด๊ฐ ๋ ์ ์๋ค.ex) ๋ด์ฅ DOM ์๋ฆฌ๋จผํธ(document, document.body...)๋ถ๋ชจ Node๋ฅผ ๋ฐํํ๊ณ ๋ถ๋ชจ๊ฐ ์๋ ๊ฒฝ์ฐ null์ ๋ฐํํ๋ค. Element๋ No
์ ๋ณด๋ฅผ ์ ์ถํ๊ธฐ ์ํ ๋ํํ ์ปจํธ๋กค์ ํฌํจํ๋ ๋ฌธ์ ๊ตฌํ์ฌ์ฉ์๋ก๋ถํฐ ์ ๋ ฅ์ ๋ฐ์ ์ ์๋ ์ ๋ ฅ ํ๋!codepeneun-hye-kim/embed/xxpEaNQ?default-tab=html%2Cresulttext: type์์ฑ์ ๊ธฐ๋ณธ๊ฐ, ํ ์ค๋ก ๋ ํ ์คํธ ํ๋pssw
์ํ์ ์ธ ์์์ ํจ์๋ฅผ ์ํ ์์ฑ๊ณผ ๋ฉ์๋๋ฅผ ๊ฐ์ง ๋ด์ฅ ๊ฐ์ฒด์ฃผ์ด์ง ์ซ์๋ฅผ ๋ฐ์ฌ๋ฆผํ ์์ ๊ฐ์ฅ ๊ฐ๊น์ด ์ ์ ๊ฐ์ ๋ฐํํฉ๋๋ค. -> ๋ฐ์ฌ๋ฆผ์ฃผ์ด์ง ์ซ์๋ณด๋ค ํฌ๊ฑฐ๋ ๊ฐ์ ์ซ์ ์ค ๊ฐ์ฅ ์ ์ ์ ์ ๊ฐ์ ๋ฐํํฉ๋๋ค. -> ์ฌ๋ฆผ์ฃผ์ด์ง ์ซ์์ ๊ฐ๊ฑฐ๋ ์์ ์ซ์ ์ค ๊ฐ์ฅ ํฐ ์ ์๋ฅผ ๋ฐ
๐ก setInterval์ด๋? ํน์ ์ฃผ๊ธฐ๋ง๋ค ๋ฐ๋ณตํ์ฌ ํธ์ถ, ๋ฐ๋ก ์คํ๋์ง ์๊ณ n์ด ํ ์ฒซ ์์์ด ๋๊ณ ๊ณ์ n์ด๋ง๋ค ๋ฐ๋ณตํ๋ค. 1. ๊ตฌ๋ฌธ 2. ์คํํ๊ธฐ !codepen[eun-hye-kim/embed/qBpEPZo?default-tab=html%2Cresult
๋ณ์๋ช ์ ์ง๊ด์ ์ผ๋ก ์์ ๋ณผ ์ ์๊ฒ ์์ฑํ๋ ๊ฒ์ด ์์ค์ ์ ์ง๋ณด์ ๋ฐ ์ฝ๋ ๊ฐ๋ ์ฑ์ ์ข์ต๋๋ค. a, b ๊ฐ์ ์๋ฏธ์๋ ๋ณ์๋ช ๋ณด๋ค๋ count(cnt), sum, total ๋ฑ์ ๋ณ์๋ช ์ผ๋ก ์์ฑํ๋ ์ต๊ด์ ๋ค์ฌ์ฃผ์ธ์.์ธ๋ฑ์ค ๋ณ์ (์์ฑํ์ ์์ค์์๋ ๋ณ์๋ช โaโ)๋
์ด๋ค ํ์๋ฅผ ์คํํ๋ ๊ฒ์ผ๋ก ์ด๋ฅผ ํตํด ์ฌ์ฉ์์ ์นํ์ด์ง๊ฐ ์ํธ ์์ฉํ ์ ์๋ค.์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ํตํ์ฌ ์ด๋ฒคํธ๊ฐ ๋ฐ์์ ์ํ๋ ํจ์์ ์ฐ๊ฒฐํ์ฌ ์คํ ์ํฌ ์ ์๋ค.google์ element html element mdn ๊ฒ์, Web APIs๋ผ๋ ๋ฌธ์ฅ์ด ํฌํจ๋๊ธ ์ฐพ๊ธฐ
์น ํ์ด์ง ๊ทธ ์์ฒด๋ฅผ ์๋ฏธํ๋ฉฐ, document๋ฅผ ํตํด ์น ํ์ด์ง์ ์กด์ฌํ๋ ๋ค์ํ HTML ์์์ ์ ๊ทผํ ์ ์๋ค.๋งค๊ฐ๋ณ์๋ก ์ ๋ฌ๋ ๊ฐ์ฒด์ ์์ฑ์ ์ถ๋ ฅ์์๋ฅผ JSON๊ณผ ๊ฐ์ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ์ถ๋ ฅํน์ id๋ฅผ ๊ฐ์ง ํ๋์ element๋ฅผ ๋ฐํid์ ์ ๊ทผํด์ ๊ฐ ๋ฐ๊พธ๊ธฐํน์ c