Frontend/React

[React] ์›น์˜ ์—ญ์‚ฌ์™€ Next.js

Kei Song 2022. 7. 7. 14:12

๐Ÿ”ธ ์›น์˜ ์—ญ์‚ฌ

1. Mosaic Web Browser(1993)์™€ Netscape Navigator(1994) ๋“ฑ์žฅ
Mosaic Web Browser์™€ Netscape Navigator๋Š” HTML๊ณผ CSS๋กœ๋งŒ ์ด๋ฃจ์–ด์ง„ ์ •์ ์ธ ์›น์‚ฌ์ดํŠธ์˜€์Šต๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž์—๊ฒŒ ์กฐ๊ธˆ ๋” ์ข‹์€ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๊ณ ์ž ๋™์ ์ธ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๊ณ ๋ฏผํ•ฉ๋‹ˆ๋‹ค.

 

2. Javascript์˜ ๋“ฑ์žฅ
Brendan Eich๊ฐ€ Javascript๋ฅผ ๊ฐœ๋ฐœํ•˜์˜€๊ณ , Netscape Navigator์—๋Š” javascript ์—”์ง„์„ ๋‚ด์žฅํ•˜์—ฌ ์ถœ์‹œํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

3. AJAX ๋“ฑ์žฅ
Jesse James Garrett์ด ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๊ณ  ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ ์ด ๋“ฑ์žฅํ•ฉ๋‹ˆ๋‹ค.

 

4. jQuery์˜ ๋“ฑ์žฅ
Microsoft๊ฐ€ Internet Explorer๋ฅผ ์ถœ์‹œํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์ž๋“ค์€ Netscape Navigator์™€ Internet Explorer์—์„œ ๋ชจ๋‘ ๋™์ž‘ํ•˜๋„๋ก ๊ฐœ๋ฐœํ•ด์•ผํ–ˆ์Šต๋‹ˆ๋‹ค.
๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ด ๋ถˆํŽธํ•จ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด jQuery๋ฅผ ์ถœ์‹œํ•˜์˜€๊ณ , ๊ฐœ๋ฐœ์ž๋“ค์€ jQuery์—์„œ ์ œ๊ณตํ•˜๋Š” API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์˜ ๊ตฌํ˜„ ์‚ฌํ•ญ์„ ์‹ ๊ฒฝ์“ฐ์ง€ ์•Š๊ณ  ์‰ฝ๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

 

5. ECMA Script ๋ฐœํ‘œ
๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ € ํšŒ์‚ฌ๋“ค์ด ๋ชจ์—ฌ์„œ Javascript ํ‘œ์ค€์•ˆ์„ ์ •ํ•˜์—ฌ ECMA Script๋ฅผ ๋ฐœํ‘œํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ‘œ์ค€์„ ์ž˜ ๋”ฐ๋ผ๊ฐ€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— jQuery์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—†์ด javascript๋งŒ์œผ๋กœ๋„ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

6. Single Page Application
Javascript ํ‘œ์ค€์ด ์ •ํ•ด์ง€๋ฉด์„œ js๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๊ฐœ๋ฐœ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. (ex. Backbone.js, Angular.js, React.js)
์ด๋ฅผ ํ™œ์šฉํ•˜์—ฌ SPA๋ฅผ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

SPA : ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋งŒ ๋กœ๋“œํ•˜๊ณ , ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ๊ฒƒ์„ Single Page Application์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ”ธ React.js

React๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ Javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

ํŠน์ง•
1. Virtual DOM ์‚ฌ์šฉ
UI๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด Virtual DOM์œผ๋กœ ๋ Œ๋”๋งํ•˜๊ณ , Virtual DOM๊ณผ ์ด์ „ Virtual DOM์„ ๋น„๊ตํ•˜์—ฌ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„์„ ์‹ค์ œ DOM์— ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค.
์ด๋ฅผ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ € ๋‚ด์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์—ฐ์‚ฐ์˜ ์–‘์„ ์ค„์ด๊ณ  ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

2. ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ
์ด๋ฒคํŠธ๋ฅผ ํ†ตํ•ด ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜๊ณ , ์ˆ˜์ •๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ํ™”๋ฉด์— ์—…๋ฐ์ดํŠธ ๋ฉ๋‹ˆ๋‹ค.

 

3. JSX
Javascript๋ฅผ ํ™•์žฅํ•œ ๋ฌธ๋ฒ•์œผ๋กœ UI๋ฅผ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

 

4. ์„ ์–ธ์  ํ”„๋กœ๊ทธ๋ž˜๋ฐ
'์–ด๋–ป๊ฒŒ'๋ณด๋‹ค๋Š” '๋ฌด์—‡'์— ์ดˆ์ ์„ ๋งž์ถ”์–ด ๊ธฐ์ˆ ํ•ฉ๋‹ˆ๋‹ค.

