웹 코딩에 관심이 있다면 한 번쯤은 코드 플레이그라운드를 사용해 본 적이 있을 것입니다. 이것은 일반적인 코드 편집기가 아니지만 백엔드 서버 설정에 대해 걱정하지 않고 코드를 테스트할 수 있는 곳입니다. Codepen과 JSFiddle이 가장 인기 있는 두 가지 도구이지만 아마도 당연히(웹 코드 플레이그라운드의 대상 고객이 코드 플레이그라운드를 직접 구축할 수 있는 기술을 가진 사람들이라는 점을 감안할 때) 많은 대안.
빠른 HTML/CSS/JavaScript 앱을 만들어 가지고 놀고 싶다면 선택한 플레이그라운드는 거의 개인 취향의 문제가 될 것입니다. 하지만 실시간 협업 코딩, React 또는 Vue와 같은 JS 프레임워크에 대한 빠른 액세스, 백엔드 지원 또는 활성 크리에이티브 커뮤니티와 같은 더 많은 기능을 원하는 경우 약간의 쇼핑을 원할 수 있습니다.
코드펜
아마도 가장 인기 있는 프론트엔드 코드 놀이터는 CodePen일 것입니다. 그만한 이유가 있습니다. 직관적이고 사용하기 쉽고 크고 활기찬 커뮤니티가 있으며 작동하는 웹 코드를 페이지에 포함하기 위한 표준이 되었습니다. 빠른 자동 업데이트와 유연한 보기 창 덕분에 CSS 애니메이션 프로젝트와 같은 작업에 매우 인기가 있습니다. CSS/JS 전처리기가 있으며 외부 스크립트(React, Vue 및 CDNjs를 통해 사용할 수 있는 모든 것) 및 기타 펜에도 쉽게 연결할 수 있습니다.
전반적으로 CodePen은 특히 프론트 엔드 프로젝트 및 포트폴리오에서 최고의 자리를 차지할 자격이 있습니다. 그러나 백엔드용으로 제작되지 않았으며 공동 코딩, 여러 프로젝트(개별 펜과 반대) 및 라이브 전체 페이지 보기(실시간 부분 페이지 보기는 무료)와 같은 일부 기능에는 유료 전문가가 필요합니다. 구독.
JSFiddle
프론트 엔드 코드 놀이터 세계의 두 번째 바이올린(시간상 가장 오래된 것 중 하나임)은 JSFiddle입니다. 이름에서 알 수 있듯이 JavaScript 지향이므로 HTML/CSS 방식이 아닌 더 많은 기본 JS 기능을 제공합니다. (말 그대로 Sass는 기본적으로 지원하지만 Less는 지원하지 않습니다.) 작은 작업으로 필요한 HTML/CSS/JS 기능을 추가할 수 있고 코드 힌트 및 자동 지원 기능을 지원하기 때문에 큰 문제는 아닙니다. 다시 로드하면 전체 코딩 기능 면에서 CodePen보다 약간 더 나을 수도 있습니다.
JSFiddle이 선호하는 가장 큰 장점은 협업 모드(음성 및 텍스트 채팅 포함!)를 무료로 제공하여 다른 사람들과 동시에 코드 작업을 할 수 있다는 것입니다. 커뮤니티 측면이 별로 없고 흥미로운 프로젝트를 보여주지도 않기 때문에 그런 면에서 CodePen에 졌습니다.
전반적으로 더 많은 JS가 포함된 프로젝트가 있거나 공동으로 코딩해야 하는 경우 JSFiddle이 훌륭한 옵션입니다. 그래도 문제가 있는 경우 아래의 "기타 놀이터" 목록에 비슷한 느낌의 대안이 많이 있습니다.
글리치
자, 여러분은 프론트엔드를 가지고 놀기만 하는 것이 아닙니다. 전체 스택 웹 앱을 구축할 수 있는 무언가가 필요합니다. 많은 코드 플레이그라운드를 사용하여 HTML/CSS/JS를 코딩하고 정적 웹 페이지를 생성할 수 있지만 Glitch는 약간의 저장 공간, 시간당 4000개 요청을 제공하며 Node.js 서버 측 코드를 매우 쉽게 실행할 수 있도록 합니다. $0.00의 저렴한 가격으로 경험이 얼마나 많든 상관없이 소규모 프로젝트를 구축하고 즉시 배포할 수 있습니다.
또한 공동 작업 코딩, 버전 제어("되감기"라고 함), 많은 학습 리소스, 우수한 GitHub 통합, 쉬운 포함, 친숙한 커뮤니티, 리믹스하고 재생할 수 있는 수많은 프로젝트와 같은 다른 훌륭한 기능도 함께 제공됩니다. Visual Studio 통합까지. 프론트 엔드 코딩 인터페이스는 다른 플레이그라운드만큼 매끄럽지 않을 수 있지만 전반적인 기능은 비슷합니다. 웹 앱을 시작하고 실행하는 빠르고 쉬운 방법을 찾고 있다면(또는 방법을 배우려고 노력하고 있다면!) Glitch는 좋은 첫 번째 중지입니다.
코드샌드박스
CodeSandbox는 Glitch와 같은 범주에 속하지만 조금 더 복잡하고 완전한 기능을 갖추고 있습니다. Glitch가 상당히 강력한 기능 위에 상당히 최소한의 인터페이스를 제공하는 반면, CodeSandbox는 VS Code를 구동하는 동일한 Monaco 편집기를 사용하여 모든 기능을 공개합니다. 따라서 해당 IDE에 익숙한 사람들은 CodeSandbox를 사용하면 집과 같은 편안함을 느낄 것입니다.
매우 유연하고 사용자 정의 가능한 오픈 소스이며, 전체 웹 앱을 배포할 수 있고(Glitch보다 몇 단계 더 높음), 파일을 호스팅하고, 커뮤니티 분위기가 있으며, 백그라운드 작업의 대부분을 수행하므로 코드를 작성하고 앱을 배포합니다. 또한 GitHub 및 VS Code 통합, Emmet(약어 확장기) 및 고급 사용자와 경험이 적은 코더 모두가 높이 평가할 수많은 기타 기능이 있습니다. 그냥 어지럽게 하는 것은 무리일 수 있지만 프로젝트가 더 이상 CodePen에 맞지 않고 학습 곡선에 신경 쓰지 않는다면 CodeSandbox를 확인하십시오.
Repl.it
이 플레이그라운드/IDE는 내가 가장 좋아하는 것이 아니기 때문에 끝이 아닙니다(확실히 그렇지는 않습니다). Repl.it이 자체 카테고리에 있기 때문입니다. 톤을 지원합니다. Python에서 LOLCODE(Lolcats에서 선호하는 프로그래밍 언어)에 이르기까지 프론트엔드 및 백엔드 코드 지원, 사이트 및 앱 배포, 매우 긴밀한 GitHub 통합 제공, 대규모의 매우 활발한 개발자 커뮤니티 호스팅, 그리고 그것이 얼마나 강력한지 알 수 없는 직관적인 인터페이스를 가지고 있습니다.
Repl.it은 협업 코딩에서 임베딩에 이르기까지 이 목록의 다른 플레이그라운드에서 기대할 수 있는 모든 기능을 갖추고 있으며 여전히 주로 프로토타입 및 코드 공유 도구이지만 대부분의 소규모 중간 규모 프로젝트(인터넷에 안정적으로 연결되어 있는 한). 프론트엔드 디자인을 하거나 코드를 처음 접하는 경우에는 다소 어려울 수 있지만, 정기적으로 프로그래밍한다면 탐색할 가치가 있습니다.
알아볼 만한 다른 멋진 놀이터
위의 놀이터는 개인적으로 자주 가는 곳이지만 더 많이 있습니다. 그들은 모두 기본을 수행할 수 있는 매우 유능하며, 각자 다른 요구에 호소하는 고유한 방식이 있습니다. JSFiddle은 분명히 그들 중 많은 사람들에게 영감을 주었기 때문에 해당 앱의 대안을 찾고 있다면 여기에서 찾을 수 있습니다.
- Liveweave:JSFiddle과 매우 유사하지만 디자인 지향적입니다. 특히 내장 CSS, 색상 생성기 도구 및 벡터 편집기가 돋보입니다.
- JSItor:매우 유사한 느낌의 JSFiddle 대안, 특히 Android/iOS 앱.
- StackBlitz:VS Code를 구동하는 Monaco Editor로 구축된 뛰어난 브라우저 기반 IDE입니다. 약간 CodeSandbox와 비슷하지만 백엔드 지원이 없기 때문에 조금 더 간단합니다.
- Flems:베어본, 미니멀한 놀이터. 넌센스 및/또는 주의가 산만하지 않은 것을 원할 때 완벽합니다.
- JSBin:JSFiddle의 보다 미니멀한 버전입니다.
- CSSDeck:매우 간단한 프론트엔드 플레이그라운드입니다. HTML/CSS 및 기본 JS에서 몇 가지 아이디어를 테스트할 수 있는 간단한 방법을 원한다면 좋은 선택입니다.
- ICECoder:다른 것들과 비슷한 기능을 갖춘 온라인 놀이터이지만 주요 장점은 역시 브라우저에서 실행되는 다운로드 가능한 프로그램으로, 기본적으로 오프라인 브라우저 기반 IDE입니다.
- Plunker:다른 플레이그라운드보다 파일을 좀 더 많이 가지고 놀 수 있고 우수한 데스크톱/GitHub 통합 기능을 갖춘 프런트 엔드 도구입니다.
- Scrimba:좋습니다. 이 사이트는 엄밀히 말하면 코드 놀이터가 아닙니다. 혁신적인 비디오/코드 편집기 조합을 통해 학습 환경과 놀이터를 동시에 제공하는 사이트입니다. 학습자가 찾아볼 가치가 있습니다!
- Web Maker:오프라인 기능과 CodePen 통합까지 갖춘 훌륭한 프론트엔드 플레이그라운드!
- Dabblet:아주 기본적인 HTML/CSS/JS 플레이그라운드지만 멋진 디자인입니다.
- PlayCode:훌륭하고 기본적인 HTML/CSS/JS 플레이그라운드. 가장 큰 단점은 프로 요금제로 업그레이드하라는 성가신 메시지가 60초마다 표시된다는 점입니다.
너무 많아요! 어느 것을 선택할까요?
네, 백만 개의 웹 코드 플레이그라운드가 있지만, 둘 중 하나를 결정하고 실제로 무언가를 만드는 데 보낼 수 있는 시간을 낭비하지 마세요! 온라인 코딩 환경에서 원하는 것이 무엇인지 어느 정도 알고 있다면 해당 기능이 있는 두세 개의 앱으로 범위를 좁히고 각 앱을 조금씩 사용해 보고 어떤 앱을 찾을 수 있는지 확인하세요. 를 향해 중력. 그들 중 상당수는 어쨌든 GitHub 통합 및/또는 내보내기/가져오기 기능을 가지고 있으므로 영원히 잘못된 결정에 갇혀 있는 것은 아닙니다.
저는 개인적으로 단순한 정적 페이지와 디자인 실험에 CodePen을 사용하고 더 큰 프로젝트에 Glitch를 사용하지만 CodeSandbox의 VS Code 디자인과 Repl.it의 콘솔은 높이 평가합니다. 내가 좋아하는 놀이터를 놓쳤거나 멋진 기능에 대해 언급하지 않았다면 다른 사람들이 찾을 수 있도록 아래에 댓글을 남겨주세요!