Skip to content

Instantly share code, notes, and snippets.

View zwonlala's full-sized avatar
๐Ÿ˜›

jiwonSong zwonlala

๐Ÿ˜›
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 ํ•œ ๋งํฌ์ธ์ง€ ๋‹ค์‹œ ํ•œ๋ฒˆ ํ™•์ธ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
@dongsik-yoo
dongsik-yoo / .gitignore
Last active June 9, 2025 01:53
javascript i18n automation with google spread sheet
# locale json files
/assets/locales/
@Gumball12
Gumball12 / _worth-reading.md
Last active August 29, 2025 13:44
๋‚˜๋ฅผ ์œ„ํ•ด ์ €์žฅํ•˜๋Š” ์ฝ์–ด๋ณผ ๋งŒํ•œ ๊ธ€๋“ค ๋ชจ์Œ
@gaearon
gaearon / modern_js.md
Last active February 24, 2026 02:09
Modern JavaScript in React Documentation

If you havenโ€™t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:

  • We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var.
  • We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method [depends on how it is called](https://developer.mozilla.org/en-US/docs/Web/Jav
@joshbuchea
joshbuchea / semantic-commit-messages.md
Last active March 20, 2026 11:30
Semantic Commit Messages

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example