์ง์ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค๋ฉฐ ์์๊ฐ๋
ํ๋ก๊ทธ๋๋ฐ์ ์ฆ๊ฑฐ์ ๐
๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ง๋ง,
์ด๋์๋ถํฐ ๋ฐฐ์์ผ ํ์ง?
์ด๋ค ๋ด์ฉ์ ๋ฐฐ์์ผ ํ ์ง ๋ชจ๋ฅด๊ฒ ๋๋ฐ ์ด๋ง์ด๋งํ ํ๋ก ํธ์๋ ๋ก๋๋งต์ ์น์ด๊ณ ,
์๊ณ ๋ฆฌ์ฆ ๊ณต๋ถํ๋๋ผ ์ง์น์
จ๋ค๋ฉด ์์ํ๊ฒ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋๋ ์ฆ๊ฑฐ์์ ๋๊ปด๋ณด์ธ์.
์ฆ๊ฑฐ์์ผ ๋ ์ค๋๋์ ํ์ตํ ์ ์์ต๋๋ค.
ํ์์ด๋ ์ทจ์ค์ ๋ถ๋ค์ ๊ฐ๊ฒฉ์ด ๋ถ๋ด๋์ค ์ ์์ผ๋ ๊ผญ ์ ๋ธ๋ก๊ทธ์ ์ต์ ๊ธ ๋จผ์ ์ดํด๋ด์ฃผ์ธ์.
์ฌ๋ฌ๋ถ์ ์ํ ํ๊ฒฉ์ ์ธ ํ ์ธ์ ์ฟ ํฐ์ด ์์ด์!
์ฟ ํฐ๐๏ธ ํ์ธํ๋ฌ ๊ฐ๊ธฐ๐ https://medium.com/@totuworld
๊ฐ๋ฐํ๊ฒฝ ์ค์ ๋ถํฐ
์ ํ๋ฆฌ์ผ์ด์
๋ฐฐํฌ๊น์ง๐

