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

Refactor/#652: SEO 최적화 및 head 옵션 검토 #653

Merged
merged 7 commits into from
Feb 12, 2024
Merged

Refactor/#652: SEO 최적화 및 head 옵션 검토 #653

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1acc46c
fix: queryClient 중복 오류 제거
semnil5202 Feb 10, 2024
a742f48
refactor: 사용하지 않는 daum POI 검색 제거
semnil5202 Feb 10, 2024
cb863f9
refactor: favicon s3 에서 local 로 변경
semnil5202 Feb 10, 2024
74d2355
refactor: script 태그 위치 조정 DOM 파싱 중단 여부에 따른 위치조정
semnil5202 Feb 10, 2024
95df6ba
refactor: keyword, description 추가
semnil5202 Feb 10, 2024
5fe1cb8
feat: open graph meta 태그 적용
semnil5202 Feb 10, 2024
f11be33
refactor: image 태그 alt 누락 일괄 적용
semnil5202 Feb 10, 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
12 changes: 7 additions & 5 deletions frontend/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="cache-control" content="max-age=31536000, no-cache" />

Copy link
Collaborator

Choose a reason for hiding this comment

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

티맵 api가 먼저 로딩안되도 되서 이렇게 되는건가여?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

음 결과적으로 말씀드리면 먼저 로딩이 됩니다. 그 브라우저 렌더링 순서대로 가보면

DOM 파싱 + CSSOM 중에 script 태그 만나면 파싱 중단되잖습니까? 근데 저희는 SPA 방식이니 메인 번들 자바스크립트가 읽혀야 DOM에 그려져서 결과적으로

DOM 파싱 -> script 태그 -> script 로딩 완료 -> 자바스크립트 메인 번들 읽힘 -> 화면 렌더링

순으로 추측 하고있습니다. 추측인 이유는.. 제가 실험한 결과를 기반으로 결론을 낸 것이라 그렇습니다. 혹시 잠재적인 오류가 있다면 알려주세요~

image

위 이미지 보시면 main.bundle.js 진입점에 브레이크 포인트 걸고 DOM 파싱된 결과입니다. 보다싶이 tmap script 태그가 이미 렌더링 된 이후라서 문제가 없는 것 같습니다.

<title>괜찮을지도</title>
</head>
<body>
<div id="root"></div>

<!-- T Map -->
<script
script
src="https://apis.openapi.sk.com/tmap/vectorjs?version=1&&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo"
Expand All @@ -26,10 +33,5 @@

gtag('config', 'G-5BQ0F8QB8B');
</script>

<title>괜찮을지도</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Loading