Skip to content

KDT5_이시우_2차과제_RE #58

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

Open
cuconveniencestore wants to merge 2 commits into
base: main
Choose a base branch
from
Open

KDT5_이시우_2차과제_RE #58

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
3227c6e
first commit
cuconveniencestore May 5, 2023
73ffe81
second commit
cuconveniencestore May 7, 2023
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
40 changes: 40 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="/vite.svg" />
<link
rel="preconnect"
href="https://fonts.googleapis.com" />
<link
Copy link

@chanuuuuu chanuuuuu May 14, 2023

Choose a reason for hiding this comment

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

preconnect를 사용하여 font 파일을 들고오고 있네요:) 해당 속성이 어떠한 의미로 사용되고 있는지 또 어떤 효과가 있어서 추가한 것인지 설명해주실 수 있을까요?

Copy link
Author

@cuconveniencestore cuconveniencestore May 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

사용할 당시에는 그대로 가져와 사용해 인지하지 못했는데 멘토님의 리뷰를 보고 찾아보게되어 리플남깁니다!

rel = preconnect 를 사용하게 되면 페이지가 로드 될 때 외부리소스의 도메인에 미리 연결을 하게 되어, 리소스 로드 시간을 줄여주는 속성 값입니다.

rel = preconnect 속성값을 사용하지 않았을때 웹폰트가 로딩 되기 전까지 텍스트가 나오지 않거나 일부만 나오는 현상이 나타나 폰트가 깜빡이는 듯한 느낌을 줄 수 있는 문제가 있어 이를 방지하고 웹폰트를 유연하게 사용하기위해 쓰입니다! 🥸

rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Oleo+Script:wght@400;700&display=swap"
rel="stylesheet" />
<link
rel="preconnect"
href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Oleo+Script:wght@400;700&display=swap"
rel="stylesheet" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>OMDbAPI.COM</title>
</head>
<body>
<div id="root"></div>
<script
type="module"
src="/src/main.jsx"></script>
</body>
</html>
Loading