Skip to content

Instantly share code, notes, and snippets.

View Chadolbaegi128's full-sized avatar
๐Ÿ’ญ
I may be slow to respond.

Yeonjun Jung Chadolbaegi128

๐Ÿ’ญ
I may be slow to respond.
View GitHub Profile

์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ์ฑŒ๋ฆฐ์ง€ - CSR / SSR with Next.js

Assignment) ๊ฐœ์ธ ๋ธ”๋กœ๊ทธ์— ์•„๋ž˜ ์งˆ๋ฌธ์— ๋Œ€ํ•œ ํฌ์ŠคํŒ…์„ ํ•˜๊ณ  ๋งํฌ๋ฅผ ์ œ์ถœํ•ด์ฃผ์„ธ์š”.

    1. CSR(Client-side Rendering)์ด๋ž€ ๋ฌด์—‡์ด๋ฉฐ, ๊ทธ๊ฒƒ์˜ ์žฅ๋‹จ์ ์— ๋Œ€ํ•˜์—ฌ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.
    1. SPA(Single Page Application)๋กœ ๊ตฌ์„ฑ๋œ ์›น ์•ฑ์—์„œ SSR(Server-side Rendering)์ด ํ•„์š”ํ•œ ์ด์œ ์— ๋Œ€ํ•˜์—ฌ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.
    1. Next.js ํ”„๋กœ์ ํŠธ์—์„œ yarn start(or npm run start) ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ–ˆ์„ ๋•Œ ์‹คํ–‰๋˜๋Š” ์ฝ”๋“œ๋ฅผ Next.js Github ๋ ˆํฌ์ง€ํ† ๋ฆฌ์—์„œ ์ฐพ์€ ๋’ค, ํ•ด๋‹น ํŒŒ์ผ์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์„ค๋ช…์„ ์ฒจ๋ถ€ํ•ด์ฃผ์„ธ์š”.
    • https://nextjs.org/docs/getting-started (Next.js ์„ธํŒ… ๊ฐ€์ด๋“œ)
    • https://github.com/vercel/next.js/ (Next.js Github ๋ ˆํฌ์ง€ํ† ๋ฆฌ)
    • _document.js, _app.js, getServerSideProps ๊ฐ™์€ ์š”์†Œ๋“ค์— ๋Œ€ํ•ด ์„ค๋ช…์„ ์š”๊ตฌํ•˜๋Š” ๊ณผ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์˜คํžˆ๋ ค Next.js ์ฝ”๋“œ ๋ฒ ์ด์Šค ๋‚ด๋ถ€๋ฅผ ์‚ดํŽด๋ณด๋ผ๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.
    • ์‚ฌ์ „๊ณผ์ œ ์—ฌ๋ถ€๋‚˜ ์ œ์ถœ๋œ ๊ณผ์ œ ํ€„๋ฆฌํ‹ฐ๊ฐ€ ์ˆ˜๊ฐ• ๊ฐ€๋Šฅ ์—ฌ๋ถ€ ๋ฐ ์ดํ›„์˜ ๊ณผ์ •์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€๋Š” ์•Š์„ ๊ฒƒ์ด๋‚˜, 3๋ฒˆ ๊ณผ์ œ๋ฅผ ํ•ด๋ณด๋Š” ๊ฒƒ์ด ํฐ ํ•™์Šต์ด ๋  ๊ฒƒ์ด๋ผ๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋“œ์‹œ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด์‹œ๊ธธ ๊ถŒ์žฅ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
  • ์ œ์ถœ ์ „ ๊ณผ์ œ๊ฐ€ ์œ ํšจํ•œ Public ํ•œ ๋งํฌ์ธ์ง€ ๋‹ค์‹œ ํ•œ๋ฒˆ ํ™•์ธ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.