HTML, CSS, JS ์์ด
์ค์ง ํ์ด์ฌ์ผ๋ก ๋ง๋๋ ์น ํ์ด์ง! ๐ฅ๏ธ
์ด์ ๋ ๋์ ํ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์ ์น ํ์ด์ง์ผ๋ก ๋ํ๋ธ๋ค! ๐
'ํ์ด์ฌ์ผ๋ก ๋ง๋๋ ๋๋ง์ ์นํ์ด์ง Part1'๊ฐ์์ ๋ชฉ์ ? ๐
1. ์ง๊ธ๊น์ง ํ์ด์ฌ์ ํ์ฉํ ๋ฐ์ดํฐ ๋ถ์, ๋จธ์ ๋ฌ๋ ๋ฑ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค๊ธฐ ์ํ ์ฝ๋ ํ์ต๋ง ํ๋ค๋ฉด, ์ด์ ๋ ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ํ๋ด๊ณ , ํ๋์ ๋๊ตฌ๋ก ์ฌ์ฉํ ์ ์๋ ์นํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ํ์ด์ฌ ์ฝ๋๋ฅผ ๋ฐฐ์๋ด
๋๋ค!
2. ๋จ์ํ ์์ ๋ง์ ํ์ด์ฌ ์ฝ๋ ๊ฒฐ๊ณผ๋ฅผ ์น(Web)์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๊ทธ์น์ง ์๊ณ ํ๋ผ๋ฏธํฐ๋ฅผ ์์ ํ๊ณ , ์์ ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ค์ ์น์ผ๋ก ๋ํ๋ด๋ ์น ํ์ด์ง๋ฅผ ๋ง๋ญ๋๋ค!
3. ํ๋ผ๋ฏธํฐ๋ฅผ ์์ ํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ค์ ์ถ๋ ฅํ๋๋ฐ ์ฝ๋ ์คํ์ ์ค์งํ๊ณ , ํ๋ผ๋ฏธํฐ ์์ ํ, ๋ค์ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฒ์กํ ํ์๋ ์ด์ ๊ทธ๋ง!
4. ํ์ด์ฌ๋ง์ผ๋ก ์น ํ์ด์ง๋ฅผ ๋ง๋ค๋ฉด ์ฝ๋ ์คํ ์ค์ง ๋ฐ ์ฝ๋ ์์ ์์ด ์ค๋ก์ง ์นํ์ด์ง์์ ํ๋ผ๋ฏธํฐ ์์ ๋ฐ ์์ ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ๋ก๋ฐ๋ก ํ์ธํ ์ ์์ต๋๋ค!
5. ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ์ด๋ป๊ฒ ๋ณด์ฌ์ค์ง ๊ทธ๋ฆฌ๊ณ ์นํ์ด์ง๋ฅผ ํตํด ์ด๋ค ํ๋ผ๋ฏธํฐ๋ฅผ ์
๋ ฅ๋ฐ์์ง ๋ฑ '๋ณด์ฌ์ฃผ๊ธฐ'์ํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๋ฏ๋ก์จ ๋จ๋ค๊ณผ๋ ์ฐจ๋ณํ๋ ํ์ด์ฌ ์ฝ๋ ์ค๋ ฅ์ ๊ฐ์ถ ์ ์์ต๋๋ค!
ํ์ด์ฌ๋ง์ผ๋ก Interactive Web Page๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์ปค๋ฆฌํ๋ผ ๐
(์์ธํ ์ปค๋ฆฌํ๋ผ ๋ฐ Project ํ์ธ์ Intro๊ฐ์๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์!)
Setion1. Plotly
- Web Page์ Graph๋ฅผ ๋ํ๋ด๊ธฐ ์ํ ํ์ด์ฌ ๋ชจ๋์ ๋ฐฐ์๋ด
๋๋ค
Setion2. Dash
- ํ์ด์ฌ ๋ง์ผ๋ก ์นํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๋ชจ๋์ธ 'Dash'๋ฅผ ๋ฐฐ์๋ด
๋๋ค
Setion3. Callback Function
- ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ๊ฒ์์์ง์ฒ๋ผ! ์น ํ์ด์ง์์ ํ๋ผ๋ฏธํฐ๋ฅผ ์
๋ ฅ๋ฐ๊ณ , ๊ฒฐ๊ณผ๋ฌผ์ ์ฝ๋
์์ ์์ด ๋ฐ๋ก๋ฐ๋ก ํ์ธํ ์ ์๋ ์น ํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํด ํ์ํ Callback ๊ธฐ๋ฅ์
๋ฐฐ์๋ด
๋๋ค
Section4. Project
- ๊ตญ๋ด์ ์์ฅ๋ ์ฝ์คํผ & ์ฝ์ค๋ฅ ๊ธฐ์
๋ค์ ์นํฐ๋ฅผ ๋ถ๋ฅํ๊ณ , ๊ฐ์ ์นํฐ ๋ด์์ ๊ธฐ์
๋ค
์ ์ฃผ๊ฐ๋ฅผ ๋น๊ตํ ์ ์๋ ์น ํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ด
๋๋ค
๋๋ง์ ์น ํ์ด์ง ์ ์,
ํ์ด์ฌ๋ง์ผ๋ก ๊ฐ๋ฅํด์! ๐
ํ์ด์ฌ์ ํ์ฉํด์ ๋ฐ์ดํฐ ๋ถ์, ๋จธ์ ๋ฌ๋ ๋ฑ ๋ค์ํ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค์ด ๋ณด์ ๊ฒฝํ์ด ์์ผ์ ๊ฐ์? ๊ทธ๋ ๋ค๋ฉด ์ด์ ๋ ๋ค์ํ ๊ฒฐ๊ณผ๋ฌผ์ ์ด๋ป๊ฒ ๋ณด์ฌ์ค์ง ๊ณ ๋ฏผํ ์ฐจ๋ก์
๋๋ค. ํ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์ ๊ฐ๋ฐํ๊ฒฝ(Spyder, Jupyter Notebook, PyCharm)์ด ์๋ ์น์์ ํํํด ๋ณด์ธ์!
๋ณธ ๊ฐ์์์ HTML/CSS/JS ์ง์ ์์ด ์ค์ง ํ์ด์ฌ๋ง์ ์ด์ฉํด ๋๋ง์ ์น ํ์ด์ง๋ฅผ ๋ง๋ค์ด ๋ด
๋๋ค. ์น ํ์ด์ง์ ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ์ถ๋ ฅํ๊ณ ํ์ธ ๋ฐ ์์ ํ ์ ์๋ Interactive Web Page๋ฅผ ๋ง๋ค ์ ์์ด์.
๊ฐ์์์๋ ๊ฐ Section์ ์ฝ๋ ๋ด์ฉ์ Jupyter Notebook ํ์ผ๋ก ์ ๊ณตํฉ๋๋ค. ๊ฐ์์์ ์ ๊ณตํ๋ Jupyter Notebook ๋งค๋ด์ผ์ ์ฐธ๊ณ ํ๋ฉด์ ๊ฐ์๋ฅผ ์ฝ๊ฒ ์๊ฐํ ์ ์์ต๋๋ค.
์ด๋ฐ ๋ถ๋ค๊ป ์ถ์ฒํด์ ๐โโ๏ธ
ํ๋ค์ค(Pandas)๋ฅผ ํ์ฉํด ๋ฐ์ดํฐ ๋ถ์์ ํด๋ณธ ๊ฒฝํ์ด ์๋ ๋ถ
๋ณธ๊ฒฉ์ ์ธ ์น ๊ณต๋ถ ์ ์ ๋๋ง์ ์น ํ์ด์ง๋ฅผ ๋ง๋ค์ด ๋ณด๊ณ ์ถ์ ๋ถ
ํ์ด์ฌ์ผ๋ก ๋ฐ์ดํฐ ๋ถ์, ๋จธ์ ๋ฌ๋ ๋ฑ์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค์ด๋ณด์ ๋ถ
๊ฐ์๋ฅผ ๋ค์ ํ ์ฌ๋ฌ๋ถ์
โ
ํ์ด์ฌ์ผ๋ก ๋ง๋ ๊ฒฐ๊ณผ๋ฅผ Web Page์ ํํํ ์ ์๋ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๊ฒ ๋ฉ๋๋ค.
โ
์์ ๋ง์ Interactvie Web Page๋ฅผ ๋ง๋ค๊ณ , ์ฝ๋ ์ ์ง ์์ด ์์ ๋ ๋ณ์์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ฐ๋ก๋ฐ๋ก ํ์ธํ ์ ์์ต๋๋ค.
โ
์ฝ๋ ์์ฑ์ ์์ด ๊ฒฐ๊ณผ๋ฅผ ๋ง๋๋ ๋ฐ ์ง์คํ๋ ๊ฒ๋ฟ๋ง ์๋๋ผ, ๊ฒฐ๊ณผ๋ฅผ ์ด๋ป๊ฒ ๋ณด์ฌ์ค์ง ๊ณ ๋ฏผํ๋ ๋ฅ๋ ฅ์ ํค์ฐ๊ฒ ๋ฉ๋๋ค.
Q&A ๐ฌ
Q. HTML/CSS/JS ํน์ ์น์ ๋ํ ์ง์์ด ์์ด๋ ์๊ฐ์ด ๊ฐ๋ฅํ ๊น์?
๋ค! ํด๋น ๊ฐ์๋ ์ค์ง ํ์ด์ฌ๋ง์ผ๋ก ์์
์ด ์งํ๋ฉ๋๋ค.
Q. ํ์ด์ฌ์ ์ด๋ ์ ๋๊น์ง ๋ค๋ฃฐ ์ค ์์์ผ ํ ๊น์?
Pandas๋ฅผ ์ด์ฉํด ๋ฐ์ดํฐ๋ถ์์ ํด๋ณด์
จ๋ ๋ถ๋ค์ด๋ผ๋ฉด ๊ฐ๋ฅํฉ๋๋ค! ๋ฌผ๋ก Pandas๊ฐ ์นํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ํ์ ์ง์์ ์๋๋๋ค. ๊ทธ๋ฐ๋ฐ๋ Pandas๋ฅผ ์ ์ํ ์ด์ ๋ ํด๋น ๊ฐ์ Project์์ ๋ฐ์ดํฐ ๋ถ์์ ์ํด Pandas๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์
๋๋ค.
Q. Basic ์ดํ Advanced ๊ฐ์ข๋ ์์๊น์?
๋ค! ์ฐ์ Basic ๊ฐ๊ฐ ํ ์๊ฐ์๋ค์ ๋ฐ์ ๋ฐ ์๊ตฌ์ฌํญ์ ํ ๋๋ก Advanced ๊ฐ์๋ฅผ ๊ธฐํํ ์์ ์
๋๋ค. Basic ๊ฐ์์์๋ ํ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์ ์น ํ์ด์ง์์ ํํํ๊ณ Callback ํจ์๋ฅผ ์ด์ฉํ Interactive Web Page๋ฅผ ๋ง๋ค ์ ์๋ ์ ๋๊น์ง๋ง ์งํ์ด ๋ฉ๋๋ค!