์ธํ๋ฐ ์ํคํ ์ณ (INFCON 2024)
์ฒซ ๋ฒ์งธ ์ธ์ ์ ์ด์ด ์ธํ๋ฉ์ CTO ์ด๋์ฑ๋์ 2024~2025 ์ํคํ ์ณ ๋ฐ ์์ผ๋ก์ ๋ฐฉํฅ?์ ๋ํ ์ธ์ ์ ๋ค์๋ค.
์ธํ๋ฐ์ ๊ธ๋ก๋ฒ ์๋น์ค๋ฅผ ์ค๋น์ค์ธ๋ฐ, ๊ธ๋ก๋ฒ ์๋น์ค๋ฅผ ์ค๋นํ๋ฉด์ ๊ฒช์ ๋ฌธ์ ๋ค๊ณผ ํด๊ฒฐ๋ฐฉ๋ฒ์ ๋ํ ์ด์ผ๊ธฐ๋ฅผ ๋ค์ ์ ์์๋ค.
1. ํธ๋ํฝ ๋น์ฉ๊ฐ์
๊ธ๋ก๋ฒ ์๋น์ค๋ฅผ ์ํด ๋ฌด๋ฃ ๊ฐ์ ์คํ์ด๋, ์ธํ๋ฐ์ ๋ํ ๋ฐ์ดํฐ๋ฅผ ํ๋ณด์ฉ์ผ๋ก ๋ฟ๋ ค์ผํ๋ ๋ง์ ํธ๋ํฝ ๋น์ฉ์ด ๋ฐ์ํ๊ฒ ๋์๋๋ฐ ๋น์ฉ์ ๊ฐ์ ์ํ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ด ์ด๋ฏธ์ง ํฌ๋งท์ด๋ผ๊ณ ํ๋ค.
์ฒ์์๋ ํ๋ฉด์ ํ์ํ ๋งํผ๋ง ์ด๋ฏธ์ง๋ฅผ ์ ์กํ๋๋ก width๋ฅผ ์ง์ ํ๋๋ฐ, png๋ jpeg๋ ๋์ ํ์ผ ํฌ๊ธฐ๋ฅผ ๊ฐ์ง๊ธฐ ๋๋ฌธ์ ๊ทธ ๋งํผ์ ๋คํธ์ํฌ ๋น์ฉ์ด ๋ฐ์ํ๋ค.
png, jpeg๋ณด๋ค ๋ฎ์ ํฌ๊ธฐ์ ํฌ๋งท์ค ์ต๊ทผ์ ๋ง์ด ์ฌ์ฉ๋๋ webp๋ฅผ ์ฌ์ฉํ๋ฉด ๋คํธ์ํฌ ๋น์ฉ์ ์ค์ผ ์ ์๋๋ฐ, ์ด ๋ณด๋ค ๋ ๊ณ ํ์ง/์ ์ฉ๋ ํ์ผ ํฌ๋งท์ธ avif๋ฅผ ์๊ฐํ๋ค.
avif์ ์ฅ์ ์ ๋๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ์์ ์ง์ํ๋ฏ๋ก ์ฌ๋งํ๋ฉด ํธํ์ฑ์ ๊ณ ๋ คํ์ง ์์๋ ๋๋ค๊ณ ํ๋ค.
์ฌ์ฉ๋ฐฉ๋ฒ์ w=380&f=avif ์ฒ๋ผ ์ฌ์ฉํ๋ฉด๋๊ณ cloudFront์ lambda๋ฅผ ํ์ฉํ๊ณ ์๋ค๊ณ ํ๋ค.
๋๋ฒ์งธ ๋น์ฉ์ ๊ฐ ๋ฐฉ๋ฒ์ ์ธํ๋ฐ์ ์นดํ ๊ณ ๋ฆฌ ํ์ด์ง์ ๋ฐ์ดํฐ๋ฅผ db์์ ์ง์ ๋ด๋ ค๋ฐ์ ์ฌ์ฉํ๋๋ฐ
์ด๋ฌํ ๊ณผ์ ์ ํตํด ๋น์ฉ ์ ๊ฐ์ ํ๋ค๊ณ ๋งํ๋ค.
2. API ํ๊ฒฝ๊ฐ์
๊ธฐ์กด express๋ฅผ next.js๋ก ์ด์ฃผํ๋ ๊ณผ์ ์์ ๊ฒช์ ๋ฌธ์ ์ ๊ณผ ํด๊ฒฐ๋ฐฉ์์ ์๊ฐํ๋ค.
์ธํ๋ฐ ํ์ next.js์ config ์ค rewrites
์ ํ์ฉํด์ api ํ๋ก์ ์๋ฒ๋ฅผ ์ฌ์ฉํ๋๋ฐ, ๋ฌธ์ ์ ์ด ์ฌ๋ด ๋ด๋ถ์ ์ผ๋ก๋ง ์ฌ์ฉํ๋ api๋ฅผ rewrites์ด ์ธ๋ถ๋ก ๋๋ฆฌ๋ ์ด์๊ฐ ๋ฐ์ํ๋ค.
ํด๊ฒฐ๋ฐฉ์์ผ๋ก ์ธ๋ถ/๋ด๋ถ ์ฝ๋๋ฅผ ๋ถ๋ฆฌํ๋ ๋ฐฉ๋ฒ๊ณผ ๋ด๋ถ/์ธ๋ถ api ๋ชจ๋ ์ธ์ ์ฒดํฌ๋ฅผ ํ๋ ๋ฐฉ๋ฒ์ ๋งํ๋๋ฐ, ์ ์๋ ๋ฐฑ์๋ ์ธํ๋ผ๊ฐ 2๋ฐฐ๋ก ์ฆ๊ฐํ๋ ๋ฌธ์ ๊ฐ ์์๊ณ ํ์๋ ์ธํ๋ผ ๋ถํ์ ์ฝ๋ ๋ณต์ก๋๊ฐ ์ฆ๊ฐํ๋ ๋ฌธ์ ๊ฐ ์์๋ค.
๊ฒฐ๊ตญ api์ path๋ฅผ ๊ตฌ๋ณํ๋ ๋ฐฉ์์ผ๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋๋ฐ, ํ๋ก ํธ์์ /client prefix๋ฅผ ๋ถ์ฌ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด์๋ค.
๊ทธ๋ฌ๋ ์ด ๋ฐฉ๋ฒ๋ํ ๋ฌธ์ ๊ฐ ์์๋๋ฐ, path๊ฐ ์ถ๊ฐ๋ ์ ๋ก ์ ์ง๋ณด์๊ฐ ์ด๋ ค์ ๊ณ , path ๊ด๋ฆฌ์๊ฐ ์ ํด์ ธ ์์๋ค.
๊ฒฐ๊ตญ go๊ธฐ๋ฐ์ ๋ฏธ๋ค์จ์ด๋ฅผ ์ถ๊ฐํ๊ณ , ์ฟ ํค ํค๋์ ๋ฐ๋ผ ํน์ ๋ก๋๋ฐธ๋ฐ์๋ก api๋ฅผ ์์ฒญํ๋๊ฒ ๊ฐ๋ฅํด์ก๋ค๊ณ ํ๋ค.
ํ๊ธฐ
aws๊ด๋ จ ๋ด์ฉ์ด ๋ง์๋๋ฐ, aws๋ฅผ ์์ฃผ ํ์ฉํด๋ณด์ง ๋ชปํด์ ์ดํดํ๋๋ฐ ์ด๋ ค์์ด ์์๋ค. ๊ทธ๋๋ ์ด๋ก ์ ์ธ ์๋ฆฌ๋ ์ด๋์ ๋ ์ดํด๋ฅผ ํด์ ๊ฐ๋ฐ ์ค๋ ฅ์ด ํฅ์๋๋ค๋ฉด ์ง๊ธ ๋ค์ ๋ด์ฉ๋ค์ ์ดํดํ๊ณ ์ ์ฉํด๋ณผ ์ ์์ง ์์๊น ์ถ๋ค.
์ฐ์ avif
ํฌ๋งท์ผ๋ก ํธ๋ํฝ ๋น์ฉ์ ์ค์ด๋ ๋ฐฉ๋ฒ๋ถํฐ ์ฐจ๊ทผ์ฐจ๊ทผ ํ ์ดํ๋ก์ ํธ์ ์ ์ฉํด๋ณด๋ ค ํ๋ค.