12~2년 전에는 웹사이트가 손과 일반 텍스트 편집기를 이용해 만들어졌습니다. 자신만의 HTML 태그를 작성하고, CSS의 인라인 스타일을 사용하는 약간의 마법을 사용하고, 재미있는 애니메이션으로 맛을 낸 다음 사이트를 사용할 준비가 되었습니다. 요즘 웹사이트나 애플리케이션을 만들고 개발하는 것은 구조화된 프로세스입니다. 웹사이트 빌더를 이용하면 단 몇 분 만에 웹사이트를 만들 수도 있고, 몇 달 동안 고민할 수도 있습니다. 웹 개발이 변화함에 따라 코딩을 간소화하기 위한 새로운 프레임워크, 플러그인 및 애플리케이션이 등장하고 있습니다. 추가 도구는 작업 환경을 단순화하고 생산성을 높입니다. 우리는 협업 오픈 소스 프로젝트 관리 및 jQuery와 같은 라이브러리를 위해 버전 제어 시스템을 사용합니다. 웹사이트를 만드는 과정에서 개발환경은 매우 중요한 역할을 합니다. 이상적인 워드 프로세서를 선택하는 것은 경험적 연구의 적용이 필요한 도전적이지만 실행 가능한 작업이 될 수 있습니다. 도구, 애플리케이션, 플러그인의 바다에서 길을 잃지 않는 방법은 무엇입니까? 일상 업무에는 어떤 텍스트 편집기를 선택해야 하고, 애완동물 프로젝트에는 어떤 텍스트 편집기를 선택해야 합니까? 우리는 초보 프론트엔드 개발자를 위한 가장 인기 있는 도구의 짧은 목록을 정리했습니다. 기사에서 당신이 가장 좋아하는 편집자를 언급하는 것을 잊었나요? 댓글을 남겨주세요!
메모장++
출시: 2003년 11월 24일. 구문 강조 및 탭이 있는 가장 간단한 텍스트 편집기입니다. 다양한 프로그래밍 언어와 기술을 지원합니다. 웹 개발의 험난한 길을 막 밟은 초보자에게 적합합니다.
가능성:
북마크 생성;
생성된 파일의 자동 복사 및 저장;
표준 텍스트 인코딩 지원 및 변환;
사용자는 구문 강조 규칙을 독립적으로 설정할 수 있습니다.
다양한 유용한 플러그인 설치;
단축키 설정 및 재정의
철자 검사 및 텍스트 암호화;
테트리스 게임하기(코딩에 지쳤을 경우를 대비해)
대용량 데이터를 관리할 수 있습니다.
이 편집기의 추가 "기능"은 어둠의 아버지인 다스 베이더와 "증오 폴더"의 아버지인 빌 게이츠의 인용문을 표시하는 형태의 "이스터 에그"로 간주됩니다.
릴리스: 2014년 11월 4일. Adobe에는 프런트엔드 개발자와 디자이너가 사랑하는 멋진 제품이 많이 있습니다. 브래킷도 그 중 하나입니다. 이 무료 오픈 소스 크로스 플랫폼 편집기는 JavaScript, HTML5 및 CSS3를 기반으로 하므로 작업이 특히 이들에 중점을 두고 있습니다. JavaScript에 대한 기본적인 이해가 있다면 이 편집기로 작업을 시작해야 합니다. 확장에 필요한 모든 도구를 제공하는 사람이 바로 그 사람이기 때문입니다. 편집기에는 약간의 개선이 필요하지만 전반적으로 상당히 활발하게 개발되고 있으며 개발자들 사이에서 인기가 높습니다. 또한 각 사용자는 자신만의 변경 작업을 수행하고 추가 확장 기능을 만들 수 있습니다.
가능성:
JS, CSS, HTML 파일 편집 팁;
브라우저에서 실시간으로 코드 보기 지원(실시간 미리 보기)
FTP 서버와 동기화;
CSS를 더 적은 수의 파일로 지원 및 자동 컴파일;
텍스트 작업 시 사용할 수 있는 글꼴 모음(추가 가능)을 제공합니다.
버전 관리 시스템 – Git 작업.
2017의 새 버전에는 기록 검색, 다양한 인코딩으로 파일 전송 및 수신, 단축키를 사용하여 편집 기록 탐색, 확장 기능 활성화 및 비활성화, Linux용 기본 메뉴 기능이 도입되었습니다.
구문 강조: + 자동 태그 감지: + OS 호환성: macOS, Windows 및 Linux. 무료 버전: 예. 링크: http://brackets.io
숭고한
릴리스: 2008년 1월 18일. 크로스 플랫폼 코드 편집기 및 통합 개발 환경(IDE). 우리는 속도와 사용 편의성 때문에 이 편집기를 좋아했지만 Coda 와 TextMate는 매우 불편한 업데이트로 인해 주요 사용자 기반을 실망시켰습니다.
가능성:
파일, 기호 및 특정 코드 섹션을 통한 빠른 탐색(이것이 많은 사용자에게 사랑받는 이유입니다)
구문 검사 기능은 문자를 입력하는 즉시 작동합니다.
매크로를 사용한 최근 작업의 최적화 및 반복;
코드의 자동 저장으로 손실을 방지합니다.
다양한 시각적 테마 및 프로그래밍 언어 지원;
자주 사용하는 키워드 및 코드 조각을 저장합니다.
Python으로 미리 만들어진 플러그인 세트;
구문 강조: + 자동 태그 감지: + OS 호환성: Windows, Mac OS, GNU/Linux. 무료 버전: 가능(기능 제한 없음). 그러나 애플리케이션을 검토한 후 라이센스를 구매해야 합니다. 링크: http://www.sublimetext.com/3
웹스톰
출시: 2015. 이것은 일반적인 텍스트 편집기가 아니라 JavaScript, CSS 및 HTML을 위한 통합 개발 환경입니다. 저자는 JavaRush 학생들에게 사랑받는 IntelliJ IDEA 환경을 만든 회사인 JetBrains입니다. WebStorm은 가장 똑똑하고 가장 인기 있는 편집기 중 하나입니다. 주요 프레임워크인 AngularJS, React 및 Meteor를 지원하며 Node.js에서 애플리케이션을 만드는 데 사용됩니다. WebStorm은 상당히 복잡한 환경이지만 동시에 많은 확장 기능과 기능이 필요한 사용자에게 적합합니다.
가능성:
버전 제어 시스템 Git, GitHub, Mercurial과의 통합 덕분에 다양한 규모의 프로젝트에서 효과적으로 작동합니다. 이를 통해 IDE 내에서 바로 파일을 "커밋"하고, 변경 사항을 검토하고, 충돌을 해결할 수 있습니다.
LiveEdit - 페이지를 다시 로드하지 않고도 예비 변경 사항을 표시합니다(Google Chrome 브라우저에서 작동).
편집 중 코드 분석;
Javascript 및 Node.js 애플리케이션을 위한 코드 리팩터링 및 디버깅
ECMAScript, TypeScript, CoffeeScript 및 Dart 언어 지원;
Node.js Express 템플릿을 사용하여 애플리케이션 만들기
Mocha, Karma 및 Protractor와 같은 프레임워크를 사용하여 실행하고 디버깅합니다. 편집기 자체에서 테스트하거나 텍스트로 빠르게 돌아갈 수 있는 편리한 트리 메뉴에서 테스트할 수 있습니다.
LESS, Sass, SCSS, Stylus 전처리기가 완벽하게 지원됩니다.
터미널 창에서 빠른 검색;
여러 Javascript 라이브러리가 포함된 프로젝트 구조화
JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo 및 Bindows 지원;
초기 지원 및 Angular 2 작업.
구문 강조: + 자동 태그 감지: + OS 호환성: Windows, Mac OS, GNU/Linux. 무료 버전: 30일 동안 평가판을 사용할 수 있으며 이후에는 라이센스를 구입해야 합니다. 링크: http://www.jetbrains.com/webstorm/
원자
출시: 2014년 2월 26일. 모두가 좋아하는 Github 의 작성자가 만든 무료 오픈 소스 소프트웨어입니다 . 50개의 모듈로 구축되었으며 Node JS, CoffeeScript, CSS, HTML 및 C++로 작성되었습니다. 또한 자신만의 모듈을 개발하고 공개 액세스를 위해 저장소에 게시할 수도 있습니다. 이 개발 환경은 사용하기 매우 쉽고 추가 플러그인을 사용하면 작업 가능성을 확장하는 데 도움이 됩니다.
가능성:
구성을 위해 json 파일 대신 GUI를 사용합니다.
코드와 해당 조각의 미니맵 보기
프로젝트 및 파일별 빠른 검색;
편리한 사이드바 및 파일 트리;
Github에서 사용할 수 있는 수많은 확장 패키지;
Emmet, Autoprefixer, Livereload 지원;
사이드바 트리를 통해 파일 보기;
개별 사용자 기본 설정에 맞게 편집기를 사용자 정의하는 기능;
내장 파일 관리자가 있습니다.
플러그인이 포함된 제어 패키지를 설치할 필요가 없으며 그래픽 사용자 인터페이스를 사용하는 것으로 충분합니다.
Node.js로 작성된 플러그인 지원;
편집기에서 직접 PNG, JPEG 이미지를 미리 볼 수 있습니다.
Git 버전 제어 시스템에 대한 작업을 제공합니다.
문제는 많은 메모리가 필요하고 대용량 데이터 파일을 처리할 수 없다는 점일 수 있습니다. 구문 강조: + 자동 태그 감지: + OS 호환성: Windows 7, 8, Mac OS 10.8, Linux. 무료 버전: 예. 링크: https://atom.io
정력
출시: 1991년 11월 2일. 당신은 질문할 수도 있습니다: 이 최신 편집자 목록에서 예전 Vim이 무엇을 잊었나요? 실제로 Vim은 UNIX 운영 체제에서 사용할 수 있는 이전 vi를 기반으로 제작된 완전히 현대적이고 강력한 텍스트 편집기입니다. 그리고 그것은 끊임없이 진화하고 있습니다. 개발자는 거의 매년 새로운 플러그인과 추가 기능을 추가하여 변경합니다. 이런 일이 마지막으로 발생한 것은 2016년이었습니다. 확장 기능의 수와 속도는 정말 놀랍고 확인해 볼 가치가 있습니다. Vim은 다중 모드 편집기입니다. 명령, 삽입, 시각적 등 여러 작업을 동시에 수행할 수 있습니다. 그러나 초보 개발자에게는 상당히 복잡한 작업이라는 점을 고려해 볼 가치가 있습니다. 수년간의 경험을 가진 전문가는 그 기능 중 많은 부분을 인식하지 못합니다.
가능성:
표준 텍스트 인코딩 지원;
동시에 여러 파일을 작업할 수 있습니다.
파일 자동 인식 및 변환;
프로그래밍 언어 Perl, Tcl, Python 및 Ruby와의 호환성;
각 사용자의 요구에 맞는 편안한 설정을 만듭니다.
매크로 기록 및 구현;
시각적 모드는 많은 유용한 기능(예: 텍스트 블록 강조 표시)을 수행할 수 있습니다.
오른쪽에서 왼쪽으로 작성된 비표준 언어(예: 아랍어 또는 히브리어) 지원
검색어 및 명령 기록에 대한 편리한 설정;
마우스 없이 키보드 전체 사용을 지원합니다.
대용량 파일 작업 시 놀라운 성능을 보여줍니다.
구문 강조: + 자동 태그 감지: + OS 호환성: Windows, DOS, Linux, BSD 및 Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. 무료 버전: 예. 링크: https://vim.sourceforge.io/download.php
넷빈즈
출시: 1997년. Oracle이 후원하고 열정적인 개발자의 지원을 받는 무료 오픈 소스 IDE입니다. 편의성과 속도 향상을 위해 다양한 확장 기능을 지속적으로 개발, 보완하고 있습니다. 가능성:
창 및 저장 관리;
인터페이스 및 디자인 변경(메뉴 및 팝업 포함)
원격 서버와의 연결 설정;
코드 리팩토링 가능
추가 기능, 템플릿 및 코드 생성기가 있습니다.
많은 프로그래밍 언어를 지원합니다.
자동 구문 검사 및 수정;
사용자의 요구에 맞게 편집기를 사용자 정의합니다.
JavaScript 및 Node.JS 애플리케이션 실행 및 디버깅
PHP 프레임워크(Symfony, Zend 및 Yii) 지원.
연고에 날아가세요. 메모리를 많이 소모합니다. 구문 강조: + 자동 태그 감지: + OS 호환성: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris 및 Solaris. 무료 버전: 예. 오직 무료입니다. 링크: https://netbeans.org
하드코어 보너스: 메모장, 일명 "메모장"
출시: 1985년, Windows 1.0과 함께. 예, 그렇습니다. 모든 Windows 컴퓨터에 기본적으로 설치되는 동일한 메모장입니다. "여기서 고대가 잊혀진 것은 무엇입니까? 이것이 발전과 어떤 관련이 있습니까?"라고 당신은 묻습니다. 사실, 우리는 오늘날 누구도 클래식 메모장에서 심각한 내용을 만들 가능성이 거의 없다는 것을 알고 있습니다. 그러나 많은 초보 개발자가 지난 15~20년 동안 첫 번째 웹사이트를 "구성"하고 첫 번째 프로그램을 작성하는 데 시간을 보낸 곳은 바로 이 프로그램이었습니다.
우리가 의미하는 바는 배우고 싶다면 아무것도 막을 수 없다는 것입니다. 실제 개발자(및 개발자가 되고 싶은 사람)에게 메모장은 방해가 되지 않습니다. 기능: 검정색 텍스트만, 하드코어만 가능합니다.
최초의 메모장은 이렇게 생겼습니다.
연고 속의 파리: 연고 속의 파리 없음: "메모장"은 미니멀리즘으로 완벽합니다! 구문 강조: 아니요. 기억력을 훈련하세요! 자동 태그 감지: 와! 무료 버전: 메모장은 Windows만큼 무료입니다.
GO TO FULL VERSION