AzureApplicationInsights 패키지로 변경 & iframe 성능 개선 #162

krsy0411 · 2025-06-29T04:58:06Z

작성 내용

댓글 참고

참고자료

close #154

…y 설정

krsy0411 · 2025-06-29T04:59:11Z

index.html

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Docker 공식 문서의 한국어 번역 프로젝트. 컨테이너(Container)와 이미지(Image) 개념, 설치 방법, 실습 튜토리얼, CLI, Compose, Swarm 등 DevOps와 개발자를 위한 최신 Docker 가이드와 베스트 프랙티스, 실전 예제, 문제 해결, 오픈소스 커뮤니티 정보까지 모두 제공합니다. 초보자와 전문가 모두를 위한 학습 자료와 FAQ 수록." />
-    <script type="text/javascript" async>


azure application insights sdk를 npm 패키지로 사용하려고 script 태그 제거했습니다(변경하고 애저에서 트래픽 잡히는거 확인했음)

krsy0411 · 2025-06-29T05:07:29Z

public/docs/get-started/docker-concepts/building-images/build-tag-and-publish-an-image.md

-    src="https://www.youtube.com/embed/chiiGLlYRlY" 
-    frameborder="0" 
+    src="https://www.youtube.com/embed/chiiGLlYRlY?rel=0&modestbranding=1&playsinline=1" 
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen
+    loading="lazy"
+    title="Build, tag, and push an image"
+    referrerpolicy="strict-origin-when-cross-origin"


나머지 docs/ 경로의 md 파일 또한 동일한 변경 내용입니다 :

src : 유튜브 비디오 관련 기능 최소화 -> 성능 개선

frameborder : 이건 CSS 파일에서 다루도록 분리

loading : lazy loading을 이용해 먼저 문서가 렌더링되고 처리되도록 수정

referrerpolicy : 이건 유튜브에 넘어가는 정보를 최소화 -> 성능 개선 & 보안 강화 목적

krsy0411 · 2025-06-29T05:08:38Z

src/scripts/main.ts

+import { ApplicationInsights } from '@microsoft/applicationinsights-web';
+
+// Application Insights 초기화
+const appInsights = new ApplicationInsights({
+  config: {
+    connectionString:
+      'InstrumentationKey=7bea0293-01dc-409c-9471-3a65567b11ed;IngestionEndpoint=https://koreacentral-0.in.applicationinsights.azure.com/;LiveEndpoint=https://koreacentral.livediagnostics.monitor.azure.com/;ApplicationId=ddbe985c-4d7a-41e4-80a8-a3961068933b',
+    enableAutoRouteTracking: true, // SPA 라우팅 자동 추적
+    enableCorsCorrelation: true,
+    enableRequestHeaderTracking: true,
+    enableResponseHeaderTracking: false, // 서버 응답 헤더 수집 불필요
+    enableAjaxErrorStatusText: true,
+    enableAjaxPerfTracking: true,
+    enableUnhandledPromiseRejectionTracking: true,
+    disableAjaxTracking: false,
+    disableFetchTracking: false,
+    loggingLevelConsole: 0, // 콘솔 로깅 비활성화
+    loggingLevelTelemetry: 1,
+    maxBatchSizeInBytes: 10000,
+    maxBatchInterval: 15000,
+    disableDataLossAnalysis: true,
+    disableCorrelationHeaders: false,
+    distributedTracingMode: 0, // 단일 서비스이므로 분산 추적 비활성화
+    enablePerfMgr: false,
+  },
+});
+appInsights.loadAppInsights();
+appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview


azure application for js npm 패키지를 사용하기 위한 코드

krsy0411 · 2025-06-29T05:09:00Z

src/styles/style.css

+@layer base {
+  /* 한국어 텍스트에 최적화된 시스템 폰트 스택 */
+  html {
+    font-family: 
+      -apple-system, 
+      BlinkMacSystemFont, 
+      'Apple SD Gothic Neo', 
+      'Noto Sans KR', 
+      'Malgun Gothic', 
+      '맑은 고딕', 
+      'Segoe UI', 
+      Roboto, 
+      'Helvetica Neue', 
+      Arial, 
+      sans-serif;
+  }
+
+  /* 외부 웹폰트 최적화 (Google Fonts 등) */
+  @font-face {
+    font-family: 'Google Fonts Fallback';
+    src: local('system-ui'), local('-apple-system');
+    font-display: swap;
+  }
+}


기본 폰트 설정, 외부 웹폰트 최적화

krsy0411 · 2025-06-29T05:09:32Z

src/styles/style.css

+/* YouTube iframe 최적화 */
+@layer components {
+  .youtube-video {
+    @apply relative w-full mx-auto;
+    aspect-ratio: 16 / 9; /* 모던 브라우저용 */
+    /* 레거시 브라우저 대체 */
+    padding-bottom: 56.25%; /* 16:9 종횡비 */
+  }
+
+  /* 모던 브라우저에서 padding-bottom 제거 */
+  @supports (aspect-ratio: 16 / 9) {
+    .youtube-video {
+      padding-bottom: 0;
+    }
+  }
+
+  .youtube-video iframe {
+    @apply absolute top-0 left-0 w-full h-full rounded-lg;
+    border: none; /* frameborder 대체 */
+  }
+}
+


