feat(app): 앱에 필요한 폰트들을 일부 추가하고, 전역 스타일링 설정을 추가합니다.

[innocarpe]

📌 이슈 링크

• close 🌟 FEATURE: [2 Week] 메인 페이지를 개발합니다. #47

📖 작업 배경

• 작업을 하다 보니 폰트 스타일이 안맞아서 이것부터 잡고 가는게 좋을 것 같아서 전역 스타일링 설정을 먼저 추가합니다.

🛠️ 구현 내용

• TitilliumWeb 폰트와, SourceSansPro 폰트를 public/fonts 폴더에 각각 추가합니다. 일단 당장 필요해 보이는 것들만 넣었습니다.
• globalStyles.tsx 파일에 emotion 기반으로 폰트 관련 전역 스타일링 코드를 추가합니다.
• main.tsx 에서 전역 스타일링을 적용합니다.
• main.css 쪽에서 전역 스타일링으로 넣어도 될 만한 부분들을 뽑아 globalStyles.tsx 쪽에 적용해 주었습니다.

💡 참고사항

• feat(app): emotion 기반으로 공용 네비바 로직을 변경합니다. #78 의 커밋이 포함되어 있는 체이닝 PR입니다.
• 글로벌 스타일링에 어디까지 넣어야 할지 현재로선 잘 모르겠네요. 작업하면서 가능한한 필수적인 스타일링만 남게 되도록 조금씩 조정해나갈 예정입니다.

🖼️ 스크린샷

데모 페이지

작업 중인 페이지

[InSeong-So]

이것도 팁은, routes와 같이 컴포넌트로 분리해서 globalStyles를 main.tsx에서 숨겨버리는 것입니다!

[innocarpe]

오 그렇군요.. 아래처럼 Routes 안에 같이 넣는 걸 의미하신 거죠~? 이렇게 수정해두었습니다!

export const Routes = () => {
  return (
    <Layout>
      <Global styles={globalStyles} />
      <RouterProvider router={router} />;
    </Layout>
  );
};

[InSeong-So]

이렇게 작성되는 폰트는 캐싱이나... 레이지 로드가 되지 않아서 좀 지양되는 편이긴 합니다.
물론 동작에는 아무런 이슈가 없습니다!

간혹 폰트 용량이 엄청 크기 때문에... 사용자가 fouc 현상을 마주하게 될 수 있어요.
index.html이나 preload 하는 속성을 활용하면 더 좋을 것 같아요!

참고

[innocarpe]

이렇게 작성되는 폰트는 캐싱이나... 레이지 로드가 되지 않아서 좀 지양되는 편이긴 합니다. 물론 동작에는 아무런 이슈가 없습니다!

간혹 폰트 용량이 엄청 크기 때문에... 사용자가 fouc 현상을 마주하게 될 수 있어요. index.html이나 preload 하는 속성을 활용하면 더 좋을 것 같아요!

참고

오 안그래도 뭔가 다른 방법은 없으려나 싶기는 했는데.. 자료 공유 감사합니다! 요건 이번 PR 말고 추후 작업으로 개선해봐도 좋을 것 같습니다 ㅎㅎ

일단 내용은 읽어봤는데 의존성 추가하는데 까지는 바로 할 것 같은데 현재 상태에서 추가 세팅을 어떤 부분을 더 해야 하는지 좀 더 찾아봐야할 것 같네요..!

[innocarpe]

이거 빠르게 PoC 해보았는데 22년 9월이 마지막 커밋이고 vite 버전이 크게 달라서(저는 4.4.5, 저 라이브러리는 2.9.13) 그런지 동작이 안 되네요..!

[innocarpe]

향후 아래 방향으로 다시 트라이 해보겠습니다!

index.html이나 preload 하는 속성을 활용하면 더 좋을 것 같아요!