8 웹 개발을 배우기 위한 코드 플레이그라운드

게시 됨: 2021-07-24

초보 프로그래머든 전문 개발자든 코드 플레이그라운드는 다른 사람들과 공유하고 배울 때 유용합니다.

코드 플레이그라운드는 다른 사람들과 코드를 작성, 컴파일(또는 실행)하고 공유할 수 있는 온라인 서비스입니다. 그들은 또한 다른 사람의 코드를 포크하고 가지고 놀 수 있는 능력을 제공합니다.

웹 개발을 배우고 HTML 또는 CSS 기술을 연습하는 경우 코드 플레이그라운드를 사용하여 온라인에서 간단한 웹 페이지를 만드는 것이 유용할 것입니다. 또한 해당 플랫폼의 트렌드 프로젝트를 활용하고 학습 리소스로 사용할 수 있습니다.

반면에 전문 웹 개발자이고 작업을 과시하고 싶다면 코드 놀이터가 완벽한 장소입니다.

가장 좋은 점은 대부분의 코드 플레이그라운드에 프리 티어가 있으며 코드 결과를 웹사이트에 포함할 수 있다는 것입니다.

그 중 일부를 검토해 보겠습니다!

JSFiddle

JSFiddle은 HTML, CSS 및 Javascript 스니펫을 테스트할 수 있는 코드 플레이그라운드입니다. 2009년에 개념 증명 앱에서 나왔고 지금은 가장 큰 코드 놀이터 중 하나입니다.

무료 계정을 만들고 모든 바이올린을 저장하고 다른 사람의 스니펫을 분기할 수도 있습니다.

JSFiddle의 또 다른 인상적인 점은 협업 세션입니다. 바이올린에서 코딩하는 동안 오디오 채팅 세션을 만들 수 있습니다.

코드 조각의 결과와 소스 코드를 포함하려는 블로거라면 JSFiddle이 훌륭한 선택이 될 것입니다.

물론 작성 시점에 이 코드 플레이그라운드는 Python, Go 또는 PHP와 같은 다른 인기 있는 프로그래밍 언어를 지원하지 않으므로 전체 스택 앱을 빌드할 것으로 기대할 수 없습니다.

특징

  • 무료 사용 플랫폼
  • 최소한의 인터페이스
  • HTML, CSS 및 JS 지원
  • 플랫폼에서 모든 공개 바이올린 스니펫을 분기합니다.
  • 사이트에서 직접 음성 채팅을 사용하여 다른 사람들과 공동 작업
  • 좋은 문서
대부분의 이러한 플랫폼과 마찬가지로 이러한 플랫폼을 가동 및 실행하는 데 도움이 되는 "추가" 계획이 있습니다. 의존하는 경우 백업을 고려해야 합니다.

코드펜

Codepen은 단순한 코드 놀이터가 아니라 기술을 향상하고 가능한 한 최고의 작업을 공유하고자 하는 개발자 커뮤니티입니다.

작성자 @Yakudoo

600만 명이 넘는 사용자가 있는 프론트엔드 개발에 가장 많이 사용되는 온라인 코드 편집기 중 하나입니다. 프론트 엔드 학습을 시작하는 경우 학습 여정을 계속할 아이디어와 동기를 찾는 것이 이상적입니다.

개발 경험은 어떻습니까?

Codepen에는 HTML, CSS 및 JS로 코딩할 수 있는 세 개의 조정 가능한 패널이 있는 사용자 친화적인 편집기가 있습니다. Codepen에는 Typescript 및 Sass와 같은 JavaScript 및 CSS 전처리기에 대한 기본 제공 지원이 포함되어 있습니다. 또한 npm 패키지를 사용하는 경우 설정 패널에서 설치할 수 있습니다.

특징

  • 선택적 프로 플랜
  • 사용하기 쉬운 코드 편집기
  • 훌륭한 커뮤니티
  • 대부분의 코드펜은 오픈 소스입니다.
  • 프론트엔드 개발을 연습하기에 이상적인 장소

코드샌드박스

웹사이트 프로토타이핑은 올바른 설정이 없으면 어려운 작업이 될 수 있습니다. CodeSandbox를 사용하는 것은 웹사이트를 빠르게 구축하는 것이 우선 순위일 때 쉬운 결정이 되어야 합니다.

이름에서 알 수 있듯이 CodeSandbox는 프런트엔드 개발을 위한 샌드박스 환경을 제공합니다.

코드 샌드박스

GitHub 통합 및 디버깅 도구에서 사용자 지정 가능한 VS 코드와 같은 환경에 이르기까지 이 코드 플레이그라운드는 몇 초 만에 코딩을 시작할 수 있는 모든 것을 제공합니다.

주요 목적이 공동 작업인 경우 샌드박스 링크를 공유하기만 하면 실시간 페어 프로그래밍을 할 수 있습니다.

예를 들어 엄선된 최고의 샌드박스 목록을 탐색할 수 있습니다.

CodeSandbox의 모든 특성을 나열하는 데 시간이 부족할 수 있으므로 주요 기능에 대해 언급하겠습니다.

특징

  • GitHub 통합
  • 인기 있는 VScode 편집기를 지원하는 Monaco 편집기 기반
  • 협업 퍼스트 플랫폼
  • Vercel 또는 Netlify에 배포
  • 디버깅 도구
  • 바로 사용할 수 있는 테스트 프레임워크
  • npm 지원

솔로런

인기 있는 코딩 학습 플랫폼인 Sololearn에는 웹 개발을 위한 자체 코드 놀이터가 있습니다.

솔직히 말해서 이 기사를 통해 본 다른 온라인 편집기처럼 완전한 기능을 갖춘 IDE는 아니지만 코드를 작성하고 실행할 수 있는 방해 없는 환경을 제공합니다.

