Blazor Archives - 어제와 내일의 나 그 사이의 이야기

HTML iframe 정리

lycos7560 — Mon, 04 Aug 2025 12:42:26 +0000

HTML iframe?
1. 기본 구조와 문법
2. 핵심 속성
3. 주요 사용 사례
4. 보안 및 권한 제어 속성 (sandbox & allow)
5. 보안 및 성능 고려사항
6. 반응형 디자인
7. JavaScript와의 상호작용
8. 프레임워크별 사용 예시
9. 접근성 (Accessibility)
10. 문제 해결 및 디버깅
11. 모범 사례 및 권장사항
12. 대안 기술들
결론

HTML iframe?

(Inline Frame) 태그는 현재 HTML 문서 안에 다른 웹 페이지나 미디어 콘텐츠를 임베드(embed)할 때 사용하는 HTML 요소입니다.

외부 콘텐츠를 현재 페이지에 “창문처럼” 삽입하는 기능을 제공하며, 웹 개발에서 매우 유용한 도구입니다.

1. 기본 구조와 문법

기본 문법

이 브라우저는 iframe을 지원하지 않습니다.

최소 권장 구조

2. 핵심 속성

속성	설명	예시	필수여부
`src`	임베드할 콘텐츠의 URL	`src="https://www.youtube.com/embed/동영상ID"`	필수
`width`/`height`	프레임 크기 (픽셀 또는 %)	`width="600" height="400"`	권장
`title`	접근성을 위한 프레임 설명	`title="YouTube 동영상"`	권장
`frameborder`	~~테두리 표시 여부~~ (HTML5에선 CSS로 대체)	`frameborder="0"`	선택
`allowfullscreen` `allowfullscreen`은 오래된 방식이며, 최신 표준인 권한 정책(Permissions Policy)에서는 `allow="fullscreen"`을 사용하는 것을 권장	전체 화면 모드 허용	불리언 속성	선택
`sandbox`	보안 제한 설정	`sandbox="allow-scripts allow-same-origin"`	선택
`loading`	로딩 방식 (lazy/eager)	`loading="lazy"`	선택
`allow`	기능 정책 설정	`allow="camera; microphone"`	선택
`name`	프레임 이름 (target으로 사용)	`name="myFrame"`	선택
`srcdoc`	인라인 HTML 콘텐츠	`srcdoc="Hello World "`	선택
`id`	고유 식별자 (CSS, JavaScript에서 참조)	`id="myIframe"`	권장

3. 주요 사용 사례

1) YouTube 동영상 임베드

2) Google Maps 임베드

3) PDF 문서 표시

PDF를 표시할 수 없습니다. 다운로드하세요.

4) 인라인 HTML 콘텐츠 (srcdoc 사용)

안녕하세요!
이것은 인라인 HTML입니다."
    width="400" 
    height="200"
    title="인라인 HTML">

4. 보안 및 권한 제어 속성 (sandbox & allow)

4.1 sandbox 속성 – 보안 제한 설정

sandbox 속성은 iframe 내 콘텐츠의 보안을 강화하기 위해 사용됩니다.

기본적으로 모든 것을 차단하고 필요한 기능만 허용하는 방식입니다.

sandbox 기본 사용법

sandbox 값들

sandbox 값	설명	사용 예시
`allow-forms`	폼 제출 허용	로그인, 검색 폼이 있는 페이지
`allow-scripts`	JavaScript 실행 허용	인터랙티브 콘텐츠
`allow-same-origin`	동일 출처 정책 적용	API 호출, 쿠키 접근
`allow-popups`	팝업 창 열기 허용	새 창으로 링크 열기
`allow-top-navigation`	최상위 프레임 네비게이션 허용	부모 페이지 이동
`allow-pointer-lock`	포인터 잠금 API 허용	게임, 3D 앱
`allow-fullscreen`	전체 화면 모드 허용	동영상 플레이어
`allow-downloads`	파일 다운로드 허용	문서 다운로드
`allow-modals`	모달 창 허용	alert, confirm 등

4.2 allow 속성 – 기능 권한 제어

allow 속성은 브라우저의 고급 기능에 대한 접근 권한을 제어합니다.

Permissions Policy를 통해 특정 웹 API 사용을 허용하거나 차단합니다.

allow 기본 사용법

allow 값들

