์์ ๋ชฉํ1\. Javascript ๋ฌธ๋ฒ์ ์ต์ํด์ง๋ค. 2\. jQuery๋ก ๊ฐ๋จํ๊ฒ HTML์ ์กฐ์ํ ์ ์๋ค. 3\. Ajax๋ก ์๋ฒ API(์ฝ์)์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ , ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์์จ๋ค.JQuery Ajax2-4 JQuery ์ ์ฉํ๊ธฐ
2-7 ์๋ฒ-ํด๋ผ์ด์ธํธ ํต์ ์ดํดํ๊ธฐ ์๋ฒํต์ ์ ๋ง๋ฒ Ajax > Ajax : ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํ์ด์ง ์ ํ ์์ด ์๋ฒ์์ ๊ฐ์ ๋ฐ์์ค๋ ๋ฐฉ๋ฒ > API : ์๋ฒ์์ ํด๋ผ์ด์ธํธํํ ์์ฒญํ๋ผ๊ณ ์ด์ด๋์ ์ฐฝ๊ตฌ ์๋ฒ -> ํด๋ผ์ด์ธํธ(์์ฒญ) "ํฌ๋งท:JSON" Jsonvie
์์ ๋ชฉํ 1\. ํ์ด์ฌ ๊ธฐ์ด ๋ฌธ๋ฒ์ ์๋ค 2\. ์ํ๋ ํ์ด์ง๋ฅผ ํฌ๋กค๋ง ํ ์ ์๋ค. 3\. pymongo๋ฅผ ํตํด mongoDB๋ฅผ ์ ์ดํ ์ ์๋ค. Pythonํฌ๋กค๋ง mongoDB
์ ๋ฆฌํ ๊ณํ
4-1 4์ฃผ์ฐจ ๋ฐฐ์ธ ๊ฒ ์๋ฒ๋ฅผ ์ง์ ๋ง๋ค์ด ๋ณผ ๊ฒ ์๋ฒ : ์ปดํจํฐ์ ๋์๊ฐ๊ณ ์๋ ํ๋์ ํ๋ก๊ทธ๋จ ex)ํฌํ ์ต, ์์ ๋ฑ๋ฑ ๋ก์ปฌ ๊ฐ๋ฐ ํ๊ฒฝ : ์๋ฒ ๋ง๋ค๊ณ ๋ค์ ์ ์ํด๋ด -> ๋ชจ๋ ์ฌ๋ ์ ์ ๊ฐ๋ฅํ๋๋ก 4-2 ํด๋ ์ ํ project ์์ ํ์ผ 4๊ฐ ๋ง๋ฌ
html ๋ค์ฐ๋ฉด ๊ดด๋กญ๋ค. ํ๋ ์ ์ํฌ๋ฅผ ์ธ๋๋ ์ ํด์ง ๊ท์น์ ๋ฐ๋ผ์ผ ํจ. ์ ํด์ง ํด๋ ๊ตฌ์กฐ๊ฐ ์๋ค.ํด๋ ๋๊ฐ ๋ง๋ค๊ธฐ -> New Directory static : css๋ ์ด๋ฏธ์ง ํ์ผ๋ค์ ๋ด์๋ ๋ ์ templates (->index.html ํ์ผ ๋ง๋ค๊ธฐ) : htm
์์ ๋ชฉํ1\. ์๋ฒ์ ํด๋ผ์ด์ธํธ์ ์ญํ ์ ๋ํด ์ดํดํ๋ค. 2\. HTML,CSS์ ๊ธฐ์ด ์ง์์ ์ดํดํ๋ค. ๋ถํธ์คํธ๋ฉ์ ๊ฐ์ ธ๋ค ์ธ ์ค ์๋ค! 3\. Javascript ๊ธฐ์ด ๋ฌธ๋ฒ์ ์ตํ๋ค. ๋ชฉ์ฐจ01\. 1์ฃผ์ฐจ ๋ฐฐ์ธ ๊ฒ 02\. ํ์ ํ๋ก๊ทธ๋จ ์ค์น 03\. HTML, C
์์ ๋ชฉํ1\. Javascript ๋ฌธ๋ฒ์ ์ต์ํด์ง๋ค.2\. jQuery๋ก ๊ฐ๋จํ HTML์ ์กฐ์ํ ์ ์๋ค. 3\. Ajax๋ก ์๋ฒ API(์ฝ์)์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ , ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์์จ๋ค. ๋ชฉ์ฐจ2์ถ์ฐจ ๋ฐฐ์ธ ๊ฒ Javascript ๋ณต์ต JQuery ์์ํ๊ธฐ JQuery ๋ค๋ค๋ณด๊ธฐ
๊ณง ํ ๊ฒ
API ๊ฐ๋ ์ ๋ฆฌ
๊ธฐ์ ๋ ธํธ with ์๋
JSON ๋?
๊ฐ์ ์๋ฃ ํด๋ฆญ๊ตฌ์ญ ํ์ธ! ํ๊ทธ๋ค์ ๋ฐฐ์น img ํ๊ทธ ๊พธ๋ฏธ๊ธฐ h2, h3, p ํ๊ทธ ๊พธ๋ฏธ๊ธฐ ์นด์นด์ค๊ฐ ๋งต์ ๋ฃ์์ ์๋๋ก ์ฝ๋ ์ ๊ณตํจ = > Map APIhttps://apis.map.kakao.com/๋คํ๋จผํธ ์ด๋ค. ๋คํ๋จผํธ๋, ๊ทธ์ชฝ์์ ๋ง๋ ์ค๋ช ์๋ฅผ ๋ณด๊ณ ๋ด
๋ชจ๋ฐ์ผ๋ก ๋ณํ๋ ์ฐฝ. ๊ธฐ์ข ์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ~ Responsive๋ก ๋ง์ถฐ๋๊ณ , ๊ฐ๋ก๊ธธ์ด๋ฅผ 360px๋ก ๋ง์ถฐ๋๋ฉด ์ฌ๋งํ ํด๋ํฐ์์ ๋ค ๋ฉ๋๋ค!CSS์ ์๋ ๊ธฐ๋ฅ - ํน์ ๊ฐ๋ก๊ธธ์ด ๋ฐ์ผ๋ก ๊ฐ๋ฉด ์ด CSS๋ฅผ ๋จน์ฌ์ค๋ผ. ์ด๋ ๊ฒ ํ๋ฉด 640๋ณด๋ค ๋ฐ์ผ๋ก ๊ฐ๋กํญ์ด ์ข์์ง๋, ์ด๊ฒ์
์์ ๋ชฉํ 1\. ํ์ด์ฌ ๊ธฐ์ด ๋ฌธ๋ฒ์ ์๋ค 2\. ์ํ๋ ํ์ด์ง๋ฅผ ํฌ๋กค๋ง ํ ์ ์๋ค. 3\. pymongo๋ฅผ ํตํด mongoDB๋ฅผ ์ ์ดํ ์ ์๋ค. ๋ชฉ์ฐจ 3์ฃผ์ฐจ ์ค์น 3์ฃผ์ฐจ ์ค๋ ๋ฐฐ์ธ ๊ฒ ์ฐ์ต ๊ฒธ ๋ณต์ต - ๋ํ๋ก๋ฉ๋ชจ์ฅ์ OpenAPI ๋ถ์ฌ๋ณด๊ธฐ ํ์ด์ฌ ์์ํ๊ธฐ ํ์ด์ฌ
์์ ๋ชฉํ1\. Flask ํ๋ ์์ํฌ๋ฅผ ํ์ฉํด์ API๋ฅผ ๋ง๋ค ์ ์๋ค.2\. '๋ชจ๋์์ฑ ๋ฆฌ๋ทฐ' API๋ฅผ ๋ง๋ค๊ณ ํด๋ผ์ด์ธํธ์ ์ฐ๊ฒฐํ๋ค.3\. '๋ํ๋ก๋ฉ๋ชจ์ฅ' API๋ฅผ ๋ง๋ค๊ณ ํด๋ผ์ด์ธํธ์ ์ฐ๊ฒฐํ๋ค.๋ชฉ์ฐจ4์ฃผ์ฐจ ์ค๋ ๋ฐฐ์ธ ๊ฒ ํด๋ ์ธํ Flask์์ํ๊ธฐ - ์๋ฒ๋ง๋ค๊ธฐFlask
์์ ๋ชฉํ1\. Flask ํ๋ ์์ํฌ๋ฅผ ํ์ฉํด์ API๋ฅผ ๋ง๋ค ์ ์๋ค.2\. '๋ง์ด ํ์ด๋ณด๋ฆฟ ๋ฌด๋น์คํ'๋ฅผ ์์ฑํ๋ค.3\. EC2์ ๋ด ํ๋ก์ ํธ๋ฅผ ์ฌ๋ฆฌ๊ณ , ์๋ํ๋ค!๋ชฉ์ฐจ 01\. 5์ฃผ์ฐจ ์ค์น
๋ชฉ์ฐจ WEB3 - Ajax 1. ์์ ์๊ฐ WEB3 - Ajax 2.1 ์์ ์ ๋ชฉ์ (1/2)WEB3 - Ajax 2.2 ์์ ์ ๋ชฉ์ (2/2)WEB3 - Ajax 3. ์ค์ตํ๊ฒฝ ์ค๋น WEB3 - Ajax 4. ๋์ ์ผ๋ก ์ปจํ ์ธ ๋ณ๊ฒฝ WEB3 - Ajax 5.0 fetch