๐บ๏ธ 7์ฃผ์ฐจ (24.3.28 - 4.3)
๐ชด ํต์ฌ 3์ค ์์ฝ
- NEXT JS ๋๋ฌด ๊ฒ๋ด์ง ๋ง๊ณ ์ฐฌ์ฐฌํ ๊ณต๋ถํ์. ๋ ๋ฐ๋ณตํ ์๋ก ์ดํด๋๊ณ ์ฌ๋ฐ์ด์ก๋จ ๊ฑธ ๊ธฐ์ตํ๊ธฐ.
- ์ค์ ๊ฑท๊ธฐ ๊พธ์คํ ํด๋ณด๊ธฐ.
- ํ์ ๊ธฐ๋ฅ ์ธ์ ์กฐ๊ธ์ฉ ๋ ํด๋ณด๋ ค๊ณ ํ๊ธฐ. ์๊ฐ ํฌ์ ๋ ํด๋ณด์.
๐ ์ด๋ฒ ์ฃผ ๋ชฉํ
- ๊ณผ์ ์์ถ!
- ๊ฐ์๋ ๋ฐ๋ฆฌ์ง ์๊ณ ๋ณด๊ธฐ.
๐ฅ ์นญ์ฐฌํ๊ณ ์ถ์ ์
- ํ์์ 2-3์์ ์์ 10์-11 ์์ ์ผ์ด๋ฌ๋๋ฐ, ๋ช ๋ฌ ์ง๋ด๋ณด๋ ์๊ฐ์ ์ผ๋ก๋ ๊ฑด๊ฐ์ ์ผ๋ก๋ ๋ณ๋ก ์ข์ง ๋ชปํ ๊ฒ ๊ฐ์ ์กฐ๊ธ์ฉ ๊ณ ์น๋ ์ค..! 1์์ ์์ 9์์ ์ผ์ด๋๊ธฐ๋ฅผ ํ๊ณ ์๋ค.
- ๊ณผ์ ๋ฅผ ์ต์ ์ ๋คํด์ ํ๋ค๊ณ ๋ ๋ง ๋ชปํ์ง๋ง, ๊ทธ๋๋ ๊ณ์ ๊พธ์คํ ํ๊ณ ์๋ ์ . ํ์คํ ์ด์ ๊ธฐ์์ ํ ๋ ๋ณด๋ค ์กฐ๊ธ ์์ํ๋ค. (์ด์ ์ ์ง์ง ๋น๊ทผ ํ๋ฉด์ ๋๋ฌด ์ด๋ ต๊ณ ํ๊ธฐ ์ซ์๋๋ฐ ๋ง์ด๋ค.)
- ๊ฑท๊ธฐ๋ฅผ ์์ํ๋ค. ์ค์ ์ 30๋ถ ์ ๋ ์ฐ์ฑ ์ ํ๊ณ , ์ฌ๊ฑด์ด ๋๋ฉด ์ ๋ ์๋ ์กฐ๊ธ์ฉ ํ๋ ค๊ณ ํ๋ค. ๊ดํฉ์ฑ ํ๋๊น ๊ธฐ๋ถ๋ ์ข์๋ค.
๐ ๊ณ ์น๊ฑฐ๋ ๋ฒ๋ ค์ผ ํ ์
- ๊ฐ๋ฐ ๊ณต๋ถ๋ฅผ ์ ๋ ์ ์์ํ๋ ์ . ํ์คํ ์ผ์ฐ ์์ํ๊ณ ๊ณผ์ ๋ ์ผ์ฐ ์ ์ถํ๋๊น ์ข๋ค.
- ์ด.. ๋ ๊ธฐ๋ก์ ๋ณ๋ก ์ํ๊ณ ๊ทธ๋ฅ ๊ธฐ๋ฅ ๊ตฌํ๋ง ํ๋ค๋ณด๋ ๋ง์ ์กธ์์ ๋๋๋ฐ ๊ธฐ์ต์ด ์ ์๋๋ค. ์ ๊ธฐ๋กํด์ผ ํ๋ฒ์ด๋ผ๋ ๋ ๋ณธ๋ค.
- ์ง์ค๋ ฅ์ด ๋ง์ด ๋จ์ด์ง ๊ฒ ๊ฐ๋ค. ์ง์คํ ์ฅ์๋ฅผ ์ฐพ์๊ฐ๋ ๊ฒ ์ข๊ฒ ๋ค.
๐ ์ด๋ฒ ์ฃผ ๊ธฐ์ตํ๊ณ ์ถ์ ๋ด์ฉ
1. Promise.all() : ๋ณ๋ ฌ์ ์ผ๋ก fetching ํ๊ธฐ - #3.4 Parallel Requests
๋ฅ์คํธ14 ๊ฐ์๋ฅผ ๋ณด๋ค๊ฐ ๋์จ ๋ด์ฉ์ธ๋ฐ, ์ด๊ฒ nextJS ์์์ ์ ๊ณตํด์ฃผ๋ ๊ธฐ๋ฅ์ธ์ค ์์๋ค.
๊ทผ๋ฐ JS ๋ด์ฉ์ด์๋ค.. ์ค์ฐ..
ํจ์๋ฅผ ์์ฐจ์ ์ผ๋ก ํ๋์ฉ fetching ํด์ฃผ๋ ๊ฒ์ ๋ณ๋ก ์ข์ง ์๋ค.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Promise.all() - JavaScript | MDN
Promise.all() ๋ฉ์๋๋ ์ํ ๊ฐ๋ฅํ ๊ฐ์ฒด์ ์ฃผ์ด์ง ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ์ดํํ ํ, ํน์ ํ๋ก๋ฏธ์ค๊ฐ ์ฃผ์ด์ง์ง ์์์ ๋ ์ดํํ๋ Promise๋ฅผ ๋ฐํํฉ๋๋ค. ์ฃผ์ด์ง ํ๋ก๋ฏธ์ค ์ค ํ๋๊ฐ ๊ฑฐ๋ถํ๋ ๊ฒฝ์ฐ, ์ฒซ
developer.mozilla.org
์ด ๋ฉ์๋๋ ๊ฐ๊ฐ์ ํจ์๊ฐ fetching ํ ๋ฐ์ดํฐ๋ฅผ ๋ฐฐ์ด๋ก return ํ๋ค.
์ฆ, ์์ฑํ ํจ์์ ์์๋๋ก ๋ฐ์ ๋ณ์๋ช ์ ์ ์ผ๋ฉด ๋๋ค.
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("foo");
}, 100);
});
Promise.all([p1, p2, p3]).then((values) => {
console.log(values); // [3, 1337, "foo"]
});
๋ฐ๋ก fetching ์ ํ ๊ฒฐ๊ณผ๊ฐ ์๊ณ , Promise.all() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ฒ ์๋๋ค. (Date.now())
Promise.all() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด(ํจ์๊ฐ ์คํ๋๋ ๋ฐ๋ฆฌ์ด), ๋๊ฐ์ง ๋ฐ์ดํฐ๊ฐ ๋์์ fetching ํ๋ ๊ฑธ ํ์ธํ ์ ์๋ค.
ํ์ง๋ง ๋จ์ ์ด ์๋ค.
์ด๋ฐ์์ผ๋ก ์ปดํฌ๋ํธ๊ฐ ๊ตฌ์ฑ๋์ด ์๋ค๋ฉด,
movie ์ videos ๊ฐ ๋ชจ๋ fetching ๋๊ณ ๋์์ผ UI ๋ฅผ ๋ณผ ์ ์๋ค๋ ๊ฒ์ด๋ค.
์ด ๋จ์ ์ ํด๊ฒฐํ๊ธฐ ์ํด ์ปดํฌ๋ํธ๋ก ๊ฐ๊ฐ์ ๋น๋๊ธฐ ํจ์๋ค์ ๋ถ๋ฆฌํ ํ,
Suspense ๋ฅผ ์ฌ์ฉํ๋ค.
๐ ์ฃผ๊ฐ ํ์์ ์กฐ๋ณ ํ๋
์ฃผ๊ฐํ์์์ ๋ฐํํ์๋ ๊ฑธ ๋ณด๋ฉด ๋ค๋ค ๋๋ฌด ๋ฉ์ง๋ค. ํ์ ๊ตฌํ ๊ธฐ๋ฅ ์ธ์ ๋ค๋ฅธ ๊ฒ๋ค๋ ๋ง์ด ์๋ํ์๊ณ , ๋์์ธ ํจํด๋ ์๊ฐํ์๋ ๊ฑธ ๋ณด๋ฉด ๊ตฌ๋ฅ ๋ฉ์ง๋ค๋ ์๊ฐ ๋ฐ์ ์๋ ๋ค.
์ ์ค๋์ ๋ชจ๋ ์์๋ก๊ฐ ๋๋ค.
์คํ์ ์ฌํ๋์ด ์๋ ค์ฃผ์ ์ ํ๋ช ์ฉ ํ๋ช ์ฉ... ํํํธํธํธ
ใ ใ ใ ใ ใ ใ ใ ใ ใ ๋จ์ฒด๋ก ์ ๋ฌ๊ณ ์์ผ๋ ์๊ธฐ๊ณ ๊ท์ฝ๋ค.
ํนํ 4๊ธฐ์ ์ด์ฌํ ํ์๊ณ ์ธ์ฑ๋ ํ๋ฅญํ์ ๋ถ๋ค์ด ๋ง์์ ๋๋ฌด ์ข๋ค.
๋๊ธ๋ ์ ์๋ฌ๊ณ ๊ธฐ๊ปํด์ผ ๋ฆฌ์กํธ ์ฝ์ด๋ฐฉ์์ ๊ณต๋ถํ๋ ์ ๋์ ํ๋์ ํ๊ณ ๋ ์์ง๋ง..
๋ง์์ ๊ธฐ์๊ฑฐ๋ฆฌ๊ณ ์ถ์๋ฐ ์ฌ์ ์ผ๋ก ์ฌ์ ๊ฐ ์๋ค. ํ..
ํผ์๋ผ๋ ์ด ์ ํํจ์ ๊ธฐ๋กํด์ผ์ง.
๐ต ์๊ฐ ๊ธฐ๋ก
์ 4์์ด๋ผ๋. ๋ ์จ๊ฐ ๋ฐ๋ปํด์ง๋ฉด์ ๊ธฐ๋ถ๋ ์ข์์ง๋ ๊ฒ ๊ฐ๋ค.
๋ ์จ ์ํฅ์ ๋ง์ด ๋ฐ๋๋ฐ, ์ถฅ์ง ์์์ ์ปจ๋์ ๋ ์์ ์ ์ด๊ณ ๊ธฐ๋ถ๋ ์์ ์ ์ด๊ณ ๋ฌดํผ ์ข๋ค.
์ฃผ๋ง์ ์ ์ผ ์นํ ์น๊ตฌ๋ค์ ๋ง๋์ ์๊ฐ์ ๋ณด๋ธ ๊ฒ๋ ํ๋ง์ด ๋ง์ด ๋๋ค.
๋ค๋ค ๊ฒฐํผํ๊ณ ์๊ธฐ๋ ์๊ธฐ๊ณ ๊ณํ๋๋ก ์ ์ฌ๋ ๊ฒ ๊ฐ๋ค.
๋ด๊ฐ ๊ทธ๋ ๊ฒ ์ด๊ณ ์์ง ์์์ ์กฐ๋ฐ์ฌ์ด ๋ ๋ค๊ฑฐ๋ ๋ญ ๊ทธ๋ฐ๊ฑด ์ ํ ์์ง๋ง, ์ธ์ ์์ ์ ์ผ๋ก ์ด ์ ์๊ฒ ๋ ์ง ๊ถ๊ธํ๋ค.
์ด์ฉ๋ฉด ํ์ ์์ฌ์ง๋?
ํ ์ ์๋ ๊ฒ๋ค์ ์ด์ฌํ ํ๋ ๊ฒ ๋ฟ์ด์ง ๋ญ! ์ดคํํซ
๊ทธ๋์ ๋ ์คํฐ๋ ์์ํ์ง ๋ฒ์จ ๋ง์ง๋ง ์ฝ์ค๋ง ๋จ์๋ค๋.
์ด๋ฒ ์คํฐ๋๋ ์ฒ์์ผ๋ก ๋๋๊ฐ๊ณ ์๋ค๋ ๊ฒ ์์ฝ๋ค. ๋ฌผ๋ก ์์ง ํ๋ฌ์ด๋ ๋จ์์ง๋ง ๋ง์ด์ง.
๋คํํ ๊ฐ๋ฐ ๊ณต๋ถ ์์ฒด๋ ์ฌ๋ฐ์ด์ก๋๋ฐ ์ง์ ์ผ๋ก ํ ์ ์์์ง๋ ์์ง ํ์ ์ด ์๋ค.
๊ทธ๋๋ ๋ค์ ์๊ณ ๋ฆฌ์ฆ๋ ๊ณต๋ถํ๊ณ ์ถ๊ณ , ๋ ์ฝ๋ค ๋ง ๋ฆฌ๋ฅ๋ค๋ ๋ค์ ์ฝ๊ณ ์ถ๊ธด ํ๋ค.
๋๋ง์ ์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ถ๋ค๊ณ ์๊ธฐ์๊ฐ์ ์ ๊ธด ํ๋๋ฐ,
๋ฐฉ๊ธ ๋ชปํ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ์ ๊น ๋ค์์ง๋ง ์๋๋ค.
์ ๊ทธ๋! ์ฐ์ ์ด์์ด๋ผ๋ ์ก์. ๊ฐ์ ๋ค์ผ๋ฉด์ ํ๋ฉด ํ ์ ์๊ฒ ์ง!
์๋ ์ ๋ฆฌ์กํธ ๊ณต๋ถํ๋ฉด์ ๋ชป๋ฐ๋ผ๊ฐ๊น๋ด ๋ฌด์์ํด์ ์๋ ๋์ด๋ ๋ด๋์ด๋ ๋ค๋ค ์์ํด์ฃผ์ จ๋๊ฒ ๊ฐ์๊ธฐ ๋ ์ฌ๋๋ค.
๋ณธ์ธ๋ค ์ผ์ฒ๋ผ ์๊ฐํด์ฃผ๋๊ฒ ์ฝ์ง ์์๋ฐ ์คํฐ๋๋ฅผ ์ฌ๋ฌ๋ฒ ํด๋, ์ ์ฑ์ด ์์ด์ผ ๊ฐ๋ฅํ ์ผ์ด๋ ๊ฒ ์์ผ ๋๊ปด์ ธ์ ๊ฐ๋.... ํํ
์ฌ๋ฐ๊ฒ.. ์ฌ๋ฐ๊ฒ ๊พธ์คํ ํด์ผ์ง. ์์ข์ข!!
'Progress > ๐ ๋ ธ๋ง๋์ฝ๋ ๋ฆฌ์กํธ4๊ธฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[9์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (1) | 2024.04.20 |
---|---|
[8์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.04.10 |
[6์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.03.27 |
[5์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.03.20 |
[4์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.03.08 |