웹 개발자를 위한 최고의 브라우저 기반 온라인 코드 편집기 7선
게시 됨: 2020-02-23웹 개발자라면 워크스테이션에 로컬로 개발 환경이 설정되어 있을 가능성이 큽니다. 좋아하는 코드 편집기를 설치하고 최고의 패키지를 추가하고 확장을 로드했으며 전체 IDE가 필요한 대로 정확하게 작동합니다. 그러나 당신이 당신의 정상적인 기계에 있지 않다면 어떻게 될까요? 여행 중이거나 집을 잃었거나 노트북 없이 집에서 일하고 있다면 어떻게 하시겠습니까? 그럼? 그럴 때 어떤 온라인 코드 편집기가 있는지 알면 하루를 정말 절약할 수 있습니다. 그리고 그 이상으로, 일상적인 코딩 루틴을 향상시키는 방법으로 뒷주머니에 보관할 수도 있습니다.
YouTube 채널 구독
왜 온라인 코드 편집기인가?
온라인 코드 편집기 사용을 고려해야 하는 몇 가지 이유가 있습니다. 그러나 진실은 온라인 IDE를 사용하는 것이 (대부분) 로컬에 설치된 IDE를 대체하지 않는다는 것입니다. 많은 온라인 환경이 놀라울 정도로 강력하고 대부분의 작업을 처리할 수 있지만 데스크탑 설치 만큼 강력하고 능력이 있지는 않습니다. 그러나 사용을 고려해야 할 여러 가지 이유가 있습니다.
- 여행 중이며 어디에서나 코드에 액세스해야 합니다.
- 코드의 스니펫과 대화형 섹션을 공유해야 합니다.
- 시간은 제한되어 있으며 설정이 거의 없는 솔루션이 필요합니다.
- 예산이 제한되어 있습니다. 온라인 코드 편집기는 사용자가 액세스할 수 있는 워크스테이션보다 더 강력할 수 있습니다.
- 팀은 실시간으로 협업해야 합니다. 많은 온라인 IDE에는 설정 없이 작동하는 공동 작업 도구가 내장되어 있습니다.
온라인 IDE를 사용하고 싶거나 사용해야 하는 이유에 관계없이 각각 장단점이 있고 웹 개발자를 위해 다양한 기능을 제공하는 수많은 옵션 중에서 선택할 수 있습니다.
1. 플레이코드
PlayCode는 훌륭한 다목적 온라인 코드 편집기입니다. 이를 통해 Sublime Text 또는 VS Code를 사용하여 일반적인 디렉토리 구조에서 여러 파일을 열 수 있는 것처럼 단일 프로젝트에서 함께 실행되는 여러 파일을 열 수 있습니다. PlayCode에는 사용자를 위해 미리 만들어진 템플릿과 브라우저에서 바로 실시간 결과 및 내장 콘솔 디버깅이 있습니다. 사용자는 빠른 수정 등을 위해 로그인하지 않고도 편집하고 작업할 수 있지만 로그인하여 작업을 저장하고 여러 컴퓨터에서 PlayCode를 사용할 수도 있습니다.
추가 정보
2. JSFiddle
JSFiddle은 PlayCode와 같은 다양한 방식으로 작동하는 또 다른 최고의 온라인 코드 편집기입니다. JavaScript 코더를 위해 특별히 설계된 JSFiddle은 반드시 전체 프로젝트 작업을 위한 것은 아니지만 편집기 자체 상단에 있는 정보 표시줄에 따르면 "문서용 데모, Github 문제에 대한 버그 보고, 스택 오버플로, 라이브 코드 협업, 코드 스니펫 호스팅' 또는 코드를 가지고 놀 수 있는 샌드박스 역할을 합니다.
추가 정보
3. 코드펜
CodePen은 가능성이 온라인 코드 편집기의 온라인 코드 편집기로 간주됩니다. 협업, 실험 및 공유를 위한 도구를 제공할 뿐만 아니라 실시간 결과를 얻을 수 있으며 다른 작성자가 게시한 스니펫 저장소 및 데이터베이스를 검색할 수 있는 기능을 제공하므로 실험하고 작업에서 배울 수도 있습니다. . 또한 일부 사람들이 새롭고 재미있는 방식으로 코드로 무엇을 하는지 볼 수 있는 재미있는 장소이기도 합니다. 또한 CodePen 스니펫은 Google에서 색인을 생성하며 스택 오버플로로 이동하기 전에 솔루션을 찾고 있을 때 여러 번 여기에서 끝납니다. 때로는 사람들이 실시간 솔루션을 작성하고 공유하는 곳이기 때문에 나중에 여기에 올 수도 있습니다.
추가 정보
4. 스택블리츠
StackBlitz는 좋은 물건입니다. 우리는 이 앱이 개발자에게 제공하는 것에 깊은 인상을 받았습니다. 이 앱에는 실행 시작과 함께 프로젝트를 시작할 수 있는 도구가 가득하기 때문입니다. 한 번의 클릭으로. 위의 이미지를 보면 파일과 종속성, 공유 가능한 URL까지 모두 Start a New Workspace – React(JavaScript) 버튼 하나로 생성되었습니다. GitHub 계정을 저장, 공유 및 연결할 수 있는 기능이 있는 StackBlitz는 살펴볼 가치가 있습니다. 스니펫 공유 서비스나 코딩 샌드박스가 아닌 StackBlitz는 온라인 코드 편집기를 선호하는 사람들을 위한 견고한 IDE입니다.
또한 VS Code를 기반으로 한다는 것은 말할 필요도 없습니다 . 따라서 기본적으로 브라우저에서 가장 널리 사용되는 IDE 및 코드 편집기를 실행하고 있으며 각 프로젝트에는 고유한 서버 공간이 있습니다. 원하는 경우 업그레이드할 수 있지만 무료 버전도 잘 작동합니다(로드 시 약간 느리지만 무료 계획에서는 예상할 수 있음). 읽어보면 모든 온라인 코드 편집기 중에서 이것이 길고 열심히 살펴볼 가치가 있다는 데 동의할 것입니다.
추가 정보
5. AWS 클라우드9
이 c9.io에 오픈 소스 프로젝트 때 전 Cloud9 년의 얼리 어답터로서, 우리는 높은이 제품을 추천합니다. 실제로 위의 StackBlitz와 매우 유사한 경험을 제공합니다. Amazon이 C9를 인수했을 때 AWS 서비스 제품군의 일부로 C9를 클라우드에 연결했습니다. AWS Cloud9은 확실히 견고하고 완전한 기능을 갖춘 온라인 IDE이며 웹 사이트의 정보 안내 문구는 살펴볼 가치가 있는 이유를 정확하게 분석하는 데 탁월합니다.
AWS Cloud9은 브라우저만으로 코드를 작성, 실행 및 디버그할 수 있는 클라우드 기반 통합 개발 환경(IDE)입니다. 여기에는 코드 편집기, 디버거 및 터미널이 포함됩니다. Cloud9에는 JavaScript, Python, PHP 등을 포함하여 널리 사용되는 프로그래밍 언어를 위한 필수 도구가 사전 패키징되어 있으므로 새 프로젝트를 시작하기 위해 파일을 설치하거나 개발 머신을 구성할 필요가 없습니다. Cloud9 IDE는 클라우드 기반이므로 사무실, 집 또는 인터넷에 연결된 컴퓨터를 사용하여 어디에서나 프로젝트 작업을 수행할 수 있습니다. Cloud9는 또한 서버리스 애플리케이션 개발을 위한 원활한 환경을 제공하므로 리소스를 쉽게 정의하고 디버그하고 서버리스 애플리케이션의 로컬 실행과 원격 실행 간에 전환할 수 있습니다. Cloud9을 사용하면 개발 환경을 팀과 빠르게 공유할 수 있으므로 프로그램을 페어링하고 서로의 입력을 실시간으로 추적할 수 있습니다.
추가 정보
6. JS빈
PasteBin을 보거나 사용한 적이 있다면 JSBin이 익숙할 것입니다. 구조, 스타일, 유틸리티 면에서 비슷하지만 JSBin은 주로 코드를 공유하는 사이트입니다. 로그인 상태를 유지하려면 여기에 계정을 등록하는 것이 가장 좋습니다. 그 이유는 JSBin이 작업 중인 모든 코드의 진행 상황을 자동으로 저장하기 때문입니다. 단순히 스니펫이 수행하는 작업을 확인하기 위해 실험을 하는 경우에도 작업을 잃지 않을 것입니다. JSBin은 간단하고 의미 없는 편집기입니다. 그리고 그것이 당신에게 필요한 것이라면, 당신은 정말로 더 나아질 수 없습니다.
추가 정보
7. 워드프레스 테마 편집기
WordPress는 온라인 코드 편집기와 관련하여 가장 먼저 생각하는 것이 아닐 수 있습니다. 그러나 확실히 고려해야 할 사항입니다. WordPress 4.9에서 WP Core는 CodeMirror를 포함하도록 업데이트되었습니다. 코드 영역 내에서 이루어진 모든 변경 사항에 대한 구문 강조 표시 및 오류 경고는 이제 WordPress의 기준이 됩니다. 기본 위치는 모양 – 테마 편집기 영역 내에 있지만 위젯화된 영역(예: 사용자 정의 HTML 위젯) 또는 사용자 정의 CSS 탭의 테마 사용자 정의 프로그램에도 나타납니다. 이것이 완전한 IDE는 아니지만 FTP 및 다양한 파일 관리 시스템을 다루지 않고 오류를 확인하고 코드 조각을 업데이트하는 방법으로 WP CodeMirror 편집기를 절대적으로 추천할 수 있습니다.
추가 정보
온라인 코드 편집기로 마무리
대부분의 온라인 코드 편집기는 로컬 개발 환경을 대체하지 않습니다. 그건 그들의 일이 아닙니다. 주로. 그러나 그들이 할 수 있는 일은 코드를 편집하고, 스니펫을 공유하고, 백업을 만들고, 안전하고 안전한 위치에서 실시간으로 새로운 기능을 실험할 수 있는 견고하고 간단한 방법을 제공하는 것입니다. StackBlitz와 같은 전체 IDE, JSBin과 같은 스니펫 공유 서비스, WordPress CodeMirror 통합과 같은 고품질 온라인 코드 편집기 사이에서 온라인 편집을 한 번도 사용해 본 적이 없다면 시작하기에 이보다 더 좋은 시기는 없습니다.
가장 좋아하는 온라인 코드 편집기는 무엇입니까?
Fernandodiass의 기사 특집 이미지 / Shutterstock.com