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

KDT5-M2 - FE_이정환 - API를 활용한 과제 (reopen) #71

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+4,261 −0
Open

KDT5-M2 - FE_이정환 - API를 활용한 과제 (reopen) #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.parcel-cache
dist
node_modules
.DS_Store
.vscode
19 changes: 19 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Movie</title>
<link rel="icon" href="https://lh3.google.com/u/0/ogw/AOLn63Ho7yTWq8NFduxZOWQ4APLUF7_dDvHkXgSFYKfT=s32-c-mo">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
Copy link

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

Choose a reason for hiding this comment

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

font 리소스를 사용할때 가장 좋은 방법으로는 preroad가 있는데 이는 리소스 우선순위를 높게 하여 가져오게 되는데 장점으로는 폰트를 가져오는 대기시간을 줄일 수 있고 시스템 폰트와 선언된 폰트를 해결해 줄 수 있는데 단점으로는 as속성을 쓰면서 용도를 정하면 그 이외의 용도에서는 폰트를 사용되지 않는 점과 속성을 적용한 리소는 반드시 가져오기 때문에 중복된 리소스가 있으면 네트워크를 지연시킬 수 있다. 그에 반해 preconnect는 외부 리소스에 연결하는 방식으로 미리 연결된 리소스는 빠르게 접근이 가능합니다. 장점으로는 정확한 경로를 몰라도 사용이 가능하지만 단점으로는 미리 연결하는 만큼 cpu사용이 늘어나게 되고 브라우저를 빠르게 닫을 시 연결작업에 낭비가 발생됩니다.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&family=Oswald:wght@500&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./src/main.scss">
<script type = "module" defer src = "./src/main.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Loading