4,400๋ง ์กฐํ์์ ์ฝ๋ก๋๋งต ๊ฐ๋ฐ์์ ํจ๊ป
์ง๋ ์๋น์ค ๊ฐ๋ฐ์ ๋์ ํ์ธ์ ๐ป
์ง๋ ์๋น์ค ๊ฐ๋ฐ, MERN ์คํ๊ณผ ํจ๊ป ๐บ๏ธ
์๋
ํ์ธ์, ๊ฐ๋ฐ์ ์ด๋ํ์
๋๋ค.
์ ๋ ์ด๋ฒ์ 1,600๋ง ๋ช
์ด ์ด์ฉํ๊ณ , 4,400๋ง ์กฐํ์๋ฅผ ๋๊ธด ์ฝ๋ก๋๋งต๊ณผ ๋ง์คํฌ ์ค์๊ฐ ์ฌ๊ณ ํํฉ์ ๋ณด์ฌ์ฃผ๋ ๋ง์คํฌ๋งต์ ๊ธฐํํ๊ณ ๊ฐ๋ฐํ์์ต๋๋ค. ํ์ฌ๋ ์คํํธ์
์์ GIS ๊ด๋ จ ํ๋ก๋ํธ๋ฅผ ์ ์ํ๊ณ ์์ต๋๋ค.
์ง๋ ์๋น์ค๋ ์์น ์ ๋ณด๊ฐ ์ค์ํด ์ง์ ๋ฐ๋ผ ์์ผ๋ก ํ์์ ์ธ ๊ธฐ์ ์คํ ์ค ํ๋๋ผ๊ณ ์๊ฐํฉ๋๋ค. ํ์ง๋ง ์ฒ์ ์ง๋ ์๋น์ค ๊ฐ๋ฐ์ ํ๋ ค๋ฉด ์๋ฌด๋๋ ์ง์
์ฅ๋ฒฝ์ด ๋์ ๊ฒ์ด ์ฌ์ค์
๋๋ค. ์ด๋ฒ ๊ฐ์๋ฅผ ํตํด์ ์๊ฐ์๋ถ๋ค์ด ์กฐ๊ธ ๋ ์ฝ๊ฒ ์ง๋ ์๋น์ค๋ฅผ ์ ์ํ๊ณ , ๋ ๋์๊ฐ์ ์ง๋ ์๋น์ค์ ๋งค๋ ฅ์ ๋๊ผ์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค.

