์ฝ๋ก๋๋งต ๊ฐ๋ฐ์์ ํจ๊ป ๋ฐฐ์ฐ๋ ์ค์ ์ง๋์๋น์ค ๊ตฌํ!


<์ถ์ฒ : KTV, EBS>
์๋
ํ์ธ์, ๊ฐ๋ฐ์ ์ด๋ํ์
๋๋ค.
์ ๋ ์ด๋ฒ์ 1400๋ง๋ช
์ด ์ด์ฉํ๊ณ , 4400๋ง ์กฐํ์๋ฅผ ๋๊ธด ์ฝ๋ก๋๋งต๊ณผ
๋ง์คํฌ ์ค์๊ฐ ์ฌ๊ณ ํํฉ์ ๋ณด์ฌ์ฃผ๋ ๋ง์คํฌ๋งต์ ๊ธฐํํ๊ณ ๊ฐ๋ฐํ์์ต๋๋ค.
์๋น์ค ์ด์์ ํ๋ฉด์ ๊ฐ์ฅ ๋ง์ด ๋ฐ์๋ ์ง๋ฌธ ์ค์ ํ๋๊ฐ
'์ฝ๋ก๋๋งต๊ณผ ๊ฐ์ ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณด๊ณ ์ถ์๋ฐ, ์ด๋์ ์ด๋ป๊ฒ ์์ํด์ผํ ์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค' ์์ต๋๋ค.
๊ทธ๋์ ๊ฐ์ ์ ์์ ์๊ฐํ๊ฒ ๋์๊ณ , ์ ๋ง ์ข์ ๊ธฐํ๋ก ์ด๋ฒ ๊ฐ์๋ฅผ ๋ง๋ค๊ฒ ๋์์ต๋๋ค.
์ฒซ ๊ฐ์๋ผ ๋ง์ด ์ด์ํ๊ณ ์ํด์ง๋ง ๋ง์ ๋ถ๋ค์๊ฒ ๋์์ด ๋์์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค.
์ ๋ง ๋ค์ ํ ๋ฒ ๊ฐ์ฌ๋๋ฆฝ๋๋ค!! ์ธ์ ๋ ํผ๋๋ฐฑ ๋ถํ๋๋ฆฝ๋๋ค.
์ง๋์๋น์ค ๊ฐ๋ฐ, ์ ๋ฐฐ์ฐ๋ฉด ์ข์๊น์?

<์ถ์ฒ : ์กฐ์ ์ผ๋ณด>
์ฒญ์๋ ์
๋ฌด๋ณด๊ณ ์ ์ฐธ์ํ์ ๋ ๋ค์๋ ๊ฒ ์ค ๊ฐ์ฅ ์ธ์๊น์๋ ๋ง์
'์ฝ๋ก๋๋งต์ ์ ๋ถ๊ฐ ์ ๋ณด๋ฅผ ๊ณต๊ฐํ๋ ๋ฐฉ๋ฒ ๋ฉด์์ ์๋ก์ด ๋ฐ์์ด๋ค. ์ ๋ถ์ ํ๋ณด๋ฐฉ์์ '๋ฐ์์ ์ ํ'์ ํด์ผ ํ๋ค. ํน๋ณํ ๋น๋ถํ๋ค'์์ต๋๋ค. ์ฝ๋ก๋๋งต์ ๊ธฐ๋ฐ์ด ๋๋ ์๋ก์ด ๋ฐ์์ผ๋ก ์ธ์๋๋ ์ง๋UI๋ ์ฌ์ฉ์์๊ฒ ๊ฐ์ฅ ํจ์จ์ ์ด๊ณ ์ง๊ด์ ์ผ๋ก ์ ๋ณด๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
์๋น์ค๋ฅผ ๊ธฐํํ๊ฑฐ๋ ๊ฐ๋ฐํ ๋, ์ฌ์ฉ์์๊ฒ ์ง๊ด์ ์ด๋ฉฐ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ด ์ ์ ๋ ์ค์ํด์ง๊ณ ์๋ ํ ์ํฉ์์ ๋ณธ ๊ฐ์๋ฅผ ํตํด ์ง๋์๋น์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๊ธฐ๋ณธ ์ธํ
๋ถํฐ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ๋ถ๋ค๊ป ์๋ ค๋๋ฆฌ๊ณ ์ ํฉ๋๋ค.
์ง์ ์ง๋์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณด์ธ์.
์๋๋ ๋ณธ ๊ฐ์์์ ์ ์ํ ์ง๋์๋น์ค์
๋๋ค.
.gif)
 (1).gif)
