프로젝트 초기세팅을 하는데, 로고와 전체 적용될 글꼴을 다르게 설정해주고 싶었고, 폰트는 구글폰트에서 가져오고 싶었다.
index.html
에 삽입//index.html
<!DOCTYPE html>
<html lang="en">
<head>
// 중략, 아래 링크를 html에 삽입합니다.
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=Song+Myung&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
GlobalStyle.js
의 body에 아래와 같이 적용GlobalStyle.js
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
const GlobalStyle = createGlobalStyle`
${reset}
* {
box-sizing : border-box;
}
body{
font-family: 'Noto Sans KR', sans-serif;
}
`;
export default GlobalStyle;
theme.js
에 fontLogo를 통해 변경import { css } from 'styled-components';
export const theme = {
mainBlack: '#000000',
mainWhite: '#FFFFFF',
mainPink: '#FF385C',
mainGrey: '#F7F7F7',
darkGrey: '#797979',
fontLogo: "'Song Myung', serif",
fontLarge: '48px',
fontMedium: '28px',
fontSemiMedium: '20px',
fontRegular: '18px',
fontSmall: '16px',
fontMicro: '14px',
weightBold: 700,
weightSemiBold: 600,
weightRegular: 400,
absoluteCenter: css`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`,
};
export const mixins = {
// flex
flexBox: (direction = 'row', align = 'center', justify = 'center') => `
display: flex;
flex-direction: ${direction};
align-items: ${align};
justify-content: ${justify};
`,
};
index.js
파일 다음과 같이 변경 (react version 18로 업데이트 하여 ReactDom.render은 더이 상 사용되지 않음)import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';
import { ThemeProvider } from 'styled-components';
import { theme, mixins } from './styles/theme';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<GlobalStyle />
<ThemeProvider theme={{ ...theme, ...mixins }}>
<Router />
</ThemeProvider>
</>
);
리액트가 버전 18로 업데이트되면서 이제 더이상 reactDOM.render를 하지않고, 아래와 같이 createRoot를 통해서 root를 render해주고 있는 점을 기억하기.
You are importing createRoot from 'react-dom' which is not supported | bobbyhadz
import React from 'react';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';
import { ThemeProvider } from 'styled-components';
import { theme, mixins } from './styles/theme';
import { createRoot } from 'react-dom/client';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<>
<GlobalStyle />
<ThemeProvider theme={{ ...theme, ...mixins }}>
<Router />
</ThemeProvider>
</>
);
리액트 업데이트 된 소식을 전해주는 니꼬쌤
https://www.youtube.com/watch?v=7mkQi0TlJQo
리액트 18 업데이트 관련 공식 블로그 글은 여기에!