๋ณธ ๊ฐ์๋ React, Express, MongoDB ๋ฑ์ ํ์ฉํด์ ์ง์ ์ด๊ธฐ ํ๊ฒฝ ์ธํ
๋ถํฐ ์ง๋ ์๋น์ค ๊ตฌํ๊น์ง ์๋ ค์ฃผ๋ ๊ฐ์์
๋๋ค. ์๋น์ค๋ฅผ ์ง์ ๋ง๋ค์ด ๋ณด๋ฉฐ ํ๋ก ํธ์๋ ๋ฐฑ์๋, ์ฆ ํ์คํ์ ๋ํ ์ ์ ๊ณผ์ ์ ๊ฒฝํํ์ค ์ ์์ต๋๋ค.
๋ค์ด๋ฒ ๋งต, ์นด์นด์ค ๋งต API์ ๊ฒฝ์ฐ ๋จ์ํ๊ฒ ์ฝ๋๋ฅผ ์ ๋ ๊ฒ์ด ์๋๋ผ ๊ณต์ ๋ฌธ์๋ฅผ ํ์ฉํ์ฌ ์ ์ด๋ ๊ฒ ์ฌ์ฉํ๋์ง๋ฅผ ๊ฐ์ด ๋ฐฐ์๊ฐ๋ ๊ฐ์์
๋๋ค. ์๊ฐ์ ์ฌ๋ฌ๋ถ๋ค์ด ๊ณต์ ๋ฌธ์์ ์กฐ๊ธ ๋ ์นํด์ง ์ ์๋๋ก ๋ง๋ค์ด ์ค๋๋ค.
ํด๋น ๊ฐ์๋ ์ค๋ฌด์์ ์ฌ์ฉํ๋ ์ง๋ ๊ด๋ จ ์ง์์ ๋ด์์ต๋๋ค. ๋ฌผ๋ก ์ด๋ณด์๋ถ๋ค์ด ์ดํดํ๊ธฐ ์ฝ๊ฒ ๊ฐ์ ๋์ด๋๋ฅผ ์ค์ ํ๊ณ ๋ชจ๋ ๊ฐ์์ ์๋ง์ ์ถ๊ฐํ์๊ธฐ ๋๋ฌธ์ ๋ถ๋ด ์์ด ๋ค์ ์ ์์ต๋๋ค. ์๊ฐ์๋ถ๋ค์ ์ด๊ธฐ ์ธํ
๋ถ๋ด์ ์ค์ด๊ธฐ ์ํ ๋ณด์ผ๋ฌํ๋ ์ดํธ ์์ค ์ฝ๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ธํ๋ฐ์๋ ์ ๊ฐ ์ ์ํ ์ง๋ ์๋น์ค ๊ฐ์ 2๊ฐ๊ฐ ์ถ์๋์ด ์๋๋ฐ์. ๋ง์ ๋ถ๋ค์ ์์๊ณผ ๊ด์ฌ ๋๋ถ์ ์ง๋ ์๋น์ค๋ผ๋ ํ์ ๋ ์ฃผ์ ์์๋ ์ข์ ํผ๋๋ฐฑ์ ๋ง์ด ๋ฐ์์ต๋๋ค. ๊ฐ์์ ๋ํ ํผ๋๋ฐฑ ์ค, ์ค๋ฌด์์ ์ฌ์ฉ๋๋ ๊ธฐ์ ์คํ์ผ๋ก ์๋น์ค๋ฅผ ์ ์ํ๊ณ ์ถ๋ค๋ ์๊ฒฌ์ด ๋ง์ ์ด๋ฒ ๊ฐ์๋ฅผ ์ ์ํ๊ฒ ๋์์ต๋๋ค. (์๋๋ ์ด์ ์ ์คํํ๋ '์ฝ๋ก๋๋งต ๊ฐ๋ฐ์์ ํจ๊ปํ๋ ์ง๋ ์๋น์ค ๋ง๋ค๊ธฐ' ๊ฐ์์ ๋ํ ์๊ฐํ์
๋๋ค.)
โ
โ
โ
โ
โ
์กฐ๊ธ์ฉ ์งฌ ๋ด์ ๋ฃ๊ธฐ ์ข๊ณ ์๋ง์ด ์์ด์ ์๋ฆฌ ์์ด๋ ๋ค์ ์ ์๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฒ์๋ถํฐ ๋๊น์ง ๊ฐ์ด ์งํํ๋ฉด์ ์ค๋ช
ํด ์ฃผ์๊ธฐ ๋๋ฌธ์ ์ดํดํ๊ณ ๋ฐ๋ผ ํ๊ธฐ๋ ์ฌ์ ์ต๋๋ค.
โ
โ
โ
โ
โ
์ค๋ช
์ด ์ง์ง ๋๋ฌด๋๋ฌด ์ข์์ ์ง์ง ์ต๊ณ ์
๋๋ค. ๋ค๋ฅธ ์๊ฐ์๋ถ๋ค๊ป ํ์ ๋๋ฆฌ์๋ฉด ๊ฐ์๋ง ๋ฃ๊ณ ๋๊ฐ์ด ์์ฑํ ์
์ฅ์ผ๋ก์จ, ๋์๋ฌธ์ ๊ตฌ๋ถ๋ง ์ํ์ ๋ค๋ฉด ๋ฌธ์ ์์ด ์์ฑํ์ค ์ ์์ ๊ฑฐ์์. ์ ๋ง ๊ฐ์ฌํฉ๋๋ค.
โ
โ
โ
โ
โ
์ ๋ฐ์ ์ผ๋ก ์ง๋ ์๋น์ค๋ฅผ ์ด๋ป๊ฒ ๋ง๋ค๊ณ ํ์ฉํ๋์ง ๋ฐฐ์ธ ์ ์์๋ ๊ฐ์์์ต๋๋ค. ์ธ์๊น์๋ ์ ์ Q&A์ ๋ํ ๋ต๋ณ ์๋์ ์ธ์ธํ๊ฒ ๋ด์ฃผ์๋ ์น์ ํจ์ด์์ต๋๋ค. ์ ์ตํ ๊ฐ์๋ฅผ ๋ง๋ค์ด์ฃผ์
์ ์ง์ฌ์ผ๋ก ๊ฐ์ฌํฉ๋๋ค.
์ด๋ฐ ๋ถ๋ค๊ป ์ถ์ฒํด์ ๐โโ๏ธ
React, Express๋ก ์ง๋ ์๋น์ค๋ฅผ ๋ง๋ค์ด ๋ณด๊ณ ์ถ์ ๋ถ๋ค
ํ๋ก์ ํธ๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ๋ง๋ค์ด ๋ณด๊ณ ์ถ์ ๋ถ๋ค
๊ณต์ ๋ฌธ์๋ฅผ ํ์ฉํ์ฌ API๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ผ์ ๋ถ๋ค
๊ฐ์ ํน์ง โจ