.gif)
๋ณธ ๊ฐ์์์๋ ์ง๋์๋น์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๊ธฐ๋ณธ์ง์์ ๋ฐฐ์ธ ์์ ์
๋๋ค.
- ๋ค์ด๋ฒ ์ง๋ api๋ฅผ ํตํ ์น ์ง๋ ๋์ฐ๊ธฐ
- ์ ๋ณด ์ ๊ณต์ ํ์ํ ๋ฐฐ๋์ ์ธํฌ๋ฐ์ค ๋ง๋ค๊ธฐ
- ๋ค์์ ๋ง์ปค๋ฅผ ์์ฑํ์ฌ ์ง๋์์ ๋์ฐ๊ณ , ํด๋ฆญ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๊ธฐ
- ํ์ฌ ์์น๋ฅผ ๋ฐ๊ณ , ์ ๋๋ฉ์ด์
์ด ์ ์ฉ๋ ๋ง์ปค๋ฅผ ์ง๋์์ ํ์ํ๊ธฐ
- ์นด์นด์ค api๋ฅผ ํตํ ๋ชฉ์ ์ง ๊ฒ์ ๊ธฐ๋ฅ ๊ตฌํ
๊ฐ์์์ ๋ฐฐ์ฐ๋ ์ง์์ ํ์ฌ ์ฝ๋ก๋๋งต์์ ํ์ฉ๋๋ ์ง์์
๋๋ค. ์ด์ฒ๋ผ ๋ณธ ๊ฐ์๋ฅผ ํตํด ์๊ฐ์ ์ฌ๋ฌ๋ถ๋ค๊ป์ ์์ผ๋ก ์ง๋ ์๋น์ค๋ฅผ ์ ์ํ ๋ ๋์์ ๋๋ฆด ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
์ด๋ค ๊ฑธ ๋ฐฐ์ธ๊น์?
Section 1 - ๊ฐ์ ์๊ฐ
๋ณธ ๊ฐ์์ ์์ผ๋ก ๋ง๋ค๊ฒ ๋ ํ๋ก์ ํธ์ ๋ํ ์๊ฐ์ ์น๊ฐ๋ฐ์ ์์ํ ๋ ์ฝ๋ก๋๋งต ํด๋ก ํ๋ก์ ํธ์์ ์ป์ ์ ์๋ ๊ธฐ์ด์ ์ธ ์ง์์ ๋ํด ์ค๋ช
ํ๊ณ ์์ต๋๋ค.
Section 2 - ์ด๊ธฐํ๊ฒฝ ๊ตฌ์ถ
ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ ์ํ ์ด๊ธฐํ๊ฒฝ์ ์ค์นํ๊ณ ์
ํ
ํ๋ ๋ฐฉ๋ฒ์ ๋ํ ๊ฐ์ข๊ฐ ๋ด๊ฒจ์์ต๋๋ค. ๋ณธ ๊ฐ์์์๋ VS Code,
node.js, express๋ฅผ ์ค์นํ๊ณ ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ ์ํ ์ด๊ธฐํ๊ฒฝ ์
ํ
์ ์ค๋ช
ํ๊ณ ์์ต๋๋ค.
Section 3 - ์ง๋ api ์๊ฐ ๋ฐ ์ค์
์ง๋ ์๋น์ค์ ํต์ฌ์ธ ์ง๋ api๋ฅผ ์ค์ ํ๊ณ ์ ์ฉํ๋ ๊ฐ์๋ฅผ ๋ด์์ต๋๋ค.


