๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- React, Next.js

์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋งˆ์น˜๋ฉฐ...

by Wonit 2020. 12. 31.

ํ•ด๋‹น ๋ธ”๋กœ๊ทธ ์‹œ๋ฆฌ์ฆˆ๋Š” ์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next js ์‹œ๋ฆฌ์ฆˆ๋กœ์จ ์ด 8๋ถ€์ž‘์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
Next.js๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„œ ์ด์•ผ๊ธฐํ•˜๋Š” ๋‚ด์šฉ์„ ์ตœ๋Œ€ํ•œ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ณ  ์ง๊ด€์ ์ด๊ฒŒ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

0. ๋ชฉ์ฐจ

1. create-next-app์œผ๋กœ next ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…ํ•˜๊ธฐ

2. create-next-app์—์„œ ๋งŒ๋‚œ ์ฒซ ๋ฒˆ์งธ ํ•ต์‹ฌ pages. ๊ทธ๋ฆฌ๊ณ  ๋™์  ๋ผ์šฐํŒ…

3. ํŽ˜์ด์ง€๋ฅผ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ Link-Component ๊ทธ๋ฆฌ๊ณ  Pre-Fetch

Dynamic Routing๊ณผ Link๋ฅผ ์ด์šฉํ•ด ๊ฐ„๋‹จํ•œ ๊ฒŒ์‹œํŒ์„ ๋งŒ๋“ค์–ด๋ณด์ž.

4. Next.js์—์„œ head ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฉ‹์ง„ ๋ฐฉ๋ฒ•

๋ฒˆ์™ธ & ์‹ค์Šต) ์ด๋ฏธ์ง€์™€ ๋™์˜์ƒ์„ ์ €์žฅํ•˜๊ณ  ์‚ฌ์šฉํ•ด๋ณด์ž.

5. ์›น์˜ ๋ฐœ์ „ ๊ณผ์ •์œผ๋กœ ๋ณด๋Š” SSG์™€ SSR

6. next์˜ ๋‘ ๋ฒˆ์งธ ํ•ต์‹ฌ Pre-Rendering

7. SSG๋กœ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™” ๋…ธ๋ฆฌ๊ธฐ

8. ์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋งˆ์น˜๋ฉฐ..


์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ์ฐธ ๋งŽ์€ ๊ฒƒ๋“ค์„ ๋‹ค์‹œ ๋ณด๊ฒŒ ๋˜์—ˆ๊ณ  ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.

 

๊ฐœ์ธ์ ์œผ๋กœ Next.js๋ฅผ ํฌํ•จํ•œ ๋ชจ๋“  ๋ถ„์•ผ์˜ ์ƒˆ๋กœ์šด ๊ฒƒ์„ ๋ฐ›์•„๋“ค์ด๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‹ค์Œ์„ ์•Œ์•„์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

 

๋‚ด๊ฐ€ ์ง€๊ธˆ ๋ฐฐ์šฐ๊ณ  ์žˆ๋Š”๊ฒŒ ์–ด๋–ค ๊ฒƒ์„ ํ•ด๊ฒฐํ• ๊นŒ?

 

๋‚ด๊ฐ€ ์ง€๊ธˆ ๋ณด๊ณ ์žˆ๋Š” ๊ฒƒ์„ ์–ด๋””์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ?

 

์‚ฌ์‹ค ์œ„์˜ ๊ฒƒ๋“ค์„ ๋…์ž๋กœ ํ•˜์—ฌ๊ธˆ ์ถฉ๋ถ„ํžˆ ์ž˜ ๋Š๊ปด์ง€๊ฒŒ ํ–ˆ๋Š”์ง€๋Š” ๋‚˜๋„ ์ž์‹ ์žˆ๊ฒŒ ๋ง์„ ํ•  ์ˆ˜ ์—†๋‹ค.

 

๋‚˜๋ฅผ ํฌํ•จํ•œ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๋ณผ ๊ธ€์ด๋‹ˆ ์ตœ๋Œ€ํ•œ ๊ณต์‹ ๋ฌธ์„œ์˜ ๋ฐฉํ–ฅ์„ ํํŠธ๋ฆฌ์ง€ ์•Š์œผ๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ๊ณ  ๊ทธ๋ ‡๋‹ค ๋ณด๋‹ˆ ์–ด์ฉŒ๋ฉด ๊ณต์‹ ๋ฌธ์„œ์— ์žˆ๋Š” ๋‚ด์šฉ์„ ๊ทธ๋Œ€๋กœ CnP ํ–ˆ๋‹ค๊ณ  ๋Š๊ปด์งˆ ์ˆ˜๋„ ์žˆ๋‹ค.

 

๋˜ํ•œ ์ด๋Ÿฐ ์‹œ๋ฆฌ์ฆˆ ๊ธ€์„ ์“ฐ๋Š” ๊ฒƒ์ด ์ฒ˜์Œ์ด๊ธฐ๋„ ํ•˜๋ฉฐ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ๋“ค์„ ์•Œ๋ ค์ฃผ๊ณ ์‹ถ์€๋ฐ ์–ด๋–ป๊ฒŒ ์ •๋ฆฌํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋Š” ๋ง‰๋ง‰ํ•จ ๋•Œ๋ฌธ์— ์–‘์งˆ์˜ ๊ธ€์ด ๋‚˜์˜ค์ง€ ์•Š์•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

 

ํ•˜์ง€๋งŒ ์ด๋ฒˆ ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์‹œ์ž‘์œผ๋กœ ๋ฐ›์„ ํ”ผ๋“œ๋ฐฑ์œผ๋กœ ์„ฑ์žฅํ•ด ์•ž์œผ๋กœ๋„ ๋‹ค์–‘ํ•˜๊ณ  ๋งŽ์€ ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋งŒ๋“ค์–ด๋‚ด๋ฉฐ Next ํ˜น์€ ๋‹ค๋ฅธ ๊ฒƒ๋“ค์„ ์ƒˆ๋กœ ์‹œ๋„ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์กฐ๊ธˆ ๋” ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค.

 

์‹œ๋ฆฌ์ฆˆ๋Š” ๊ธฐ์ดˆ ์ด๋ก  ๋ฟ ์•„๋‹ˆ๋ผ ์‹ค์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•ด๋ณด๊ธฐ๋„ ํ•˜๋ฉฐ ๋‹ค์–‘ํ•œ ๊ฒƒ๋“ค์„ ์‹œ๋„ํ•  ๊ฒƒ์ด๋‹ค.

๋Œ“๊ธ€