์ด๋ฒ ๊ฐ์์์๋ React, Expres, MongoDB, mongoose, TypeScript, ์
๋ก๋ ๊ธฐ๋ฅ, ์กฐํ ๊ธฐ๋ฅ, ๊ฒ์ ๊ธฐ๋ฅ ๋ฑ์ ๋ค๋ฃจ๊ณ ์์ต๋๋ค. ๊ฐ์์์๋ ์๋์ ๊ฐ์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด ๋ณผ ์์ ์
๋๋ค.
๋ฐ์ดํฐ๋ฅผ ์กฐํํ๊ณ , ๋ง์ปค์ ์ธํฌ์๋์ฐ๋ฅผ ์ง๋ ์์ ๋์ฐ๋ ๊ธฐ๋ฅ
์นด์นด์ค ํค์๋ ๊ฒ์ API๋ฅผ ํ์ฉํ ์์น ์ ๋ณด ๊ฒ์ ๊ธฐ๋ฅ
์์น ์ ๋ณด ์
๋ก๋ ๊ธฐ๋ฅ
- ๊ณต์ ๋ฌธ์๋ฅผ ํ์ฉํ์ฌ ๋ค์ด๋ฒ, ์นด์นด์ค ๋งต API๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง ์ ์ ์์ต๋๋ค.
- React, Express, MongoDB, TypeScript๋ฅผ ํ์ฉํ์ฌ ํ๋ก์ ํธ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ดํดํ ์ ์์ต๋๋ค.
- ํ๋ก์ ํธ๋ฅผ ๋ง๋ค ๋ ํ๋ก ํธ, ๋ฐฑ์๋, DB์ ์ญํ ์ ์ดํดํ๊ณ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
์ด๋ฐ ๊ฑธ ๋ฐฐ์์ ๐
#0.
๊ฐ์ ์๊ฐ ๋ฐ
์ด๊ธฐ ํ๊ฒฝ ๊ตฌ์ถ
๋ณธ ๊ฐ์์ ์์ผ๋ก ๋ง๋ค๊ฒ ๋ ํ๋ก์ ํธ์ ๋ํ ์๊ฐ์ ๊ฐ์ ์งํ์ ์ํ ์ด๊ธฐํ๊ฒฝ ๊ตฌ์ถ์ ์ค๋ช
ํ๊ณ ์์ต๋๋ค
#1.
Frontend.
๋ค๋น๊ฒ์ด์
๋ฐ ๋ง๋ค๊ธฐ
ํ๋ก์ ํธ ์งํ์ ํ์ํ ๋ค๋น๊ฒ์ด์
๋ฐ๋ฅผ ๋ง๋ค์ด ๋ณด๋ ๊ฐ์์
๋๋ค. Button๊ณผ Input์ ๋น๋กฏํ ๊ธฐ๋ณธ ์ปดํฌ๋ํธ๋ฅผ ๋จผ์ ์์ฑํ๊ณ ๋ด๋น๊ฒ์ด์
๋ฐ๋ฅผ ๋ง๋๋ ๋ฐฉ์์ผ๋ก ์งํ๋ฉ๋๋ค.
#2.
Frontend.
๋ค์ด๋ฒ ์ง๋ ๋์ฐ๊ธฐ
์ง๋ ์๋น์ค์ ํต์ฌ์ธ ์ง๋ api๋ฅผ ์ค์ ํ๊ณ ์ ์ฉํ๋ ๊ฐ์๋ฅผ ๋ด์์ต๋๋ค. ๋ณธ ๊ฐ์์์๋ ๋ค์ด๋ฒ ์ง๋ api๋ฅผ ์ฌ์ฉํ๊ณ ์์ด, application ์์ฑ ๋ฐ api key ๋ฐ๊ธ, ๊ทธ๋ฆฌ๊ณ React์์ ๋ค์ด๋ฒ ์ง๋ api๋ฅผ ๋์ฐ๋ ๋ฐฉ๋ฒ์ ์ค๋ช
ํ๊ณ ์์ต๋๋ค. ๋ํ ๊ณต์ ๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์ฌ ๋งต ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.

