AMA(Ask Me Anything)์ ํ๊ตญ์ด๋ก ๋ฒ์ญํ์๋ฉด '๋ฌด์์ด๋ ๋ฌผ์ด ๋ณด์ธ์'์ ๋ ๋ ๊ฒ์ ๋๋ค. ํ๊ตญ์์๋ ์ธ์คํ๊ทธ๋จ์์ '๋ฌด๋ฌผ'์ด๋ผ๊ณ ์ค์ฌ์ ์ธํ๋ฃจ์ธ์๋ค์ด ์งํํ๊ธฐ๋ ํฉ๋๋ค. DUGE๋ ์ด๋ฐ ์ต๋ช Q&A๋ฅผ ๋์์ฃผ๋ ์๋น์ค์ ๋๋ค.
์ฌ์ค ์ด๋ ๊ฒ ํฌ์คํธ๋ฅผ ์ฐ๊ธฐ ์ ์ ์ ์ DUGE ์คํ์ด์ค๋ฅผ ์ ํ๋กํ ๋งํฌ์ ๋ฃ์ด ๋์๋๋ฐ ์ด๋ป๊ฒ ์์ จ๋์ง ๋ช๋ช ๋ถ๋ค์ด ๊ฐ์ ํด์ ์ง๋ฌธ๋ ๋จ๊ฒจ ์ฃผ์๋๊ตฐ์.
๋ํ์ ์ผ๋ก ๋น ๊ฒ์ด์ธ ๊ฐ ๋ ๋ง์์ AMA๋ฅผ ์งํ ํ ์ ์ด ์์ต๋๋ค. ์ด ๋ ์ ๋ง ํฐ ํ์ ์๋๋ฐ ๋น ๊ฒ์ด์ธ ๋ ์ต๊ทผ์๋ ๋ ๋ง์์ ๊ฐ๋์ฉ ์ฝ๋ฉํธ๋ฅผ ๋ฌ์์ฃผ๊ณ ์์ต๋๋ค. ๋ ๋น ๊ฒ์ด์ธ ๋ ์ด๋ฐ AMA ์ธ์ ์ ๋ฒ์จ 10๋ฒ์งธ ์งํํ๊ณ ์์ต๋๋ค. ๊ถ๊ธํ์ ๋ถ๋ค์ ๐ ๋ ๋ง์ผ๋ก ๊ฐ์ ์ดํด๋ณด๋ฉด ์ข์ต๋๋ค.
์ด๋ฐ AMA๋ฅผ ์งํ ํ ์ ์๋๋ก ๋์ ์ค ์ ์๋ ์๋น์ค๋ ์์๊น์? ๋น์ทํ๊ฒ ํธ์ํฐ ์ ์ ๋ค์ด ์ฌ์ฉํ๋ ์ผ๋ณธ์ ๐ peing์ด๋ผ๋ ์๋น์ค๊ฐ ์์ต๋๋ค. ํ์ง๋ง ์ฆ์ ๊ด๊ณ ์ ๋ค์ ์ง๊ด์ฑ์ด ๋จ์ด์ง๋ UI๋ก ์ฌ์ฉ์ ๋ถํธํจ์ด ์์์ต๋๋ค. ์ ๊ฒ ๋ฑ ๋ง๋ AMA ์๋น์ค๋ฅผ ๋ง๋๋ ค๋ฉด ์ญ์ ๊ฐ๋ฐ์๋ ์ง์ ๋ง๋ค์ด์ผ์ฃ .
DUGE์์๋ ๋๊ตฌ๋ ์ต๋ช ์ผ๋ก ์๋๋ฐฉ์๊ฒ ์ง๋ฌธ ํ ์ ์์ต๋๋ค. ๋, DUGE๋ ์ ์ฒซ ํ๋ก ํธ ์๋ ๊ฐ๋ฐ์ ๋๋ค. Nuxt3๋ฅผ ์ฌ์ฉํด์ ๊ฐ๋ฐ๋์์ผ๋ฉฐ ๋ฐฑ ์๋ ๊ฐ๋ฐ๋ง ํด ์จ ๋ชจ๋น์ผ์๊ฒ๋ ์ด๋ ค์ด ์ผ์ด์์ง๋ง ์ฌ๋ฌ ์ฌ๋์๊ฒ ๋์์ ๋ฐ์๊ฐ๋ฉฐ ์ด๋ ๊ฒ ์๋น์ค๋ฅผ ๊ณต๊ฐํ๊ฒ ๋์ต๋๋ค.
๋์ง์๋ ๊ทธ ์ด๋ค ๊ด๊ณ ๋ ์์ต๋๋ค. ์์ผ๋ก๋ ์ต๋ํ ๊ด๊ณ ๋ฅผ ํผํ๊ณ ์์ต์ ๋๋ชจ ํ ์๊ฐ์ ๋๋ค. ๊ด๊ณ ์์ด ์พ์ ํ๊ฒ DUGE ์คํ์ด์ค๋ฅผ ๊ฐ์ ธ ๋ณด์ธ์.
DUGE์์ ์ต๋ช ์ผ๋ก ์ง๋ฌธํ๋ฉด ์๋ฌด๋ ๋ด๊ฐ ๋๊ตฌ์ธ์ง ์ ์ ์์ต๋๋ค. DUGE์ ์ง๋ฌธ/๋ต๋ณ ๋ฐ์ดํฐ๋ ๋ชจ๋ ํด์ธ(๋ฌป์ง๋ง) ์๋ฒ์ ์ ์ฅ ๋ผ ์์ต๋๋ค. ๋ค๋ง ์ด๋ฐ ์ต๋ช AMA ์๋น์ค๋ค์ด ๊ทธ๊ฐ ์ฑํ๊ฒ ๊ฒช์ด์จ ๋ฌธ์ ๊ฐ ์๋ ๋งํผ ์ต๋ช ์ ์ ์ฉํ ์ง๋ฌธ์ ์คํ์ด์ค ์ฃผ์ธ์ด ์ญ์ ํ ์ ์์ต๋๋ค.
์ DUGE๊ฐ ๋ค๋ฅธ AMA ์๋น์ค๋ณด๋ค ํ์คํ ๋ ์์ฉ๋๋ค. ๊ฑฐ๋ ์์ ์๋น์ค์ ๋์์ธ์ ๋ง์ด ์ฐธ๊ณ ํ๊ณ ์ค์ผ์น ์ ์ ์งํ ํ ๋ค์ Tailwind CSS๋ก ๊ตฌํํ์ต๋๋ค.
Tailwind CSS๋ ์ด๋ฆ ๊ทธ๋๋ก ์์ํ CSS ์ ๋๋ค. ๋ค์ด์ผ๋ก๊ทธ๋ ํ์ ๋ฉ๋ด๋ ๊ฐ์ Tailwind ํ์ด ๋ง๋ HeadlessUI๋ก ๊ตฌํํ ์ ์์์ต๋๋ค. ์ด์จ๊ฑฐ๋ ์ ์ฒ๋ผ ์ฒ์ ํ๋ก ํธ ์๋ ๊ธฐ์ ์ ์ ํด๋ณธ ๊ฐ๋ฐ์๋ ์ด๋ ๊ฒ ๋นจ๋ฆฌ ๊ตฌํ ํด ๋ธ๊ฑธ ๋ณด๋ฉด ์ข์ ๊ธฐ์ ์์ ํ๋ฆผ์ด ์์ต๋๋ค.
Mr.๋๋์ง๋ฅผ ๊ตฌ๋ ํ๋ฉด ๊ฐ๋์ฉ ๋๋์ง์จ๊ฐ ์ฌ๋ฌ๋ถ์๊ฒ ์ง๋ฌธ์ ๋จ๊น๋๋ค. ๋๋์ง์ ๊ต๊ฐ ํด ๋ณด์ธ์.
์ด์ ํ๋ณด๋ ๋๊ณ ์ฐ๋ฆฌ ๊ฐ๋ฐ์๋ค์ด ์ข์ํ๋ ๊ธฐ์ ์ด์ผ๊ธฐ๋ฅผ ํ๋ ค๊ณ ํฉ๋๋ค. ๋น๊ฐ๋ฐ์ ๋ถ๋ค์ ์ด ์์ ์์ ๋ ์ ๋ณด์ ๋ ๋ฉ๋๋ค. ๐
DUGE์ ํ๋ก ํธ์๋๋ Vercel์์ ์ข์ ๊ฒฝํ์ ๋ง๋ณด๊ณ ๊ณ์ ์ด์์ค์ ์์ต๋๋ค. ์ต๊ทผ์ velog์ ์๊ฐ๋๋ ์ฌ๋ฌ ์๋น์ค๋ค๋ Vercel์ ์ฌ์ฉํด ๋ฐฐํฌํ๋ ๊ฒ์ ๋ง์ด ๋ณผ ์ ์์ต๋๋ค. ์ ์ญ์ Vercel ๋ฐฐํฌ ๊ฒฝํ์ ๊ณผ๊ฑฐ Heroku๋ฅผ ๋ ์ฌ๋ฆฌ๊ฒ ํ์ต๋๋ค. Vercel์ AWS์ ๋ณต์กํ ์ธํ๋ผ ๊ด๋ฆฌ๋ณด๋ค ๊ทธ๋ฅ ๋ ๊ฐ๊ณ ๋ฐฐํฌ ํ ์ ์์ ์ ๋๋ก ๊ฐ๋จ ํ์ต๋๋ค.
๊ทธ๋ฌ๋ Vercel์ด ์๋ฌด ๋ฌธ์ ์์ด ๊น๋ํ๋ ๊ฒ์ ์๋๋๋ค. Nuxt3 ํ๊ฒฝ์์ 504 FUNCTION_INVOCATION_TIMEOUT
์ด ์ง์์ ์ผ๋ก ๋ฐ์ํ๋ ๋ฌธ์ ๊ฐ ์์์ต๋๋ค. Next3์์๋ ๋์ผํ ์ฆ์์ด ๋ฐ์ํ๋ ์ฌ๋ก๋ฅผ ๋ง์ด ์ฐพ์ ๋ณผ ์ ์์๋๋ฐ ํ์ฌ๊น์ง ๋พฐ์กฑํ ํด๊ฒฐ์ฑ
์ด ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋๋ฌธ์ ์ค์ ์๋น์ค๋ฅผ ์ด์ํ๋๋ฐ ์์ด์ ์ด๋ฐ ๊ฐํ์ ์ธ GATEWAY TIMEOUT
์ ๋ฐ๋์ ๊ณ ๋ ค ํ์
์ผ ํฉ๋๋ค. ๋ฌด๋ฃ์ธ Hobby Plan ๋ฟ๋ง ์๋๋ผ ์ ๋ฃ ํ๋์์๋ ๋ฐ์ํ๋ฉฐ Region์ ๊ด๊ณ ์์ด ๋ฐ์ํ๊ณ ์๋ ๊ฒ์ผ๋ก ๋ณด์
๋๋ค.
DUGE์ ๋ฐฑ์๋๋ Fly.io์ ๋ฐฐํฌ ๋์ด ์์ต๋๋ค. Fly.io๋ ๋ฉํฐ ํด๋ผ์ฐ๋ ๋์ด ์์ DB์ ์ปจํ ์ด๋๋ฅผ ์ฌ์ฉ์์ ๊ฐ๊น์ด region์ ๋ชจ๋ ๋ฐฐํฌ ํด ๋๋ Edge Cloud Computing์ ์ ์ํ๊ณ ์๋๋ฐ ๊ณผ์ฐ ์ด๋จ์ง ๊ถ๊ธํฉ๋๋ค. ์์ฝ๊ฒ๋ Fly.io๋ ์์ง ์์ธ ๋ฆฌ์ ์ ์ง์ํ๊ณ ์์ง ์์ต๋๋ค.
fly.io๋ Vercel ๋ณด๋ค ๋ ๋ถ์์ ํด ๋ณด์ธ๋ค๋ ๊ฒ์ด ๋จ์ ์ ๋๋ค. https://status.flyio.net ์์ ํ์ธ ํด ๋ณด๋ฉด ๊ทธ ๋์ fly.io์ ์ฅ์ ์ผ์ง๋ฅผ ๋ณผ ์ ์์ต๋๋ค. DUGE๋ฅผ ๊ฐ๋ฐ ํ๋ ์ค์๋ ์ ๋ง ์ค์ํ ์๊ฐ์ ํน์ ๋ฆฌ์ ์ Deployment ์ฅ์ ๊ฐ ๋์ ๊ธธ๊ฒ๋ 12์๊ฐ ๋์ ๋ฐฐํฌ๋ฅผ ํ ์๊ฐ ์์๋ ์ ์ด ์์ต๋๋ค.
Heroku๊ฐ ๋ฌด๋ฃ ์ธ์คํด์ค๋ค์ ์ข ๋ฃํ๋ฉด์ ๋์์ผ๋ก ๋ ์ค๋ฅธ๊ฒ์ด fly.io ์์ต๋๋ค. ๊ต์ฅํ ์ฃผ๋ชฉ ๋ฐ๋ ํด๋ผ์ฐ๋ ์คํํธ์ ์ด์ง๋ง ์ฌ๋ฌ ๋ฆฌ์ ์์ ๋์ ๋ค๋ฐ์ ์ผ๋ก ์ฅ์ ๊ฐ ๋์ด์ง ์๊ณ ์์ด ์ค์ ์๋น์ค ์ด์์๋ ์ฐธ๊ณ ํด์ผ๋ง ํฉ๋๋ค.
ํ์ง๋ง ์ ๊ฐ ์ข์ํ๋ BoltDB ๊ฐ๋ฐ์ ๋ฒค ์กด์จ์ด Fly.io์์ ์ด์ Full-time์ผ๋ก SQLite์ ํด๋ผ์ฐ๋ํ ๊ฐ๋ฐ์ ๋ฐ์ฐจ๋ฅผ ๊ฐํ๋ค๋ ์์์ ๋ณด๋ฉด ์์ผ๋ก๊ฐ ๊ธฐ๋๋๋ ์คํํธ์ ์ ๋๋ค.
๐ I'm All-In on Server-Side SQLite.
๋๋ฌธ์ DUGE๋ ์ด๊ฑธ ๋ฏฟ๊ณ ํ ๋ฒ ์ธํ๋ผ๋ฅผ Fly.io์ ๊ฑธ์ด ๋ณด๋ ค๊ณ ํฉ๋๋ค. ๐ ๊ฒฐ๋ก ์ ์ผ๋ก๋ Vercel๋ Fly.io๋ ์์ง์ ์ด์ ์ฅ์ ๋ฅผ ๋ง์ด ๊ฒช๊ณ ์์ด ์ค์ ์๋น์ค ์ด์์๋ ํฐ ์ด๋ ค์๋ค์ด ์์ ๊ฒ์ ๋๋ค. ๊ทธ๋ฌ๋ ๋๋ฌด๋๋ ํธํ๊ธฐ ๋๋ฌธ์ ์ด ๋ ์๋น์ค๊ฐ ์ ๋ฐ ์ฑ๊ณต ํ์ผ๋ฉด ์ข๊ฒ ๋ค์.
https://velog.io/@dishate/Vercel-504-timeout-์๋ฌ
https://www.reddit.com/r/nextjs/comments/zfjwck/all_my_nextjs_api_handlers_return_504_timeout/
https://medium.com/@scott82anderson/avoid-cold-starts-on-vercel-with-next-ssr-7b28fbc38bcc
https://github.com/orgs/vercel/discussions/334
๐ค ๋์ฒด ์ TIMEOUT์ธ๊ฐ
AWA Lambda์ Cold Start ์ํฅ์ด ์๋ค๊ฑฐ๋ Region ๊ฑฐ๋ฆฌ๊ฐ ๋๋ฌด ๋ฉ์ด์ ๊ทธ๋ ๋ค๋ ๋ฑ์ ์ด์ผ๊ธฐ๊ฐ ์์ต๋๋ค. ํ์ง๋ง Vercel์ 10์ด ์ ํ์์์์ ์ฃผ๊ณ ์๊ณ ์๋ฌด๋ฆฌ Region ๊ฑฐ๋ฆฌ ์ฐจ์ด์ DB ์๋ต ์๊ฐ์ด ๋๋ฆฌ๋ค๊ณ ํด๋ 10์ด ์ด์์ ๊ฑธ๋ฆด ๊ฒ ๊ฐ์ง ์์๋ฐ ์ด ๋ฌธ์ ๋ ์์ผ๋ก ๊ณ์ ์ปค๋ฎค๋ํฐ๋ฅผ ์ง์ผ๋ด์ผ ํ ๊ฒ ๊ฐ์ต๋๋ค.
DUGE์ ๋ฐ์ดํฐ๋ ๋ชจ๋ SQLite๋ก ๊ด๋ฆฌํ๊ณ ์์ต๋๋ค. MySQL์ด๋ PostGres๋ ์ฌ์น๋ผ๊ณ ์๊ฐํ์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ฐ์ดํฐ๊ฐ ๋ง์ ์ก์ ๋ ํ๋ํ๊ธฐ ์ด๋ ต๊ฑฐ๋ ๋๋ฆฌ์ง ์๊ฒ ๋๋ ๋ฐ๋ฌธ์ ๋งค์ฐ ๋ง์ด ๋ฐ์ ์์๋๋ฐ ๊ทธ '๋๋ฆฌ๋ค'๋ ํธ๊ฒฌ์ ๊นจ ๋ณด๊ณ ์ถ๊ธฐ๋ ํ์ต๋๋ค.
๋ํ์ ์ผ๋ก JOIN์ '๋๋ฆฌ๋ค'๋ผ๊ณ ์๋ ค์ ธ ์์ง๋ง ์ค์ ๊ทธ๋ ์ง๊ฐ ์์ต๋๋ค. ๋ฌผ๋ก JOIN์ด ์๋ ์ฟผ๋ฆฌ๊ฐ ๋ ๋น ๋ฅด๊ธฐ์ผ ํ๊ฒ ์ง๋ง ์๊ฐ๋งํผ JOIN์ด ๋๋ฆฌ์ง๊ฐ ์๋ค๋ ๊ฒ์ ๋๋ค.
์ด๋ค ์กฐ์ง์์ ์ผ ํ ๋ JOIN์ ์ฌ์ฉํ๊ธฐ๋ฅผ ๋งค์ฐ ์ซ์ดํ๋ ๋ฐฑ์๋ ๊ฐ๋ฐ์๋ค์ด ์์์ต๋๋ค. ๊ทธ๋์ ์ ๋ ํ ๊ฐ์ง ์คํ์ ํ์ต๋๋ค. 2~3์ต๊ฑด ์ ๋ ๋๋ ํ ์คํธ ๋ฐ์ดํฐ๋ฅผ DB์ ๋ฃ์์ต๋๋ค. ์ด๋ ์ค์ ๋ก ์๋น์ค ์ค์ธ ๋ฐ์ดํฐ๋ณด๋ค 20๋ฐฐ๋ ๋ง์ ์์ด์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋น 10๊ฑด์ JOIN, COUNT ์ฟผ๋ฆฌ๋ฅผ ๋ ๋ฆฌ๋ ์คํ์์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ 10ms ๋ด์ธ์ ์๋ต ์๋๋ฅผ ๋ณด์ฌ ์คฌ์ต๋๋ค. Hash JOIN์ ์ด๋ก ์ ๋ณต์ก๋๊ฐ O(1)์ด๋ฏ๋ก ์ด์ฉ๋ฉด ๋น์ฐํ ๊ฒฐ๊ณผ์์ต๋๋ค. ์คํ๋ ค JOIN ๋ณด๋ค๋ COUNT๊ฐ ๋ฌธ์ ์๋๋ฐ์ row๋ฅผ ์ธ๋ ๊ฒ์ ์ ์งํ๊ฒ Fetch๋ฅผ ํด์ผํ๋ฏ๋ก ์ธ์ด์ผ ํ row๊ฐ ์ฝ 1๋ง๊ฐ๋ง ๋์ด๊ฐ๋ 1000ms ๊ฐ๊น์ด ๋๋ ค์ก์ต๋๋ค.
โ ๏ธ ์ ์คํ์ AWS R ์๋ฆฌ์ฆ ์ธ์คํด์ค ์ค์์ ์ ์ผ ์ผ ๊ฑธ๋ก ์งํ ๋์์ต๋๋ค. ์ด ๋ถ๋ถ์ ๋ํด์๋ ๊ตฌ์ฒด์ ์ธ ์คํ ๋ฐฉ๋ฒ๊ณผ ๋ฐ์ดํฐ, ๊ทธ๋ฆฌ๊ณ ๋์คํฌ I/O๋ ๋ ์ด์ Bottleneck์ด ์๋๋ผ๋ ์ ์ ๊ทผ๊ฑฐ๋ก ๊ธ์ ๋ฐ๋ก ์จ ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
์ด์จ๋ ์๊ฐ ์ด์์ผ๋ก ํ์ฌ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ค์ ์ต์ ํ๊ฐ ์ ๋์ด ์๊ณ ์ฟผ๋ฆฌ๋ง ์ ์์ฑํ๋ค๋ฉด JOIN ํ๋๋ผ๋ ์ ์ต๊ฑด ์ด์์, ์ด์ง๊ฐํ ์์ ๋ฐ์ดํฐ๋ ์ํ ํ ์ ์์ต๋๋ค.
์ ๋ง์ ๊ธฐ์ ๋ค์ด ๊ฐ๋ฐ์ ์ฑ์ฉ์ '๋๊ท๋ชจ ๋ฐ์ดํฐ ์ฒ๋ฆฌ ๊ฒฝํ'์ ์๊ฑด์ผ๋ก ๋ด์ธ์ฐ์ง๋ง ์ค์ ๋ก ๊ทธ๋ฐ ๊ฒฝํ์ ํ๊ธฐ๋ ๋งค์ฐ ์ด๋ ค์ด ์ด์ ์ค ํ๋ ์ ๋๋ค. ์ด๋ฏธ ์์ต ๋จ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฒ๋ฆฌํ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ธ๊ณ์์ ์ฑ๋ฅ ํ๋์ด ํ์ํ ์๊ฐ์ ๋ง์ฃผํ๋ ค๋ฉด ํ ํ ์ด๋ธ์ row๋ง ์์ญ์ต, ์๋ฐฑ์ต ๋จ์๊ฐ ๋ผ์ผ ํ ๊ฒ์ ๋๋ค. ๊ทธ๋ฅ ๋นต๋นตํ AWS ์ธ์คํด์ค๋ก ์ ๊ทธ๋ ์ด๋ํ ๋ค ๋ ๊ฐ๊ณ ์์ด ๋ฒ๋ฆฌ๋ ๊ฒฝ์ฐ๋ ๋ง์ผ๋๊น์.
๊ทธ๋์ ์ ๋ ๋๋ถ๋ถ์ ์คํํธ์ ๋ค์ ์ฑ๊ธ ์ธ์คํด์ค์ DB๋ก๋ ๋ชจ๋ ์๊ตฌ์ฌํญ์ ๋ง์กฑ ํ ์ ์์ผ๋ฆฌ๋ผ ์กฐ์ฌ์ค๋ฝ๊ฒ ์๊ฐํฉ๋๋ค. ์๋ฌดํผ ์ด๋ ๊ฒ ํผํผํ SQLite๋ฅผ DUGE๋ ์ฐ๊ธฐ๋ก ํ์ต๋๋ค. ๊ณผ์ฐ ์ ์๊ฐ์ด ๋ง์์ง๋ DUGE ์ฌ์ฉ์๊ฐ 1์ต๋ช ์ด ๋๊ธฐ ์์ํ๋ฉด ๋ฐํ ์ง ๊ฒ ์ ๋๋ค. ๐ ์๋๋ฉด ๊ทธ ๋ ๊ฐ์ ์๊ฐ ํด ๋ณด๊ณ ์.
SQLite๋ฅผ ์ฃผ๋ ฅ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก ์ฌ์ฉํ ์ด์ผ๊ธฐ๋ค์ ์๋์์ ์ข ๋ ๋ง๋ ๋ณผ ์ ์์ต๋๋ค.
๐ Ask HN: Have you used SQLite as a primary database?
Vultr๋ Vercel๊ณผ ์ด๋ฆ์ด ๋น์ทํด ์ฒ์์๋ ํท๊ฐ๋ ท๋๋ฐ Vultr๋ ๊ด๋ฆฌํ์ด ์๋๋ผ Digital Ocean ์ฒ๋ผ ์ง์ ์ธ์คํด์ค๋ฅผ ์ฌ๋ฆฌ๋ ํํ์ ์๋น์ค์ ๋๋ค. ๊ตญ๋ด์๋ ์์ง ์ ์๋ ค์ ธ ์์ง ์์ ๊ฒ ๊ฐ์๋ฐ ์์ธ ๋ฆฌ์ ๋ ๊ฐ์ถ๊ณ ์์ต๋๋ค. ์ง์ ์ธ์คํด์ค๋ฅผ ์ฌ๋ ค์ ์ฌ์ฉ ํด์ผ ํ ์ผ์ด ์์ ๋๋ AWS EC2 ๋ณด๋ค๋ Digital Ocean์ ์จ ์์๋๋ฐ ์ด๋ฒ์๋ Vultr๋ผ๋ ์๋น์ค๋ฅผ ์ฌ์ฉ ํด ๋ดค์ต๋๋ค. ๊ถ๊ธํ์ ๋ถ๋ค์ ํ ๋ฒ ๊ฐ์ ๊ตฌ๊ฒฝ ํด ๋ด๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
Cloudflare๋ ์ฌ์ค์์ ๋ฌด๋ฃ ์คํ ๋ฆฌ์ง๋ฅผ ์ ๊ณตํ๊ณ ์์ต๋๋ค. ์๋ ์ R2๋ผ๋ ์๋ก์ด ์คํ ๋ฆฌ์ง R2 ๊ณต๊ฐ ํ๋๋ฐ ์ด๊ฒ์ AWS์ S3 API์ ํธํ๋๋ ์คํ ๋ฆฌ์ง์ ๋๋ค. ๊ทธ๋ฐ๋ฐ R2๋ Egress ๋น์ฉ ๋ฌด๋ฃ ์ ๋๋ค. ๊ทธ ๋ป์ ๊ทธ๋ฅ ์์ญ๋ง๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํด๋ ๋ก์ ํ ํผ ๋ด์ง ์์๋ ๋๋ค๋ ๊ฒ๋๋ค. ๋์ฒด ์ด๊ฒ ์ด๋ป๊ฒ ๊ฐ๋ฅ ํ ๊ฑธ๊น.
๐ Cloudflare R2 ์ถ์ โ ์ก์ ์์๋ฃ๊ฐ ์๋ ๋น ๋ฅด๊ณ ์์ ์ ์ธ ๊ฐ์ฒด ์คํ ๋ฆฌ์ง
Cloudflare๋ AWS๊ฐ Egress ๋น์ฉ์ ๋๋ฌด ๊ณผ๋ค ์ฒญ๊ตฌ ํ๋๊ฒ ์๋๋๋ ํฌ์คํ ์ ์ฌ๋ ธ์ต๋๋ค. AWS์ ๋น์ฉ์ '์ด์ฒ๊ตฌ๋ ์๋ค (Egregious)'๋ผ๊ณ ๋ค์ ๊ฐํ๊ฒ ๋งํ์ต๋๋ค. ๋ง์น ๋ชจ๋น์ผ ์ฒ๋ผ์. ๐ AWSโs Egregious Egress
๊ทธ๋์ ์์ ๋ค์ ๋ง๊ฐํ ์ธํ๋ผ์ AWS์ ๋ง๊ฐํ ์คํ ๋ฆฌ์ง ๊ท๋ชจ๋ผ๋ ์ฅ์ ์ ๊ฒฐํฉํด์ R2๋ผ๋ ์ ํ์ ๋ง๋ค์ด ๋์ต๋๋ค. R2 ๋งํผ์ ์คํํธ์ ์๊ฒ ์ ๋ง ํ์ํ ์ ํ์ธ ๊ฒ ๊ฐ์ต๋๋ค. ์ฌ๋งํผ ์ฑ์ฅํ๊ธฐ ์ ๊น์ง๋ ์คํ ๋ฆฌ์ง์ ๋คํธ์ํฌ ํธ๋ํฝ์ ๋ฌด๋ฃ๋ก ์ฌ์ฉ ํ ์ ์๊ธฐ์ DUGE ์ญ์ R2๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ํ์ต๋๋ค.
์ด๋ค ๋ธ๋ก๊ฑฐ๋ Tailwind์ ๋จ์ ์ผ๋ก ๋ชป์๊ธด ์ฝ๋๋ JS๋ฅผ ์ธ ์ ์๋ค๊ฑฐ๋ CSS์ฝ๋์ HTML์ด ๋ถ๋ฆฌ ๋์ง ์๋ ๊ฒ ๊ฐ๋ค๋ ์ ์ ๊ผฝ์ง๋ง Tailwind์ ์ฒ ํ์ ์ ์ฝ์ด๋ณด๋ฉด ์ ์ด๋ฐ์ง ์ ์ ์์ต๋๋ค. ์ผ๋จ Tailwind๋ ์์ฃผ ์ฌ์ฉ๋๋ CSS๋ฅผ ํธํ๊ฒ ์ ์ง๋ณด์ ํ ์ ์๋๋ก ๋์์ฃผ๊ณ ์ถ์ด ํ์ต๋๋ค. ๊ธด CSS ์ฝ๋๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ๋ณด๋ค HTML ํ๋๋ง ๊ด๋ฆฌํ๋๊ฒ ํจ์ฌ ๋ ์ฝ๊ธฐ ๋๋ฌธ์ ๋๋ค.
Tailwind encourages a utility-first workflow
๐ reusing-styles
ํ์ง๋ง ๊ฐ์ CSS ์คํ์ผ์ ์ฌ๋ฌ๋ฒ ์ ์ฉ ํ ์ผ์ด ๋ง์์ง๋ฉด ๊ฒฐ๊ตญ ์๋์ ๊ฐ์ ์ผ์ด ๋ฒ์ด์ง๋๋ค. ์๋ ์ฝ๋์ ๊ฐ์ ๊ฒฝํ์ ํ์ ๊ฐ๋ฐ์๋ค์ HTML์์ ๋ฐ๋ก ์ ์ฉํ๊ธฐ๋ ํธํ์ง๋ง TailwindCSS๊ฐ ์ ๋ง ์ข์๊ฑฐ๋๋ ์๋ฌธ์ ๋์ง๊ณค ํฉ๋๋ค.
<div class="mt-3 flex -space-x-2 overflow-hidden">
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""/>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</div>
Tailwind๋ ์ด์ฐจํผ ์๋์ฒ๋ผ ๋ฐ๋ณต๋ฌธ์ ํตํด ๋ ๋๋ง ๋ ๊ฒ์ด๋ ์์ ๊ฐ์ ๋ฌธ์ ๋ ๋ฐ์ํ ์ผ์ด ์๋ค๊ณ ๋งํ๊ณ ์์ต๋๋ค.
<div class="mt-3 flex -space-x-2 overflow-hidden">
{#each contributors as user}
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="{user.avatarUrl}" alt="{user.handle}"/>
{/each}
</div>
When elements are rendered in a loop like this, the actual class list is only written once so thereโs no actual duplication problem to solve.
The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations.
์ด๋ ๊ฒ Utility-First๋ผ๋ ๊ด์ ์ผ๋ก ํ๋ก ํธ ์์ง๋์ด๋ง์ ์ ๊ทผํด ๋ณด๋ ์ข์๋ค๋ ํฌ์คํธ๋ฅผ ๋ณผ ์ ์์ต๋๋ค. ์ ํธ๋ฆฌํฐ ํด๋์ค๋ ๋จ์ํ CSS ์คํ์ผ์ ์ธ๋ผ์ธ์ผ๋ก ์ ์ฉ ํ ๊ฒ์ด ์๋๋ผ ํ๋ก ํธ ์์ง๋์ด๋ง์์ ์ด๋ค ํ๋์ '์ํคํ ์ณ'๋ผ๊ณ ์ค๋ช ํ๋ ํฌ์คํธ๋ฅผ ์ฝ์ด๋ณด๋ฉด ๋ ์ข์ต๋๋ค.
๐ No, Utility Classes Arenโt the Same As Inline Styles
๐ Building a Scalable CSS Architecture
์ ๋ ํ๋ก ํธ ์์ง๋์ด๋ง์ ํด ๋ณธ ๊ฒฝํ์ด ์๊ธฐ ๋๋ฌธ์ ์ ๊ฐ ์ธ ์ ์๋ ๊ธ์ ์ฌ๊ธฐ๊น์ง ์ธ ๊ฒ ๊ฐ์ต๋๋ค. ๐ DUGE๋ผ๋ ์ฒซ ํ๋ก ํธ ํ๋ก์ ํธ๋ฅผ ๊ฐ๋ฐํ๋ฉด์ ๊ฒช์ ์๋ก์ด ๊ฒฝํ์ ๊ดํ ๊ธ์ด์์ต๋๋ค. ๋ค๋ฅธ ์ฌ๋์๊ฒ๋ ๋์์ด ๋์ผ๋ฉด ์ข๊ฒ ๋ค์. ์ด์ ์ด์ ๊ฐ์ ํด์ ํ๋กํ์ ์ฃผ์๋ฅผ ๊ฑธ์ด์ฃผ์ธ์.
๋ชจ๋น์ผ ์ญ์ ๋์ง ์คํ์ด์ค๋ฅผ ๊ฐ๊ณ ์์ต๋๋ค. ๐ https://duge.space/DOZYHExYNz ์ฌ๊ธฐ์์ ๋ชจ๋น์ผ์๊ฒ ๋ฌด์์ด๋ ์ง ๋ฌผ์ด ๋ณผ ์ ์์ด์.
๋, ํ๊ตญ์ ๐ producthunt๋ผ๊ณ ํ ์ ์๋ ๋์ค์ฝฐ์ด์์๋ DUGE๋ฅผ ๊ณต์ ํด ๋์์ด์. ๋ง์ ๊ด์ฌ ๋ถํ๋๋ฆฝ๋๋ค. ๐ DUGE | Disquiet*
DUGE์ ์ง์์ ๊ฐ๋ฐ์ ์ํด ์ง์ํ๊ณ ์ถ์ ๋ถ๋ค์ ์์ ๋กญ๊ฒ ๋๋ค์ด์
ํด ์ฃผ์ธ์. ๊ธฐ๋ถํ์ ๋์ DUGE ์๋ฒ๋น๋ก ์ฌ์ฉ ๋ฉ๋๋ค.
SQLite๊ฐ ํ๋ํ๊ธฐ ์ด๋ ต๊ฑฐ๋ ๋๋ฆฌ์ง ์๊ฒ ๋๋ ๋ฐ๋ฌธํ๋ ๋ถ๋ค ์ค, ์ค์ ๋ก SQLite๋ฅผ ์ฐ๋ค๊ฐ ํ๋ํ๊ธฐ ์ด๋ ต๊ฑฐ๋ ๋๋ ค์ MySQL์ด๋ Postgres๋ก ๋์ด๊ฐ ๋ถ์ ์์ง ๋ณธ ์ ์ด ์์ต๋๋ค. (DBMS์๋ ๋ณ๊ฐ๋ก) ๊ฒ์์์งํ๋ฉด ๋ฌด์กฐ๊ฑด Elastic Search๋ก๋ง ์๊ฐํ๋ ๊ฒ์ฒ๋ผ์.
์ฌ๋ฐ๊ฒ ์ฝ์์ต๋๋ค :)
์ด ์๋น์ค๊ฐ peing์ ๋์ฒดํ ์ ์๊ธธ ๋ฐ๋ผ์!
๋ฒจ๋กํผํธ์ ๋์ง ๋ง๋ค์์ด์.
๋ฐฑ์๋๋ ์ด๋ค ์ธ์ด๋ก ๋ง๋์ ๊ฑด๊ฐ์?
๋งค์ด๋ง 6๋จ๊ณ๊ฐ ๊ฐ์๊ธฐ ์ํ๋ง 15๋จ๊ณ๊ฐ ๋์๋ค์. ์ทจ์คํ์๋์? ๐ง
์ ๊น ์จ๋ณด์๋๋ฐ ์ ๋ง ์๊ฐ์ฒ๋ผ ๊น๋ ์๋ฐ ํ๋ค์. ์ฐ์.
Q. Tailwind ๊ฐ loop ๋ฅผ ๊ถ์ฅํ๋ค๋ ๋ฌธ์ฅ์ ๋ ํผ๋ฐ์ค๊ฐ ๊ถ๊ธํฉ๋๋ค.
์๊ฐ๊ธ์ด ์ฌ๋ผ์๊ตฐ์ใ ใ ์์ Mr.๋๋์ง๋ ๋ํํ๋ ์ฌ๋ฏธ์ ๋น ์ ธ์์ต๋๋ค ์ฌ๋ฐ๋ ์๋น์ค ๋ง๋ค์ด์ฃผ์ ์ ๊ฐ์ฌํด์
๊ต์ฅํ ๊ณต๊ฐ์ด ๋๋ ๊ธ์ด๊ตฐ์.
์ฌ์ค DB๋ ์ ๋ ๋๋ฆฌ์ง ์์ต๋๋ค. ์ฐ๋ ์ฌ๋์ด ๊ดด์ํ๊ณ ์ด์ํ ๋ฐฉ๋ฒ์ผ๋ก ์ฐ๋ ๋๋ฆฐ ๊ฒ์ด์ง์.
DB๋ฅผ ์กฐ๊ธ ๋ ์ดํดํ๊ณ ๊ณต๊ฐ?ํ๋ค๋ฉด ์ ๋ ๋๋ฆฌ์ง ์์ ์น๊ตฌ์
๋๋ค.
๋ฌธ์ ๋ ๊ดด์ํ๊ฒ ์ฐ์ง ์๋ ๋ฐฉ๋ฒ์ ์๊ณ ์๋ ์ฌ๋์ด ๋ง์ง ์๋ค๋ ๊ฒ์ด์ฃ ..
๋๊ฐํฉ๋๋ค. DB๋ ์๊ฐ๋ณด๋ค ๋น ๋ฅด๊ณ ์๊ฐ๋ณด๋จ ๋๋ฆฝ๋๋ค(?)