HTML, CSS 및 JavaScript 코드 스니펫을 위한 플레이그라운드를 구축해 봅시다

프론트엔드 개발자라면 CodePen , JSBin , JSFiddle 과 같은 코드 플레이그라운드 중 하나 이상을 시도하여 코드 문제를 파악하거나 동료와 스니펫 및 논리 조각에 대해 토론했을 것입니다. .

HTML, CSS 및 Javascript 코드 스니펫을 실행하는 기본 기능을 갖춘 작업 플레이그라운드를 구축해 봅시다.

시작하기

저는 이 미니 프로젝트에 React를 사용하고 있습니다. 바닐라 JS 또는 프레임워크는 여기서는 중요하지 않으므로 자유롭게 사용하세요.

프로젝트를 만들려면 다음을 실행합니다.

npx create-react-app my-app
cd my-app
npm start

놀이터에는 두 가지 주요 구성 요소가 있습니다.

MyTabs.js - HTML, CSS 및 JS 탭.

Output.js - 스니펫에 대한 렌더링된 출력입니다.

MyTabs.js

이 구성 요소 내에 HTML, CSS 및 JS 탭을 만듭니다. 각 탭에는 해당 코드 스니펫에 대한 <textarea>가 있습니다.

import React, { Component } from "react";
import { Tabs, Tab } from "react-bootstrap";
import "./MyTabs.css";

class MyTabs extends Component {
  render() {
    return (
      <Tabs
        transition={false}
        defaultActiveKey="html"
        id="uncontrolled-tab-example"
      >
        <Tab eventKey="html" title="HTML">
          <textarea id="htmlTextarea"></textarea>
        </Tab>
        <Tab eventKey="css" title="CSS">
          <textarea id="cssTextarea"></textarea>
        </Tab>
        <Tab eventKey="js" title="JS">
          <textarea id="jsTextarea"></textarea>
        </Tab>
      </Tabs>
    );
  }
}

export default MyTabs;

Output.js

<iframe>를 사용하여 코드 스니펫을 렌더링합니다. iFrame은 웹 페이지 내부에서 다른 HTML 문서를 로드하는 데 사용되는 인라인 프레임입니다. 이 HTML 문서에는 <iframe> 태그가 사용자의 브라우저에서 구문 분석될 때 로드되는 JavaScript 및 CSS가 포함될 수도 있습니다. 이것이 바로 우리에게 필요한 것입니다.

import React, { Component } from "react";
import "./Output.css";

class Output extends Component {
  componentDidMount() {
    const iFrame = document.getElementById("iFrame").contentWindow.document;
    const htmlTextArea = document.getElementById("htmlTextarea");
    const cssTextArea = document.getElementById("cssTextarea");
    const jsTextArea = document.getElementById("jsTextarea");
    const runBtn = document.getElementById("runBtn");
    runBtn.addEventListener("click", function () {
      iFrame.open();
      iFrame.writeln(
        htmlTextArea.value +
          "<style>" +
          cssTextArea.value +
          "</style>" +
          "<script>" +
          jsTextArea.value +
          "</script>"
      );
      iFrame.close();
    });
  }

  render() {
    return (
      <div>
        <iframe id="iFrame" title="Output"></iframe>
      </div>
    );
  }
}

export default Output;

위의 코드에서 click 이벤트에 대한 이벤트 리스너를 정의했습니다. 함수 콜백에서 iframe#document 를 연 다음 writeln() 함수를 통해 씁니다. HTML, CSS 및 JS 텍스트 영역의 내용을 연결하여 전달했습니다. CSS 콘텐츠는 <style> 태그 사이에 배치되었습니다. JS 콘텐츠도 중간에 있습니다<script> 태그.

미니 프로젝트가 완료되었습니다.

우리 놀이터에서 놀기

내가 가장 좋아하는 코딩 놀이터Codepen로 가서 우리 놀이터에서 내pen 중 하나를 실행해 봅시다.



그것은 효과가 있었다! 이제 코드를 가지고 놀 수 있고 놀이터를 더 재미있게 만들 수 있습니다.

Github Repository

문제가 있으면 이 문서에 응답하십시오.
행복한 코딩!