๋ณธ ๊ฐ์ ์์๋ ๋ค์ด๋ฒ ์ง๋ api๋ฅผ ์ฌ์ฉํ๊ณ ์์ด, application ์์ฑ ๋ฐ api key ๋ฐ๊ธ, ๊ทธ๋ฆฌ๊ณ ์น์์ ๋ค์ด๋ฒ ์ง๋ api๋ฅผ ๋์ฐ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช
ํ๊ณ ์์ต๋๋ค.
Section 4 - ๋ฐฐ๋ ๋ฐ ์ธํฌ๋ฐ์ค ์์ฑํ๊ธฐ
์ง๋์๋น์ค์์ ๋ณด์ฌ์ง๋ ๋ฐฐ๋ ๋ถ๋ถ๊ณผ ์ธํฌ๋ฐ์ค๋ฅผ ์์ฑํ๋ ๊ฐ์๋ฅผ ๋ด์์ต๋๋ค.


์ง๋ ์๋น์ค ๋ฐ ์น ์๋น์ค์ ํ์ํ ์๋จ ๋ฐฐ๋์ ์ธํฌ๋ฐ์ค๋ฅผ ์์ฑํ๊ณ , css๋ฅผ ํตํด ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๊ฒ ํ๋ ์์
์ ์ค๋ช
ํ๋ ๊ฐ์์
๋๋ค. ๋ณธ ๊ฐ์๋ฅผ ํตํด์ ์ง๋ ์์ ์ ๋ณด๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ์ธ ๋ฐฐ๋์ ์ธํฌ๋ฐ์ค๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ ์ ์์ต๋๋ค.
Section 5 - ๋ง์ปค ์์ฑ ๋ฐ ์ด๋ฒคํธ ์ค์
์ง๋ ์๋น์ค์์ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ ์ค ํ๋์ธ ๋ง์ปค์ ๋ํด ์ค๋ช
ํ๋ ์น์
์
๋๋ค.


์ฌ๋ฌ ๊ฐ์ ๋ง์ปค๋ฅผ ์์ฑํ๊ณ ์ง๋ ์์ ํ์ํ๊ณ , ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ค๋ช
ํ๋ ๊ฐ์ ์
๋๋ค. ๋ง์ปค๋ฅผ ํด๋ฆญ ์ ์ธํฌ์๋์ฐ๋ฅผ ํ์ํ๊ณ ์ฌ๋ผ์ง๊ฒ ํ๋ ๊ธฐ๋ฅ์ ๋ง๋ค๊ณ , ์ง๋์๋ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ค๋ช
ํฉ๋๋ค.
Section 6 - ํ์ฌ ์์น๋ฅผ ์ง๋์์ ํ์ํ๊ธฐ
์ง๋ ์๋น์ค์์ ๊ฐ์ฅ ๋ง์ด ํ์ฉ๋๊ณ , ๊ธฐ๋ณธ์ด ๋๋ ํ์ฌ์์น๋ฅผ ๋ฐ๊ณ ์ด๋ฅผ ์ง๋์์ ๋ง์ปค๋ฅผ ํตํด ํ์ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช
ํ๋ ์น์
์
๋๋ค.


ํ์ฌ ์์น๋ฅผ ๋ฐ๊ธฐ ์ํ ๋ฒํผ์ ๋ง๋ค๊ณ , jQuery๋ฅผ ์ฌ์ฉํ์ฌ click ์ด๋ฒคํธ๋ฅผ ๋ถ์ฌํ๊ณ , ํ์ฌ ์์น์ ๋ง์ปค๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์ค๋ช
ํฉ๋๋ค. ๋ํ ๋ง์ปค ์ฃผ์์ ํผ์ ธ๋๊ฐ๋ ์ ๋๋ฉ์ด์
ํจ๊ณผ๋ฅผ ๋ถ์ฌํ๋ ๋ฐฉ๋ฒ์ ๋ํด์๋ ๋ค๋ฃจ๊ณ ์์ต๋๋ค.
Section 7 - ํ์ฌ ์์น๋ฅผ ์ง๋์์ ํ์ํ๊ธฐ
์นด์นด์ค api๋ฅผ ํ์ฉํ์ฌ ๋ชฉ์ ์ง๋ฅผ ๊ฒ์ํ๊ณ ์ด๋ฅผ ์ง๋ ์์ ํ์ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช
ํ๋ ์น์
์
๋๋ค.


