CSR๊ณผ SSR ๋น๊ต ๋ฐ CSR์ ๋จ์ ๋ณด์ ๋ฐฉ๋ฒ์ฐ์ SPA์ MPA์ ๋ํด์ ์์๋ณด์1. SPA์ MPA์ ๊ธฐ๋ณธ ๊ฐ๋
1๏ธโฃ SPA (Single Page Application)ํ๋์ ํ์ด์ง๋ก ๊ตฌ์ฑ๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์
๋๋ค. ํ์ด์ง ์ ํ ์ ํ๋ฉด์ด ๊น๋นก์ด์ง ์๊ณ , ์๋ก์ด ํ์ด์ง๋ฅผ ์์ฒญํ ๋ ์๋ฒ๋ก๋ถํฐ ํ์ํ ๋ฐ์ดํฐ๋ง ์ ๋ฌ๋ฐ์ ๋ ๋๋งํฉ๋๋ค.์ฆ, CSR(Client-Side Rendering) ๋ฐฉ์์ ์ฌ์ฉํฉ๋๋ค.2๏ธโฃ MPA (Multi Page Application)์ ํต์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์
๋ฐฉ์์
๋๋ค. ํ์ด์ง ์ ํ ์๋ง๋ค ์๋ฒ์์ ์๋ก์ด HTML์ ๋ฐ์์ ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก ๋ ๋๋งํฉ๋๋ค. ์ด๋ ํ์ด์ง๊ฐ ๊น๋นก์ผ ์ ์์ผ๋ฉฐ, SSR(Server-Side Rendering) ๋ฐฉ์์ ์ฌ์ฉํฉ๋๋ค.2. CSR(Clie..
public ํด๋์ ์ ํ์ผ: public ํด๋๋ ์ ์ ํ์ผ(์ด๋ฏธ์ง, ํฐํธ, ์์ด์ฝ ๋ฑ)์ ์ ์ฅํ๋ ๊ณณ์
๋๋ค. ์ด ํด๋์ ์๋ ํ์ผ์ / ๊ฒฝ๋ก๋ก ์ ๊ทผํ ์ ์์ต๋๋ค.์ฉ๋: ์ ์ ํ์ผ์ ์ ์ฅํ๋ ํด๋๋ก, ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๋ฆฌ์์ค๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.์์: public/images/logo.png ํ์ผ์ /images/logo.png๋ก ์ ๊ทผํ ์ ์์ต๋๋ค._app.js ํ์ผ์ปค์คํ
App ์ปดํฌ๋ํธ: _app.js ํ์ผ์ Next.js ์ ํ๋ฆฌ์ผ์ด์
์ ์ ์ฒด ๋ ์ด์์๊ณผ ์ํ ๊ด๋ฆฌ๋ฅผ ์ํ ์ง์
์ ์
๋๋ค. ๋ชจ๋ ํ์ด์ง์์ ๊ณตํต์ผ๋ก ์ฌ์ฉํ ์ปดํฌ๋ํธ๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค.์ฉ๋: ๊ฐ ํ์ด์ง์์ ๊ณตํต์ ์ผ๋ก ์ ์ฉํ ์ค์ ์ ์ ์ํฉ๋๋ค.์ํ ๊ด๋ฆฌ: ์ ์ญ ์คํ์ผ์ด๋ ๋ ์ด์์, ์ปจํ
์คํธ ์ ๊ณต ๋ฑ์ ์ค์ ํ ์ ์์ด, ํ์ด์ง ์ ํ ์ ์ผ๊ด๋ UI๋ฅผ..
1. Styled ComponentsStyled Components๋ CSS-in-JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋๋ก, ์คํ์ผ์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ์์ ์์ฑํ๊ณ , ์ปดํฌ๋ํธ ๋จ์๋ก ์บก์ํํ ์ ์๋ค.์ฅ์ ๐์๋ ์ต์ ํ: ๋ถํ์ํ ํด๋์ค ์์ฑ์ด๋ ์ค๋ณต๋ ์คํ์ผ ์ ๊ฑฐ ๋ฑ ์ต์ ํ๊ฐ ์๋์ผ๋ก ์ด๋ฃจ์ด์ง๋ค.๋์ ์คํ์ผ๋ง: Prop์ ๋ฐ๋ผ ๋์ ์ผ๋ก ์คํ์ผ์ ๋ณ๊ฒฝํ ์ ์๋ค.CSS์ ๋ฒ์: CSS๊ฐ ์ปดํฌ๋ํธ ๋จ์๋ก ์บก์ํ๋์ด ์ ์ญ ๋ค์์คํ์ด์ค ์ถฉ๋ ๋ฌธ์ ๊ฐ ์๋ค.๋จ์ ๐๋ฐํ์ ์ฑ๋ฅ ์ ํ: Styled Components๋ ์คํ์ผ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ฒ๋ฆฌํ๊ธฐ ๋๋ฌธ์ ๋ฐํ์ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์๋ค. ํนํ ๋ง์ ์ปดํฌ๋ํธ๊ฐ ์์ ๊ฒฝ์ฐ ์คํ์ผ์ ๊ณ์ฐํ๊ณ ์ ์ฉํ๋ ์๊ฐ์ด ์ฆ๊ฐํ ์ ์๋ค.ํจํค์ง ํฌ๊ธฐ ์ฆ๊ฐ: ์ถ๊ฐ์ ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํฌํจํด์ผ..
Scssnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}CSSnav ul { margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}๋ฏน์ค์ธ ์์Scss@mixin theme($theme: DarkGray) { background: $theme; ..
๐ช ๋จผ์ ์์์ผํ ๊ฐ๋
์ปดํฌ๋ํธ ์ธ๋ง์ดํธ๋ ?์ปดํฌ๋ํธ ์ธ๋ง์ดํธ(Unmount)๋ React ์ปดํฌ๋ํธ๊ฐ DOM์์ ์ ๊ฑฐ๋๋ ์ํ๋ฅผ ์๋ฏธํฉ๋๋ค. ์ฆ, ์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์์ ์ฌ๋ผ์ง๊ฑฐ๋ ๋ ์ด์ ํ์ ์์ ๋ ๋ฐ์ํฉ๋๋ค.์ผ๋ฐ์ ์ผ๋ก ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋๋ ๊ฒฝ์ฐ ๐ญ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์ด๋ํ ๋์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํตํด ์ปดํฌ๋ํธ๊ฐ ์จ๊ฒจ์ง๊ฑฐ๋ ์ ๊ฑฐ๋ ๋๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋ ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋์ ํด๋ฆฐ์
์ด๋ฒคํธ ๋ฆฌ์ค๋๋ ๋ธ๋ผ์ฐ์ ์์ ํน์ ์ด๋ฒคํธ(์: ํด๋ฆญ, ๋ฆฌ์ฌ์ด์ฆ, ์
๋ ฅ ๋ฑ)๊ฐ ๋ฐ์ํ ๋ ํธ์ถ๋๋ ํจ์์
๋๋ค. ์๋ฅผ ๋ค์ด, window.addEventListener('resize', handleResize)๋ ๋ธ๋ผ์ฐ์ ์ฐฝ์ ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ ๋๋ง๋ค handleResize ํจ์๋ฅผ ํธ์ถํฉ๋๋ค. ์ ํด๋ฆฐ์
์ด ํ์ํ๊ฐ?์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ..
์ฒซ ๋ฒ์งธ ์ฝ๋React 18import React from 'react';import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(์๋
๋ฆฌ์กํธ !); React 18 ์ด์: React 18์์๋ ์๋ก์ด Root API์ธ ReactDOM.createRoot๋ฅผ ์ฌ์ฉํฉ๋๋ค.Concurrent Mode ์ง์: ์ด ์๋ก์ด API๋ React์ Concurrent Mode์ ๋ ๋์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ง์ํฉ๋๋ค.์ฌ์ฉ๋ฒcreateRoot๋ฅผ ์ฌ์ฉํ์ฌ root๋ฅผ ์์ฑํฉ๋๋ค.์์ฑ๋ root์์ render ๋ฉ์๋๋ฅผ ํธ์ถํฉ๋๋ค. ๋ ๋ฒ์งธ ์ฝ๋React 17import Reac..