스택블리츠란? 기사에서 사용하는 방법

개요
이와 같은 기술 블로그 사이트는 가능한 한 간단하고 원활하게 코딩하는 방법을 배우기 위해 노력합니다. Lateef Lab에서는 프런트엔드와 백엔드 모두에서 웹 개발을 가르치고 연습하는 데 중점을 두고 있습니다. PyScript의 발표와 함께 백엔드 개발은 가까운 장래에 웹 브라우저에 제공될 것입니다. 이를 통해 작가/교사는 브라우저 탭을 떠나지 않고도 기사 내에서 다루는 모든 기술을 사용하는 방법에 대해 독자에게 설명하고 안내할 수 있습니다!
브라우저 내 프런트 엔드 개발의 경우 개발자에게는 다양한 옵션이 있습니다. 내가 가장 좋아하는 옵션 중 하나는 StackBlitz입니다!

스택블리츠란?
StackBlitz은 Visual Studio Code의 모양을 모방한 온라인 개발자 환경입니다. Visual Studio Code를 기본 IDE로 사용하는 경우 StackBlitz를 사용하면 편안하게 사용할 수 있습니다. StackBlitz는 "WebContainers"를 사용하여 브라우저 내에서 Node.js를 실행합니다.
StackBlitz의 기능 중 일부는 다음과 같습니다.

Chrome 개발 도구로 Node.js 디버깅

프런트엔드 내에서 백엔드(Node.js) 실행

대기 시간 제로 편집기

오프라인으로 작업, 인터넷 연결이 필요하지 않음

GitHub 통합

여기LateefLab에서 React 자습서를 보여주고 싶습니다. 독자에게 더 나은 학습 경험을 제공하기 위해 독자에게 React 프로젝트를 올바르게 구성하는 방법을 보여주고 싶습니다. 기사에 StackBlitz를 표시하면 혼란을 줄이고 훌륭한 학습 경험을 보장할 수 있습니다. 기사의 Markdown 내에 StackBlitz 프로젝트를 삽입하여 StackBlitz를 사용하여 기사 내에 프로젝트를 표시합니다.

마크다운이란?
Markdown은 텍스트 편집기 내에서 서식 있는 텍스트를 만들기 위한 마크업 언어입니다. Medium 및 Dev.와 같은 대규모 출판물은 Markdown을 사용하여 기사를 편집합니다(LateefLab은 오픈 소스입니다. GitHub 저장소를 확인하고 이 사이트 내에서 Markdown을 사용하는 방법을 살펴보십시오). 운 좋게도 LateefLab에서 사용하는 편집기에서 문서의 HTML 코드 보기를 가져와((Summernote 덕분에) Markdown 편집기에 붙여넣을 수 있으며 동일한 형식이 유지됩니다!
자신의 Markdown 지원 기사에 StackBlitz를 삽입하려면 iframe 요소 내의 src 속성에 StackBlitz URL을 삽입하십시오. 예는 다음과 같습니다.

<iframe height="300" style="width: 100%;" src="https://stackblitz.com/edit/web-platform-3a6hc3?embed=0"></iframe>

예시

LateefLab에서 전체 예제를 확인하십시오.