숙련된 프로그래머이든 신입생이든 복잡한 프로젝트에서 작업하면 사실상 문제에 부딪힐 가능성이 큽니다. 프로젝트를 여러 모듈로 분할하면 문제가 발생하여 오류를 추적하고 솔루션을 찾기가 더 어려워집니다. 다른 상황에서는 작업 중인 문제에 대한 적절한 솔루션을 찾지 못했기 때문에 개별 인스턴스를 디버깅하는 것이 어려울 수 있습니다.
또한 때때로 코드 조각으로 발생하므로 당시에는 복잡해 보일 수 있습니다. JavaScript는 배우기 매우 간단한 웹 기반 언어 중 하나입니다. 데스크탑 브라우저를 실행하고 개발자 도구(일반적으로 F12)로 이동하면 완료됩니다! 그런 다음 복잡한 소프트웨어를 설치하거나 실행할 필요 없이 JS를 실험할 수 있습니다.
시작하려면 브라우저만 있으면 됩니다. 상자에서 꺼내자마자 이 모든 단순함이 있다는 것은 놀라운 일이지만 더 필요한 경우가 있습니다. 예를 들어, 최근에 발견했지만 새 프로젝트를 시작하고 싶지는 않은 새로운 Web API로 실험하고 싶다고 가정해 보겠습니다.
이 게시물에서는 가장 인기 있는 세 가지 JS 플레이그라운드인 CodePen, CodeSandbox 및 StackBlitz를 비교하고 대조합니다. 시작하자!
코드 펜
프론트엔드 웹 개발 도구는 항상 발전하고 있으며 텍스트 편집기는 개발자의 삶을 더 단순하게 만드는 최신 기술의 큰 구성 요소입니다. Atom 또는 Notepad ++와 같은 독립 실행형 텍스트 편집기 외에도 최근 몇 년 동안 프로그램 설치가 필요하지 않고 협업을 촉진하는 브라우저 기반 편집기가 폭발적으로 증가했습니다.
CodePen은 프론트엔드 웹 페이지를 더 잘 작성하는 방법을 배울 수 있는 환상적인 기회를 제공하는 "사용자 생성 HTML, CSS 및 JavaScript 코드 조각을 테스트하고 제시하기 위한 온라인 커뮤니티"입니다.
CodePen은 두 가지 "모드"를 제공합니다. 첫 번째이자 가장 일반적으로 사용되는 것은 펜입니다. 버튼을 클릭하고 편집기로 바로 이동하는 것만 큼 간단합니다. 여기에서 기본 HTML, CSS 및 JS 편집 창뿐만 아니라 미리보기 패널에 액세스할 수 있습니다.
"파일 시스템", "IntelliSense" 또는 다른 것은 없습니다. 단지 간단한 구문 강조 표시와 prettify와 같은 빠른 명령만 있을 뿐입니다. 옵션 탭에서 세 가지 언어(예: JS용 TypeScript)에 대한 제한된 범위의 전처리기 중에서 선택하거나 외부 소스에 대한 연결을 추가할 수 있습니다.
무료로 수행해야 하는 작업만 있다면 두 편집자 중 하나면 충분합니다. 많은 설정이나 라이브러리가 필요하지 않은 모든 경우에는 CodePen을 제안합니다. 단순히 HTML, CSS 및 JS 위에 선택적 전처리기가 있는 것입니다. 놀이터를 활용하여 소셜 미디어 존재를 향상시키거나 개인 포트폴리오를 개발하려는 경우 CodePen이 더 나은 선택입니다.
프리미엄 버전
CodePen에서 선택할 수 있는 몇 가지 대안이 더 있습니다. 매년 지불하는 경우 매월 $12, $19 또는 $39에 세 가지 프리미엄 플랜 중 하나를 받을 수 있습니다. 세 가지 계층 중 하나에서 무한한 수의 개인 펜, 게시물 및 컬렉션을 만들 수 있습니다.
또한 Pro 배지(소셜 부스트), 라이브 협업 모드 액세스, 광고 없음 등을 받게 됩니다. 또한 특정 팀별 전략 및 기타 계층 간 구분이 있습니다. 자세한 내용은 공식 청구 게시판을 확인하세요.
주요 특징들
CodePen에서 HTML, CSS 및 JavaScript를 만드는 것 외에도 코드펜을 차별화하는 몇 가지 사항이 더 있습니다.
- 코드를 실시간으로 볼 수 있습니다. 컴파일이 필요하지 않습니다.
- 실험을 통해 새로운 것을 배울 수 있습니다.
- 문제를 찾고 해결하기 위해 작은 테스트 케이스를 만듭니다.
- 멋진 작품을 전시하세요.
- 나중에 사용할 수 있도록 펜을 만들고 저장합니다.
- 다른 개발자의 코드를 시도하고 실제로 작동하는지 확인하십시오.
장점
- 시작하려면 비용이 들지 않습니다.
- 기본 제공 학습 리소스.
- 다른 사람들과 공동 작업을 하고 프로젝트를 비교하여 그들이 미래에 어디로 갈 수 있는지 확인하십시오.
- UI는 사용하기 쉽고 간단합니다.
단점
- 코드 라이브러리가 작고 자동 코드 완성 기능이 부적절합니다. 한 페이지 프로젝트에 적합하며 더 큰 것은 처리할 수 없습니다.
- CodePen에서 개인 펜을 만들 수 있지만 Pro 멤버십(월 $9)으로 업그레이드해야 합니다.
코드 샌드 박스
CodeSandbox는 웹 기반 코드 편집기입니다. 생성, 패키징 및 종속성 관리를 자동화하여 클릭 한 번으로 새 프로젝트를 빌드할 수 있습니다. 멋진 것을 만든 후에는 단순히 웹사이트를 공유하여 다른 사람들과 공유할 수 있습니다.
편집기는 모든 JavaScript 프로젝트와 호환되지만 create-react-app 템플릿에 프로젝트를 저장하는 옵션과 같은 특정 React 관련 기능이 포함되어 있습니다.
CodeSandbox에서 빌드하는 모든 프로젝트는 템플릿으로 시작합니다. 특정 라이브러리, 프레임워크 또는 런타임(Node.js 포함)과 관련되거나 단순히 표준 웹 기술을 사용할 수 있습니다. 템플릿을 선택하면 편집기로 보내지며 필요한 모든 파일과 이미 열려 있는 미리보기 창이 표시됩니다.
모든 샌드박스에서 "파일 시스템"에 액세스할 수 있습니다. 즉, 새 파일을 만들고, 모듈(NPM 패키지 포함)을 활용하고, 정적 자산과 상호 작용할 수 있습니다. 템플릿별 구성 파일을 수정할 수도 있습니다.
IDE에서와 같이 파일 구조와 종속성을 완벽하게 갖춘 고유한 사용 사례를 위한 고유한 템플릿을 구성할 수도 있습니다. 이 도구는 Github에 연결되어 있으므로 커밋을 빠르게 생성하고 PR을 열 수 있습니다. 애플리케이션을 ZEIT 또는 Netlify에 즉시 배포할 수 있습니다.
코드샌드박스 팀 프로
개발자가 브라우저 기반 웹 앱 개발 샌드박스를 구축할 수 있도록 하는 네덜란드 기업인 CodeSandbox는 팀이 클라우드에서 코드 작업을 할 수 있는 협업 플랫폼을 공식 출시했습니다. 새로운 제품인 Team Pro는 디자이너와 관리자부터 품질 보증(QA) 팀 및 그 이상에 이르는 전체 제품 팀을 위해 구축된 코드 없는 솔루션입니다.
프로젝트는 웹 응용 프로그램을 변경하거나 수락하려는 모든 사람을 위해 사용자 친화적인 인터페이스로 제공되며, 개발자에게 변경 사항을 실행하기 위해 메모와 권장 사항을 보내고 토론을 위해 다시 전달하고 프로세스를 반복하는 것과 같은 대체 방법을 사용하지 않습니다.
주요 특징들
- 웹 기반 코드 편집기 및 프로토타입 도구.
- 로컬 사용의 경우 샌드박스를 zip 파일로 쉽게 다운로드할 수 있습니다.
- 프로그램 작성 동료와 쉽게 공유할 수 있는 샌드박스에서 수행됩니다.
장점
- 향상된 사용자 경험과 편집기에 대한 더 큰 제어.
- 라이브 미리보기 기능은 별도의 창에서 수정하여 볼 수 있습니다.
- 코드는 자동으로 형식이 지정되며 CLI(codesandbox-cli)가 포함됩니다.
- 고급 npm 모듈을 지원합니다.
- 권장 사항이 포함된 멋진 오류 메시지.
- 더 나은 터미널, 테스트 뷰어 및 문제 뷰어를 제공하여 디버깅 경험을 향상시킵니다.
단점
- 최종 소비자는 많은 개인화에 노출됩니다.
- 로컬 컴퓨터에서 파일 끌어서 놓기가 제대로 작동하지 않습니다.
- CodeSandbox에서는 특정 폴더 구조를 따라야 합니다.
- 개인 샌드박스의 기능은 후원자만 사용할 수 있습니다.
스택블리츠
StackBlitz는 웹 애플리케이션을 위한 Visual Studio Code 기반 온라인 IDE입니다. 플랫폼은 데스크톱 버전만큼 반응이 빠르고 적응력이 뛰어납니다. StackBlitz는 사전 로드된 온라인 IDE입니다. 앵귤러와 리액트 개발 도구.
Thinkster.io는 의존성 설치 또는 빌드 설정에 대해 걱정할 필요 없이 Angular 또는 React 프로젝트를 가능한 한 간단하게 시작할 수 있도록 환상적인 프로젝트를 구축했습니다. StackBlitz는 현재 다른 온라인 코드 편집기에는 없는 놀랍고 독특한 기능을 많이 제공합니다. 결과적으로 StackBlitz를 더 조사하고 이 온라인 IDE가 제공해야 하는 것을 발견하는 것은 가치가 있습니다.
Stackblitz는 완전한 IDE와 매우 유사합니다. 특히 도구가 VS 코드를 기반으로 하기 때문에 VS 코드와 작별을 고할 수 없는 경우에 그렇습니다. 패키지에는 전체 스택 응용 프로그램을 시작하고 계속 만들 수 있는 다양한 기능이 있습니다.
이 프로그램은 개발자들 사이에서 잘 알려진 Visual Studio를 기반으로 합니다. 오프라인 편집은 프로젝트의 뛰어난 기능입니다. 이를 가능하게 하기 위해 Stackblitz 팀은 브라우저 내 웹 서버를 만들었습니다. 입력할 때 자동으로 종속성을 설치하고, 컴파일하고, 번들하고, 핫 리로딩을 수행합니다.
프리미엄 버전
Cadet, Astronaut 및 Commander는 각각 무료, $8/월 및 $29/월에 사용할 수 있습니다. Astronaut and Commander에는 무제한 개인 프로젝트, 무제한 파일 업로드, 핵심 팀 여유 채널 초대 등과 같은 다양한 기능이 포함되어 있습니다. 자세한 내용은 공식 청구 게시판을 참조하십시오.
주요 특징들
- 프로젝트에 NPM 패키지 추가
- 새로운 브라우저 내 개발 서버 덕분에 오프라인 상태에서도 편집할 수 있습니다.
- 언제든지 라이브 앱에 액세스(및 공유)할 수 있는 호스팅된 앱 URL입니다.
- 기타 주목할만한 Visual Studio Code 기능에는 Intellisense, 프로젝트 검색(Cmd/Ctrl+P), 정의로 이동 등이 있습니다.
장점
- Firebase의 배포 기능입니다.
- 편집기는 사용하기 정말 쉽고 매우 빠릅니다.
- 사용자는 package.json, index.html 및 index.js에 액세스할 수 있습니다.
- 포함할 수도 있는 공유 가능한 소스 코드입니다.
- 필요한 경우 다른 페이지에서 열 수 있는 옵션과 함께 페이지의 큰 섹션에 대한 실시간 미리보기.
- 오프라인 상태에서 편집
- 스마트 완성 및 향상된 Intellisense.
- 스택블리츠의 핵심은 오픈 소스.
단점
- create-react-app 명령으로 관리하기 때문에 건물이나 개발자 서버에 영향을 미치지 않습니다.
- React에서는 기본적인 폴더 구조를 관찰해야 합니다.
- 코드를 자동으로 포맷하는 것은 불가능하지만 수동으로 할 수는 있습니다.
결론
요즘에는 위에서 본 것과 같은 코딩 놀이터를 사용하여 모든 웹 프로젝트를 완전히 구성할 수 있습니다. 웹 브라우저에서 직접 빌드, 디버그, 테스트 및 배포할 수 있으면 PC에 번거로운 IDE를 설치할 필요가 없습니다.
내 생각에 StackBlitz는 Node.js, npm, 또는 각도. 로컬에서 Visual Studio Code를 사용하는 것과 동일한 경험을 제공합니다. 실제로 StackBlitz는 Visual Studio Code로 구동되기 때문에 데스크톱 버전만큼 빠르고 다재다능합니다.
CodePen, CodeSandbox 및 StackBlitz 중 어떤 것이 가장 적합한 도구입니까? 의견에 알려주십시오.
아바티야
이 훌륭한 기사에 감사드립니다. stackblitz.com을 본 후 이것이 제가 원하는 것임을 압니다.