#3.
Frontend. Jotai
์ ์ญ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Jotai๋ฅผ ์๊ฐํ๊ณ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ๋ค๋ฃจ๋ ๊ฐ์์
๋๋ค.

#4.
Frontend.
๋ง์ปค ์์ฑํ๊ธฐ
์ง๋ ์๋น์ค์์ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ ์ค ํ๋์ธ ๋ง์ปค์ ๋ํด ์ค๋ช
ํ๋ ์น์
์
๋๋ค. ์ฌ๋ฌ ๊ฐ์ ๋ง์ปค๋ฅผ ์์ฑํ๊ณ ์ง๋ ์์ ํ์ํ๊ณ , ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ค๋ช
ํ๋ ๊ฐ์์
๋๋ค. ๋ง์ปค๋ฅผ ํด๋ฆญ ์ ์ธํฌ์๋์ฐ๋ฅผ ํ์ํ๊ณ ์ฌ๋ผ์ง๊ฒ ํ๋ ๊ธฐ๋ฅ์ ๋ง๋ค๊ณ , ์ง๋์๋ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ค๋ช
ํฉ๋๋ค.

#5.
Frontend.
์ธํฌ ์๋์ฐ ์์ฑํ๊ธฐ
์ง๋ ์๋น์ค์์ ๊ฐ์ฅ ๋ง์ด ํ์ฉ๋๊ณ , ๊ธฐ๋ณธ์ด ๋๋ ํ์ฌ์์น๋ฅผ ๋ฐ๊ณ ์ด๋ฅผ ์ง๋์์ ๋ง์ปค๋ฅผ ํตํด ํ์ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช
ํ๋ ์น์
์
๋๋ค.

#6.
Frontend.
SearchBoard
๊ฒ์์ฐฝ ๋ง๋ค๊ธฐ
๊ฒ์ ๊ฒฐ๊ณผ๋ฅผ ํ์ํ๊ธฐ ์ํ SearchBoard๋ฅผ ๋ง๋ค๊ณ hook์ ํ์ฉํ์ฌ ๊ฒ์์ฐฝ์ ๋ง๋๋ ๊ฐ์์
๋๋ค. ์นด์นด์ค์์ ์ ๊ณตํ๋ keyword search api๋ฅผ ํ์ฉํ์ฌ, ์ฌ์ฉ์์๊ฒ ๋ชฉ์ ์ง๋ฅผ ์
๋ ฅ๋ฐ์ ์ง๋ ์์ ํ์ํ๋ ๊ธฐ๋ฅ์ ๊ตฌํํฉ๋๋ค. ํด๋น ๋ชฉ์ ์ง์ ์๋์ ๊ฒฝ๋๋ฅผ ๊ฒฐ๊ด๊ฐ์ผ๋ก ๋ฐ์ ํ ์ด๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์ธ ์ ์์ผ๋ฉฐ, ์ง๋ ์์ ํ ๊ฐ์ marker๋ง ๋์ฐ๊ฒ ํ๋ ์๋ฌํธ๋ค๋ง์ ๋ํด์๋ ๋ค๋ฃจ๊ณ ์์ต๋๋ค.

#7.
Database. MongoDB
NoSQL Database์ธ MongoDB๋ฅผ ์ค์นํ๊ณ ์ธํ
ํ๋ ๊ฐ์์
๋๋ค. docker-compose๋ฅผ ํ์ฉํ์ฌ ๋ก์ปฌํ๊ฒฝ์์ DB ์๋ฒ๋ฅผ ์คํ์ํค๊ณ , MongoDB GUI ํด์ธ Compass๋ฅผ ์ฐ๊ฒฐํฉ๋๋ค.

