CSR๊ณผ SSR์ ๋์ ๋ฐฉ์์ ์ดํดํ๊ณ , Next.js๊ฐ ์ ํ์ํ์ง ์์๋ณด์.
๋ฆฌ์กํธ์์ ๋ ๋๋ง ์ต์ ํ๋ฅผ ํตํด ์ฑ๋ฅ์ ๊ฐ์ ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์.
๋ฆฌ์กํธ๋ก ๊ตฌํ๋ SPA์ ์ฅ๋จ์ ์ ํ์ ํ๊ณ react-router-dom์ ๋ํด ์์๋ณด์.
๋ฆฌ์กํธ์ ์ ์ญ ์ํ ๊ด๋ฆฌ ๋ฐฉ์๊ณผ ์ด๋ฅผ ๋์์ฃผ๋ ๋ค์ํ ์ํ ๊ด๋ฆฌ ๋๊ตฌ๋ค์ ์์๋ณด์.
๋ฆฌ์กํธ์ ์ํ์ ํน์ฑ์ ๋ํด ํ์ตํ๊ณ ์ํ ๊ด๋ฆฌ ์ ์ฃผ์ํ ์ ์ ๋ฌด์์ธ์ง ์์๋ณด์.
๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ์๋ช ์ฃผ๊ธฐ์ ๊ฐ๋ ๊ณผ ํด๋์คํ/ํจ์ํ ์ปดํฌ๋ํธ ์๋ช ์ฃผ๊ธฐ์ ์ฐจ์ด๋ฅผ ์์๋ณด์.
๋ฆฌ์กํธ์์ ์ฌ์ฉํ๋ ๊ฐ์ DOM์ด ๋ฌด์์ธ์ง ์์๋ณด์.
๋ฆฌ์กํธ๋ฅผ ์ ์ฌ์ฉํ ๊น? ๋ฆฌ์กํธ์ ์ฃผ์ ํน์ฑ๊ณผ ํจ๊ป ์์๋ณด์.
Intersection Observer API๊ฐ ๋ฌด์์ธ์ง, ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง ์์๋ณด์.
Proxy๊ฐ ๋ญ์ง ์์๋ณด๊ณ , ๊ฐ์ด ํ์ฉ๋๋ Reflect์ ๋ํด์๋ ์์๋ณด์.
์น ์คํ ๋ฆฌ์ง๊ฐ ๋ฌด์์ธ์ง, ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ข ๋ฅ๋ฅผ ์์๋ณด๊ณ , ์ด๋ฅผ ์ด์ฉํด ์ํ ์ ์ง๋ฅผ ๊ตฌํํด๋ณด์.
ํด๋ก์ ๋ ๋ฌด์์ธ์ง ์์๋ณด๊ณ , ์ฃผ๋ก ์ด๋ป๊ฒ ํ์ฉ๋๋์ง ์์๋ณด์.
์๋ฐ์คํฌ๋ฆฝํธ์์ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ๊ณผ ์ด๋ฒคํธ ์ ํ, ๊ทธ๋ฆฌ๊ณ ์ด๋ฒคํธ๋ฅผ ์ ์ดํ๋ ๋ฐฉ๋ฒ๊น์ง ์์๋ณด์.
AJAX๊ฐ ๋ฌด์์ธ์ง, ์ด๋ค AJAX ๊ธฐ์ ์ด ์๋์ง ์์๋ณด์.
์๋ฐ์คํฌ๋ฆฝํธ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์ด๋ค ๋ฐฉ์์ผ๋ก ์ด๋ฃจ์ด์ง ํ์ตํ๋ค๋ฉด, ์ด๋ฒ์๋ ๋น๋๊ธฐ๋ก ๋์ํ๋ ์ฝ๋ฐฑ ํจ์์ Promise, async/await์ ๋ํด ์์๋ณด์.
์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋๊ฐ ์ด๋ป๊ฒ ์คํ๋๋ ์ง ์์๋ณด๊ธฐ ์ํด ๋์ ์๋ฆฌ๋ฅผ ์ตํ๊ณ ์ ํ๋ค. ์ด๋ฒคํธ ๋ฃจํ์ ์ค์ฝํ, ๊ทธ๋ฆฌ๊ณ ์ง์ฆ๋๋ ๊ฐ๋ ์ธ ์คํ ์ปจํ ์คํธ์ ๋ํด ์์๋ณด์.
this๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ญ ๊ฐ์ฒด์ ๋ฐ์ธ๋ฉ๋์ง๋ง ์ํฉ์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ๋ฐ์ธ๋ฉ๋๋ค. ์ด๋ค ์ํฉ์ ์ด๋ป๊ฒ ๋ฐ์ธ๋ฉ๋๋์ง, ๊ทธ๋ฆฌ๊ณ this ๋ฐ์ธ๋ฉ ๊ท์น์๋ ์ด๋ค ๋ฌธ์ ์ ์ด ์๋์ง ์์๋ณด์.
ํ๋กํ ํ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ดํดํ๊ธฐ ์ํ ํ์ ์ง์์ด๋ค. ํ์ง๋ง ๋ง์ด ์ด๋ ต๋ค. ๋๋ฌธ์ ์ต๋ํ ์ฝ๊ฒ ์ดํดํด๋ณด์.
์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ 5๊ฐ์ง๊ฐ ์๋ค. ์ด ๋ฐฉ๋ฒ๋ค์ ์ธ์ ์ด๋ป๊ฒ ์ฌ์ฉ๋๋ ๊ฒ์ด๋ฉฐ, ์ด๋ค ๋ฐฉ์์ด ๊ฐ์ฅ ํจ์จ์ ์ผ๊น?
๊ฐ์ฒด๋ ๋ฐ์ดํฐ๋ฅผ ์๋ฏธํ๋ ํ๋กํผํฐ์ ๋ฐ์ดํฐ๋ฅผ ์ฐธ์กฐํ๊ณ ์กฐ์ํ ์ ์๋ ๋์์ ์๋ฏธํ๋ ๋ฉ์๋๋ก ๊ตฌ์ฑ๋ ์งํฉ์ด๊ณ , ์๋ฐ ์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด "๊ธฐ๋ฐ" ์ธ์ด์ด๋ค. ํํธ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ฐ์ฒด "์งํฅ" ์ธ์ด๋ก๋ ๋ณผ ์๋ ์์๊น?