[TIL] 최종 프로젝트 5주 차_목요일

유진·2023년 3월 9일

TIL 오류

TIL Today I Learned

목록 보기

91/116

2023.03.09.(목)

TIL Today I Learned

해당 깃허브

Good: 폰트를 전역적으로 적용하지 못해서 너무 답답했는데 해답을 찾았다.
Bad: 아쉬운 점 없습니다.

[ 최종 프로젝트 오류]

문제점: 전역적으로 global에 적용을 하였는데 폰트가 바뀌지 않는다.
해결점: global뿐 아니라 _documemt.tsx에서도 적용을 해줘야한다.

/global.tsx 수정 전
 import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
    font-family: Noto Sans CJK KR 
  }`;

export default GlobalStyle;

/global.tsx 수정 후
 import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
font-family: 'Noto Sans KR', sans-serif;
  }

`;

export default GlobalStyle;

font-family: Noto Sans CJK KR 지우고 font-family: 'Noto Sans KR', sans-serif;를 적용시켰다.

//_documemt.tsx 적용 전
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body style={{ margin: '0px' }}>
        <Main />
        <NextScript />

        <Script
          type="text/javascript"
          src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&libraries=services,clusterer&autoload=false`}
          strategy="beforeInteractive"
        />
      </body>
    </Html>
  );
}

//_documemt.tsx 적용 후
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html lang="en">
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:&display=swap"
        rel="stylesheet"
      />
      <Head />
      <body style={{ margin: '0px' }}>
        <Main />
        <NextScript />

        <Script
          type="text/javascript"
          src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&libraries=services,clusterer&autoload=false`}
          strategy="beforeInteractive"
        />
      </body>
    </Html>
  );
}

Head 위에 폰트 주소를 넣어준다.

이렇게 하면 폰트가 적용 되는 줄 알았다. 근데 어느 것은 되고 어떤 건 안 된다. 이유는 전역과 개별로 중복되게 폰트를 적용하면 취소 역할을 하나 보다. 예를 들어 전역으로 global과 _documemt.tsx에 폰트를 적용했다. 또한 Profile.tsx에 개별로 폰트를 적용했다. 결론은 두 번 해서 적용이 안 된다.

//Profile.tsx 수정 전
const ProfileNickname = styled.span`
  color: #212121;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  text-align: left;
  font-family: 'Noto Sans CJK KR';
  @media ${(props) => props.theme.mobile} {
    font-size: 18px;
  }
`;

//Profile.tsx 수정 후
const ProfileNickname = styled.span`
  color: #212121;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  text-align: left;
  @media ${(props) => props.theme.mobile} {
    font-size: 18px;
  }
`;

개별적으로 적용한 폰트 font-family: 'Noto Sans CJK KR';를 삭제해줬더니 된다.

[ 19주 차 계획 ]

- 스파르타코딩클럽 계획