๋ช…๋ น์ 

var arr = [1, 2, 3, 4, 5]
var elem = document.querySelector("#list");

for(var i = 0; i < arr.length; i ++) {
   var child = document.createElement("li");
   child.innerHTML = arr[i];
   elem.appendChild(child);
}


์„ ์–ธ์ 

const arr = [1, 2, 3, 4, 5];
return (
<ul>
  {arr.map((elem) => (
    <li>{elem}</li>
  ))}
</ul>
);

 

5. ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜
์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ UI๋ฅผ ๊ตฌ์„ฑํ•˜๋ฉฐ, ์ปดํฌ๋„ŒํŠธ๋Š” ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.



๐Ÿ”ธ CSR, SSR, SSG

- CSR (Client Side Rendering)
: ํด๋ผ์ด์–ธํŠธ(๋ธŒ๋ผ์šฐ์ €)์—์„œ ๋ Œ๋”๋ง์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
์›น ์„œ๋น„์Šค ๊ตฌ๋™์— ํ•„์š”ํ•œ HTML, Javascript, CSS ํŒŒ์ผ ๋“ฑ์„ ๋ชจ๋‘ ๋‹ค์šด๋กœ๋“œํ•œ ํ›„์— ๋ทฐ๊ฐ€ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.

์žฅ์ 
TTV(Time To View) ์‹œ์ ๊ณผ TTI(Time To Interact) ์‹œ์ ์ด ์ผ์น˜ํ•ฉ๋‹ˆ๋‹ค.
ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ๋•Œ๋„ ํ™”๋ฉด์ด ๊นœ๋นก์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋‹จ์ 
์ดˆ๊ธฐ์— ํ•„์š”ํ•œ ํŒŒ์ผ์„ ๋ชจ๋‘ ๋‹ค์šด๋กœ๋“œํ•œ ํ›„์— ๋ทฐ๋ฅผ ๊ตฌ์„ฑํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฝ๋‹ˆ๋‹ค.
(์‚ฌ์šฉ์ž๊ฐ€ ๋นˆ ํ™”๋ฉด์„ ๋ณด๋Š” ์‹œ๊ฐ„์ด ๊ธธ์–ด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.)
SEO(Search-Engine-Optimization)์— ์ทจ์•ฝํ•˜์—ฌ, ์‚ฌ์ดํŠธ๊ฐ€ ๊ฒ€์ƒ‰ ์ƒ์œ„ ๋…ธ์ถœ์— ๋ถˆ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.


- SSR (Server Side Rendering)
: ์„œ๋ฒ„์—์„œ HTML์„ ๊ตฌ์„ฑํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์— ๋ฐ˜ํ™˜ํ•˜๊ณ , ๋ธŒ๋ผ์šฐ์ €์—์„œ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

์žฅ์ 
์„œ๋ฒ„์—์„œ ์ด๋ฏธ HTML์„ ๊ตฌ์„ฑํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํŽ˜์ด์ง€ ๋กœ๋”ฉ์ด ๋นจ๋ผ์ง‘๋‹ˆ๋‹ค.
SEO์— ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๋‹จ์  ์š”์ฒญ์„ ๋ฐ›์„ ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ HTML์„ ๊ตฌ์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„ ๋ถ€ํ•˜๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ๋•Œ ๊นœ๋นก์ž„์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
TTV(Time To View) ์‹œ์ ๊ณผ TTI(Time To Interact) ์‹œ์  ๊ฐ„์— ์ฐจ์ด๊ฐ€ ์ƒ๊ฒจ์„œ, ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์— ์•„๋ฌด๋Ÿฐ ๋ฐ˜์‘์ด ์—†์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


- SSG (Static Site Generation)
: ํด๋ผ์ด์–ธํŠธ์—์„œ ํ•„์š”ํ•œ ํŽ˜์ด์ง€๋“ค์„ ๋ฏธ๋ฆฌ ์ค€๋น„ํ•ด๋’€๋‹ค๊ฐ€, ์š”์ฒญ์„ ๋ฐ›์œผ๋ฉด ์ค€๋น„ํ•ด๋‘” ํŒŒ์ผ์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์žฅ์ 
์ด๋ฏธ ์ค€๋น„๋˜์–ด์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์†๋„๊ฐ€ ๋น ๋ฆ…๋‹ˆ๋‹ค.
SEO์— ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
Serverlessํ•œ ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹จ์ 
์‚ฌ์ดํŠธ ๊ทœ๋ชจ๊ฐ€ ํฌ๋ฉด ๋นŒ๋“œ์— ์‹œ๊ฐ„์ด ์˜ค๋ž˜๊ฑธ๋ฆฝ๋‹ˆ๋‹ค.
๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋œ๋‹ค๋ฉด ๋‹ค์‹œ ๋นŒ๋“œํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.



