
๋๋์ ์ ๋ฐ์ ์ผ๋ก ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ๊ธฐ์ ๋ค์ ์ด๋ก ์ ์ธ ๋ด์ฉ๊น์ง ๊น๊ฒ ํ๊ตฌํด๋ณผ ์ ์๋ ๊ณผ์ ๊ฐ ๋ง์ด ๋์๊ณ , ๋ค์ํ ์๋ฃ๊ตฌ์กฐ๋ฅผ ์ด๋ป๊ฒ ํ์ฉํ ์ ์๋์ง ๊ณ ๋ฏผํ ์ ์๋ ๊ณผ์ ๊ฐ ๋ง์ด ๋์จ ๊ฒ ๊ฐ๋ค. ๊ณผ์ ๋ฅผ ํ๋์ฉ ํด๊ฒฐํ๋ฉด์, ๊ฐ๊ฐ์ ์๋ฃ๊ตฌ์กฐ์ ๊น๊ฒ ํ๊ตฌํ๊ณ , Javascript์์๋ ์ด๋ป๊ฒ ๊ตฌํ๋์ด ์์๋์ง ๊น๊ฒ ๋ฆฌ์์น ํด๋ณด๋ ์๊ฐ์ ๊ฐ์ง ์ ์์๋ ๊ฒ ๊ฐ๋ค....

ํ์ ์คํฌ๋ฆฝํธ์ ๋ฑ์ฅ ๋ฐฐ๊ฒฝ๊ณผ ํ์ ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ์ ์ค์ ํด๋ณด์

Page Router์์ SSG๋ก ์ฌ์ ๋ ๋๋ง ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์

Page Router์์ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง(SSR)์ ์ด๋ป๊ฒ ๊ตฌํํ ์ ์๋์ง ์์ธํ ์์๋ณด์ (feat. getServerSideProps ํจ์)

Page Router์์ ๊ธ๋ก๋ฒ ๋ ์ด์์๊ณผ ํ์ด์ง ๋ณ ๋ ์ด์์์ ์ ์ฉํ๋ ๋ฒ์ ์์๋ณด์

App Router์์ Client Component์ ๋ ๋๋ง ๋ฐฉ์์ ๋ํด ์์๋ณด์

APP router์์ Server Components๊ฐ ์ด๋ป๊ฒ ๋ ๋๋ง๋๋ ์์๋ณด์

Next.js Page Router์์ ๊ฒฝ๋ก ์์ฑ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด์

๋๋ก ๋ฐฐ์ด๋ณด๋ค ์ ์ฉํ Javascript Set ์๋ฃํ์ ์ดํด๋ณด์

๐ซ Ref๋ React์์ ref๋ ์ด๋ค ํํ์ ๊ฐ์ด๋ ์ ์ฅํ ์ ์๋ ๋ณ์๋ก ์๊ฐํ ์ ์๋ค. React์์ useRef Hook์ ๊ฐ์ ธ์ ์ปดํฌ๋ํธ์ ref๋ฅผ ์ถ๊ฐํ ์ ์๋ค. ์๋๋ ref์ ๊ตฌ์กฐ์ด๋ค. ref๋ ์ฝ๊ณ ์์ ํ ์ ์๋ current ํ๋กํผํฐ๋ฅผ ๊ฐ

Styled Component์ ํต์ฌ ์ฌ์ฉ๋ฒ์ ์ต๋ํ ๊ฐ๋ตํ ๊น๋ํ๊ฒ ๐ค

์ด์์, ๋ฉํ๋ฒ์ค ๊ฐ๋ฐ์ ์ฒ์์ด์ง?

package.json ์์ฑ node.js์ vscode๊ฐ ์ค์น ๋์ด ์๋ค๊ณ ๊ฐ์ ํ๊ณ ์์ํ๋ค. ์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ํด๋๋ฅผ vscode๋ก ์ด๊ณ ํฐ๋ฏธ๋์ ์ผ ์๋ ์ฝ๋๋ฅผ ์คํํ๋ค. npm init ์ ํตํด ์ ํ๋ก์ ํธ์ npm package๋ฅผ ์ด๊ธฐํํ ์ ์๋ค.