ํ ๊ฒ ์์ด์ ์ ์ ๊ฒ ์๋ค์ผ๋ฅธ UI ์ง๋ ๊ฑฐ ๋๋ด๊ณ ๋ฐฑ ํ ๊ฑฐ ์ง์ผํ๋๋ฐ ๋ง๋งํด์ UI๋ถํฐ ๋ค ํด๋์ผ๋ ค๊ณ ํ๋ค... ์์ง ๋ฉ์ธ๋, ๋ก๊ทธ์ธ๋ ๋ฏธ์. ํ์ํ ํ์ด์ง๋ฉ์ธ --์งํ์ค๋ก๊ทธ์ธ --์งํ์คํ์๊ฐ์ -- ์งํ์ค๋ง์ดํ์ด์ง(๋ก๊ทธ์ธ ํ ์ฌ๋) ๊ฐ ํ์ ๋ง์ดํ์ด์ง (or ํ
๊ฐ์ํ๊ฒฝ ์์ฑpip install django ๋ก ์ฅ๊ณ ํจํค์ง ์ค์น django-admin startproject (ํ๋ก์ ํธ๋ช ) ๋ก ํ๋ก์ ํธ ์์ฑpython manage.py startapp (์ฑ์ด๋ฆ)๋ก ๊ธฐ๋ฅ๋ณ ์ฑ ์์ฑ ๊ธฐ๋ณธ ์ธํ - settings.py ์ ์ฑ ๋ฑ๋ก
<ํ์ด์ง>๋ฉ์ธ (์๋ฃ)๋ก๊ทธ์ธ (์๋ฃ)๋ง์ดํ์ด์ง (์ค์)ํ์๊ฐ์ !!์ญ์ !!์ธ์ create ํ์ด์ง (ํ์ ์๋๋ฉด ์์ ์ ํ์ด์ง๋ก) (๋ฏธ์)ํ์ ๋ง์ดํ์ด์ง (ํ์ ์ผ๋ก) (๋ฏธ์)<๊ธฐ๋ฅ>๋๋๊ทธ์ค ๋๋ (์๋ฃ)ํ์ (๋ฏธ์) - ์์ ์๋ก์ด window ์ฐฝ์ผ๋ก ๋จ๊ฒ
: ์์ด๋์ ๋น๋ฐ๋ฒํธ ์ ๋ ฅํ ํ ๋ก๊ทธ์ธ ํ๋ฉด ํ์ผ๋ก ์ด๋. : input date ๋นผ๊ณ ์ค๋์ ๋ ์ง๋ฅผ ์ถ๋ ฅํ๊ฒ ํจ. ๋ ์ง ๋๋ฅด๋ฉด ์ธ์ ๋ฆฌ์คํธ๋ก ์ด๋. : ๊ฐ ํ์์ ๋๋๊ทธ ์ค ๋๋กญ์ผ๋ก ์ถ์, ์ง๊ฐ, ๊ฒฐ์์ผ๋ก ์ฎ๊ธธ ์ ์์ : ์คํฌ๋กค ๋ฐ๋ ๊ธธ์ด๊ฐ ์ถฉ๋ถํ ๊ธธ์ด์ง๊ณ , ํธ๋ฒ์
๊ฒฐ๋ก ๋ถํฐ ๋งํ์๋ฉด.. ๋ค ํ์ง ๋ชปํ๋ค ใ ๊ฐ์ฅ ์ค์ํ ๋ ์ง ํ๋๋น ํ๋์ฉ ์ ์ฅ์ด ๋์ด์ผ ํ๋๋ฐ... ์ผ์ฌ์ฐจ๊ฒ ๋์ ํ์ง๋ง ์คํจํด๋ฒ๋ ธ๋ค. ์ ๋ฒ ์ค๊ฐ์ ๊ฒ ๋, ํ๋ก ํธ๋ ๋๋ถ๋ถ ๋ค ๋ง๋ฌด๋ฆฌ๊ฐ ๋์๊ณ , ๋ฐฑ์์ ๊ธฐ๋ฅ์ด ๋ช ๊ฐ ๋จ์์์๋ค. [ํ๋ก ํธ] 1. ์ธ์ ์ ๋ชฉ ํด๋ฆญ์ ํ์ ์ฐฝ
๋์์ธ๊ฒ์ ๋ฐํ์ ํ๋๊ธ์จ (๋ทํ๋ฆญ์ค๋ ๋๊ฐ์ผ๋ฉด ์ ๋๋ ํ๋ ๊ธ์จ๋ก .. ) ๋ ์ง ์ ๋ ฅ์ ํด๋น ๋ ์ง์ ๋ฐ์ค์คํผ์ค ์ถ๋ ฅ(๊ทธ ์ฃผ, ๊ทธ ๋ )์ํ ์ ๋ชฉ ๊ฒ์์ ํด๋น ์ํ ์ ๋ชฉ ์ถ๋ ฅ ์ํ ์ ๋ชฉ ํด๋ฆญ์ ์ธ๋ถ ์ ๋ณด ์ถ๋ ฅ ์ํ๋ณ ์ฐ(?) ๊ธฐ๋ฅ ์ด๊ฒ์ ๊ฒ ๋ ํ๋ ค๊ณ ์์ฌ๋ด์ง ์๊ธฐ.
๋จผ์ api ๋ก๋ ์ํ์งํฅ์์ํ์คํapi ๋ฅผ ์ ํํ๋ค. api์ฃผ์https://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do๋ค์ด๊ฐ๋ณด๋ฉด, ์ด๋ ๊ฒ ์ฌ์ฉํ ์ ์๋ ์ ๋ณด๋ค์ด ๋์์๋ค. ๋๋
(๋ ธ๋ง๋์ฝ๋ ์ํ ํ์ ์น์๋น์ค ์ฐธ๊ณ ) ๋ฌด์์ ์ํ ๋ชฉ๋ก์ ์ถ์ถํด์ฃผ๋ Home.js ๋ฅผ ๋ง๋ค์ด๋ณด์๋ค. Class ํ์ ์ฌ์ฉํ๋ค.
์ธ์ ์ง๋ ๋ชจ๋ฅด๋ ๋ . . ์ด์์ง๋ค๋ผ๋ฆฌ ์์์ฝ์ฝ ์ก๋ต์ ๋๋๋ค๊ฐ์ด๋ผ๋ ์์ฃผ ํฅ๋ฏธ๋ก์ด ํด์ปคํค์ ๋ํ ์ด์ผ๊ธฐ๊ฐ ๋์๋ค. ๋ฌด์ธ๋ชจํค์ ํ ์ค๋ก ์ค๋ช ํ์๋ฉด " ์์ฃผ ์ธ๋ชจ์๋ ์๋น์ค๋ฅผ ๋ง๋๋ ํด์ปคํค " ์ด๋ค.์ฐ๋ฆฌ ์ด์์ง๋ค๋ ์๊ฐํด๋ณด๋ ๋ชจ๋๋ค ์ฐธ ๋ฐ์๊ฒ ์ฐ๋ค.๋ฐฉํ์ ๊ฐ์ธ&๊ทธ๋ฃน ์คํฐ
๋จ์ํ ์ฌ๋๋คํ์ ์ ์ ์ ๊น ์นดํก์ผ๋ก๋ ์๊ฒฌ์ ๋๋์์๋๋ฐ, ์นดํก์ด ์ฐธ ๊ฐ๊ด์ด์๋ค. ๋งค๋๋ชฌ์คํฐ ํฌ์นดํ or ํํ(ํํํ๋์์ง)์ ์๋ ์ฌ์ดํธ ๋ ์ด๊ฑฐ ๋ ์ค์ ํ๋ ํ์ผ๋ฉด ์ง์ง ์ธ์์๊ฑฐ๋ค.๋คํํ ์ด๊ฑด ๋ชจ๋๊ฐ ๊ฝํ์ง ์๊ณ ๊ธ๋ฐฉ ์ง๋์ณค๋ค. ์๋ง์ ์์ . . ํ ๋ถ์ ์ค๋
์ฐ๋ฆฌ ํ๋ก ํธ๋ ์ ๋ฒ๋ถํฐ ์ฌ์ฉํ๋ React ๋ฅผ ๊ณ์ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค. (+ ๋ฐฑ์๋๋ Node.js)๋ง ๊ฐ์์๋ ๋น์ฅ ๊ฐ๋ฐ์ ๋ค์ด๊ฐ๊ณ ์ถ์ง๋ง.. UI ๊ฐ ๋จผ์ ์ด๊ธฐ ๋๋ฌธ์ ํ๋ฑ UI ๋ฅผ ์งฐ๋ค. UI ๋ง ์๊ฐํ๋ฉด ๋๋ฌผ์ด ๋๋ค... ํ์ ๋์์ธ ๋ด๋น์ด ์์ด ์ด์ฉ๋ค๋ณด๋ UI ๊ฒฝ
์ค๋๋ง์ ๋ฆฌ์กํธ๋ฅผ ํด์ ๊ทธ๋ฐ์ง... ์ฌ๋ฐ์ด์ ๋งค์ผ ๋ฐค์ ์๊ฐ๋ฉฐ ๊ฐ๋ฐ์ ํ๊ณ ์๋ค. ์์ง์ ๋ฐฑ์๋์์ ๊ธฐ์ ๊ตฌํ์ด ์งํ๋๋ ์ค์ด๋ผ ํ๋ก ํธ์์ ์ฒ๋ฆฌํ ๋ฐ์ดํฐ๊ฐ ์๋ค. ๋ฐ๋ผ์ ํผ๋ธ๋ฆฌ์ฑ, ์ด๋ฒคํธ ์ฒ๋ฆฌ, ํ๋ฉด ์ ํ ํจ๊ณผ ๋ฑ๊ณผ ๊ฐ์ ๋ถ๊ฐ์ ์ธ ๊ฒ๋ค์ ๋จผ์ ์ฒ๋ฆฌํด๋ณด๊ธฐ๋ก ํ๋ค.์ด๋ฒ์
๊ฐ๋ฐ ์ค, ๊ฐ์ฅ ๋จผ์ ์ฒ๋ฆฌํด์ผํ ๋ถ๋ถ์ด ์ด setTimeout ํจ์ ์ฌ์ฉ ๋ถ๋ถ์ด์๋ค. ์ฒ์์ ์ค๋์คํก ์๋น์ค์ ๋ค์ด์ค๋ฉด, ๊ฒฝ์ฐ์ ๋ฐ๋ผ ๋ ๊ฐ์ง๋ก ๋ณด์ฌ์ค ํ๋ฉด์ด ๋ฌ๋ผ์ง๋๋ฐ 1\. ์ด ์๋น์ค๋ฅผ ํ ๋ฒ๋ ์ฌ์ฉํด๋ณด์ง ๋ชปํ ์ฌ์ฉ์ => ๊นํ๋ธ ๋ก๊ทธ์ธ ํ ๊ฐ์ด๋ ํ์ด์ง๋ก ์ด๋.
์ฌ์ค ์ค๊ฐ ์ ๊ฒ์ด๋ผ๊ธฐ์ ๊ฐ๋ฐ์ด ๊ฑฐ์ ๋ง๋ฌด๋ฆฌ ๋จ๊ณ์ฌ์ .. ์กฐ๊ธ ๋ฆ์ ํฌ์คํ ์ด๊ธด ํ์ง๋ง ํ์ฌ ๊ฐ๋ฐ ์ํฉ์ ํฌ์คํ ํด๋ณด๋ ค๊ณ ํ๋ค. ์ค๋์ฐํก์ ์ผ๋ฉด ๋ณผ ์ ์๋ ์ฒซํ๋ฉด ๊นํ๋ธ๋ก ๋ก๊ทธ์ธํ๋ฉด DB ์ ํด๋น ์ ์ ์ ๋ณด๊ฐ ์๋ ์๋์ ๋ฐ๋ผ ๊ฐ์ด๋ or Chatmain ์ผ๋ก ๋์ด๊ฐ๋ค