#8.
Backend. Express
Express๋ฅผ ํ์ฉํ์ฌ ์์น ๋ฐ์ดํฐ ์ ์ฅ, ์ ์ฒด ์์น ๋ฐ์ดํฐ ์กฐํ, ๊ฒ์ ๊ฒฐ๊ณผ ์กฐํ API๋ฅผ ๋ง๋ค์ด ๋ณด๋ ๊ฐ์์
๋๋ค. ์ด์ ์ ์ค์ ํ MongoDB์ mongoose๋ฅผ ํ์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.

#9.
Frontend )
React-Query
React Query๋ฅผ ํ์ฉํด์ ์์น ๋ฐ์ดํฐ ๋ฐ ๊ฒ์ ๊ฒฐ๊ณผ ์กฐํ, ์์น ๋ฐ์ดํฐ ์์ฑ API ํต์ ์ ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ค๋ฃจ๋ ๊ฐ์์
๋๋ค.

์์ ์ง๋ฌธ Q&A ๐ฌ
Q. React, Express, MongoDB, Node๋ฅผ ๋ฐฐ์ฐ๋ฉด ์ข์ ์ ์ ๋ฌด์์ธ๊ฐ์?
๊ฐ์ฅ ํฐ ์ฅ์ ์ ์ธ์ด ํ๋๋ก ํ๋ฐํธ์๋์ ๋ฐฑ์๋๋ฅผ ๋์์ ๋ง๋ค ์ ์๋ค๋ ๊ฒ์
๋๋ค. React์ Express๋ Node ํ๊ฒฝ์์ ๊ฐ์ฅ ๋ง์ด ์ฐ์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ์ด๊ณ , MongoDB๋ NoSQL ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก Node์ ๊ถํฉ์ด ์ข์ผ๋ฉฐ mongoose๋ผ๋ ํจํค์ง๋ฅผ ํตํด ์ฝ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค.
Q. ์ด๋ณด์๊ฐ ๋ฃ๊ธฐ์ ๊ฐ์์ ๋์ด๋๋ ์ด๋ค๊ฐ์?
ํ๋ก์ ํธ๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ๋ง๋ค์ด ๋ณด๊ธฐ ๋๋ฌธ์ ์ฒ์ฒํ ๋ฐ๋ผ์ค์๋ฉด ๋ชจ๋๊ฐ ์๋ฒฝํ๊ฒ ๋ง๋ค ์ ์๋ ๋์ด๋์
๋๋ค. ๋ค๋ง ๊ฐ์ ํน์ฑ์ ๊ธฐ๋ณธ ์ง์(TypeScript, React hooks, Express ๊ตฌ์กฐ ๋ฑ)์ ๋ํด์๋ ๋ค๋ฃจ์ง ์์ผ๋ฏ๋ก ๋ฏธ๋ฆฌ ํ์ตํ ํ์๊ฐ ์์ต๋๋ค.
Q. ๋ค์ด๋ฒ ๋งต, ์นด์นด์ค ๋งต API๋ฅผ ์ฌ์ฉํ๋๋ฐ ๋น์ฉ์ด ๋ฐ์ํ๊ฒ ๋๋์?
๊ฐ์์ ํ๋ก์ ํธ๋ฅผ ๋ง๋๋ ๋ฐ๋ ๋น์ฉ์ด ๋ค์ง ์์ผ๋ฏ๋ก ๊ฑฑ์ ํ์ง ์์ผ์
๋ ๋ฉ๋๋ค. :) ๋ค์ด๋ฒ ๋งต API๋ ์ 10,000,000๊ฑด์ ๋ฌด๋ฃ๋ก ์ ๊ณตํ๊ณ ์์ผ๋ฉฐ, ์นด์นด์ค๋งต API๋ ์ผ 300,000๊ฑด์ ๋ฌด๋ฃ๋ก ์ ๊ณตํ๊ณ ์์ต๋๋ค. ๋ง์ ํธ๋ํฝ์ด ๋ฐ์ํ์ง ์๋ ํ ๋ฌด๋ฃ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.