값	설명	사용 예시
`camera`	카메라 접근 허용	화상 통화, 사진 촬영
`microphone`	마이크 접근 허용	음성 녹음, 통음
`geolocation`	위치 정보 접근 허용	지도 서비스, 위치 기반 기능
`autoplay`	자동 재생 허용	동영상/음악 자동 재생
`encrypted-media`	DRM 보호 콘텐츠 재생 허용	Netflix, 유료 스트리밍 서비스
`picture-in-picture`	PIP(작은 창) 모드 허용	동영상 시청 중 다른 작업
`accelerometer`	가속도계(기기 움직임) 접근 허용	모바일 게임, VR 콘텐츠
`gyroscope`	자이로스코프(기기 회전) 접근 허용	360도 동영상, AR 앱
`clipboard-write`	클립보드 복사 기능 허용	텍스트/이미지 복사 버튼
`web-share`	운영체제 공유 기능 허용	SNS 공유, 링크 공유
`fullscreen`	전체 화면 모드 허용	동영상 전체 화면으로 보기

4.3 사용 예시

신뢰할 수 없는 콘텐츠 (높은 보안)

부분적으로 신뢰하는 콘텐츠 (중간 보안)

신뢰할 수 있는 서비스 (기능 중심)

둘 다 사용하는 경우

5. 보안 및 성능 고려사항

보안 고려사항

X-Frame-Options 헤더

X-Frame-Options: DENY          # 모든 프레임에서 차단
X-Frame-Options: SAMEORIGIN   # 동일 출처에서만 허용
X-Frame-Options: ALLOW-FROM https://example.com  # 대부분 지원 중단되었으므로 CSP frame-ancestors를 사용

# "특정 도메인"은 해당 웹사이트를 iframe으로 임베드할 수 있는 허용된 출처(도메인)를 의미

https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options#browser_compatibility

Content Security Policy (CSP)

안전한 iframe 사용법

성능 최적화

지연 로딩 (Lazy Loading)

리소스 힌트 사용

Intersection Observer를 이용한 동적 로딩

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const iframe = entry.target;
            iframe.src = iframe.dataset.src;
            observer.unobserve(iframe);
        }
    });
});

document.querySelectorAll('iframe[data-src]').forEach(iframe => {
    observer.observe(iframe);
});

6. 반응형 디자인

CSS를 이용한 반응형 iframe

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

다양한 비율 지원

.aspect-16-9 { padding-bottom: 56.25%; }  /* 16:9 */
.aspect-4-3 { padding-bottom: 75%; }      /* 4:3 */
.aspect-1-1 { padding-bottom: 100%; }     /* 1:1 */
.aspect-21-9 { padding-bottom: 42.86%; }  /* 21:9 */

7. JavaScript와의 상호작용

postMessage API 사용

// 부모 페이지에서 iframe으로 메시지 전송
const iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage('Hello from parent', '*');

// 메시지 수신 리스너
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://trusted-domain.com') return;
    console.log('받은 메시지:', event.data);
});

iframe 로드 완료 감지

const iframe = document.getElementById('myFrame');
iframe.addEventListener('load', () => {
    console.log('iframe 로드 완료');
});

8. 프레임워크별 사용 예시

React

function YouTubeEmbed({ videoId }) {
    return (
        
            
        
    );
}

Vue.js

Blazor

@page "/iframe-demo"

9. 접근성 (Accessibility)

필수 접근성 고려사항

이 콘텐츠를 보려면 여기를 클릭하세요.

키보드 네비게이션

iframe:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

10. 문제 해결 및 디버깅

일반적인 문제들

1. 콘텐츠가 보이지 않을 때

// 개발자 도구에서 확인할 사항들
console.log('iframe src:', iframe.src);
console.log('iframe 로드 상태:', iframe.readyState);

// 오류 핸들링
iframe.addEventListener('error', (e) => {
    console.error('iframe 로드 오류:', e);
});

2. X-Frame-Options 오류 해결

개발자 도구 → Network 탭에서 응답 헤더 확인
가능한 해결책: 프록시 서버 사용 또는 API를 통한 콘텐츠 가져오기

3. CORS 정책 위반

// 안전한 방법: 서버 사이드에서 콘텐츠 프록시
fetch('/api/proxy?url=' + encodeURIComponent(targetUrl))
    .then(response => response.text())
    .then(html => {
        iframe.srcdoc = html;
    });

디버깅 도구

