์ฝ๋ฉ ๊ธฐ์ด ๋ฟ์๊ธฐ ๋ง์ง๋ง Chapter 03.
ํํํ JavaScript!
์น ํ๊ฒฝ์์ ์ฌ์ฉํ ์ ์๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก์จ ๊ฐ์ฅ ๊ฐ๋ ฅํ ์๋ฐ์คํฌ๋ฆฝํธ,
๋ฐฐ์ฐ์ง ์์ ์ด์ ๊ฐ ์๊ฒ ์ฃ ?

[ํํํ JavaScript]๋์ โจ
๐๐ป ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ฝ๋๋ฅผ ์์ฑํ ๋ ๊ผญ! ์์์ผ ํ ๊ตฌ๋ ์๋ฆฌ์ ์ง์๋ค์ ์ ๋ฌํด์.
๐๐ป ์ค์ค๋ก ๋ฌด์ธ๊ฐ๋ฅผ ๋ง๋ค ์ ์๋ ๊ธฐ๋ฐ์ ๋ค์ง๊ฒ ํด๋๋ ค์.
๐๐ป ๋ค์ํ ํ๋ ์์ํฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์กด์ฌํ๋ ๋งํผ ์ฌ๋ฌ ๋ฐฉํฅ์ผ๋ก ๋ป์ด๋๊ฐ ์ ์๋ ํ ๋๋ฅผ ๋ค์ ธ๋๋ ค์.
๐๐ป ๋จ์ํด ๋ณด์ด๋ ๊ธฐ๋ฅ์ ๋ณต์กํ ๋ก์ง์ ์ง์ ์ดํดํ๊ณ ๊ฐ๋ฐ์ ์ํ ์ฝ๋ฉ ๋ฅ๋ ฅ๊ณผ ์ปดํจํฐ์ ์ฌ๊ณ ๋ฅ๋ ฅ์ ๋ฐ๋ฌ์ํฌ ์ ์์ด์.
๋ฌด์์ด๋ ์ฒ์ ํ์ตํ ๋
๋น ๋ฅธ ์ดํด๊ฐ ๋๋ฐ๋์ด์ผ ์ข์์ ๐
Step 01.
๊ธฐ์ด๋ถํฐ ๊ผผ๊ผผํ๊ณ ํํํ๊ฒ!

์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฌ๋ฌ ๋ฐฉํฅ์ผ๋ก ํผ์ ธ ๋๊ฐ ์ ์๋ ์ธ์ด์ธ ๋งํผ ์ฝ๋๋ฅผ ์์ ๋กญ๊ฒ ์์ฑํ ์ ์๋ค๋ ํน์ง์ ๊ฐ์ ธ์. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋์ฑ ๊ทธ ๊ธฐ์ด๊ฐ ์ค์ํ์ฃ .
์ด ๊ฐ์๋ Javascript๊ฐ ๋์ํ๋ ๊ธฐ๋ณธ์ ์ธ ์๋ฆฌ, ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ ๋ฑ ๊ทธ ๊ธฐ์ด๋ฅผ ์ค์ ์ ์ผ๋ก ๋ค๋ฃจ๊ณ ์์ด์. ์์ฑ๋ ์ฑ์ ๋ฐ์ ๊ฐ๋ ๊ฒ์ด ์๋ ์ฑ์ ์์๊ฐ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๋ ๊ฒ์ด์ฃ .
๋ํ, Chrome์ ๊ฐ๋ฐ์ ๋๊ตฌ, debugger, vscode๋ฅผ ์ฌ์ฉํด๊ฐ๋ฉฐ ์ค์ค๋ก ์ฑ์ ์์ ์ฌ๋ฆด ์ ์๋๋ก ํ์ํ ๋๊ตฌ๋ค์ ํจ๊ป ์์๊ฐ ๊ฑฐ์์.
Step 02.
๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ์์๋ด
์๋ค.

D-day Counter๋ฅผ ๋ง๋ค๊ธฐ ์ํด ์ซ์, ๋ฌธ์ ๋ฑ์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ์ค์ ์ ์ผ๋ก ํ์ตํด์. ๊ทธ๋ฆฌ๊ณ ํ๋์ ๊ธฐ๋ฅ์ ๋ง๋ค๊ธฐ ์ํ ๋๊ตฌ, ํจ์๋ฅผ ์ ์ํ๊ณ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์ธ ๊ฑฐ์์.
์ฐ๋ฆฌ๊ฐ ์ง์ ๋ง๋ ๋๊ตฌ์ธ ํจ์๋ฅผ ์กฐ๋ฆฝํด D-day Counter๋ฅผ ์์ฑ์ํค๊ฒ ๋๋๋ฐ, ๊ทธ ๊ณผ์ ์์ ๋ฐ๋ณต์ ์ธ ์ฝ๋์ ์์ ์ค์ผ ์ ์๋ ๋ฐฉ๋ฒ, ์ฝ๋ ์คํ์ ๋ถ๊ธฐ์ ์ ๋๋๋ ๋ฐฉ๋ฒ ๋ฑ์ ํจ๊ป ํ์ตํ๊ฒ ๋์ฃ .
์ฐ๋ฆฌ๋ ๋ค์ํ ๋ฌธ์ ๋ค์ ์ง๋ฉดํ๊ณ , ํด๊ฒฐํ ์ ์๋ ๊ฐ๋
์ ์์๋ณด๊ณ ์ฝ๋์ ์ ์ฉ ์ํค๋ฉด์ ์ด๋ก ์ ์ผ๋ก ์ดํด๋ณธ ๊ฐ๋
์ด ์ค์ ๋ก ์ด๋ป๊ฒ ๋์ํ๊ฒ ๋๋์ง ์ ์ ์๊ฒ ๋ ๊ฑฐ์์.
Step 03.
์๋ฐ์คํฌ๋ฆฝํธ ๊ตฌ๋ ์๋ฆฌ๋ฅผ ์์๋ณด๊ณ , ์ง์ ์ด์ฉํด์.