프로그래밍을 막 시작하는 경우 이것으로 충분합니다.

Sololearn의 또 다른 멋진 점은 훌륭한 커뮤니티와 여러 프로그래밍 언어에 대한 지원입니다. 이는 다른 기술을 가지고 놀고 싶을 때 매우 좋습니다.

솔로런 코드 에디터

특징

  • Sololearn 계정으로 무료 사용
  • 간단한 온라인 코드 편집기
  • 코드를 공유하는 대규모 커뮤니티
  • 다국어 지원
  • Sololearn 과정을 통한 훌륭한 생태계

요약하자면, Sololearn의 코드 플레이그라운드는 배터리가 포함되어 있지 않지만 원래 의도한 대로 작동하며 이미 수백만 명의 솔로 학습자 중 일부인 경우 시도해야 합니다.

코드플라이

Codeply의 가장 좋은 점은 즉시 사용 가능한 여러 프레임워크 및 라이브러리와 반응형 디자인 지향 코드 편집기를 지원한다는 것입니다.

React, Vue 또는 Angular와 같은 새로운 프레임워크로 시작하는 경우 Codeply는 완전한 시작 템플릿 세트와 40,000명 이상의 개발자로 구성된 훌륭한 커뮤니티 덕분에 시작하기에 좋은 곳입니다.

특징

  • 무료 사용 플랫폼
  • 간단하면서도 직관적인 문서
  • 일회성 요금 프로 플랜
  • 50개 이상의 라이브러리 포함
  • 다양한 화면 해상도에서 웹을 테스트하세요.

레플리트

Replit은 아마도 모든 개발자에게 가장 적합한 온라인 IDE일 것입니다. 여기에는 간단한 홈 페이지에서 최신 JS 라이브러리를 사용하는 복잡한 웹 앱에 이르기까지 말 그대로 빌드하는 데 필요한 모든 것이 포함됩니다.

리플렛 홈페이지

Replit을 사용하면 50개 이상의 언어로 코딩하고, 동료와 동기적으로 앱을 작성하고, 프로그램을 테스트하고, GitHub와 통합하고, 가장 큰 개발자 커뮤니티 중 하나에 액세스할 수 있습니다.

말 그대로 Replit의 모든 기능을 언급하는 문서가 부족할 수 있으므로 주요 기능으로 바로 이동하겠습니다.

특징

  • 무료 스타터 팩 또는 5$/월 해커 플랜
  • 멀티플레이어 모드(라이브 페어 프로그래밍)
  • 큰 커뮤니티
  • 다양한 언어 지원
  • 에디터 커스터마이징
  • 실행 버튼: 사용자 지정 가능한 작업으로 프로젝트 실행
  • 비밀 저장소
  • 호스팅 코드

스택블리츠

VS 코드 없이는 살 수 없다면 StackBlitz가 적합한 옵션입니다. CodeSandbox와 마찬가지로 이 인기 있는 코드 편집기를 구동하는 Monaco 편집기를 기반으로 합니다.

GitHub 계정으로 로그인하면 짜잔! 친숙한 환경에 액세스할 수 있습니다.

코드 편집기 경험을 제외하고는 꽤 견고한 놀이터입니다. React, Vue, Angular, Svelte 및 Ionic과 같은 프론트엔드 프레임워크 및 라이브러리에 즉시 사용 가능한 템플릿을 사용할 수 있습니다.

그러나 이 도구의 주요 특징은 Node.js, Next.js 및 GraphQL과 같은 백엔드 프레임워크를 사용할 수 있다는 것입니다.

특징

  • 무료 "Cadet" 플랜
  • 브라우저 내부의 VS 코드 경험. 여기에는 Intellisense, 프로젝트 검색 등이 포함됩니다.
  • Fluid(정말 유동적인) 코딩 경험
  • 오프라인 코드 편집기 (헤이! 하루나 이틀 연결을 끊으면 유용할 수 있음)
  • 호스팅된 앱 URL: 간편한 라이브 공유

글리치

마지막으로 Glitch는 웹 앱을 더 쉽게 만들 수 있는 협업 프로그래밍 환경입니다.

코딩하기에 가장 즐거운 인터페이스 중 하나입니다! 살펴보기:

궁금하시다면, 네, 다크 모드가 있습니다.

아름다운 인터페이스 외에도 Glitch는 유용성, 라이브 페어 프로그래밍 및 친근한 커뮤니티로 인해 수백만 명이 사용하고 있습니다.

HTML, CSS 및 JS뿐만 아니라 Node.js(백엔드), React 또는 Eleventy(글리치 페이지로 이동하기 전에는 존재하는지 몰랐음)를 사용하여 모든 종류의 전체 스택 앱을 만들 수 있습니다.

특징

  • 업그레이드 옵션이 있는 무료 요금제
  • 브라우저에서 전체 스택 앱 개발
  • 라이브 페어 프로그래밍
  • 즐거운 인터페이스
  • 스타터 앱
  • 다른 사람의 공개 앱 리믹스(또는 포크)

결론

요즘에는 위에서 본 것과 같은 코드 플레이그라운드를 사용하여 모든 웹 앱을 완전히 빌드할 수 있습니다. 더 이상 컴퓨터에 무거운 IDE를 다운로드할 필요가 없으며 웹 브라우저를 종료하지 않고도 빌드, 디버그, 테스트 및 배포할 수 있습니다.

이러한 도구의 사용으로 전환하는 것이 확실하지 않은 경우 10가지 최고의 코드 편집기(컴퓨터에 설치해야 하는 것)를 확인하십시오.