LandSoundScape - Fall into the beautiful landscape and the sound of your imagination
โFall into the beautiful landscape and the sound of your imagination.โ
LandSoundScape๋ ์ฌ์ฉ์๊ฐ ์ฌ์ง์ ์ ๋ก๋ํ์ ๋ ๋ฅ๋ฌ๋ ๋ชจ๋ธ์ ์ด์ฉํ์ฌ ์ฌ์ง์ ๊ฐ์ฅ ์ด์ธ๋ฆฌ๋ ์๋ฆฌ์ ํ๊ทธ๋ฅผ ์๋์ผ๋ก ์ค์ ํด์ฃผ์ด ๋ ๋ชฐ์ ๋ ์๊ฒ ๋ค๋ฅธ ์ฌ๋๊ณผ ํ๊ฒฝ ์ฌ์ง์ ๊ณต์ ํ ์ ์์ต๋๋ค.
์ธ๊ณ ๊ณณ๊ณณ์ ํ๊ฒฝ ์ฌ์ง์ ์๋ฆฌ์ ํจ๊ป ์ฆ๊ธฐ๊ณ , ์ง๋๋ฅผ ํตํด ์ํ๋ ๋๋ผ์ ๋ฆฌ์คํธ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. ๋ง์์ ๋๋ ์ฌ์ง์ ์ ์ฅํ๊ณ , ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ์ํ๋ ์ฃผ์ ์ ๋ง๋ ์ฌ์ง์ ์ฐพ์ ์ ์์ต๋๋ค.
์์ ์ ์ถ์ต์ด ๋ด๊ธด ํ๊ฒฝ ์ฌ์ง์ ์์์ ์๋ฆฌ์ ํจ๊ป ๊ณต์ ํด๋ณด์ธ์.
์ฌํ์ ์ ๊ฐ์ง ๋ชปํ๋ ์ง๊ธ ์์ ์ ๊ฐ๋ ํด์ธ, ๊ตญ๋ด ์ฌ์ง์ ์์ฃผ ์ฐพ์๋ณด๊ณค ํ์ต๋๋ค. ํด๋ณ์ ํ๊ฒฝ ์ฌ์ง์ ๋ณด์์ ๋ ๋ถ์์ง๋ ํ๋ ์๋ฆฌ๋ฅผ ๋ ์ฌ๋ฆฌ๋ฏ์ด ์๋ฆฌ๋ฅผ ์์ํ ์ ์์์ต๋๋ค.
์์์ ์๋ฆฌ๋ฅผ ์ฌ์ฉ์๊ฐ ์ง์ ์ค์ ํ์ง ์์๋, ํ๊ฒฝ๊ณผ ํจ๊ป ์ ๊ณตํ ์ ์๋ค๋ฉด ์ฌ์ง์ ๋ณผ ๋, ๋ง์น ๊ทธ ์ฅ์์ ์๋ ๊ฒ์ฒ๋ผ ๋ชฐ์ ๋๋ฅผ ๋ ๋์ฌ์ค ์ ์์ ๊ฑฐ๋ก ์๊ฐํ์ต๋๋ค.
๋ํ, ์ด๋ฌํ ์ฌ์ง์ ๋ค๋ฅธ ์ฌ๋๊ณผ ์ฝ๊ฒ ๊ณต์ ํ ์ ์๋ค๋ฉด ๋ด๊ฐ ๊ฐ์ง๊ณ ์๋ ์ถ์ต์ ๋ค๋ฅธ ์ฌ๋์๊ฒ ๋ ๊ณต๊ฐ๋ฐ์ ์ ์์ ๊ฑฐ๋ก ์๊ฐํ์ต๋๋ค.
๋ง์ง๋ง์ผ๋ก, ์ ๊ทผ์ฑ์ด ์ข์ ์น์ ํ์ฉํ์ฌ ์ฌ์ฉ์๊ฐ ์ฝ๊ฒ ์๋น์ค๋ฅผ ์ด์ฉํ๊ณ ๋ณต์กํ ๊ณผ์ ์ ์ต๋ํ ์ฌ์ฉ์์๊ฒ ๋๋ฌ๋ด์ง ์๋๋ก ํ์ฌ ๋๊ตฌ๋ ์ฝ๊ฒ ์๋น์ค๋ฅผ ์ฌ์ฉํ ์ ์์ผ๋ฉด ์ข๊ฒ ๋ค๊ณ ์๊ฐํ์ต๋๋ค.
์ด๋ฌํ ์๊ฐ์ด ๋ด๊ฒจ ์ฌ์ฉ์๋ ๋จ์ํ ์ฌ์ง์ ์ ๋ก๋ํ๋ ๊ฒ๋ง์ผ๋ก๋ ํ๊ฒฝ์ ๋ ๋ชฐ์ ํ๊ณ , ๊ณต์ ํ ์ ์๋ โLandSoundScapeโ ๊ฐ๋ฐํ๊ฒ ๋์์ต๋๋ค.
ํต์ฌ์ ์ธ ๊ธฐ๋ฅ ์ค ํ๋์ธ ์ด๋ฏธ์ง๋ฅผ ๋ถ์ํ์ฌ ์ฌ์ด๋๋ฅผ ์์ธกํ๊ณ , ํ๊ทธ๋ฅผ ์์ธกํ๋ ๊ธฐ๋ฅ์ด ์์ต๋๋ค.
ํนํ, ์ด๋ฏธ์ง๋ฅผ ๋ถ์ํ์ฌ ์ฌ์ด๋๋ฅผ ์์ธกํ๋ โSoundNetโ์ ๊ฒฝ์ฐ TensorFlow.js์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ์ง ์๋ ๋ชจ๋ธ์ด์๊ณ ๊ฒฐ๊ตญ Kears ๋ชจ๋ธ์ Json, Binary ํ์ผ๋ก ๋ณํํ์ฌ ๋ชจ๋ธ์ ์ฌ์ฉํ์ฌ์ผ ํ์ต๋๋ค.
๊ตฌ๊ธ์์ ์ ๊ณตํด์ฃผ๋ ๋ ํผ๋ฐ์ค๋ฅผ ์ฐธ๊ณ ํ์ฌ ํด๋น ๋ชจ๋ธ๊ณผ ์ด๋ฏธ์ง์ โfeature vectorโ๋ฅผ ์ด์ฉํ๋ ์ฝ๋๋ฅผ JS ๋ฌธ๋ฒ๊ณผ TensorFlow.js๋ฅผ ํตํด โpredictโ ๋ก์ง์ ์์ฑํ์์ต๋๋ค.
ํ์ง๋ง, ๋ชจ๋ธ ์์ฒด๊ฐ Python ํ๊ฒฝ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ต์ ํ ๋์ด ์์ด ์์ธกํ ๊ฒฐ๊ณผ์ ์ ํ๋๊ฐ ๋งค์ฐ ๋จ์ด์ง๋ ๊ฒ์ ํ์ธํ์์ต๋๋ค.
๊ฒฐ๊ตญ ์ ํ๋๋ฅผ ๊ทน์ ์ผ๋ก ์ฌ๋ฆฌ๊ธฐ ์ํด์๋ ๋ค๋ฅธ ๋์์ ์ฐพ์์ผ ํ๊ณ , NodeJS์์ ์ ๊ณตํ๋ โChild Processโ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์์ต๋๋ค.
NodeJS ๋ด๋ถ์์ ์์ ํ๋ก์ธ์ค๋ฅผ ์์ฑํ๊ณ ๋ ๋ฆฝ๋ ํ๊ฒฝ์์ ์ด๋ฏธ์ง์ โfeature vectorโ๋ฅผ ์ถ์ถํ์ฌ ์ ํฉํ ์ฌ์ด๋๋ฅผ ์์ธกํ๋ ํ์ด์ฌ ์ฝ๋๋ฅผ ์คํํ๊ณ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์์ฌ ์ ์๋๋ก ํ์์ต๋๋ค.
์ด ๊ณผ์ ์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๊ฐ์ฅ ์๊ฐ์ ๋ง์ด ํฌ์ํ๊ณ , ๋์์์ด ๊ณ ๋ฏผํ ๋ถ๋ถ์ ๋๋ค. ์ด ๊ณ ๋ฏผ์ ํตํด ํ๋ก ํธ ๋จ์์ ์ด๋ฏธ์ง์ ๋ ์ ํฉํ ์ฌ์ด๋๋ฅผ ์ ๊ณตํด ์ค ์ ์์์ต๋๋ค.
์ด๋ฒ ํ๋ก์ ํธ์์๋ ๊ธฐ์กด์ โREST APIโ ๋์ GraphQL์ ๋์ ํ์์ต๋๋ค.
๋์ ํ ์ด์ ๋ ํ๋ก์ ํธ ์ธก๋ฉด์์๋ ํ๋ก ํธ ๊ฐ ํ์ด์ง์์ ํ์ํ ๋ฐ์ดํฐ๋ง ์๋ฒ์์ ๋ฐ์์ฌ ์ ์๋๋ก ํ๊ณ ์ ์ ํ ์ฟผ๋ฆฌ๋ฅผ ๋ ๋ ค ๋ค์ ์ฌ๊ฐ๊ณตํ์ง ์๊ณ ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ ์ ์๋๋ก ํ์ฌ API ๊ด๋ จ ํ๋ก ํธ์ ๋ถ๋ด์ ๋๊ณ ์ถ์์ต๋๋ค. ํ์ต์ ์ธ ์ธก๋ฉด์์๋ GraphQL์ด ๊ธฐ์กด์ REST API์ ๋จ์ ์ ๋ณด์ํ๊ณ ์ ๋์ ๋์๋ค๊ณ ํ๋๋ฐ ๊ณผ์ฐ ์ด๋ค ์ ์ด ๋ค๋ฅด๊ณ , ์ฅ๋จ์ ์ ๋ฌด์์ผ๊น๋ฅผ ๋ชธ์ ๊ฒฝํํด๋ณด๊ณ ์ถ์์ต๋๋ค.
GraphQL์ ์ฒ์ ๋์ ํด๋ณด์์ง๋ง ์ ๋๋ก ์ค๊ณํด ๋ณด๊ณ ์ถ์ด ๊ฐ๋ฐ ์ ์กฐ์ฌ๋ฅผ ๋ง์ด ์งํํ์์ต๋๋ค. ํ์ผ ์ ๋ก๋์ ํ์ฅ์ฑ ์๋ ์๋ฒ๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํด โapollo-server-expressโ๋ฅผ ์ฌ์ฉํ์์ต๋๋ค. ๋ํ, ๊ฐ ๋ฐ์ดํฐ ๋ชจ๋ธ์ ๊ธฐ์ค(DataSoucrce)์ผ๋ก Query, Muation, Resolver, Type์ ๋ชจ๋ํํ์ฌ ๊ด์ฌ์ฌ๋ฅผ ๋ถ๋ฆฌํ๊ณ ์ ์ง๋ณด์์ ์ฉ์ดํ๋๋ก ๊ฐ๋ฐํ์์ต๋๋ค. โContextโ๋ฅผ ์ด์ฉํ์ฌ JWT Authorization ๋ก์ง์ ๊ตฌํํ์์ต๋๋ค.
GraphQL์ ๋์ ํ๊ณ ๊ฐ์ฅ ํฌ๊ฒ ๋๋ ์ฅ์ ์ โ๋ฐ๋ก ๋ฌธ์ํํ์ง ์๊ณ ๊ฐ Query, Muation์ ํ ์คํธํ๊ณ ๋ช ์ธ๋ฅผ ํ์ธํ ์ ์๋ ์ ' ์ด์์ต๋๋ค.
โApollo Studioโ๋ฅผ ์ด์ฉํ์ฌ ๊ฐ๋ฐ ์ค์ธ ๋ฐฑ์๋์ Query ๋ค์ ๋๊ตฌ๋ ํ ์คํธํ ์ ์๋ ์ ์ด ๊ฐ๋ฐ ๋ง์กฑ๋๋ฅผ ๋์ฌ์ฃผ์์ต๋๋ค.
GraphQL์ ํฐ ๋จ์ ์ ํ์ผ ์ ๋ก๋์์ต๋๋ค. ํ์ง๋ง, โapollo-server-expressโ, โgraphql-uploadโ๋ฅผ ์ ๊ทน์ ์ผ๋ก ํ์ฉํ์๊ณ โapollo-serverโ, โnodeโ ๋ฒ์ ์ ๋ฎ์ถ์ง ์๊ณ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์์ต๋๋ค.
์ง์ ๊ฒฝํํ๊ณ ๋๋ ์ ์ 'GraphQL์ด REST API๋ณด๋ค ์ฐ์ธํ ๊ฒ์ด ์๋๋ผ ์ํฉ์ ๋ง๊ฒ ์ฌ์ฉํด์ผ ํ๋คโ๋ผ๊ณ ๋๊ผ์ต๋๋ค. GraphQL์ด ํจ์จ์ ์ผ๋ก โFetchingโํ๊ณ , ํ ์คํ ์ด ์ฉ์ดํ ์ฅ์ ์ด ๊ฐ์ง๊ณ ์์ง๋ง ํ์ผ ์ ๋ก๋ ๋ถ๋ถ์์ ํนํ ๋๋ ๊ธด ์ธ์ ๋์ ์งํํ โREST APIโ์ ์์ ์ฑ๊ณผ ๋ฒ์ฉ์ฑ์ ๋ฐ๋ผ๊ฐ์ง๋ ๋ชปํ๋ค๊ณ ์๊ฐํ์ต๋๋ค.
โapollo-server-expressโ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ธฐ์กด์ Express(REST) ํ๊ฒฝ์์ ํน์ ์๋ํฌ์ธํธ์ GraphQL์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ๋ ๊ฐ์ง๋ฅผ ์ ์ ํ๊ฒ ์์ด ํ, ๊ฐ์ธ, ์งํํ๊ณ ์๋ ํ๋ก์ ํธ์ ํน์ฑ์ ๋ง๊ฒ ์ฌ์ฉํ๋ ๊ฒ์ด ์ฌ๋ฐ๋ฅธ ๋ฐฉํฅ์ด์ง ์์๊น ์๊ฐํ๊ฒ ๋์์ต๋๋ค.
์ด๋ฒ ํ๋ก์ ํธ์์ PWA(Progressive Web App) ๋ฅผ ์ ์ฉํ์ฌ ๋ชจ๋ฐ์ผ ํ๊ฒฝ์์ ์น์ด์ง๋ง ๋ค์ดํฐ๋ธ ์ฑ์ฒ๋ผ ์ฌ์ฉํ ์ ์๋๋ก ํ์์ต๋๋ค. ๋ํ ๋ค์ํ ํ๋ซํผ์์ ์๋น์ค๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ๋ฐ์ํ ๋์์ธ์ ๋์ ํ์์ต๋๋ค.
PWA ์ ์ฉ์ ์ํ์ฌ ํต์ฌ์ธ โManifestโ ํ์ผ์ ์์ฑํ๊ณ 'ServiceWokerโ๋ฅผ ์ฌ์ฉํ์์ต๋๋ค.
PWA ์ ์ฑ ์์ ๊ฐ์กฐํ๋ ๋ถ๋ถ์ ์ต๋ํ ๋ง์ถ๊ธฐ ์ํด โLighthouseโ๋ฅผ ํตํด ์ ์ ์นํ์ด์ง ์ ์๋ฅผ ๋ถ์ํ๊ณ , ๋ถ์กฑํ ๋ถ๋ถ์ ์ง์ํด์ ๋ณด์ํ์์ต๋๋ค.
๊ทธ ๊ฒฐ๊ณผ ๋ชจ๋ฐ์ผ ์ฑ, ํฌ๋กฌ ์ฑ์ผ๋ก ์ค์น๊ฐ ๊ฐ๋ฅํ๊ฒ ๋์๊ณ ์ฌ์ฉ์์๊ฒ ๋ค์ดํฐ๋ธ ์ฑ์ ์ฌ์ฉํ๋ ๊ฒ๊ณผ ๊ฐ์ ๊ฒฝํ์ ์ค ์ ์์์ต๋๋ค.
๋ํ, โWorkBoxโ๋ฅผ ์ด์ฉํ์ฌ GraphQL ์ฟผ๋ฆฌ๋ค์ ๋ฌธ์์ด๋ก ๋ณํ์ํจ ํ ํด์ํค๋ฅผ ์ด์ฉํ์ฌ ์์ฒญ๊ณผ ์๋ต์ ์บ์ฑํ์์ต๋๋ค. ์ด๋ฏธ์ง, ์ฌ์ด๋ ํ์ผ ๋ํ โServiceWokerโ์ ์บ์ฑํ์ฌ ์คํ๋ผ์ธ์์๋ ๋์ํ ์ ์๋๋ก ํ์์ต๋๋ค.
์คํ๋ผ์ธ ํ๊ฒฝ์ด ์๋ ๋๋ โnetworkFirstโ์ ๋ต์ ์ด์ฉํ์ฌ ์ค์ ๋ฐ์ดํฐ์ Sync๋ฅผ ๋ง์ถ๋ ๋ฐ ์ด์ ์ ๋์์ต๋๋ค.
๋ค์ํ ํ๋ซํผ์์ ๋ฌ๋ผ์ง๋ ํ๋ฉด ํฌ๊ธฐ์ ๋์ํ๊ธฐ ์ํด์๋ ๋ฐ์ํ ๋์์ธ์ด ํ์์ ์ ๋๋ค.
์ด๋ฒ ํ๋ก์ ํธ ์๋น์ค์ ํน์ฑ์ ๋ง์ ๊ธฐ๊ธฐ๋ฅผ ์ง์ํด์ผ ํ๊ณ , โMedia Queryโ, ์คํ์ผ ์ปดํฌ๋ํธ์ โGlobal Styleโ์ ์ด์ฉํ์ฌ ๋์ํ์์ต๋๋ค. ๋ํ, ๊ธฐ์กด์ โpxโ์ ์ฌ์ฉํ์ฌ ๋จ์๋ฅผ ์ ํ์ง๋ง, ๋ฐ์ํ ๋์์ธ์์ ํ์์ ์ธ โremโ์ ์ฌ์ฉํ์์ต๋๋ค.
๋ง์ง๋ง์ผ๋ก ์ฌ์ง์ ๋ณด์ฌ์ฃผ๋ ํ๋ฉด์์๋ ๋ชจ๋ฐ์ผ๊ณผ ๋ฐ์คํฌํ์ ํ๋ฉด ํฌ๊ธฐ๋ฅผ ๊ณ ๋ คํ์ฌ ๊ฐ ํ๋ฉด์ ๋ง๋ ๋ ์ด์์ ๋ฐฐ์น๋ฅผ ์ ์ฉํ์์ต๋๋ค.
'landSoundScape' ํ๋ก์ ํธ์์ ์ ์ฉํ ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋ ์ ๊ธ๋ก ์ ๋ฆฌํ์์ต๋๋ค.
- ์์ด๋์ด ๋ฑ ํฌ
- LandSoundScape
- DB schema modeling
- ๋ชฉ์ ๋ฐ ํ๋กํ ํ์
- PoC (Proof of Concept)
- ๋ฉ์ธ ๊ธฐ๋ฅ(TensorFlow) ์์
- ํ๋ก ํธ, ๋ฐฑ์๋ ์ค๊ณ ๋ฐ ๊ฐ๋ฐ
- AWS S3๋ฅผ ์ด์ฉํ ์ ์ ํ์ผ ์ ๋ก๋
- ๋ฉ์ธ ๊ธฐ๋ฅ ์ ๊ทธ๋ ์ด๋
- Netlify๋ฅผ ์ด์ฉํ ํ๋ก ํธ ํ๊ฒฝ ๋ฐฐํฌ
- AWS Elastic Beanstalk๋ฅผ ์ด์ฉํ ๋ฐฑ์๋ ํ๊ฒฝ (Node, Python) ํ๊ฒฝ ๋ฐฐํฌ
- ํ๋ก์ ํธ๋ฅผ ๋ค์ด ๋ฐ์ ํ ํ๋ก์ ํธ ๋๋ ํ ๋ฆฌ ๋ด๋ถ์์ ๋ค์ ๋ช ๋ น์ด ์ ๋ ฅ
yarn
yarn start
- ํ๊ฒฝ์ค์ (.env file)์ ์๋์ ๊ฐ์ด ์ ๋ ฅํด์ผ ํฉ๋๋ค.
REACT_APP_GOOGLE_CLIENT_ID=<YOUR_GOOGLE_CLIENT_ID>
REACT_APP_API_SERVER_URL=<YOUR_SERVER_URL>
- ํ๋ก์ ํธ๋ฅผ ๋ค์ด ๋ฐ์ ํ ํ๋ก์ ํธ ๋๋ ํ ๋ฆฌ ๋ด๋ถ์์ ๋ค์ ๋ช ๋ น์ด ์ ๋ ฅ
yarn
yarn start
- ํ๊ฒฝ์ค์ (.env file)์ ์๋์ ๊ฐ์ด ์ ๋ ฅํด์ผ ํฉ๋๋ค.
MONGODB_URI=<YOUR_MONGODB_DATABASE_URL>
JWT_SECRET=<YOUR_JWT_TOKEN_SECRET>
AWS_ACCESS_KEY=<YOUR_AWS_ACCESS_KEY>
AWS_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>
AWS_S3_REGION=<YOUR_S3_REGION>
AWS_S3_BUCKET_NAME=<YOUR_S3_BUCKET_NAME>
PYTHON_PATH=<YOUR_PYTHON_INSTALL_PATH>
- PWA
- ServiceWorker
- WorkBox
- React
- VAC Pattern
- React Query (Sever state)
- Recoil (Client state)
- GraphQL Request
- D3.js
- Styled Compontent
- Jest
- Node.js
- Apollo Server Express
- TensorFlow.js
- JWT authorization
- MongoDB - Atlas
- AWS S3
- Jest
- Python 3.7
- Numpy
- Scipy
GitHub - KimJunhyeong1/landsoundscape-frontend
GitHub - KimJunhyeong1/landsoundscape-backend
๋งค์ฃผ ์งํํ๋ ๊ณผ์ , 2๋ฒ์ ํ ์คํธ, ํ ํ๋ก์ ํธ๋ฅผ ๊ฑฐ์ณ ๋ง์ง๋ง ์ง๊ธ์ ๊ฐ์ธ ํ๋ก์ ํธ๊น์ง ์ด๋ ํ๋ ์ฌ์ด ๊ฒ์ด ์์๊ณ ๋งค๋ฒ ๊ณ ๋น๊ฐ ์ฐพ์์์ต๋๋ค.
ํ์ง๋ง, ๊ณ ๋น๋ฅผ ๋์ด๊ฐ๊ธฐ ์ํด ์กฐ์ฌํ๊ณ ์ฝ์งํ๋ ๋ฌด์ํ ๋ง์ ์๊ฐ์ ํตํด ๊ฐ๋ฐ์๋ก์จ ์ฑ์ฅํ๊ณ ๊ฐ๋ฐ์ ์งํํ ๋ ๋งค ์๊ฐ ๊ฒฐ์ ํ๋ ๋์์ โ์ฆ๊ฑฐ'๋ฅผ ๋ง๋ค ์ ์์์ต๋๋ค.
์ด๋ฒ ๊ฐ์ธ ํ๋ก์ ํธ ๋ํ ๋ง์ฐฌ๊ฐ์ง์์์ต๋๋ค. ๊ธฐํํ๋ ๋จ๊ณ์์๋ถํฐ โTensorFlowโ ๊ด๋ จ PoC์์ ์ด๋ ค์์ ๊ฒช์๊ณ , ์ค์ ๊ฐ๋ฐ ๋จ๊ณ์์๋ ์ ๊ฐ ์ํ๋ ๊ฒฐ๊ณผ๊ฐ ๋์ค์ง ์์ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์ป๊ธฐ ์ํด ๋ง์ ์๊ฐ์ ํฌ์ํ์์ต๋๋ค.
์ด๋ฏธ์ง์ ์ ํฉํ ์ฌ์ด๋๋ฅผ ์์ธกํ๋ ์ ํ๋๋ฅผ ์ฌ๋ฆฌ๊ธฐ ์ํด NodeJS์์ ์ฒ์ ์ฌ์ฉํด ๋ณด๋ โChild Processโ๋ฅผ ์ด์ฉํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์์ต๋๋ค. ์ ๊ฒ ์ฃผ์ด์ง ๋๊ตฌ๋ฅผ ์ ํ์ฉํ์ฌ ์ํ๋ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์๋ ์์ ๊ฐ์ ์ฃผ์์ต๋๋ค.
๋, ๋ฐฑ์๋๋ฅผ AWS EB์ ๋ฐฐํฌํ๋ ๊ณผ์ ์์ NodeJS์์ โChild Processโ๋ฅผ ํตํด Python ํ๊ฒฝ๊ณผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์ํ์์ต๋๋ค. ๊ธฐ์กด์ ๋ฐฑ์๋ ๋ฐฐํฌ ๊ณผ์ ์ผ๋ก๋ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์์ต๋๋ค.
์ด์ ์ ์ง์ฅ์์ โLinuxโ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝํ์ ์ด๋ ค EB(Linux) ํ๊ฒฝ์ ํ์๋ก ํ๋ Python ํ๊ฒฝ๊ณผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ง์ Extensions Command๋ฅผ ์์ฑํ์ฌ ์ค์นํ์์ต๋๋ค. ์ด ๊ณผ์ ์์ ๋ ํผ๋ฐ์ค๊ฐ ์กด์ฌํ์ง ์์ ๋ง๋งํ์ง๋ง ์ ๊ฐ ๋จธ๋ฆฟ์์ผ๋ก ์๊ฐํ ๋ฐฉ๋ฒ์ ํตํด ํด๊ฒฐํ์์ ๋ ์ด๋ฃจ๋งํ ์ ์๋ ์ฑ์ทจ๊ฐ์ ๋๊ผ์ต๋๋ค.
GraphQL์ ์ฒ์ ๋์ ํ์๊ณ ๋ง์ ์ํ์ฐฉ์ค๋ฅผ ๊ฒช์์ต๋๋ค. ํนํ, GraphQL์ ๋จ์ ์ธ ํ์ผ์ ๋ก๋๋ฅผ ๊ฐ๋ฐํ๋ ๊ณผ์ ์์๋ โ์ ๋ด๊ฐ ๊ธฐ์กด์ ์ ์ฐ๋ REST API๋ฅผ ์ฐ์ง ์์์๊น.. ๊ทธ๋ ๊ฒ ํ๋ค๋ฉด ์์ํ๊ฒ ๊ฐ๋ฐํ์์ ํ ๋ฐโฆโ๋ผ๊ณ ์๋์์ด ํํํ์์ต๋๋ค. ํ์ง๋ง, ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์ฌ ๊ธฐ์กด์ ์ฌ์ฉํ๋ โapollo-serverโ์์ โapollo-server-expressโ ๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ โgraphql-uploadโ๋ฅผ ์ด์ฉํ์ฌ ํ์ผ์ ๋ก๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์์ต๋๋ค. ๋ฌธ์๋ก๋ง ์ ํ๋ ๋ ๊ฐ์ง ๊ธฐ์ ์คํ์ ์ฅ๋จ์ ์ ์ง์ ๊ฒฝํํด๋ณด๋ ๊ฒ์ด ์ผ๋ง๋ ์ค์ํ์ง ๊นจ์ฐ์น๊ฒ ํ์์ต๋๋ค.
PWA ๋ฐ์ ๊ฐ๋ฅ์ฑ๊ณผ ๋ฐ์ํ ๋์์ธ์ ์ค์์ฑ์ ๊ฒฝํํ์์ต๋๋ค. ์ด์ ์ ์ ๊ฐ ๊ฐ์ธ์ ์ผ๋ก ๋ง๋ค๊ณ ์ถ์ด ํ๋ ์๋น์ค๊ฐ ํ์ด๋ธ๋ฆฌ๋ ๋ฐฉ์์ผ๋ก ๋ชจ๋ฐ์ผ ๋์์ด ํ์ํ์๋๋ฐ PWA, ๋ฐ์ํ ๋์์ธ์ ๋์ ํ๋๋ฐ ๋๋ ค์์ด ์์ด ์ ์ฉํ์ง ๋ชปํ๋ ๊ฒฝํ์ด ์์ต๋๋ค.
์ด๋ฒ์ PWA์ ๋ฐ์ํ ๋์์ธ์ ๋์ ํ์ฌ ์ ์๊ฒ ์กด์ฌํ๋ ๊ทธ๋ฐ ๋๋ ค์์ ๋จ์ณ๋ด๊ณ ๊ฐ๋ฐ์๋ก์ ํ ๋ฐ์ง ๋์๊ฐ ์ ์๋ ๊ฒฝํ์ด ๋์์ต๋๋ค.
ํ๋ก์ ํธ ๋ด๋ด ๋๊ผ๋ ๋ถ๋ถ์ ๊ฐ๋ฐ์์๊ฒ ์์ด์ ๊ธฐ๋ณธ๊ธฐ๋ ๊ฐ์ฅ ์ค์ํ๋ค ์ ๋๋ค. ์๋ฅผ ๋ค์ด ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ์ฌ๋ JS ๊ธฐ์ด ๋ฌธ๋ฒ ๊ธฐ๋ฐ์ด ์ผ๋ง๋ ๋จ๋จํ์ง์ ๋ฐ๋ผ ์ฝ๋์ ์ง์ด ๋ฌ๋ผ์ง๋ค๊ณ ์๊ฐํฉ๋๋ค.
๊ทธ๋์ ์ ๋ ๊ทธ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๊ฐ์ง๊ธฐ ์ํด ๋ชจ๋ ๊ณผ์ ์์ ์ ๊ฒฝ ์ผ๊ณ , ์์ผ๋ก๋ ๋ ๋จ๋จํ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๊ฐ์ถ๊ณ ์ถ์ต๋๋ค.
๋ง์ง๋ง์ผ๋ก, ์ด๋ฒ ํ๋ก์ ํธ๋ ์ ๊ฐ ์ง๊ธ๊น์ง ๋ฐฐ์ด ์ง์๊ณผ ๊ธฐ๋ณธ๊ธฐ์ ๋ํ โ์ฆ๋ช โ์ด์๊ณ , ์์ผ๋ก ๋์์์ด ์ฑ์ฅํ๊ณ ์ถ์ ๊ณ๊ธฐ๊ฐ ๋์์ต๋๋ค.