์ด ๊ฐ์์์๋ ์ต๋ช
์ง๋ฌธ ์๋น์ค(Blahx2)๋ฅผ ์ฒ์๋ถํฐ ๋ชจ๋ ๋ง๋ค์ด์ ๋ฐฐํฌํ๋ ์ ๊ณผ์ ์ ๋ค๋ฃน๋๋ค. React.js๋ฅผ ์ ํ ๋ ์์ฃผ ๋ฃ๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ ๋๋ง(CSR)์ด ์๋๋ผ ์๋ฒ์์ ์ด๊ธฐ html์ ๋ง๋ค์ด์ ๋ด๋ ค์ค ๋ค ํ์ด๋๋ ์ด์
(hydration) ๊ณผ์ ์ ๊ฑฐ์น๋ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง(SSR)์ ์ง์ํ๋ Next.js๋ฅผ ์ค์ฌ์ผ๋ก ๋ค๋ฃน๋๋ค.
๊ฐ์ข
์์
๋ก๊ทธ์ธ ๊ตฌํํ๋๋ผ ์๊ฐ ์์ง ์๊ณ ๋น ๋ฅด๊ฒ ๊ตฌ์ถํ ์ ์๋๋ก Firebase ์ธ์ฆ์ ํ์ฉํฉ๋๋ค. Firebase ํ์ด์ด์คํ ์ด(Firestore)๋ฅผ ํ์ฉํด NoSQL ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅ/์์ ํ๋ฉฐ ํ์ด์ง๋ค์ด์
์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
์ด๋ฐ ๋ถ๋ค์๊ฒ ์ถ์ฒ๋๋ ค์.
ํ๋ก๊ทธ๋๋ฐ์ ์ฌ๋ฏธ๋ฅผ
์ฐพ๊ณ ์ถ์ ๋ถ
์ค์ ๊ธฐ๋ฅ ๊ตฌํ์
ํด๋ณด๊ณ ์ถ์ ๋ถ
์ต์ ํธ๋ ๋ ๊ธฐ์ ์
๋ฐฐ์ฐ๊ณ ์ถ์ ๋ถ
์ด ๊ฐ์๋ง์ ํน์ง์
ํ์ธํด ๋ณด์ธ์ ๐ก
- ์ด๋ก ๊ณต๋ถํ๋ค๊ฐ ์ง์น์ง ์๊ฒ ์ฒ์๋ถํฐ ํ๋์ฉ ๋ง๋ค์ด๊ฐ๋๋ค.
- JavaScript๋ง ์ ํด๋ณด์
จ๋ค๋ฉด TypeScript์ ๋งค๋ ฅ์ ๋๊ปด๋ณด์ค ์ ์์ต๋๋ค.
- ํ๋ก ํธ์๋ ๊ณต๋ถํ๋ค ๋ณด๋ฉด ๋ง๋งํ๊ฒ ๋๊ปด์ง๋ ๋ฐฑ์๋๊ฐ ์ฝ๊ฒ ๋๊ปด์ง๋๋ก ๋จ๊ณ๋ณ๋ก ์ฝ๋๋ฅผ ๋ฐ์ ์ํต๋๋ค.
- ๊ฐ์ ์ฝ๋๊ฐ ๋ฐ๋ณต๋์ด๋!
- ์คํ ๋ด๊ธฐ ์ฌ์ด ๋ถ๋ถ๋!
- ์ฐ์ ์ ํ๋ก๊ทธ๋๋ฐํ๊ณ ์ฐจ์ฐจ ๊ณ ์ณ๋๊ฐ๋ ๋ฐฉํฅ์ผ๋ก ์ค๋ช
ํฉ๋๋ค.
- ํ๋ก๊ทธ๋๋ฐ ๊ณผ์ ์์ ํํ ํ๋ ์ค์๋ฅผ ๊ทธ๋๋ก ๋๊ณ ์ดํ์ ๊ณ ์น๋๋ก ํ์ต๋๋ค.
- ํ์
์์ ๋๋ฒ๊น
ํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉ ์ฟ๋ณด์ค ์ ์์ต๋๋ค.
ํ์ต ๋ด์ฉ โจ
๋ฉ์ธ ๋ฐ ์ฌ์ฉ์ ํํ์ด์ง ๋ง๋ค๊ธฐ
์ฌ์ฉ์๊ฐ ๊ฐ์ฅ ๋ง์ด ๋ณด๋ ๋ทฐ ํ์ด์ง๋ฅผ ์ด๋ป๊ฒ ๊ตฌ์ฑํ๋์ง ์ดํด๋ด
๋๋ค. ๊ฐ ํ์ด์ง๋ง๋ค ๋ชจ๋ ์ฌ์ฉ๋๋ ๊ณตํต ๋ ์ด์์์ ๋ง๋ค๊ณ GNB๋ฅผ ์ถ๊ฐํ๋ ๊ณผ์ ์ ์ ๋ถ ๋ค๋ฃน๋๋ค.
์ฌ์ฉ์, ๋ฉ์์ง API ๋ง๋ค๊ธฐ
๊ฐ์
ํ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ ์ ์ฅ/์กฐํํ๋ API์ ๋ฉ์์ง ๋ฑ๋ก/์์ API๋ฅผ ๋ชจ๋ ์ ์ํฉ๋๋ค. ์๋ฒ์์ API๋ฅผ ์ ๊ณตํ ๋ ๊ณ ๋ คํด์ผ ํ๋ ์ฌํญ์ ๋ค๋ฃจ๋ฉฐ, Firestore์ ๋ฐ์ดํฐ๋ฅผ ์ด๋ค ์์ผ๋ก ๊ตฌ์กฐํํด์ ๋ฃ๋์ง ํ์ธํ ์ ์์ต๋๋ค.
open graph ์ด๋ฏธ์ง ์์ฑ๊ธฐ ๋ง๋ค๊ธฐ
์์
๋ฏธ๋์ด์ ๊ธ์ ๊ณต์ ํ๋ฉด ์๋ ์ด๋ฏธ์ง์ ํ
์คํธ๊ฐ ๋ฐ๋ผ๋ถ์ต๋๋ค. ๊ทธ์ค์์ ์ฌ์ฉ์๊ฐ ์ ๊ฒฝ ์ฐ์ง ์์๋ ์
๋ ฅ๋ ๋ด์ฉ๋ง ๊ฐ์ง๊ณ ์ด๋ฏธ์ง๋ฅผ ์์ฑํ ์ ์๋๋ก playwright์ aws lambda์์ ๋์ ๊ฐ๋ฅํ headless chrome์ ์ด์ฉ ๋ฐฉ๋ฒ์ ๋ค๋ฃน๋๋ค.
Vercel ๋ฐฐํฌ
์๋น์ค๋ฅผ ๋ง๋ค์ด๋ ์ฌ์ฉ์ ํผ๋๋ฐฑ์ ๋ฐ์ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๋ค๋ฉด ๋ ๋ง์ ๊ฑธ ๋ฐฐ์๋๊ฐ ์ ์์ต๋๋ค. ์ด ๋ถ๋ถ์ ๊ฐ์ ํ๊ธฐ ์ํด GitHub ๊ณ์ ๊ณผ Vercel ๋ฐฐํฌ ํ๊ฒฝ์ ์ด์ฉํด์ ์ง์ ๋ฐฐํฌ(Continuous Deployment) ๊ฐ๋ฅํ ํ๊ฒฝ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ค๋ฃน๋๋ค.
๋ณด๋์ค: Ajv ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์น API๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉ์๊ฐ ์ ์ถํ ์
๋ ฅ๊ฐ์ ๋งค๋ฒ ์ฒดํฌํ๊ธด ์ด๋ ต์ต๋๋ค. ์ด๋ Ajv ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ JSON SChema์ ๋์์ ๋ฐ์ ์ ์์ต๋๋ค.
๋ณด๋์ค: React Query
React.js์ useEffect๋ฅผ ํ์ฉํด์ ํ์ด์ง ์ฒ๋ฆฌํ ๋ฐ์ดํฐ๋ฅผ ๋ก๋ฉํ๋๋ก ๊ตฌํํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฅผ React Query๋ฅผ ์ด์ฉํ๋ฉด ์ด๋ป๊ฒ ์์ ๊ฐ๋ฅํ์ง ์ดํด๋ด
๋๋ค.
์์ ์ง๋ฌธ Q&A ๐ฌ
Q. ์ปดํจํฐ ๊ณตํ(๋น์ ๊ณต์)์ ์ ๊ณตํ์ง ์์๋ ๋ค์ ์ ์๋์?
A. ๋ค, ๊ฐ๋ฅํฉ๋๋ค. ๋ค๋ง JavaScript ๋ฌธ๋ฒ์ ์๊ณ ๊ณ์๋ค๋ฉด ๋ ์ฝ๊ฒ ์ดํดํ ์ ์์ต๋๋ค.
Q. ์์
๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
A. ๋ณธ ๊ฐ์๋ React.js, Node.js, Next.js์ ์ด๋ก ์ด๋ ๋ฌธ๋ฒ๋ณด๋ค ์ค์ ์๋น์ค๋ฅผ ๋ง๋๋๋ฐ ์ง์คํฉ๋๋ค. ๋ง๋๋ ๋ฐ ์ง์คํ๋ฉฐ ๋ ํ์ตํ๊ธฐ ์ํ ํค์๋๋ฅผ ์ ์ํฉ๋๋ค.
Q. ๊ฐ์ ์ ์ค๋นํด์ผ ํ ๊ฒ์ด ์๋์?
A. JavaScript๋ฅผ ํ ๋ฒ๋ ๋ค๋ค๋ณด์์ง ์์๋ค๋ฉด let, const ์ ์ฐจ์ด๋ Array์ map ๋ฑ์ ํ์ธํ๋ฉด ์ข์ต๋๋ค.
์ง์๊ณต์ ์ ์๊ฐ โ๏ธ
์ฐ์ํํ์ ๋ค์์ ํ๋ก ํธ์๋ ํ๋ก๊ทธ๋๋จธ๋ก ์ผํ๊ณ ์์ต๋๋ค.
ํ๋ฒํ ์ฌ๋๋ค์ด ๋ชจ์ฌ์ ๋น๋ฒํ ์ผ์ ํ ์ ์๋ค๊ณ ๋ฏฟ์ต๋๋ค.
- ํ) ์ฐ์ํํ์ ๋ค, ํ๋ก ํธ์๋ ํ๋ก๊ทธ๋๋จธ
- ์ ) ์ผ๋์, ๋ฐฑ์๋ ํ๋ก๊ทธ๋๋จธ
- ์ ) ArasoPandan, ๋ฐฑ์๋ ํ๋ก๊ทธ๋๋จธ
- ์ ) MobiDIX, ๋ชจ๋ฐ์ผ ๊ฒ์ ํด๋ผ์ด์ธํธ ํ๋ก๊ทธ๋๋จธ
- ์ค๋ฌด์ ๊ฐ๊น์์ง๋ Node.js ๋ฐฑ์๋ ์คํฐ๋๋ฅผ 5๊ธฐ์งธ ์ด์์ค์
๋๋ค.