์ด์ ํ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์ ์น ํ์ด์ง๋ก ๋ํ๋ธ๋ค! ์ค์ง ํ์ด์ฌ๋ง์ ์ด์ฉํด ๋๋ง์ ์น ํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณผ ์ ์์ด์. ๋ฐ์ดํฐ ๋ถ์, ๋จธ์ ๋ฌ๋ ๋ฑ ํ์ด์ฌ์ผ๋ก ๋ง๋ ๊ฒฐ๊ณผ๋ฌผ์ ์น ํ์ด์ง์์ ํ์ธํ ์ ์๋ Interactive DashBoard๋ฅผ ๋ง๋ค์ด ๋ณผ ์ ์๋ ๊ธฐํ์ ๋๋ค!
Plotly
Dash
Callback ํจ์
ํ์ด์ฌ์ผ๋ก ๋ง๋ค์ด๋ณด๋ ๋๋ง์ ์น ํ์ด์ง
์ด์ ํ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์ ์น์ผ๋ก ๋ํ๋ธ๋ค!
HTML, CSS, JS ์์ด
์ค์ง ํ์ด์ฌ์ผ๋ก ๋ง๋๋ ์น ํ์ด์ง! ๐ฅ๏ธ
1. ์ง๊ธ๊น์ง ํ์ด์ฌ์ ํ์ฉํ ๋ฐ์ดํฐ ๋ถ์, ๋จธ์ ๋ฌ๋ ๋ฑ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค๊ธฐ ์ํ ์ฝ๋ ํ์ต๋ง ํ๋ค๋ฉด, ์ด์ ๋ ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ํ๋ด๊ณ , ํ๋์ ๋๊ตฌ๋ก ์ฌ์ฉํ ์ ์๋ ์นํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ํ์ด์ฌ ์ฝ๋๋ฅผ ๋ฐฐ์๋ด ๋๋ค!
2. ๋จ์ํ ์์ ๋ง์ ํ์ด์ฌ ์ฝ๋ ๊ฒฐ๊ณผ๋ฅผ ์น(Web)์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๊ทธ์น์ง ์๊ณ ํ๋ผ๋ฏธํฐ๋ฅผ ์์ ํ๊ณ , ์์ ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ค์ ์น์ผ๋ก ๋ํ๋ด๋ ์น ํ์ด์ง๋ฅผ ๋ง๋ญ๋๋ค!
3. ํ๋ผ๋ฏธํฐ๋ฅผ ์์ ํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ค์ ์ถ๋ ฅํ๋๋ฐ ์ฝ๋ ์คํ์ ์ค์งํ๊ณ , ํ๋ผ๋ฏธํฐ ์์ ํ, ๋ค์ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฒ์กํ ํ์๋ ์ด์ ๊ทธ๋ง!
4. ํ์ด์ฌ๋ง์ผ๋ก ์น ํ์ด์ง๋ฅผ ๋ง๋ค๋ฉด ์ฝ๋ ์คํ ์ค์ง ๋ฐ ์ฝ๋ ์์ ์์ด ์ค๋ก์ง ์นํ์ด์ง์์ ํ๋ผ๋ฏธํฐ ์์ ๋ฐ ์์ ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ๋ก๋ฐ๋ก ํ์ธํ ์ ์์ต๋๋ค!
5. ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ์ด๋ป๊ฒ ๋ณด์ฌ์ค์ง ๊ทธ๋ฆฌ๊ณ ์นํ์ด์ง๋ฅผ ํตํด ์ด๋ค ํ๋ผ๋ฏธํฐ๋ฅผ ์ ๋ ฅ๋ฐ์์ง ๋ฑ '๋ณด์ฌ์ฃผ๊ธฐ'์ํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๋ฏ๋ก์จ ๋จ๋ค๊ณผ๋ ์ฐจ๋ณํ๋ ํ์ด์ฌ ์ฝ๋ ์ค๋ ฅ์ ๊ฐ์ถ ์ ์์ต๋๋ค!
(์์ธํ ์ปค๋ฆฌํ๋ผ ๋ฐ 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. HTML/CSS/JS ํน์ ์น์ ๋ํ ์ง์์ด ์์ด๋ ์๊ฐ์ด ๊ฐ๋ฅํ ๊น์?
๋ค! ํด๋น ๊ฐ์๋ ์ค์ง ํ์ด์ฌ๋ง์ผ๋ก ์์ ์ด ์งํ๋ฉ๋๋ค.
Q. ํ์ด์ฌ์ ์ด๋ ์ ๋๊น์ง ๋ค๋ฃฐ ์ค ์์์ผ ํ ๊น์?
Pandas๋ฅผ ์ด์ฉํด ๋ฐ์ดํฐ๋ถ์์ ํด๋ณด์ จ๋ ๋ถ๋ค์ด๋ผ๋ฉด ๊ฐ๋ฅํฉ๋๋ค! ๋ฌผ๋ก Pandas๊ฐ ์นํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ํ์ ์ง์์ ์๋๋๋ค. ๊ทธ๋ฐ๋ฐ๋ Pandas๋ฅผ ์ ์ํ ์ด์ ๋ ํด๋น ๊ฐ์ Project์์ ๋ฐ์ดํฐ ๋ถ์์ ์ํด Pandas๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
Q. Basic ์ดํ Advanced ๊ฐ์ข๋ ์์๊น์?
๋ค! ์ฐ์ Basic ๊ฐ๊ฐ ํ ์๊ฐ์๋ค์ ๋ฐ์ ๋ฐ ์๊ตฌ์ฌํญ์ ํ ๋๋ก Advanced ๊ฐ์๋ฅผ ๊ธฐํํ ์์ ์ ๋๋ค. Basic ๊ฐ์์์๋ ํ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์ ์น ํ์ด์ง์์ ํํํ๊ณ Callback ํจ์๋ฅผ ์ด์ฉํ Interactive Web Page๋ฅผ ๋ง๋ค ์ ์๋ ์ ๋๊น์ง๋ง ์งํ์ด ๋ฉ๋๋ค!
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์ค์ง ํ์ด์ฌ๋ง์ผ๋ก ์น ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ์ถ์ ์๊ฐ์
์ด์ ๋ ํ์ด์ฌ ๊ฒฐ๊ณผ๋ฅผ IDE(Spyder, JupyterNotebook, PyCharm)์ด ์๋ ์น ํ์ด์ง๋ก ํํํ๊ณ ์ถ์ ์๊ฐ์
Interactive Web Page๋ฅผ ๋ง๋ค์ด ๋ณด๊ณ ์ถ์ ์๊ฐ์
์ ์ ์ง์,
ํ์ํ ๊น์?
ํ์ด์ฌ
Pandas
140
๋ช
์๊ฐ์
9
๊ฐ
์๊ฐํ
26
๊ฐ
๋ต๋ณ
5.0
์
๊ฐ์ ํ์
2
๊ฐ
๊ฐ์
์ํธ์ ์ปคํผ๋ฅผ ์ข์ํ๋ ์ง์ฅ์ธ Suit&Coffee ์ ๋๋ค
ํ์ฌ ๊ธ์ต๊ถ์์ ๋ฐ์ดํฐ ๋ถ์ ๋ฐ ์๊ธ์ด์ฉ์ ์ฃผ ์ ๋ฌด๋ก ํ๊ณ ์์ต๋๋ค.
๋ฐ์ดํฐ ๋ถ์์ ํ๋ฉด์ ๊ณต์ ํ๊ณ ์ถ์ ๋ถ๋ถ๋ค์ ๊ฐ์๋ก ์ ์ํ๊ณ ์์ต๋๋ค.
์ ์ ๊ฒฝํ๋ค์ด ๋์์ด ๋๊ธธ ๋ฐ๋ผ๋ฉฐ ์ด์ฌํ ๊ฐ์๋ฅผ ์ ์ํ๊ฒ ์ต๋๋ค
์ ์ฒด
43๊ฐ โ (6์๊ฐ 12๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
Section0. Intro
09:16
Section1. Bar Plot
17:07
Section1. Pie Chart
05:23
Section1. Box Plot
08:56
Section1. Histogram
10:28
Section1. HeatMap
04:01
Section1. ๋ง๋ฌด๋ฆฌ
03:46
Section2. About Dash
06:32
Section2. Div 1
11:57
Section2. Div 2
15:18
Section2. Button
03:59
Section2. dcc_graph
12:48
Section2. dcc_Input
04:39
Section2. ๋ง๋ฌด๋ฆฌ
02:39