React ๊ธฐ๋ฐ์ ๊ฐ๋จํ SNS ์๋น์ค๋ฅผ ๋ง๋ค๋ฉด์ REST API ๋ฐ GraphQL์ ์ฐ์ตํฉ๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ํ ๋ฐฑ์๋ ํ๊ฒฝ์ ์ฝ๊ณ ๊ฐ๋จํ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์๊ฐํฉ๋๋ค.
React
๋ก์ปฌ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ฐ ์๋ฒ ๋ง๋ค๊ธฐ
REST API
GraphQL
CRUD
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์, ๋ ๋ฒจ ์
!
๋ฐ์ดํฐ ํต์ ์ ๋ํ ์์ ๊ฐ์ ๊ธธ๋ฌ๋ณด์ธ์.
REST API ๋ฐ GraphQL์ ์ฌ์ฉ๋ฐฉ์์ ์ดํดํ๊ณ ,
๊ฐ๋จํ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ๊ตฌ์ถํจ์ผ๋ก์จ
ํฌํธํด๋ฆฌ์ค์ ํ์ฉํด ๋ณด์ธ์!
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ทจ์ ์ ๋ชฉํ๋ก ํฌํธํด๋ฆฌ์ค๋ฅผ ์ค๋นํ๊ณ ๊ณ์ ๊ฐ์? ์ด๋ฒ ๊ฐ์์์๋ React(๋ฆฌ์กํธ) ๊ธฐ๋ฐ์ผ๋ก ๊ฐ๋จํ SNS ์๋น์ค๋ฅผ ๋ง๋๋ ํ ์ดํ๋ก์ ํธ ํด๋ก ์ฝ๋ฉ์ ํตํด, ํด๋ผ์ด์ธํธ ์ฝ๋๋ฟ๋ง ์๋๋ผ ์๋ฒ ๋ฐ DB๊น์ง ๋ชจ๋ ์ง์ ๋ฐ๋ผ ๋ง๋ค์ด๋ด ๋๋ค.
์ต๊ทผ ํ๋ก ํธ์๋ ์ทจ์ ์ค๋น ์ค์ธ ๋ถ๋ค์ ๋์์ผ๋ก ๋ฉํ ๋ง์ ํ๋ค ๋ณด๋, ๋ง์ ๋ถ๋ค์ด ์๋ฒ์ฌ์ด๋ ํ์ต์ ๋ถ๋ด์ ๋๋ผ๊ณ ๊ณ์๋๊ตฐ์.
โ๋ฐฑ์๋ ํ๊ฒฝ ๊ตฌ์ถ์ ํฐ ๋ถ๋ด์ ๋๋๋๋ค.โ
โGraphQL์ ์จ๋ณด๊ณ ๋ ์ถ์๋ฐ, ๋ฐฑ์๋ ๋์ ์์ด ์ด๋ป๊ฒ ์์ํ ์ง ๋ชจ๋ฅด๊ฒ ์ด์.โ
โ์ทจ์ ์ ์๋๊ณ MongoDB, MySQL, Firebase ๋ฑ์ ํ์ตํ๋ ๊ฒ ๊ณผ์ฐ ์ณ์๊น์?โ
์ ์ญ์ ๊ฐ์ ๊ณ ์ถฉ์ ๊ฒช์ด์จ ๋น์ ๊ณต์๋ก์, ๊ทธ๊ฐ ์ ๊ฐ ์์ ๋ ธํ์ฐ๋ฅผ ์ฌ๋ฌ๋ถ๊ป ๊ณต์ ํด๋๋ฆฌ๊ณ ์ ํฉ๋๋ค. ๋ณธ ๊ฐ์๋ฅผ ๊ทธ๋๋ก ํด๋ก ์ฝ๋ฉํ์๋ฉด์ ์ ์์์ ํ๋ฆ์ ๋ฐ๋ผ๊ฐ๋ค๋ณด๋ฉด, ์์ฐ์ค๋ฝ๊ฒ ๋ฐ์ดํฐ ํต์ ์ ๋ํ ์์ ๊ฐ์ ์ป๊ฒ ๋ ๊ฒ์ ๋๋ค.
์ทจ์ ์ค๋น์
ํ๋ก ํธ์๋ ์ทจ์
์
์ค๋นํ๊ณ ์๋
๋น์ ๊ณต์
ํ๋ก ํธ ์ฃผ๋์ด
๋
ธํ์ฐ๋ฅผ ์ป๊ณ ์ถ์
ํ์ง ํ๋ก ํธ์๋
๊ฐ๋ฐ์๋ OK!
ํ๋ฒ์ ์ฐ์ต
REST API, GraphQL
๋ ๊ฐ์ง๋ฅผ ๋ชจ๋
์ฐ์ตํ๊ณ ์ถ์ ๋ถ
โ
์๋ฒ์ฌ์ด๋ ํ์ต์ ๋ถ๋ด์ ๋๋ผ๋ ๋ถ
โ
๋จ๋
์ผ๋ก ํฌํธํด๋ฆฌ์ค ๋๋ ํ ์ดํ๋ก์ ํธ๋ฅผ ์งํํ๊ณ ์ ํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
โ
๊ฐ๋ฐ ๋จ๊ณ์์ api๊ฐ ๋ง๋ จ๋๊ธฐ ์ ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์๋๋ฅด๊ณ ์ถ์ ํ์ง ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
๋ก์ปฌ DB ๊ตฌ์ถ์ ์ํ
์ต์ํ์ CRUD
๊ธฐ๋ฅ๋ง์ ๋ค๋ฃธ์ผ๋ก์จ
ํ์ต ๋ถ๋ด์ด ์ ์ต๋๋ค.
๋ฌธ๋ฒ ์์ฃผ ์ค๋ช
๋์ ,
์ค์ ์ฐ์ด๋ ์์ ์ค์ฌ์ผ๋ก
์ค์ ๊ฐ๋ฐ ๋ฅ๋ ฅ์
๊ธฐ๋ฅผ ์ ์์ต๋๋ค.
์ค์ ๊ฐ๋ฐ ๊ณผ์ ์
๊ทธ๋๋ก ๋ฐ๋ฅด๋ฉด์
์์ฐ์ค๋ ์ ์ฒด์ ์ธ ํ๋ฆ์
ํ์
ํ ์ ์์ต๋๋ค.
์๊ฐ ์ ํ์ธํด์ฃผ์ธ์!
React ๋ฐ Next.js ๊ธฐ๋ฐ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์์ํฉ๋๋ค. ์๋ฒ์์ ํต์ ์์ด Mock ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค์ด ๋ชจ๋ ๊ธฐ๋ฅ์ด ๋์ํ๋๋ก ๊ตฌํํฉ๋๋ค.
Node.js์์ Express(์ต์คํ๋ ์ค) ํ๋ ์์ํฌ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ์๋ฒ๋ฅผ ๊ตฌ๋ํฉ๋๋ค. JSON์ผ๋ก DB๋ฅผ ๊ตฌ์ถํ๊ณ route๋ฅผ ์์ฑํฉ๋๋ค.
ํด๋ผ์ด์ธํธ์์ REST API ํต์ ์ ํตํด ์ค์ ๋ฐ์ดํฐ๋ฅผ ๋ฐํ์ผ๋ก CRUD๋ฅผ ์์ฑํฉ๋๋ค.
Apollo Server๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ฌ ์๋ฒ๋ฅผ GraphQL ๋ฌธ๋ฒ์ผ๋ก ๋ณ๊ฒฝํฉ๋๋ค.
ํด๋ผ์ด์ธํธ์ GraphQL ํต์ ์ ์ ์ฉํฉ๋๋ค. ๋ฌดํ์คํฌ๋กค ์ ์ฉ react-query API๋ ์์๋ด ๋๋ค.
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
๋ค, ๋น์ ๊ณต์๋ฅผ ๋์์ผ๋ก ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ์ํ ์ต์ํ์ ๋ฐฑ์๋ ํ๊ฒฝ์ ๊ตฌ์ฑํ ์ ์๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค.
Q. ๊ฐ์๋ฅผ ๋ฃ๊ธฐ ์ ์ค๋นํด์ผ ํ ๊ฒ์ด ์๋์?
Node.js(๋ ธ๋), Yarn์ด ์ค์น๋์ด ์์ด์ผ ํฉ๋๋ค. React ๋ฐ ์ต์ ECMAScript์ ๋ํ ํ์ต์ด ์ด๋์ ๋ ์ด๋ฃจ์ด์ ธ ์์ด์ผ ์ง๋๋ฅผ ์์ํ๊ฒ ๋๊ฐ์ค ์ ์์ต๋๋ค.
Q. ๊ฐ์๋ฅผ ๊ผญ ๋ค์ด์ผ๋ง ํ๋์?
๊ทธ๋ ์ง ์์ต๋๋ค. ๊นํ์ ์ ์ฒด ์ฝ๋๋ฅผ ๊ณต๊ฐํด ๋์์ต๋๋ค. ์ฑํฐ๋ณ๋ก ๋ธ๋์น๋ฅผ ๋ถ๋ฆฌํ๋๋ฐ, ์ฝ๋๋ฅผ ๋ณด๊ณ ์ง์ ํ์ตํ์ค ์ ์๋ค๋ฉด ๊ตณ์ด ์ด ๊ฐ์๋ฅผ ๋ฃ์ง ์์๋ ๊ฐ์ ์ ์ฒด ๋ด์ฉ์ ์ต๋ํ์๋ ๋ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
๋ค๋ง ๊ฐ์ ์ ๋ฐ์ ๊ฑธ์ณ ๋ง์ ํตํด ์ ๋ฌํด๋๋ฆฌ๋ ์ ์์์ ํ๋ฆ์ ๊นํ ์ฝ๋๋ง์ผ๋ก๋ ์ป์ด๊ฐ์ค ์ ์๊ฒ ์ฃ . ์ค์ค๋ก ์ฝ๋ฉํ๊ณ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐ์ ์์ ์ด ์๋ ๋ถ๋ค์ด๋ผ๋ฉด ๋ณธ ๊ฐ์๋ฅผ ํตํด ํจ์ฌ ์ ์ตํ ์๊ฐ์ด ๋์๋ฆฌ๋ผ ์๊ฐํฉ๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
ํ๋ก ํธ์๋ ์ทจ์ค์
ํ์ง ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
์ ์ ์ง์,
ํ์ํ ๊น์?
React
yarn / npm
31,272
๋ช
์๊ฐ์
633
๊ฐ
์๊ฐํ
389
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
11
๊ฐ
๊ฐ์
์๋
ํ์ธ์, ์๋์ด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ ์ฌ๋จ ์
๋๋ค.
์๋ก ๋๊ณ ํจ๊ป ๋ฐ์ ํ๋ ๊ฑด์ ํ ๊ณต์ ๋ฌธํ๋ฅผ ์งํฅํ์ฌ ๋ค์ํ ํ๋์ ํ๊ณ ์์ต๋๋ค.
์ ์: ์ฝ์ด ์๋ฐ์คํฌ๋ฆฝํธ
์ ํ๋ธ ์ฑ๋: FE์ฌ๋จ
์ํฐํด ๋ฐ ์ธํฐ๋ทฐ ์์:
์ํฐ๋) ์ ์ ๊ฐ๋ฐ์, ๋ญ ๊ณต๋ถํด์ผ ํ์ฃ ? https://www.wanted.co.kr/events/22_02_s01_b01
์ธํ๋ฐ) To. ์ฃผ๋์ด ๊ฐ๋ฐ์ https://www.inflearn.com/pages/for-junior-developers-20211207
๋ฒค์ฒ์ด๋ชฝ) ๋ฒค์ฒ/์คํํธ์ ์๋์ด ๊ฐ๋ฐ์์ ์ฃผ๋์ด ๊ฐ๋ฐ์์ ์์ง๋ด๋ฐฑ ํ ํฌ์ผ https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
๋ฐ๋๋ผ์ฝ๋ฉ) ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ทจ์ ๋ง์ธ๋์ https://youtu.be/zX68pyoLctI
์ ์ฒด
25๊ฐ โ (3์๊ฐ 37๋ถ)