์นด์นด์ค์์ ์ ๊ณตํ๋ keyword search api๋ฅผ ํ์ฉํ์ฌ, ์ฌ์ฉ์์๊ฒ ๋ชฉ์ ์ง๋ฅผ ์
๋ ฅ๋ฐ์ ์ง๋์์ ํ์ํ๋ ๊ธฐ๋ฅ์ ๊ตฌํํฉ๋๋ค. ํด๋น ๋ชฉ์ ์ง์ ์๋์ ๊ฒฝ๋๋ฅผ ๊ฒฐ๊ณผ๊ฐ์ผ๋ก ๋ฐ์ ํ ์ด๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์ธ ์ ์์ผ๋ฉฐ, ์ง๋ ์์ ํ๊ฐ์ marker๋ง ๋์ฐ๊ฒ ํ๋ ์๋ฌํธ๋ค๋ง์ ๋ํด์๋ ๋ค๋ฃจ๊ณ ์์ต๋๋ค.
Section 0 - [๋ถ๋ก] ์ฝ๋ก๋๋งต ์ผ์ง

์ฝ๋ก๋๋งต์ ์ธ์ , ์ด๋ป๊ฒ ๊ธฐํํ๋์ง ๊ฐ๋ฐ์ผ์ง๋ก ํ์ด๋์ต๋๋ค. ํ์ฌ ์ด์๋๊ณ ์๋ ์ฝ๋ก๋๋งต์ด ์ด๋ป๊ฒ ํ์ํ๊ฒ ๋์์ผ๋ฉฐ ์ด๋ ํ ๊ณ๊ธฐ๋ก ๊ธฐํํ์๊ณ , ์ด์ํ๊ณ ์๋์ง ๊ฐ๋จํ๊ฒ ์๊ฐํ์ต๋๋ค.
์ด ๊ฐ์๋ง์ ํน์ง

์ฝ๋ก๋๋งต ๊ฐ๋ฐ์๊ฐ ์ง์ ์ด๊ธฐํ๊ฒฝ ์
ํ
๋ถํฐ ์ง๋์๋น์ค ๊ตฌํ๊น์ง ์๋ ค์ฃผ๋ ๊ฐ์์
๋๋ค.
๋๋ฌธ์ ์ง๋ ์๋น์ค๋ฅผ ์ฒ์ ๊ฒฝํํ๋ ๊ฐ๋ฐ์๋ค๋ ์ฝ๊ฒ ์ ๊ทผํ ์ ์๋๋ก ์ ์ํ์์ผ๋ฉฐ, ํ์ฌ ๋ง์ ์ด์ฉ์๋ค์ด ์ฌ์ฉํ๋ ์ง๋ ์๋น์ค๋ฅผ ํด๋ก ํจ์ผ๋ก์จ
๋จ์ ํ๋ก์ ํธ๊ฐ ์๋๋ผ ๊ธฐํ, ๊ฐ๋ฐ ๊ณผ์ ์์ ์ป์ ๋
ธํ์ฐ๋ ๋ฌผ๋ก ์ฝ๋ก๋๋งต์์ ์ค์ ๋ก ์ด์ฉํ๋ ์ฝ๋๊น์ง ํ์ธํ ์ ์์ต๋๋ค.
๋ค๋ฃจ๋ ํด

- VS Code - ๊ฐ๋ฐ์ ํ๊ธฐ ์ํ IDE(ํตํฉ ๊ฐ๋ฐ ํ๊ฒฝ)
- express - ์น ์ดํ๋ฆฌ์ผ์ด์
ํ๋ ์์ํฌ
- naver map api - ๋ค์ด๋ฒ ์ง๋๋ฅผ ๋์์ฃผ๊ธฐ ์ํ api
์น ๊ฐ๋ฐ์ ์ ํ ๋ฐฐ์๋ณด์ง ์์๋ ์
๋ฌธ์๋ผ๋ฉด? ๐