iframe 관련 태그에서 스타일 관련 내용은 속성으로 안 넣고 CSS 파일에서 처리하게끔 분리

Copilot

Pull Request Overview

This pull request replaces the legacy Application Insights snippet with the Azure Application Insights package and optimizes YouTube iframe performance. Key changes include:

Integrating Application Insights in main.ts via the @microsoft/applicationinsights-web package.
Updating YouTube embeds in various markdown files to use the youtube-nocookie endpoint with lazy loading and improved accessibility attributes.
Removing the redundant legacy Application Insights snippet from index.html.

Reviewed Changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/styles/style.css	Adds base styling and component styles for YouTube iframes.
src/scripts/main.ts	Introduces and configures the new Application Insights client.
public/docs/*/.md	Updates YouTube embed URLs and attributes for performance and accessibility.
package.json	Adds the @microsoft/applicationinsights-web dependency.
index.html	Removes the legacy Application Insights snippet.

Comments suppressed due to low confidence (1)

index.html:8

Ensure that removing the legacy Application Insights snippet from index.html doesn't affect any dependencies expecting a global appInsights instance.

    <script type="module" src="./src/scripts/main.ts" defer></script>

Copilot · 2025-06-29T05:18:47Z

src/scripts/main.ts

+    connectionString:
+      'InstrumentationKey=7bea0293-01dc-409c-9471-3a65567b11ed;IngestionEndpoint=https://koreacentral-0.in.applicationinsights.azure.com/;LiveEndpoint=https://koreacentral.livediagnostics.monitor.azure.com/;ApplicationId=ddbe985c-4d7a-41e4-80a8-a3961068933b',


Consider moving the Application Insights connection string to environment variables or a secure configuration file to avoid exposing sensitive information in the source code.

Suggested change

connectionString:

'InstrumentationKey=7bea0293-01dc-409c-9471-3a65567b11ed;IngestionEndpoint=https://koreacentral-0.in.applicationinsights.azure.com/;LiveEndpoint=https://koreacentral.livediagnostics.monitor.azure.com/;ApplicationId=ddbe985c-4d7a-41e4-80a8-a3961068933b',

connectionString: process.env.APPINSIGHTS_CONNECTION_STRING || '',

// Ensure the environment variable is set in the deployment environment

이건 공식문서에도 오픈되어도 상관없다는 내용이 있기 때문에 무시해도 됩니다

YoonKeumJae

LGTM!!

krsy0411 · 2025-06-30T10:37:26Z

close #156
close #160
close #161

krsy0411 added 8 commits June 28, 2025 15:30

[npm] applicationinsights 추가

d0cde09

[npm] applicationinsights : SDK에서 패키지로 전환

871fc2b

applicationinsights에서 불필요한 메서드 제거

4ba5bf0

applicationInsights for 브라우저 패키지로 변경 및 적용

0f7bfd5

[task/156] Azure Application Insights로 인한 성능 문제들 개선

0ac4253

[성능 개선] Youtube 비디오 관련 성능 개선 : lazyloading 활성화, 사이즈 명시, referrerpolic…

73941ba

…y 설정

[성능 개선] 기본 폰트 설정 및 최적화, Youtube iframe 스타일을 코드와 분리

d659488

[성능 개선] Youtube Video 관련 기능 최소화, 스타일은 CSS 파일로 분리

a7eebf2

krsy0411 requested review from YoonKeumJae and Copilot June 29, 2025 04:58

krsy0411 commented Jun 29, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

krsy0411 commented Jun 29, 2025

View reviewed changes

krsy0411 added 2 commits June 29, 2025 14:11

ESLint/Prettier 자동 포맷팅 적용

ea9ba57

[성능 개선] iframe 태그(src 속성) : nocookie 추가

37068e1

krsy0411 requested a review from Copilot June 29, 2025 05:16

This comment was marked as outdated.

Sign in to view

krsy0411 requested a review from Copilot June 29, 2025 05:18

Copilot AI reviewed Jun 29, 2025

View reviewed changes

YoonKeumJae approved these changes Jun 30, 2025

View reviewed changes

YoonKeumJae merged commit aa2272e into docker-ko:master Jun 30, 2025
1 check passed

This was linked to issues Jun 30, 2025

[성능] Azure Application Insights로 인한 성능 문제들 개선 #156

Closed

[성능] 웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기 #160

Open

[성능] 타사 코드의 영향을 줄임 #161

Closed

krsy0411 removed a link to an issue Jun 30, 2025

[성능] 웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기 #160

Open

		connectionString:
		'InstrumentationKey=7bea0293-01dc-409c-9471-3a65567b11ed;IngestionEndpoint=https://koreacentral-0.in.applicationinsights.azure.com/;LiveEndpoint=https://koreacentral.livediagnostics.monitor.azure.com/;ApplicationId=ddbe985c-4d7a-41e4-80a8-a3961068933b',

AzureApplicationInsights 패키지로 변경 & iframe 성능 개선 #162

AzureApplicationInsights 패키지로 변경 & iframe 성능 개선 #162

Uh oh!

Conversation

krsy0411 commented Jun 29, 2025

작성 내용

참고자료

Uh oh!

krsy0411 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

krsy0411 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

krsy0411 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

krsy0411 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

krsy0411 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

krsy0411 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

YoonKeumJae left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

krsy0411 commented Jun 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants