Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] 성능 개선 : Preconnect to requered origins #771

Merged
merged 2 commits into from
Oct 23, 2024
Merged

[FE] 성능 개선 : Preconnect to requered origins #771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed86ba4
refactor: 성능개선 Preconnect to requered origins (font)
soi-ha Oct 18, 2024
7b33682
fix: storybook에서 pretendard 폰트가 적용되도록 스토리북 preview.tsx 수정
soi-ha Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions client/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import type {Preview} from '@storybook/react';
import {HDesignProvider} from '../src/components/Design';
import {css, Global} from '@emotion/react';

const preview: Preview = {
parameters: {
Expand Down Expand Up @@ -30,11 +31,23 @@ const preview: Preview = {
},
},
decorators: [
Story => (
<HDesignProvider>
<Story />
</HDesignProvider>
),
Story => {
return (
<div>
<Global
styles={css`
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
body {
font-family: 'Pretendard', sans-serif;
}
`}
/>
<HDesignProvider>
<Story />
</HDesignProvider>
</div>
);
},
],
};

Expand Down
3 changes: 3 additions & 0 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@

<link rel="canonical" href="https://haengdong.pro/" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet" />
Comment on lines +35 to +37
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저는 index.html에 넣어서 개선하는 방식 좋은 것 같아요. 어느 페이지든 폰트는 필요하니깐요!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 인덱스에 link태그를 넣는게 문제가 될게 어떤 것들이 있나요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

link 태그를 넣는게 문제여서 고민되었다기 보다는 대부분의 코드가 react로 작성되었기 때문에 코드 통일성을 해칠까봐 고민되었어요! 문제될만한 것들은 없습니다!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

간단하게 개선할 수 있는 방법이라 좋은 것 같아요!
대부분이 react 코드로 작성된다고 하더라도, 결국엔 index.html에서 시작되는 코드들이니까요~!

<script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
Expand Down
2 changes: 0 additions & 2 deletions client/src/GlobalStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import {css} from '@emotion/react';

// reset css -> index css
export const GlobalStyle = css`
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow.. 👍👍👍


*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
Expand Down
2 changes: 0 additions & 2 deletions client/src/components/Design/theme/GlobalStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import {css} from '@emotion/react';

// reset css -> index css
export const GlobalStyle = css`
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

폰트 요청 두 번 보내는 것 이상하다고 여겼는데 행디에서 문제가 있었네요. 발견 감사합니다~


*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
Comment on lines 4 to 7
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

designSystem의 GlobalStyle을 한번 더 호출했던 이유는 오류가 아니라, storybook에서도 적용해 주기 위함이었어요.
storybook에서는 다른 부분의 코드를 가져오지 않기 때문에 font가 제대로 적용되지 않던 오류가 있었어요.
이부분에서 제거해 줄 거라면, .storybook 디렉토리의 파일들에서 선언해 줘도 괜찮을 것 같네요!!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스토리북에서 폰트가 적용되지 않는 것을 확인했습니다!
수정해서 올렸어용!

Expand Down
Loading