์ ์ฒด ๊ธ214 DynamicFieldsModelSerializer DynamicFieldsModelSerializer ๊ฐ์ Django์ DjangoRESTFramework(DRF)๋ ์์ฒด์ ์ผ๋ก serializer ํด๋์ค๋ฅผ ์ ๊ณตํ๋ค. ๊ทธ๋ฐ๋ฐ view ํจ์์์ ํด๋น model์ ํน์ field๋ง ์ถ๋ ฅํ๊ฑฐ๋, ํน์ nested relationship์์ ํน์ field๋ง ์์๋ฐ๊ณ ์ถ์ ๊ฒฝ์ฐ๊ฐ ์๋ค. ํ๋ ๊ฐ๋ผ๋ฉด ๋ฐ๋ก serializer๋ฅผ ๋ง๋ค์ด์ค ์ ์๊ฒ ์ง๋ง ์ฌ๋ฌ ๊ฐ๋ผ๋ฉด ์ฝ๋๊ฐ ๋ณต์กํด์ง๊ณ ๋ณ์๋ช ์ง๊ธฐ๋ ์ด๋ ค์์ง๋ค. ๋ฐ๋ผ์ 'field' ์ธ์๋ฅผ ๋ฐ๋ก ์ ์ํด ์ํ๋ field๋ง ์ถ๋ ฅํ๋๋ก ํ๋ DynamicFieldsModelSerializer ํด๋์ค๋ฅผ ๋ฐ๋ก ์ ์ํด ํด๊ฒฐํ ์ ์๋ค. ์ฝ๋ Serializer ํด๋์ค ์ ์ from rest_framework import seri.. 2022. 11. 6. AJAX AJAX AJAX ๊ฐ์ โ Asynchronous Javascript And XML (๋น๋๊ธฐ ํต์ ์น ๊ฐ๋ฐ ๊ธฐ์ ) โ ๋น๋๊ธฐ ํต์ ์ ์ด์ฉํด ํ๋ฉด ์ ์ฒด๋ฅผ ์๋ก๊ณ ์นจ ํ์ง ์๊ณ ๋ ์๋ฒ ์์ฒญ์ ๋ณด๋ด๊ณ , ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ํ๋ฉด์ ์ผ๋ถ๋ถ๋ง ์ ๋ฐ์ดํธ ํ๋ ๊ธฐ๋ฅ AJAX์ ํน์ง ํ์ด์ง ์๋ก ๊ณ ์นจ ์์ด ์๋ฒ์ ์์ฒญ ์๋ฒ๋ก๋ถํฐ ์๋ต(๋ฐ์ดํฐ)๋ฅผ ๋ฐ์ ์์ ์ ์ํ AJAX๋ฅผ ์ด์ฉํด Django follow ๊ธฐ๋ฅ ๊ตฌํํ๊ธฐ ์ฌ์ ์ค๋น ํ ํ๋ฆฟ์ script ์ฝ๋ ์์ฑ์ ์ํ block tag ์์ญ ์์ฑ ... {% block script %} {% endblock script %} axios CDN ์์ฑ {% block script %} {% endblock script %} id ์์ฑ ์ง์ ๋ฐ ์ ํ, ๋ถํ์ํ action๊ณผ metho.. 2022. 11. 5. Axios Axios Axios ๊ฐ์ โ JavaScript์ HTTP ์น ํต์ ์ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ โ ํ์ฅ ๊ฐ๋ฅํ ์ธํฐํ์ด์ค์ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋ ๋น๋๊ธฐ ํต์ ๊ธฐ๋ฅ ์ ๊ณต Axios ๊ธฐ๋ณธ๊ตฌ์กฐ Axios ์ฌ์ฉํด๋ณด๊ธฐ โ get, post ๋ฑ ์ฌ๋ฌ method ์ฌ์ฉ ๊ฐ๋ฅ โ then์ ์ด์ฉํด์ ์ฑ๊ณตํ๋ฉด ์ํํ ๋ก์ง ์์ฑ โ catch์ ์ด์ฉํด์ ์คํจํ๋ฉด ์ํํ ๋ก์ง ์์ฑ ๊ณ ์์ด ์ฌ์ง api ๊ฐ์ ธ์ค๊ธฐ (Python) import requests print('๊ณ ์์ด๋ ์ผ์น') cat_image_search_url = 'https://api.thecatapi.com/v1/images/search' response = requests.get(cat_image_search_url) if response.status_code ==.. 2022. 11. 5. ๋๊ธฐ์ ๋น๋๊ธฐ ๋๊ธฐ์ ๋น๋๊ธฐ ๋๊ธฐ(Synchronous) โ ๋ชจ๋ ์ผ์ ์์๋๋ก ํ๋์ฉ ์ฒ๋ฆฌํ๋ ๊ฒ โ ์์ฒญ๊ณผ ์๋ต์ ๋๊ธฐ์์ผ๋ก ์ฒ๋ฆฌํ๊ฒ ๋๋ค๋ฉด? ์์ฒญ์ ๋ณด๋ด๊ณ ์๋ต์ด ์ฌ ๋๊น์ง ๊ธฐ๋ค๋ ธ๋ค๊ฐ ๋ค์ ๋ก์ง์ ์ฒ๋ฆฌ ๋น๋๊ธฐ(Asynchronous) โ ์์ ์ ์์ํ ํ ๊ฒฐ๊ณผ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋ค์ ์์ ์ ์ฒ๋ฆฌ(๋ณ๋ ฌ์ ์ํ) ๋น๋๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ์ด์ โ ์ฌ์ฉ์ ๊ฒฝํ ์์ฃผ ํฐ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์จ ๋ค ์คํ๋๋ ์ฑ์ด ์์ ๋ ๋๊ธฐ๋ก ์ฒ๋ฆฌํ๋ค๋ฉด ๋ฐ์ดํฐ๋ฅผ ๋ชจ๋ ๋ถ๋ฌ์จ ๋ค์์ผ ์ฑ์ ์คํ ๋ก์ง์ด ์ํ๋๋ฏ๋ก ์ฌ์ฉ์๋ค์ ๋ง์น ์ฑ์ด ๋ฉ์ถ ๊ฒ๊ณผ ๊ฐ์ ๊ฒฝํ์ ๊ฒช๊ฒ๋๋ค. ๋น๋๊ธฐ๋ก ์ฒ๋ฆฌํ๋ฉด ๋จผ์ ์ฒ๋ฆฌ๋๋ ๋ถ๋ถ๋ถํฐ ๋ณด์ฌ์ค ์ ์์ผ๋ฏ๋ก, ์ฌ์ฉ์ ๊ฒฝํ์ ๊ธ์ ์ ์ธ ํจ๊ณผ๋ฅผ ๋ณผ ์ ์์ Single Thread ์ธ์ด, JavaScript โ JavaScript๋ ํ๋ฒ์ .. 2022. 11. 4. Callback & Promise Callback๊ณผ Promise ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฐฉ์์ ๋ฌธ์ ์ โ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ํต์ฌ์ Web API๋ก ๋ค์ด์ค๋ ์์๊ฐ ์๋๋ผ ์์ ์ด ์๋ฃ๋๋ ์์์ ๋ฐ๋ผ ์ฒ๋ฆฌ๋๋ค๋ ๊ฒ โ ์คํ ๊ฒฐ๊ณผ๋ฅผ ์์ํ๋ฉด์ ์ฝ๋๋ฅผ ์งค ์ ์๋ค ์ฝ๋ฐฑํจ์(Callback Function) โ ๋ค๋ฅธ ํจ์์ ์ธ์๋ก ์ ๋ฌ๋๋ ํจ์ โ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ๋น๋๊ธฐ ์์ ์ด ์ผ๋ฃ๋ ํ ์คํํ ์์ ์ ๋ช ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ ์ฝ๋ฐฑ ํจ์๋ฅผ ๋น๋๊ธฐ ์ฝ๋ฐฑ(asynchronous callback)์ด๋ผ ๋ถ๋ฅธ๋ค. ์ฝ๋ฐฑํจ์๋ฅผ ์ฌ์ฉํ๋ ์ด์ โ ๋ช ์์ ์ธ ํธ์ถ์ด ์๋ ํน์ ํ ์กฐ๊ฑด ํน์ ํ๋์ ์ํด ํธ์ถ๋๋๋ก ์์ฑํ ์ ์์ โ '์์ฒญ์ด ๋ค์ด์ค๋ฉด', '์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด', '๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋ฉด'๋ฑ์ ์กฐ๊ฑด์ผ๋ก ์ดํ ๋ก์ง์ ์ ์ดํ ์ ์์ โ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์์ฐจ์ ์ผ๋ก ๋์ํ ์ ์๊ฒ.. 2022. 11. 4. JavaScript์์์ This This ๊ฐ์ โ ์ด๋ ํ object๋ฅผ ๊ฐ๋ฆฌํค๋ ํค์๋ โ JavaScript์ ํจ์๋ ํธ์ถ๋ ๋ this๋ฅผ ์๋ฌต์ ์ผ๋ก ์ ๋ฌ ๋ฐ์ โ JavaScript์์์ this๋ ์ผ๋ฐ์ ์ธ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ค๋ฅด๊ฒ ๋์ โ JavaScript๋ ํด๋น ํจ์์ ํธ์ถ ๋ฐฉ์์ ๋ฐ๋ผ this์ ๋ฐ์ธ๋ฉ ๋๋ ๊ฐ์ฒด๊ฐ ๋ฌ๋ผ์ง๋ค. โ ์ฆ ํจ์๋ฅผ ์ ์ธํ ๋ ๊ฒฐ์ ๋๋ ๊ฒ์ด ์๋๋ผ, ํจ์๋ฅผ ํธ์ถํ ๋ ํจ์๊ฐ ์ด๋ป๊ฒ ํธ์ถ๋์๋์ง์ ๋ฐ๋ผ ๋์ ์ผ๋ก ๊ฒฐ์ this INDEX ์ ์ญ ๋ฌธ๋งฅ์์์ this ํจ์ ๋ฌธ๋งฅ์์์ this ๋จ์ ํธ์ถ Method(๊ฐ์ฒด์ ๋ฉ์๋๋ก์) Nested ์ ์ญ ๋ฌธ๋งฅ์์์ this โ ๋ธ๋ผ์ฐ์ ์ ์ ์ญ ๊ฐ์ฒด์ธ window๋ฅผ ๊ฐ๋ฆฌํจ๋ค. ์ ์ญ ๊ฐ์ฒด๋ ๋ชจ๋ ๊ฐ์ฒด์ ์ ์ผํ ์ต์์ ๊ฐ์ฒด๋ฅผ ์๋ฏธ console.log(this) // .. 2022. 11. 3. ์ด์ 1 ยทยทยท 21 22 23 24 25 26 27 ยทยทยท 36 ๋ค์