๋ชฉ๋ก[WEB & AI] (feat. ์ทจ์ค) (75)
Hello creators ๐
1๏ธโฃ ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ๊ฒ์ํ 3๊ฐ ๋ง๋ค์ด๋ณด๊ธฐ css ๋ฐ html ๊ธฐ๋ณธ ๊ฐ๋ 2๏ธโฃ ์์ ๋ด์ฉ ์ ๋ฆฌ [1๊ต์] ๊ฐ๋ฐ์ ๋๊ตฌ์์ shift + ํ ํ์ฉํด์ -> ์์น ๋ณ๊ฒฝํ๊ธฐ '๊ฐ๋ฐ์ ๋๊ตฌ' ์์ -> ๊ณ ์ณ์ผ ํ๋ ๋ถ๋ถ ํด๋ฆญ -> shift ๋๋ฅด๊ณ + ๋ง์ฐ์ค ํ -> 10 ๋จ์ ์ฉ ์์น๊ฐ ๋ณ๊ฒฝํจ. 1. box sizing ๊ธฐ๋ฅ ๊ทธ๋ฅ div ์ div ๋ฅผ ๋ง๋ค๋ฉด -> ๋ฑ ๋ถ์ด ์๊ฒ ๋จ div + border ๋ div + border ์ฃผ๋ฉด -> border ๋งํผ ๋จ์ด์ ธ ์๊ฒ ๋จ box sizing ์ ๊ฐ์ธ์ฃผ๋ฉด -> border ๋ฅผ ๋ฃ์ด๋, ๊ทธ ์์ผ๋ก ๋ฑ ๋ค์ด๊ฐ๊ฒ ๋จ. โญโญโญโญโญ ์๋ฅผ ๋ค์ด์ div ์ width ๋ฅผ 100 ์ผ๋ก ์ฃผ๊ณ , border (1px ์) ๋ฅผ ์ฃผ๋ฉด -..
1๏ธโฃ ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ํ๊ทธ์ ํ์์ฑ๊ณผ ๊ฐ์ข ํ๊ทธ์ ๊ธฐ๋ฅ 2๏ธโฃ ํ๊ทธ ์์ด๋ ๊ธ์จ๋ ๋ณด์ด๋๋ฐ , ์ ๊ตณ์ด ํ๊ทธ๋ฅผ ๋ฌ์์ผ ํ๋? 1. '์๋ฃ' ๋ฅผ ๋ง๋ค ๋๋, ๋ฐ๋์ ํ๊ทธ ๋ฅผ ํ์ฉํด์ผ ํจ. ๊ทธ๋์ผ, ์ฝ๋๋ง ๋ด๋, '์ ๋ชฉ์ด๊ตฌ๋.' ๋ผ๊ณ '๋ช ํ ํ๊ฒ ์ ์ ์์. ์ด๊ฒ์ด ์น ํ์ค ์. ๊ธ, ๊ทธ๋ฆผ, ๊ฐ์ '์๋ฃ' ๋ฅผ ๋ง๋ค ๋๋ -> ๊ทธ๋ฅ, ํ๊ทธ ์์ด ์ ์ ์๋ ์์. ๊ธ, ๊ทธ๋ฆผ, ๊ฐ์ '์๋ฃ' ๋ฅผ ๋ง๋ค ๋๋ -> ๋ฐ๋์ ํ๊ทธ ๋ฅผ ํ์ฉํด์ผ ํจ. ์ ๊ผญ ๊ทธ๋์ผ ํด? ํ๊ทธ๊ฐ ์์ผ๋ฉด -> '์๋ ํ์ธ์' ๋ผ๋ ๊ธ์์ ์กด์ฌ๋ชฉ์ ์ด ๋ญ์ง ๋ถ๋ถ๋ช . ์ ๋ชฉ์ธ์ง, ๋จ๋ฝ์ธ์ง, ๋ถ๋ถ๋ช ํจ. h1 ํ๊ทธ๊ฐ ์์ผ๋ฉด -> ๋ฑ ๋ด๋ ์ ๋ชฉ! ์ด๋ผ๋ ๊ฑธ ์ ์ ์์. โญโญโญโญโญ data ์ ๋ชฉ์ ์ด ๋ถ๋ช ํจ โญโญ..
1๏ธโฃ ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ง๋ค๊ณ ์ ํ๋ ๊ฒ ์ ์ฌ์ง์์ ๋ง๋ค๊ธฐ ์ต์ข ๊ฒฐ๊ณผ๋ฌผ ๊ทธ ์ด์ ์์ ์ ๋ณด์ถฉ ํด์ผ ํจ. 2๏ธโฃ ์ ์ฌ์ง์์ ๋ง๋ค๊ธฐ 1. ์ฐ์ ์๋ํ๋ ์ฝ๋ ํ์ผ 1) ๊ณผ์ ํ๋ฉด์ ์ด๋ ค์ ๋ ๋ถ๋ถ a) table ๊ณผ table ์ฌ์ด๋ฅผ ๋์ฐ๊ธฐ ๋ฌธ์ ์ํฉ ์ด๋ ๊ฒ ์ ์ ๋์์ก์. ๋ฌธ์ ์์ธ ํ๋์ table ํ๊ทธ ์์, ๋ค ๋ค ๋ฃ์ผ๋ ค ํ์์. ํด๊ฒฐ ๊ฐ table ํ๊ทธ์ ํ๋์ ํ๋ฅผ ๋ฃ๊ณ ๋น ๊ณต๊ฐ๋ table ์ ๋ฃ์ด์ฃผ๋ ๋ฐฉ์์ผ๋ก! ์๊ฐํด๋ณผ ์ง์ ์... ๊ทผ๋ฐ... ์ด๊ฒ ๋ง๋๊ฑด์ง ๋ชจ๋ฅด๊ฒ ๋ค... ๋์น๋ก ํ ๋๋... b) ์ ์์ ๋น ๊ณต๊ฐ ๋ง๋ค๊ธฐ ๋ฌธ์ ์ํฉ ๋ง๋ค์ด์ผ ํ๋ ๊ฑด, '๊ณต๋' ์ธ๋ฐ, ์๋ฌด๊ฒ๋ ์ ๋ฃ์ผ๋ฉด, -> ์ชผ๊ทธ๋ผ๋ค์์. ์์ธ ๋ญ๊ฐ๋ฅผ ์ฐ๋ฉด -> ์นธ์ด ์ ์ง๋๊ณ , ๋ญ๊ฐ๋ฅผ ์ ์ฐ๋ฉด -> ์นธ์ด..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ๋ด ์๋น์ค๊ฐ ์ธํฐ๋ท์ ์ด์์์ผ๋ ค๋ฉด, ๋ญ๊ฐ ํ์ํ ๊น? โ ก. ํด๋ณด๊ธฐ 1. ๋ด ํ๋ก์ ํธ๋ฅผ ์๋ฒ์ ์ฌ๋ฆฌ๊ธฐ localhost:5000 ์ด๊ฒ, ๋ช ๊ฐ์ง ์ ํ ๋ง ๋ ํด์ฃผ๋ฉด -> ์ด๋์์๋ ์ ๊ทผํ ์ ์๋ ์ง์ง ์๋ฒ๋ค! ์ด๋์์, ์ธ์ , ์ ๊ทผํ ์ ์์ผ๋ ค๋ฉด? ์ปดํจํฐ๊ฐ ํญ์ ์ผ์ ธ ์์ด์ผ ํจ. ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ปดํจํฐ์์ ํ๋ก๊ทธ๋จ์ด ์คํ๋๊ณ ์์ด์ผํจ. ex) ๋ด๊ฐ ์ปดํฐ๋ฅผ ํค๊ณ -> vscode ํค๊ณ -> app.py ๋ฅผ ์คํํ๋ ๊ฒ ์ฒ๋ผ ๋ชจ๋๊ฐ ์ ๊ทผํ ์ ์๋ ๊ณต๊ฐ ์ฃผ์์ธ IP ์ฃผ์(Public IP Address) ๋ก "๋๊ตฌ๋" ์น์๋น์ค์ ์ ๊ทผํ ์ ์์ด์ผ! ๊ทธ๋ผ ์ด๋ป๊ฒ ํด? ์์ ์๋ ์ง์ง ์ปดํฐ๋ฅผ ์ฌ์ -> ์๋ฒ์ค ์ด๋ผ๋๋ฐ์ ๊ทธ๋ฅ ๋ฃ๊ณ -> ๊ณ์ ๋๋ ค๋จ์๋ค๊ณ ํจ...
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ์ ๋ชฉ & ํ์ ๋ฑ์ ๊ฐ์ ธ์ค๊ธฐ โ ก. ํฌ๋กค๋ง์ ํ๋ ค๋ฉด 2๊ฐ์ง๋ฅผ ํด์ผ ํจ 1. ํด๋น ์ฃผ์์ ์์ฒญํด์ ํด๋น html ์ ๊ฐ์ ธ์ค๋ ๊ฒ! ์ด ์ฃผ์์ ๊ฐ์ html ์ ๊ฐ์ ธ์์ผ ํจ. ์ด๊ฑด requests ๋ฅผ ๊ฐ์ง๊ณ ์ด๋ฏธ ํ์. ๐ ์ฆ, requests ํจํค์ง๋ฅผ ํตํด html ์ ๊ฐ์ ธ์ค๋ ์์ ์ ์ด๋ฏธ ํ์. โญ ์, `requests` ๋ฅผ ํตํด ํ๋๊ฒ html ์ ๊ฐ์ ธ์ค๋ ๊ฑฐ ๊ตฌ๋! โญโญโญโญโญโญ 2. ๊ฐ์ ธ์จ html ์์์ '์ ๋ชฉ' ์ ์ฐพ์ผ๋ ค๋ฉด? : beautifulsoup ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ์ฉ 1) beautifulsoup ์ค์น pip ์ ๊ทธ๋ ์ด๋ python3 -m pip install --upgrade pip โ ์ด ์ ๊ทธ๋ ์ด๋๋ฅผ ์ ํด์ผ ํ๋ ๊ฑฐ์ง? ์์ง ์..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ์ค์นํ requests ํจํค์ง ์ฌ์ฉํด๋ณด๊ธฐ โ ก. ๋ฏธ์ธ๋จผ์ง ๋ฐ์ดํฐ ๊ฐ์ ธ์์ ๋ถ์ํด๋ณด๊ธฐ 1. ์๋ํ๋ ์ฝ๋ ๋ฏธ์ธ๋จผ์ง 60 ๋ฏธ๋ง์ธ ๊ตฌ ์ด๋ฆ ์ฐพ์๋ณด๊ธฐ import requests # requests ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น ํ์ # ํด๋น api ์์ get ํด์ r ์ ๋ด๊ธฐ # ์ด๋ฌํ syntax ๋ requests ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ง์ ๊ฒ์. r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair') rjson = r.json() rows = rjson['RealtimeCityAir']['row'] for row in rows: gu_name = row['MSRSTE_NM'] gu_mise = row..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ํจํค์ง (๋จ๋ค์ด ๋ง๋ค์ด๋์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ) ๋ค์ด ๋ฐ๊ธฐ โ ก. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ด๋ฆฌ๊ฐ ํ์ํ ์ด์ ์ ๊ฐ์ํ๊ฒฝ์ ๊ฐ๋ 1. ํ๋ก์ ํธ๋ณ๋ก ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(ํจํค์ง) ๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ ํ์ฌ์์ ํ๋ ํ๋ก์ ํธ์์ ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ์ฌ์ด๋ ํ๋ก์ ํธ๋ก ์งํํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๊ฐ๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ๊ฐ ์์. 2. ์๋ฃจ์ : ๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊พธ๋ฌ๋ฏธ๋ฅผ '๋ ๋ฆฝ๋ ๊ณต๊ตฌํจ' ์ ๋ฃ๊ธฐ ํ์ฌ ํ๋ก์ ํธ์ ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ A,B,C, ๋ -> '๊ณต๊ตฌํจ 1' ์ฌ์ด๋ ํ๋ก์ ํธ์ ํ์ํ ๋ผ์ดํ๋ฌ๋ฆฌ B,C,D ๋ -> '๊ณต๊ตฌํจ 2' ์ ๋ฃ์ด๋๊ณ , ํ์ํ ๋ ๋ง๋ค ๊บผ๋ด์ฐ๋ฉด, ๊ตณ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ๊ฐ๋ก ์ค์นํ๊ฑฐ๋ ํ ์ผ์ ์์ ๊ฒ. 3. '๋ ๋ฆฝ๋ ๊ณต๊ตฌํจ' = ๊ฐ์ ํ๊ฒฝ = ๊ฒฉ๋ฆฌ๋ ์คํํ๊ฒฝ ์ด๋ ๊ฒ '๋ ๋ฆฝ๋ ..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ํ์ด์ฌ ๋ฌธ๋ฒ ๋ณ์, ์๋ฃํ, ํจ์, ์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ โ ก. ํด๋ณด๊ธฐ 1. ์ซ์ํ, ๋ฌธ์์ด ๋ณ์, ๋ง์ ์ฐ์ฐ ์์ ์ฝ๋ # ์ซ์ํ_ ๋ง์ ์ฐ์ฐ a = 2 b = 3 print(a+b) # ๋ฌธ์์ด_ ๋ง์ ์ฐ์ฐ c = 'deokjin' d = 'jeong' print(c+d) 2. ๋ฆฌ์คํธํ_ ์ ์ธ, ์๋ฃ ์ถ์ถ, ๊ฐ ์ถ๊ฐ ๋ฆฌ์คํธํ_์ ์ธ ๋ฐ ์๋ฃ ์ถ์ถ # ๋ฆฌ์คํธํ_์๋ฃ ์ถ์ถ a_list = ['์ฌ๊ณผ', '๋ฐฐ', '๊ฐ'] print(a_list[0]) ๋ฆฌ์คํธํ_์ ์ธ ๋ฐ ๊ฐ ์ถ๊ฐ # ๋ฆฌ์คํธํ_๊ฐ ์ถ๊ฐ b_list = ['์ฌ๊ณผ', '๋ฐฐ', '๊ฐ'] b_list.append('์๋ฐ') print(b_list) 3. ๋์ ๋๋ฆฌํ ๊ฐ ์ ์ธ ๋ฐ ํธ์ถ ์์ ์ฝ๋ # ๋์ ..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ํ์ด์ฌ ๊ธฐ์ด ํ๊ฒฝ ์ ํ ๊ณ ๋ฏผ๋๋๊ฑด ๊ฐ์ํ๊ฒฝ ๋๋ฌธ์ ๋ ธ์ ์๋ํ ํ๋ก๊ทธ๋จ์ด ์ ๋จน๋๊ฑด๊ฐ ์ถ์ด์ ์ฐ์ตํ๋๊ฑธ ๋ค ์ง์๋ด... โ ก. ํด๋ณด๊ธฐ 1. ํ์ด์ฐธ์์ ํ์ด์ฌ ๊ธฐ๋ณธ ์ ํ ์ ํ๋ก์ ํธ ์ค์ ํ๋ฉด ์ด๋ ๊ฒ ์ฐฝ์ด ๋ธ ์์น : ๋ด๊ฐ ๋ฐํํ๋ฉด์ ์ก์๋์ ํด๋๋ก ๋ค์ด๊ฐ๊ฒ ํ๊ธฐ ๊ฐ์ ํ๊ฒฝ ์์น : ๊ฐ์ ํ๊ฒฝ๋ ๋ด๊ฐ ์ก์๋์ ํด๋๋ก ๋ค์ด๊ฐ๊ฒ ํ๊ธฐ ๊ธฐ๋ณธ ์ธํฐํ๋ฆฌํฐ : 3.8 ๋ก ๋๊ฒ ํ๊ธฐ โญโญโญโญโญโญโญโญโญโญโญ ์ด๊ฑด ํ์ด์ฌ ํํ์ด์ง์์ 3.8 ์ ๋ฐ์๊ธฐ ๋๋ฌธ main.py ์ฐ์ปด ์คํฌ๋ฆฝํธ ์์ฑ์ ํด์ ๊ทธ๋ฌ๋ฉด, ์ด๋ ๊ฒ ๊ฐ์ํ๊ฒฝ ๊น์ง ์ ์ค์น๊ฐ ๋จ. ์ด ๊ฐ์ํ๊ฒฝ์๋ ๋ญ ๋ง๋ค๋ฉด ์ ๋จ ์ ๋ณด์ด๋ ์ ๋ผ๊ณ ์๊ฐํ๋ฉด ๋จ ๋น์ฅฌ์ผ ์คํ๋์ค ์ฝ๋์์๋ ๊ทธ๋ฅ ๋ง๋ค์ด์ง ํ์ด์ฐธ์ด ์๋๋ผ, ..
โ . ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ๋ง๋ ๊ฒ์ ๋ถ์ฌ๋๊ธฐ โ ก. ํด๋ณด๊ธฐ 1. ๋ง๋ค์ด์ง DB ๋ฅผ API ํํ๋ก ๊ฐ์ ธ์์ ํ์ธ api ์ฃผ์ http://spartacodingclub.shop/web/api/movie ๋ง๋ค์ด์ง api ํ์ธ 2. ๋ก๋ฉ ํ ๋ฐ๋ก console ์ '๋ก๋ฉ์ด ์ ๋์๋ค.' ๋ ๋ฉ์์ง ๋ณด์ด๊ฒ ํ๊ธฐ [ajax ๋ผ๋๋ง๋ค๊ธฐ] $(document).ready(function () { listing(); }); function listing() { console.log('ํ๋ฉด ๋ก๋ฉ ํ ์ ์คํ๋์์ต๋๋ค'); } ์ฝ์ด๋ณด๊ธฐ $(document).ready(function () { : ๋ก๋ฉ ํ ์ด๋ค ํจ์๊ฐ ์คํ์ด ๋ ๊ฑฐ์ผ. ๊ทธ๊ฒ ๋ญ์ผ? listing(); : ๋ฆฌ์คํ ํจ์๊ฐ ์คํ ..