방법론

1. 에디터 아키텍처

작업 공간은 HTML, CSS, JavaScript용 텍스트 에디터 세 개를 사용하며, 줄 번호 거터, 탭 들여쓰기 처리, 글꼴 크기 조절, 선택적 줄바꿈을 제공합니다.

2. HTML 처리

HTML 패널의 HTML은 생성된 문서의 body에 배치됩니다. 이 도구는 HTML을 부모 페이지 UI로 실행하지 않습니다.

3. CSS 주입

CSS는 생성된 문서 head의 style 요소에 삽입되어 규칙이 미리보기 문서에만 적용됩니다.

4. JavaScript 실행

JavaScript는 미리보기 문서 내부의 script 요소에 배치됩니다. Run 후 iframe 브라우징 컨텍스트에서 실행됩니다.

5. iframe 렌더링

결합된 문서는 iframe.srcdoc에 할당되어 부모 페이지를 탐색하지 않고 새 미리보기 문서를 만듭니다.

6. sandbox 격리

iframe은 sandbox 속성을 사용합니다(미리보기용 스크립트 허용). 부모 DOM API는 사용자 코드 실행을 위해 노출되지 않습니다.

7. 콘솔 처리

미리보기 내부의 작은 브리지가 console.log/info/warn/error 및 런타임 오류를 postMessage로 부모에 전달하여 표시합니다.

8. 브라우저 API

스크립트가 할 수 있는 일은 브라우저 정책과 sandbox 권한에 따라 달라집니다. 일부 API는 iframe에서 최상위 페이지와 다르게 동작합니다.

9. 로컬 스토리지

에디터 상태는 이 출처에 범위가 지정된 localStorage 키에 기록되어 새로고침 시 진행 중인 작업이 지워지지 않도록 할 수 있습니다.

10. 제한 사항

표준 HTML/CSS/JS에 대한 서버 측 컴파일은 없습니다. 복잡한 빌드 파이프라인, 비공개 패키지, 특권 디바이스 API는 범위 밖입니다.

11. 개인정보 고려사항

미리보기 조립은 클라이언트 측에서 수행됩니다. 내보내거나 다른 곳에 복사하지 않는 한 로컬 영속성은 브라우저에 유지됩니다.