// iframe 상태 체크 함수
function checkIframeStatus(iframeId) {
    const iframe = document.getElementById(iframeId);
    console.log({
        src: iframe.src,
        contentDocument: iframe.contentDocument,
        contentWindow: iframe.contentWindow,
        readyState: iframe.readyState
    });
}

11. 모범 사례 및 권장사항

권장사항

항상 title 속성 제공 – 접근성을 위해 필수
적절한 크기 설정 – 반응형 디자인 고려
loading=”lazy” 사용 – 성능 최적화
sandbox 속성 활용 – 보안 강화
대체 콘텐츠 제공 – 호환성 보장
HTTPS 사용 – 보안 및 호환성

피해야 할 것들

frameborder 속성 – HTML5에서는 CSS 사용 권장
과도한 중첩 – 성능 저하 원인
신뢰할 수 없는 소스 – 보안 위험
고정 크기만 사용 – 반응형 웹에 부적합
title 속성 누락 – 접근성 문제

12. 대안 기술들

1. object 태그

PDF를 표시할 수 없습니다. 다운로드하세요.

2. embed 태그

3. Web Components

class CustomEmbed extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
            
            
        `;
    }
}
customElements.define('custom-embed', CustomEmbed);

결론

iframe은 웹 개발에서 외부 콘텐츠를 삽입하는 강력한 도구입니다.

올바른 사용법과 보안 고려사항을 숙지하여 안전하고 효율적인 웹 애플리케이션을 개발할 수 있습니다.

특히 현대 웹 개발에서는 성능, 보안, 접근성을 모두 고려한 구현이 중요합니다.

The post HTML iframe 정리 appeared first on 어제와 내일의 나 그 사이의 이야기.

MAUI Blazor Hybrid Radzen 적용

lycos7560 — Wed, 22 Jan 2025 17:37:50 +0000

https://www.radzen.com/blazor-studio/documentation/maui

2025/01/23
net9.0
Radzen v5.7.10

index.html




    
    
    MauiBlazor
    

    
    
    
    
    

    
    







    

    Loading...

    
        An unhandled error has occurred.
        Reload
        🗙

MainLayout.razor

@inherits LayoutComponentBase







    
        
    

    
        
            About
        

        
            @Body

_Imports.razor

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MauiBlazor
@using MauiBlazor.Components

@* Radzen Import Start *@
@using Radzen
@using Radzen.Blazor
@* Radzen Import End *@

MauiProgram.cs

using Microsoft.Extensions.Logging;
using Radzen;

namespace MauiBlazor
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });
            builder.Services.AddMauiBlazorWebView();

            // Radzen Builder Start After [AddMauiBlazorWebView]
            builder.Services.AddRadzenComponents();
            // Radzen Builder End

#if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
    		builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

Home.razor

@inject NotificationService NotificationService
@page "/"

Hello, world!

Welcome to your new app.

 ButtonClicked()) Text=@ButtonName ButtonStyle="ButtonStyle.Primary" />

@code {

    private int currentCount = 0;
    public string ButtonName => $"Click {currentCount.ToString()}";

    void ButtonClicked()
    {
        currentCount++;
    }
}

The post MAUI Blazor Hybrid Radzen 적용 appeared first on 어제와 내일의 나 그 사이의 이야기.

Dependency Inversion Principle(DIP, 의존성 역전 원리)

lycos7560 — Sun, 03 Nov 2024 07:48:04 +0000

Dependency Inversion Principle(DIP, 의존성 역전 원리)

https://learn.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/architectural-principles#dependency-inversion

The direction of dependency within the application should be in the direction of abstraction, not implementation details.
애플리케이션 내의 종속성 방향은 구현 세부 사항이 아닌 추상화 방향이어야 합니다.
Most applications are written such that compile-time dependency flows in the direction of runtime execution, producing a direct dependency graph.
대부분의 애플리케이션은 컴파일 타임 종속성이 런타임 실행 방향으로 흐르도록 작성되어 직접적인 종속성 그래프를 생성합니다.

That is, if class A calls a method of class B and class B calls a method of class C, then at compile time class A will depend on class B, and class B will depend on class C.
즉, class A가 class B의 메서드를 호출하고 class B가 class C의 메서드를 호출하는 경우 컴파일 타임에 class A는 class B에 종속되고 class B는 class C에 종속됩니다.

코드 구조에서 세부 구현 내용에 의존하지 말고, 더 추상적이고 일반적인 개념에 의존해야 한다는 뜻
이렇게 하면 코드가 더 유연해지고, 변경하기 쉽고, 재사용하기도 쉬워진다.
예를 들어, 어떤 기능을 직접 호출하는 것보다 그 기능을 일반적으로 설명하는 인터페이스를 사용하는 것이 더 좋다는 의미)

Direct dependency graph.

Applying the dependency inversion principle allows A to call methods on an abstraction that B implements, making it possible for A to call B at run time, but for B to depend on an interface controlled by A at compile time (thus, inverting the typical compile-time dependency).
종속성 반전 원칙을 적용하면 A가 B가 구현하는 추상화에 대한 메서드를 호출할 수 있으므로 A가 런타임에 B를 호출할 수 있지만 B는 컴파일 타임에 A에 의해 제어되는 인터페이스에 의존할 수 있습니다
(따라서 일반적인 컴파일 타임 종속성을 반전시킵니다).

At run time, the flow of program execution remains unchanged, but the introduction of interfaces means that different implementations of these interfaces can easily be plugged in.
런타임에 프로그램 실행의 흐름은 변경되지 않지만 인터페이스의 도입은 이러한 인터페이스의 다른 구현을 쉽게 연결할 수 있음을 의미합니다.

Inverted dependency graph.

Dependency inversion is a key part of building loosely coupled applications, since implementation details can be written to depend on and implement higher-level abstractions, rather than the other way around.
종속성 반전은 느슨하게 결합된 애플리케이션을 구축하는 데 있어 중요한 부분인데, 그 이유는 구현 세부 정보를 작성하여 더 높은 수준의 추상화에 의존하고 구현하도록 할 수 있기 때문입니다.

The resulting applications are more testable, modular, and maintainable as a result.
그 결과 응용 프로그램은 더 쉽게 테스트할 수 있고, 모듈화되며, 유지 관리가 더 용이합니다.

The practice of dependency injection is made possible by following the dependency inversion principle.
종속성 주입의 연습은 종속성 반전 원칙을 따름으로써 가능합니다.

애플리케이션의 의존성을 구체적인 구현이 아니라 추상화된 개념에 맞추는 것

대부분의 애플리케이션은 A 클래스가 B 클래스를, B 클래스가 C 클래스를 호출하는 형태로 작성됩니다.

이는 A가 B에, B가 C에 의존하게 만든다는 뜻입니다. 종속성 반전 원칙을 적용하면 A는 B의 구체적인 구현이 아니라 B가 구현하는 추상 개념에 의존하게 됩니다.

이렇게 하면 코드를 더 쉽게 테스트할 수 있고, 변경 및 유지보수가 용이해집니다.

간단히 말해, 코드를 유연하고 재사용 가능하게 만들어줍니다.

종속성 반전 적용 전

// 엔진 클래스
public class Engine
{
    public void Start()
    {
        Console.WriteLine("Engine starts.");
    }
}

// 자동차 클래스
public class Car
{
    private Engine _engine = new Engine();

    public void Start()
    {
        _engine.Start();
        Console.WriteLine("Car starts.");
    }
}

// 메인 프로그램
public class Program
{
    public static void Main(string[] args)
    {
        Car car = new Car();
        car.Start();
    }
}

종속성 반전 적용 후

// 인터페이스 정의
public interface IEngine
{
    void Start();
}

// 엔진 클래스
public class Engine : IEngine
{
    public void Start()
    {
        Console.WriteLine("Engine starts.");
    }
}

// 전기 엔진 클래스
public class ElectricEngine : IEngine
{
    public void Start()
    {
        Console.WriteLine("Electric engine starts.");
    }
}

// 자동차 클래스
public class Car
{
    private IEngine _engine;

    public Car(IEngine engine)
    {
        _engine = engine;
    }

    public void Start()
    {
        _engine.Start();
        Console.WriteLine("Car starts.");
    }
}

// 메인 프로그램
public class Program
{
    public static void Main(string[] args)
    {
        IEngine engine = new Engine();
        Car car = new Car(engine);
        car.Start();
        
        IEngine electricEngine = new ElectricEngine();
        Car electricCar = new Car(electricEngine);
        electricCar.Start();
    }
}

The post Dependency Inversion Principle(DIP, 의존성 역전 원리) appeared first on 어제와 내일의 나 그 사이의 이야기.