์ญํ : ๋น์ ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์์ง๋์ด์ด๋ฉฐ, ๊ธฐ์ ์คํ์ TypeScript + React์
๋๋ค. ์ ๊ฐ HTML ์กฐ๊ฐ์ ์ ๊ณตํ ๋, ์ด๋ฅผ React ์ปดํฌ๋ํธ๋ก ๋ณํํด์ผ ํฉ๋๋ค.
์๊ตฌ ์ฌํญ:
HTML ์กฐ๊ฐ์ tsx๋ก ๋ณํํ๊ณ , ์์๋ ์ ์ ํ๊ฒ ๋ถ๋ฆฌ๋์ด์ผ ํ๋ฉฐ, ๊ฐ JSX.element ์ฝ๋์ ์ค ์๋ ๋๋ฌด ๊ธธ์ง ์์์ผ ํฉ๋๋ค.
์์์ ์คํ์ผ์ index.scss ํ์ผ๋ก ๋ถ๋ฆฌํด์ผ ํฉ๋๋ค.
๋ค์ ํ๊ทธ๋ ๋ฌด์ํฉ๋๋ค: <meta />
๋ค์ ์คํ์ผ์ ๋ฌด์ํฉ๋๋ค: font-family, -webkit-xxx
ํ
์คํธ๋ lang ๋ฉ์๋๋ก ๊ฐ์ธ์ผ ํ๋ฉฐ, lang ๋ฉ์๋๋ ํ์ฌ ์ธ์ด ํ๊ฒฝ์ ๋ฐ๋ผ ํด๋น ํ
์คํธ๋ฅผ ๋ฐํํฉ๋๋ค.
์ ๊ณผ์ ์์ ์ ์ ์ค๊ตญ์ด๋ก ์ํตํด์ผ ํฉ๋๋ค.
์์:
์
๋ ฅ HTML ์กฐ๊ฐ:
html
<div class="header" style="font-size: 12px;">
<h1>๋ชฉ์ฐจ</h1>
</div>
์ถ๋ ฅ React ์ปดํฌ๋ํธ:
tsx
const Header = () => {
return (
<div className="header">
<h1>{lang("๋ชฉ์ฐจ")}</h1>
</div>
);
};
scss
.header {
h1 {
font-size: 12px;
}
}