๐Ÿ”ธ Next.js ๋ž€?

Next.js๋Š” ์›น์„ ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” React framework์ž…๋‹ˆ๋‹ค.
์ฃผ๋กœ Server Side Rendering, Static Site Generation ๊ธฐ๋Šฅ์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ์ด์šฉํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

ํŠน์ง•
๋ผ์šฐํŒ…
pages ๊ฒฝ๋กœ ๋ฐ‘์— ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋ฉด, ํŒŒ์ผ ์ด๋ฆ„์œผ๋กœ ํ•ด๋‹น ํŽ˜์ด์ง€์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ex) pages/posts/first-post.js ํŒŒ์ผ ์ƒ์„ฑ ์‹œ, /posts/first-post๋กœ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

* dynamic routing
  getStaticPaths ํ•จ์ˆ˜ ์‚ฌ์šฉํ•˜์—ฌ dynamic path ์ด๋ฆ„์œผ๋กœ ๊ฐ€๋Šฅํ•œ ๊ฒƒ์„ return ํ•ด์ค˜์•ผ ํ•จ.
  getStaticPaths๋Š” development ํ™˜๊ฒฝ์—์„œ๋Š” ๋งค๋ฒˆ ์‹คํ–‰๋˜์ง€๋งŒ, production ํ™˜๊ฒฝ์—์„œ๋Š” build time์—๋งŒ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.
  (fallback ์˜ต์…˜์— ๋Œ€ํ•ด์„œ๋Š” ๊ณต๋ถ€๊ฐ€ ๋” ํ•„์š”ํ• ๋“ฏ)

Link ์ปดํฌ๋„ŒํŠธ ์ œ๊ณต
Link ํƒœ๊ทธ๋กœ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•˜๋ฉด CSR๊ณผ ๊ฐ™์ด ๋™์ž‘ํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

Image Optimization
build time์— Image๋ฅผ ์ตœ์ ํ™”ํ•˜์ง€ ์•Š๊ณ , ์‚ฌ์šฉ์ž ์š”์ฒญ์ด ์žˆ์„ ๋•Œ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค.
(viewport์— ๋“ค์–ด์˜ฌ๋•Œ load๋ฉ๋‹ˆ๋‹ค.)
์ด๋ฏธ์ง€์˜ ์ˆ˜๊ฐ€ ๋Š˜์–ด๋‚จ์— ๋”ฐ๋ผ build time์ด ๋Š˜์–ด๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


Pre-rendering
Server-side Rendering๊ณผ Static Generation ํ˜•ํƒœ๋กœ Pre-rendering์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
SSR, SSG ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ, Next.js์—์„œ ์ œ๊ณตํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

Static Generation : build time์— HTML์„ ์ƒ์„ฑํ•˜๊ณ , ๋งค ์š”์ฒญ์— ์žฌ์‚ฌ์šฉ.(with data - getStaticProps ์‚ฌ์šฉ/ js bundle์—๋„ ํฌํ•จ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— db ์ฟผ๋ฆฌ ๊ฐ™์€ ๊ฒƒ๋„ ์ž‘์„ฑํ•ด๋„ ๋จ, development ํ™˜๊ฒฝ์—์„œ๋Š” ๋งค๋ฒˆ ํ˜ธ์ถœ๋˜์ง€๋งŒ, production์—์„œ๋Š” build time์— ํ˜ธ์ถœ๋จ)

Server-side Rendering : ๋งค ์š”์ฒญ์— ๋”ฐ๋ผ HTML์„ ์ƒ์„ฑํ•จ. (with data - getServerSideProps ์‚ฌ์šฉ)

* Client-side Rendering ์‚ฌ์šฉ ๊ฐ€๋Šฅ (=> SWR ์‚ฌ์šฉ ์ถ”์ฒœ)

Code Splitting ์ œ๊ณต
pages ๊ฒฝ๋กœ ๋ฐ‘์— ์ƒ์„ฑ๋œ ํŒŒ์ผ์— ๋Œ€ํ•ด์„œ ๋ชจ๋‘ ์ž๋™ code splitting์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.



์ฐธ๊ณ 
https://www.youtube.com/watch?v=wcsVjmHrUQg
https://nextjs.org/
https://parkgang.github.io/blog/2021/09/07/lets-properly-understand-and-use-the-ssg-of-nextjs/
https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

https://iborymagic.tistory.com/73

๋Œ“๊ธ€์ˆ˜0