Javascript๋ก HTML์ ์กฐ์ํ ์ ์์๋ ์ด์ ์ ๋ํด ์์๋ณด๊ณ , Todo list๋ฅผ ๋ง๋ค๊ธฐ ์ํด Javascript์ ๊ตฌ๋ ์๋ฆฌ, ์ปดํจํฐ์ ํต์ ๋ฐฉ์ ๋ฑ ์ฌ๋ฌ๊ฐ์ง ์ค์ต์ ํตํด ์ง์ ์์๋ด
๋๋ค.
์ด๋ฌํ ๊ฐ๋
๋ค์ ์กฐํฉํด openWeatherMap๊ณผ Geolocation ๋ฑ์ ํตํด์ ๋ ์จ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋ ์ค์ต๋ ํจ๊ป ์งํํ ๊ฑฐ์์. ์ด๋ฅผ ํตํด ์ฐ๋ฆฌ ๋์ ๋ณด์ด์ง ์๋ ๋ฐ์ดํฐ์ ํต์ ์ด ์ด๋ป๊ฒ ์ด๋ฃจ์ด์ง๋์ง ์ง์ ํ์ธํ ์ ์๊ฒ ๋์ฃ .
์ดํ, ํต์ ์ ํตํด ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ Javascript์ ๊ตฌ๋ ์๋ฆฌ๋ฅผ ์ด์ฉํด์ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ํ์ตํ๊ณ ์ด๋ฅผ ์ง์ ์ฝ๋์ ์ ์ฉํฉ๋๋ค.
[ํํํ JavaScript] ์๊ฐ ํ์
์ด๋ฐ ์
๋ฌธ์๊ฐ ๋ ์ ์์ด์.๐ช๐ป

์ ๊น! ์๊ฐ ์ ํ์ธํด์ฃผ์ธ์. ๐ข
๐ก ์ผ๊ณผํ๋ฅผ ๋ง๋ค์ด ๊ท์น์ ์ผ๋ก ๊พธ์คํ ํ์ตํ์๊ธธ ๊ถ์ฅํด์.
๐ก ํ์ต ์๋ฃ๋ฅผ ๋ฐ๊ธฐ ์ํด ํ์
ํด โ๋
ธ์
โ ๊ณ์ ์ ๋ง๋ค์ด์ฃผ์ธ์.
๐ก ์๊ฐ์ ํ์ํ ํ์ต์๋ฃ๋ ๋
ธ์
(๋งํฌ)์ผ๋ก ์ ๊ณต๋ฉ๋๋ค.
โป ํ์ต ์๋ฃ์ ์ ์๊ถ์ ์ฝ๋์บ ํ์๊ฒ ์์ต๋๋ค. ๋ฌด๋จ ๋์ฉ ยท ๋ฐฐํฌ ยท ๋ณต์ ๋ฅผ ๊ธ์งํฉ๋๋ค.
๊ถ๊ธํ ์ ์ด ์์ผ์ ๊ฐ์? ๐ฌ
Q. ์๋ฌด๋ฐ ์ง์ ์์ด ์๊ฐํด๋ ๋ ๊น์?
A. ๋ค. ๋ณธ ๊ฐ์๋ ํ๋ก๊ทธ๋๋ฐ์ด ์ฒ์์ธ ์ฌ๋๋ ๋ค์ ์ ์๋ ๋์ด๋์
๋๋ค. ๋ง์ฝ HTML, CSS ๋ฑ ๋ ํํํ ๊ธฐ์ด๋ฅผ ์์ ํ ์๊ฐํ๊ณ ์ถ์ผ์๋ค๋ฉด [์์์ ํ๋ฆฌ์บ ํ!] [๊ฐ๋ ฅํ CSS] ๊ฐ์๋ฅผ ์ถ์ฒ๋๋ฆฝ๋๋ค.
Q. ๋ณ๋์ ๊ต์ฌ๊ฐ ์๋์?
A. ๋
ธ์
์ผ๋ก ์ ๊ณตํด๋๋ฆฌ๋ [๊ฐ์ ์๋ฃ]๋ฅผ ํ์ฉํด์ฃผ์ธ์!
Q. ๊ฐ์ ์๊ฐ ์ , ์ค์นํด์ผ ํ ํ๋ก๊ทธ๋จ์ด ์๋์?
A. ๋ค, โํฌ๋กฌ ๋ธ๋ผ์ฐ์ โ์ โVSCodeโ๋ฅผ ๋ฏธ๋ฆฌ ์ค์นํด์ฃผ์ธ์! ๋ค๋ฅธ ํ๋ก๊ทธ๋จ์ ๊ฐ์์์ ํจ๊ป ์ค์นํด๋ณด๋๋ก ํด์!
ํ ์ฝ๋์บ ํ๋ฅผ ์๊ฐํฉ๋๋ค. ๐


