SSR

    [Next.js] ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ

    Next.js๋Š” ์„œ๋ฒ„์‚ฌ์ด๋“œ๋ Œ๋”๋ง์„ ์ง€์›ํ•ด์ฃผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค.์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์˜ ์žฅ์ ์€ ์•„๋ž˜ ํฌ์ŠคํŒ…์— ์ •๋ฆฌํ•ด๋†“์•˜๋‹ค. SSR์˜ ๊ฒฝํ—˜์„ ์Œ“๊ณ  ์‹ถ์–ด์„œ Next.js๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.2024.05.30 - [Front-end/React] - [React] ๋ชจ๋˜ ๋ฆฌ์•กํŠธ ๋”ฅ๋‹ค์ด๋ธŒ 4. ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ์ฃผ์š” ์ •๋ฆฌ [React] ๋ชจ๋˜ ๋ฆฌ์•กํŠธ ๋”ฅ๋‹ค์ด๋ธŒ 4. ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ์ฃผ์š” ์ •๋ฆฌ1. ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋ž€?์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์•ฝ์ž์ธ SPA๋Š” ๋ Œ๋”๋ง๊ณผ ๋ผ์šฐํŒ…์— ํ•„์š”ํ•œ ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ์„ ์„œ๋ฒ„๊ฐ€ ์•„๋‹Œ ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์˜์กดํ•˜๋Š” ๋ฐฉ์‹์„ ์˜๋ฏธํ•œ๋‹ค. SPAworld-developer.tistory.comํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐnpx create-next-app@latest ๋งŒ์•ฝ typescript๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ..

    [React] ๋ชจ๋˜ ๋ฆฌ์•กํŠธ ๋”ฅ๋‹ค์ด๋ธŒ 4. ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ์ฃผ์š” ์ •๋ฆฌ

    1. ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋ž€?์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์•ฝ์ž์ธ SPA๋Š” ๋ Œ๋”๋ง๊ณผ ๋ผ์šฐํŒ…์— ํ•„์š”ํ•œ ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ์„ ์„œ๋ฒ„๊ฐ€ ์•„๋‹Œ ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์˜์กดํ•˜๋Š” ๋ฐฉ์‹์„ ์˜๋ฏธํ•œ๋‹ค. SPA๋Š” ๋ง ๊ทธ๋Œ€๋กœ ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌํ˜„๋˜๋ฉฐ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ๋ฐ›์•„์˜ค์ง€ ์•Š๋Š”๋‹ค. ์ตœ์ดˆ์— ์ฒซ ํŽ˜์ด์ง€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ๋‘ ๋ถˆ๋Ÿฌ์˜จ ์ดํ›„์— ํŽ˜์ด์ง€ ์ „ํ™˜ ๋‹จ๊ณ„์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ๋ธŒ๋Ÿฌ์šฐ์ €์˜ history.pushState์™€ history.replaceState๋กœ ์ด๋ค„์ง€๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„์—์„œ HTML์„ ๋‚ด๋ ค๋ฐ›์ง€ ์•Š๊ณ  ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€์—์„œ ๋ชจ๋“  ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•œ๋‹ค. SPA๋Š” ์ตœ์ดˆ ์ฒซ ํŽ˜์ด์ง€๋ฅผ ๋ฐ›์„ ๋•Œ๋Š” SSR์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ดํ›„์—๋Š” CSR์„ ์ด์šฉํ•˜์—ฌ ๋ Œ๋”๋ง์„ ์ง„ํ–‰ํ•ด์•ผ ํ•œ๋‹ค. 1.1 SPA์—์„œ ํŽ˜์ด์ง€ ์ „ํ™˜์ด ์ผ์–ด๋‚˜๋Š” ๊ณผ์ •์„ ์„ค๋ช…ํ•˜์‹œ์˜คํŽ˜์ด์ง€ ์ „ํ™˜ ์‹œ..