JavaScript 플레이그라운드: JavaScript, HTML, CSS 실행
샌드박스 iframe에서 실시간 콘솔 출력 패널과 미리보기로 JavaScript, HTML, CSS를 작성하고 실행하세요. 기본적으로 CSP 메타 태그가 네트워크 접근을 차단하며, 표시되는 경고와 함께 켤 수 있습니다. 작업하면서 코드를 실행하려면 자동 실행 모드를, iframe을 다시 만들어 무한 루프를 깨려면 중지/리셋을 사용하세요. 시작 예시가 처음 시작을 돕습니다.
JavaScript 플레이그라운드는 JavaScript, HTML, CSS를 작성하고 실행하는 브라우저 기반 코딩 워크스페이스입니다. 편집기에는 JS, HTML, CSS 탭이 분리되어 있고, 미리보기 창과 실시간 콘솔 출력 패널로 페이지와 출력을 함께 검사할 수 있습니다. 짧은 스니펫을 실험하거나 로컬 개발 환경을 설치하지 않고 코드를 시도할 때 사용하세요.
코드는 allow-scripts가 설정되고 allow-same-origin이 없는 샌드박스 iframe 안에서 실행됩니다. CSP 메타 태그가 기본적으로 네트워크 접근을 차단하며, 켤 수 있고 그러면 인터페이스에 표시되는 경고가 나타납니다. 자동 실행 모드는 작업하면서 코드를 실행합니다. 스크립트가 무한 루프에 걸리면 중지/리셋이 iframe을 파괴하고 다시 만듭니다. 시작 예시도 포함되어 있습니다.
JavaScript, HTML, CSS는 웹 페이지에서 서로 다른 역할을 합니다. HTML은 콘텐츠를 구조화하고, CSS는 표현을 조절하고, JavaScript는 동작을 더합니다. 분리된 탭에 두면 이 부분들이 함께 동작하는 방식을 테스트하고, 미리보기로 변경을 확인하고, 콘솔에서 출력을 검사하기 쉬워집니다.
JavaScript 플레이그라운드는 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드되거나 저장되거나 서버로 전송되지 않습니다. 페이지가 로드된 후에는 오프라인에서 동작하고, 무료로 사용할 수 있습니다. 개발자와 DevOps 엔지니어는 서로 다른 머신에서 코드를 탐색하거나, 페이지 동작을 확인하거나, 빠른 프로그래밍 작업을 처리하는 데 사용할 수 있습니다.
1단계: JS, HTML, CSS 탭을 열고 시도할 코드를 입력하세요. 페이지의 각 부분에 해당하는 탭을 사용하세요.
2단계: 자동 실행 모드를 사용할지 선택하세요. 활성화하면 작업하면서 코드가 자동으로 실행됩니다.
3단계: 기본 네트워크 보호를 기억하세요. CSP 메타 태그가 네트워크 접근을 차단합니다. 네트워크 접근을 켤 수 있으며, 그러면 플레이그라운드에 표시되는 경고가 나타납니다.
4단계: 코드를 실행하고 미리보기와 실시간 콘솔 출력 패널로 결과를 확인하세요.
5단계: 코드가 무한 루프에 걸리면 중지/리셋을 사용해 샌드박스 iframe을 파괴하고 다시 만드세요.
사용 사례: 로컬 개발 환경을 설치하지 않고 JavaScript 스니펫을 시도하세요. 플레이그라운드가 브라우저에서 코드를 실행하고 실시간 콘솔 출력을 보여줍니다.
사용 사례: 각 탭에서 편집하고 미리보기로 HTML, CSS, JavaScript가 함께 동작하는 방식을 확인하세요.
사용 사례: 페이지 미리보기 옆의 실시간 콘솔 출력 패널로 코드 동작을 조사하세요.
사용 사례: 중지/리셋으로 iframe을 파괴하고 다시 만들어 무한 루프에서 복구하세요.
사용 사례: 로컬 환경이 없는 머신에서 프로그래밍 작업을 하세요.
사용 사례: 내부 코드나 데이터를 서드파티 서비스에 전송하지 마세요. 플레이그라운드가 브라우저에서 입력을 처리합니다.
사용 사례: JavaScript, HTML, CSS 실험의 시작점이 필요할 때 시작 예시를 살펴보세요.