styled-components에 구글 폰트적용하기

1. 구글폰트 링크 index.html에 삽입

//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

2. GlobalStyle.js의 body에 아래와 같이 적용

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;
  1. 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};
  `,
};

3. 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

BJ1759 암호 만들기
HTML_DAY2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage