๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Progress/๐ŸŽ€ ๋…ธ๋งˆ๋“œ์ฝ”๋” ๋ฆฌ์•กํŠธ4๊ธฐ

[7์ฃผ์ฐจ] ์ฃผ๊ฐ„ํšŒ๊ณ ๋ก

728x90

๐Ÿ—บ๏ธ 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์›”์ด๋ผ๋‹ˆ. ๋‚ ์”จ๊ฐ€ ๋”ฐ๋œปํ•ด์ง€๋ฉด์„œ ๊ธฐ๋ถ„๋„ ์ข‹์•„์ง€๋Š” ๊ฒƒ ๊ฐ™๋‹ค. 

๋‚ ์”จ ์˜ํ–ฅ์„ ๋งŽ์ด ๋ฐ›๋Š”๋ฐ, ์ถฅ์ง€ ์•Š์•„์„œ ์ปจ๋””์…˜๋„ ์•ˆ์ •์ ์ด๊ณ  ๊ธฐ๋ถ„๋„ ์•ˆ์ •์ ์ด๊ณ  ๋ฌดํŠผ ์ข‹๋‹ค. 

 

์ฃผ๋ง์— ์ œ์ผ ์นœํ•œ ์นœ๊ตฌ๋“ค์„ ๋งŒ๋‚˜์„œ ์‹œ๊ฐ„์„ ๋ณด๋‚ธ ๊ฒƒ๋„ ํž๋ง์ด ๋งŽ์ด ๋๋‹ค. 

๋‹ค๋“ค ๊ฒฐํ˜ผํ•˜๊ณ  ์•„๊ธฐ๋„ ์ƒ๊ธฐ๊ณ  ๊ณ„ํš๋Œ€๋กœ ์ž˜ ์‚ฌ๋Š” ๊ฒƒ ๊ฐ™๋‹ค. 

๋‚ด๊ฐ€ ๊ทธ๋ ‡๊ฒŒ ์‚ด๊ณ  ์žˆ์ง€ ์•Š์•„์„œ ์กฐ๋ฐ”์‹ฌ์ด ๋“ ๋‹ค๊ฑฐ๋‚˜ ๋ญ ๊ทธ๋Ÿฐ๊ฑด ์ „ํ˜€ ์—†์ง€๋งŒ, ์–ธ์ œ ์•ˆ์ •์ ์œผ๋กœ ์‚ด ์ˆ˜ ์žˆ๊ฒŒ ๋ ์ง„ ๊ถ๊ธˆํ•˜๋‹ค. 

์–ด์ฉŒ๋ฉด ํ‰์ƒ ์•ˆ์˜ฌ์ง€๋‘?

ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์„ ์—ด์‹ฌํžˆ ํ•˜๋Š” ๊ฒƒ ๋ฟ์ด์ง€ ๋ญ! ์ดคํ•˜ํ•ซ

 

๊ทธ๋‚˜์ €๋‚˜ ์Šคํ„ฐ๋”” ์‹œ์ž‘ํ•œ์ง€ ๋ฒŒ์จ ๋งˆ์ง€๋ง‰ ์ฝ”์Šค๋งŒ ๋‚จ์•˜๋‹ค๋‹ˆ. 

์ด๋ฒˆ ์Šคํ„ฐ๋””๋Š” ์ฒ˜์Œ์œผ๋กœ ๋๋‚˜๊ฐ€๊ณ  ์žˆ๋‹ค๋Š” ๊ฒŒ ์•„์‰ฝ๋‹ค. ๋ฌผ๋ก  ์•„์ง ํ•œ๋‹ฌ์ด๋‚˜ ๋‚จ์•˜์ง€๋งŒ ๋ง์ด์ง€.

 

๋‹คํ–‰ํžˆ ๊ฐœ๋ฐœ ๊ณต๋ถ€ ์ž์ฒด๋Š” ์žฌ๋ฐŒ์–ด์กŒ๋Š”๋ฐ ์ง์—…์œผ๋กœ ํ•  ์ˆ˜ ์žˆ์„์ง€๋Š” ์•„์ง ํ™•์‹ ์ด ์—†๋‹ค. 

๊ทธ๋ž˜๋„ ๋‹ค์‹œ ์•Œ๊ณ ๋ฆฌ์ฆ˜๋„ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ๊ณ , ๋˜ ์ฝ๋‹ค ๋งŒ ๋ฆฌ๋”ฅ๋‹ค๋„ ๋‹ค์‹œ ์ฝ๊ณ  ์‹ถ๊ธด ํ•˜๋‹ค. 

๋‚˜๋งŒ์˜ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๊ณ  ์ž๊ธฐ์†Œ๊ฐœ์— ์ ๊ธด ํ–ˆ๋Š”๋ฐ,

๋ฐฉ๊ธˆ ๋ชปํ•  ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ์ž ๊น ๋“ค์—ˆ์ง€๋งŒ ์•„๋‹ˆ๋‹ค.  

์Œ ๊ทธ๋ž˜! ์šฐ์„  ์ดˆ์•ˆ์ด๋ผ๋„ ์žก์ž. ๊ฐ•์˜ ๋“ค์œผ๋ฉด์„œ ํ•˜๋ฉด ํ•  ์ˆ˜ ์žˆ๊ฒ ์ง€!

 

์ž‘๋…„์— ๋ฆฌ์•กํŠธ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋ชป๋”ฐ๋ผ๊ฐˆ๊นŒ๋ด ๋ฌด์„œ์›Œํ•ด์„œ ์˜๋– ๋‹˜์ด๋ž‘ ๋‹ด๋‹˜์ด๋ž‘ ๋‹ค๋“ค ์‘์›ํ•ด์ฃผ์…จ๋˜๊ฒŒ ๊ฐ‘์ž๊ธฐ ๋– ์˜ฌ๋ž๋‹ค. 

๋ณธ์ธ๋“ค ์ผ์ฒ˜๋Ÿผ ์ƒ๊ฐํ•ด์ฃผ๋Š”๊ฒŒ ์‰ฝ์ง€ ์•Š์€๋ฐ ์Šคํ„ฐ๋””๋ฅผ ์—ฌ๋Ÿฌ๋ฒˆ ํ•ด๋„, ์ •์„ฑ์ด ์žˆ์–ด์•ผ ๊ฐ€๋Šฅํ•œ ์ผ์ด๋ž€ ๊ฒŒ ์ƒˆ์‚ผ ๋Š๊ปด์ ธ์„œ ๊ฐ๋™.... ํ‘ํ‘

 ์žฌ๋ฐŒ๊ฒŒ.. ์žฌ๋ฐŒ๊ฒŒ ๊พธ์ค€ํžˆ ํ•ด์•ผ์ง€. ์•„์ขŒ์ขŒ!!

 

 

728x90
๋ฐ˜์‘ํ˜•