ํ๋ก ํธ์๋ ๊ฐ๋ฐ์, ๋ ๋ฒจ ์
!
๋ฐ์ดํฐ ํต์ ์ ๋ํ ์์ ๊ฐ์ ๊ธธ๋ฌ๋ณด์ธ์.
์ด ๊ฐ์์์๋
REST API ๋ฐ GraphQL์ ์ฌ์ฉ๋ฐฉ์์ ์ดํดํ๊ณ ,
๊ฐ๋จํ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ๊ตฌ์ถํจ์ผ๋ก์จ
ํฌํธํด๋ฆฌ์ค์ ํ์ฉํด ๋ณด์ธ์!
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ทจ์
์ ๋ชฉํ๋ก ํฌํธํด๋ฆฌ์ค๋ฅผ ์ค๋นํ๊ณ ๊ณ์ ๊ฐ์? ์ด๋ฒ ๊ฐ์์์๋ React(๋ฆฌ์กํธ) ๊ธฐ๋ฐ์ผ๋ก ๊ฐ๋จํ SNS ์๋น์ค๋ฅผ ๋ง๋๋ ํ ์ดํ๋ก์ ํธ ํด๋ก ์ฝ๋ฉ์ ํตํด, ํด๋ผ์ด์ธํธ ์ฝ๋๋ฟ๋ง ์๋๋ผ ์๋ฒ ๋ฐ DB๊น์ง ๋ชจ๋ ์ง์ ๋ฐ๋ผ ๋ง๋ค์ด๋ด
๋๋ค.
์๋ฒ์ ๋ํ ๋ง์ฐํ ๋๋ ค์์
ํด๊ฒฐํ๊ณ ์ถ๋ค๋ฉด?
์ต๊ทผ ํ๋ก ํธ์๋ ์ทจ์
์ค๋น ์ค์ธ ๋ถ๋ค์ ๋์์ผ๋ก ๋ฉํ ๋ง์ ํ๋ค ๋ณด๋, ๋ง์ ๋ถ๋ค์ด ์๋ฒ์ฌ์ด๋ ํ์ต์ ๋ถ๋ด์ ๋๋ผ๊ณ ๊ณ์๋๊ตฐ์.
์๋ฒ์ฌ์ด๋ ํ์ต์ ๋๋ฌ์ผ
์ด๋ณด FE ๊ฐ๋ฐ์์ ๊ณ ๋ฏผ.
โ๋ฐฑ์๋ ํ๊ฒฝ ๊ตฌ์ถ์ ํฐ ๋ถ๋ด์ ๋๋๋๋ค.โ
โGraphQL์ ์จ๋ณด๊ณ ๋ ์ถ์๋ฐ, ๋ฐฑ์๋ ๋์ ์์ด ์ด๋ป๊ฒ ์์ํ ์ง ๋ชจ๋ฅด๊ฒ ์ด์.โ
โ์ทจ์
์ ์๋๊ณ MongoDB, MySQL, Firebase ๋ฑ์ ํ์ตํ๋ ๊ฒ ๊ณผ์ฐ ์ณ์๊น์?โ
์ ์ญ์ ๊ฐ์ ๊ณ ์ถฉ์ ๊ฒช์ด์จ ๋น์ ๊ณต์๋ก์, ๊ทธ๊ฐ ์ ๊ฐ ์์ ๋
ธํ์ฐ๋ฅผ ์ฌ๋ฌ๋ถ๊ป ๊ณต์ ํด๋๋ฆฌ๊ณ ์ ํฉ๋๋ค. ๋ณธ ๊ฐ์๋ฅผ ๊ทธ๋๋ก ํด๋ก ์ฝ๋ฉํ์๋ฉด์ ์ ์์์ ํ๋ฆ์ ๋ฐ๋ผ๊ฐ๋ค๋ณด๋ฉด, ์์ฐ์ค๋ฝ๊ฒ ๋ฐ์ดํฐ ํต์ ์ ๋ํ ์์ ๊ฐ์ ์ป๊ฒ ๋ ๊ฒ์
๋๋ค.
- JSON์ DB๋ก ์ฐ๋ ๋ฐฉ๋ฒ์ ์ ์ฉํ๋ฉด ์๋ฒ ๋ฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ํ ์ง์์ด ๊ฑฐ์ ์๋๋ผ๋ ๋ฐ์ดํฐํต์ ์ ์ฐ์ตํ๋ ๋ฐ ์๋ฌด๋ฐ ๋ฌธ์ ๊ฐ ์๊ฒ ๋ฉ๋๋ค.
- REST API๋ฅผ GraphQL๋ก ์ ํํ๋ ์ฐ์ต์ ํตํด, GraphQL์ ๋์
ํ๊ธฐ ์ํ ์ถฉ๋ถํ ์ง์์ ์์ ์ ์์ต๋๋ค.
- ์ทจ์ค์์ด๋ผ๋ฉด MongoDB, MySQL, Firebase ๋ฑ์ ๋์ค์ ํ์ํ ๋ ํ์ตํ์
๋ ๋ฆ์ง ์์ต๋๋ค. ๋น์ฅ์ ํ๋ก ํธ์๋์ ์ง์คํ์๋ ํธ์ด ์ข๊ฒ ์ฃ . ์๋ฒ์ฌ์ด๋์ ๋ํ ํ์ต์ ๋ฑ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ์ํ ๋งํผ๋ง ํ์๋ฉด ๋ฉ๋๋ค.
๋ฐ์ดํฐ ํต์ ์ ๋ํ
์์ ๊ฐ์ ๊ธธ๋ฌ๋ณด์ธ์.
์ด๋ฐ ๋ถ๋ค๊ป
์ถ์ฒํฉ๋๋ค.
์ทจ์
์ค๋น์
ํ๋ก ํธ์๋ ์ทจ์
์
์ค๋นํ๊ณ ์๋
๋น์ ๊ณต์
ํ๋ก ํธ ์ฃผ๋์ด
๋
ธํ์ฐ๋ฅผ ์ป๊ณ ์ถ์
ํ์ง ํ๋ก ํธ์๋
๊ฐ๋ฐ์๋ OK!
ํ๋ฒ์ ์ฐ์ต
REST API, GraphQL
๋ ๊ฐ์ง๋ฅผ ๋ชจ๋
์ฐ์ตํ๊ณ ์ถ์ ๋ถ
์ด๋ฐ ๋ถ๋ค๊ป๋ ํนํ ๋์์ด ๋ฉ๋๋ค.
โ
์๋ฒ์ฌ์ด๋ ํ์ต์ ๋ถ๋ด์ ๋๋ผ๋ ๋ถ
โ
๋จ๋
์ผ๋ก ํฌํธํด๋ฆฌ์ค ๋๋ ํ ์ดํ๋ก์ ํธ๋ฅผ ์งํํ๊ณ ์ ํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
โ
๊ฐ๋ฐ ๋จ๊ณ์์ api๊ฐ ๋ง๋ จ๋๊ธฐ ์ ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์๋๋ฅด๊ณ ์ถ์ ํ์ง ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
์ด ๊ฐ์์ ํน์ง
๋ก์ปฌ DB ๊ตฌ์ถ์ ์ํ
์ต์ํ์ CRUD
๊ธฐ๋ฅ๋ง์ ๋ค๋ฃธ์ผ๋ก์จ
ํ์ต ๋ถ๋ด์ด ์ ์ต๋๋ค.
๋ฌธ๋ฒ ์์ฃผ ์ค๋ช
๋์ ,
์ค์ ์ฐ์ด๋ ์์ ์ค์ฌ์ผ๋ก
์ค์ ๊ฐ๋ฐ ๋ฅ๋ ฅ์
๊ธฐ๋ฅผ ์ ์์ต๋๋ค.
์ค์ ๊ฐ๋ฐ ๊ณผ์ ์
๊ทธ๋๋ก ๋ฐ๋ฅด๋ฉด์
์์ฐ์ค๋ ์ ์ฒด์ ์ธ ํ๋ฆ์
ํ์
ํ ์ ์์ต๋๋ค.
์๊ฐ ์ ํ์ธํด์ฃผ์ธ์!
ํ์ต ๋ด์ฉ
1. Client - ๊ธฐ๋ณธ ๊ธฐ๋ฅ ๊ตฌํ
React ๋ฐ Next.js ๊ธฐ๋ฐ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์์ํฉ๋๋ค. ์๋ฒ์์ ํต์ ์์ด Mock ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค์ด ๋ชจ๋ ๊ธฐ๋ฅ์ด ๋์ํ๋๋ก ๊ตฌํํฉ๋๋ค.
2. Server - REST API ๊ตฌํ
Node.js์์ Express(์ต์คํ๋ ์ค) ํ๋ ์์ํฌ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ์๋ฒ๋ฅผ ๊ตฌ๋ํฉ๋๋ค. JSON์ผ๋ก DB๋ฅผ ๊ตฌ์ถํ๊ณ route๋ฅผ ์์ฑํฉ๋๋ค.
3. Client - REST API ํต์
ํด๋ผ์ด์ธํธ์์ REST API ํต์ ์ ํตํด ์ค์ ๋ฐ์ดํฐ๋ฅผ ๋ฐํ์ผ๋ก CRUD๋ฅผ ์์ฑํฉ๋๋ค.
4. Server - GraphQL ๊ตฌํ
Apollo Server๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ฌ ์๋ฒ๋ฅผ GraphQL ๋ฌธ๋ฒ์ผ๋ก ๋ณ๊ฒฝํฉ๋๋ค.
5. Client - GraphQL ํต์
ํด๋ผ์ด์ธํธ์ GraphQL ํต์ ์ ์ ์ฉํฉ๋๋ค. ๋ฌดํ์คํฌ๋กค ์ ์ฉ react-query API๋ ์์๋ด
๋๋ค.
์์ ์ง๋ฌธ Q&A
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
๋ค, ๋น์ ๊ณต์๋ฅผ ๋์์ผ๋ก ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ์ํ ์ต์ํ์ ๋ฐฑ์๋ ํ๊ฒฝ์ ๊ตฌ์ฑํ ์ ์๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค.
Q. ๊ฐ์๋ฅผ ๋ฃ๊ธฐ ์ ์ค๋นํด์ผ ํ ๊ฒ์ด ์๋์?
Node.js(๋
ธ๋), Yarn์ด ์ค์น๋์ด ์์ด์ผ ํฉ๋๋ค. React ๋ฐ ์ต์ ECMAScript์ ๋ํ ํ์ต์ด ์ด๋์ ๋ ์ด๋ฃจ์ด์ ธ ์์ด์ผ ์ง๋๋ฅผ ์์ํ๊ฒ ๋๊ฐ์ค ์ ์์ต๋๋ค.
Q. ๊ฐ์๋ฅผ ๊ผญ ๋ค์ด์ผ๋ง ํ๋์?
๊ทธ๋ ์ง ์์ต๋๋ค. ๊นํ์ ์ ์ฒด ์ฝ๋๋ฅผ ๊ณต๊ฐํด ๋์์ต๋๋ค. ์ฑํฐ๋ณ๋ก ๋ธ๋์น๋ฅผ ๋ถ๋ฆฌํ๋๋ฐ, ์ฝ๋๋ฅผ ๋ณด๊ณ ์ง์ ํ์ตํ์ค ์ ์๋ค๋ฉด ๊ตณ์ด ์ด ๊ฐ์๋ฅผ ๋ฃ์ง ์์๋ ๊ฐ์ ์ ์ฒด ๋ด์ฉ์ ์ต๋ํ์๋ ๋ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
๋ค๋ง ๊ฐ์ ์ ๋ฐ์ ๊ฑธ์ณ ๋ง์ ํตํด ์ ๋ฌํด๋๋ฆฌ๋ ์ ์์์ ํ๋ฆ์ ๊นํ ์ฝ๋๋ง์ผ๋ก๋ ์ป์ด๊ฐ์ค ์ ์๊ฒ ์ฃ . ์ค์ค๋ก ์ฝ๋ฉํ๊ณ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐ์ ์์ ์ด ์๋ ๋ถ๋ค์ด๋ผ๋ฉด ๋ณธ ๊ฐ์๋ฅผ ํตํด ํจ์ฌ ์ ์ตํ ์๊ฐ์ด ๋์๋ฆฌ๋ผ ์๊ฐํฉ๋๋ค.
์ง์๊ณต์ ์์
๋ค๋ฅธ ๊ฐ์๊ฐ ๊ถ๊ธํ๋ค๋ฉด?
Javascript ES6+ ์ ๋๋ก ์์๋ณด๊ธฐ - ์ด๊ธ (ํด๋ฆญ)
Javascript ES6+ ์ ๋๋ก ์์๋ณด๊ธฐ - ์ค๊ธ (ํด๋ฆญ)
Javascript ES6+ ์ ๋๋ก ์์๋ณด๊ธฐ - ๋ณด๋์ค (ํด๋ฆญ)