프론트엔드 개발환경 구축 - IDE/편집기 조사 및 장단점 비교

개발환경 구축이란?

개발에 필요한 컴파일러, IDE, 라이브러리, 프레임워크 등을 컴퓨터에 세팅하는 것을 의미합니다. 저는 크게 다음 3가지로 나누어서 조사한 뒤 직접 비교해보고, 최종적으로 환경 구축을 진행할 계획입니다.

• IDE(통합개발환경) 또는 편집기
  WebStorm, VScode, Sublime Text, Atom 등
• 프레임워크
  React, Angular, Vue.js 등
• 그 외
  Babel, Webpack 등

 

IDE(통합개발환경) 또는 편집기

먼저, 조사를 시작하면서 IDE와 편집기가 서로 구분된다는 것을 알게 되었습니다. 

IDE	대규모에 적합 / 디버깅 가능	VScode, Atom, IntelliJ, WebStorm
편집기	소규모에 적합 / 가볍지만 다양한 확장기능 보유	VScode, Atom, Sublime Text

IDE는 통합 개발 환경으로, 디버깅/컴파일/배포 등 개발에 관련된 모든 작업을 처리할 수 있도록 도와줍니다. 그에 비해 편집기는 말 그대로 단순한 text 편집 기능을 제공하며, 대신 다양한 확장 기능(패키지, 익스텐션)을 보유하고 있습니다.

VScode와 Atom의 경우 편집기에 해당하지만, 확장 기능을 통해 IDE의 기능을 일부 사용할 수도 있습니다.

WebStorm의 경우 유료이고, IntelliJ는 무료 버전인 IntelliJ community을 제공하지만 웹 개발 도구가 지원되지 않기 때문에, 프론트엔드 개발이 주목적이라고 했을 때는 적합하지 않다고 느꼈습니다. 때문에 위 두 가지를 제외하고, VScode, Sublime Text, Atom 총 3가지를 직접 설치해보고 사용해보았습니다.

 

 

| VScode

평소 제가 사용하는 편집기이며, 화면은 다음과 같습니다.

VScode의 가장 큰 장점은 다양한 확장 프로그램이었습니다. 확장 프로그램들은 VScode 내부의 마켓플레이스에서 쉽게 찾아보고 설치할 수 있으며, Debugger for Chrome과 같은 확장 프로그램을 설치하면 IDE의 디버깅과 같은 기능도 사용할 수 있습니다.

 

 

| Sublime Text

기본 화면

단순하면서도 개인적으로 꼭 필요하다고 생각하는 기능인 자동완성이나 화면 분할, 구문 강조, 각종 단축키 등은 기본적으로 제공되었습니다. 하지만 화면 분할의 경우 Drag & Drop방식이 아닌 단축키를 이용해야 한다는 점이 조금 아쉬웠습니다. 무엇보다도, Git을 많이 활용하는 만큼 터미널이 기본으로 제공되지 않는 점이 가장 큰 단점이었습니다.

 

아래 과정을 따라 package를 설치하면 터미널을 이용할 수 있으나, 터미널 창을 따로 오픈해야 하는 점 때문에 여전히 VScode와 비교했을 때는 아쉽습니다.

package 설치 과정

ctrl + shift + T로 터미널을 열 수 있다

 

 

| Atom

Atom 메인화면

Atom의 가장 큰 장점은 Git과의 연동이었습니다. 마찬가지로 기본적인 구문 강조, 자동완성, Drag & Drop이 가능한 화면 분할을 제공하고, 테마 설정도 가능합니다. 또한, package 설치를 통해 Terminal을 이용할 수 있으며, VScode와 유사하게 Atom 내에서 Package를 검색하고 설치할 수 있어 편리했습니다.

 

 

Terminal Packages 설치

 

Atom의 경우 VScode와 좀 더 비교할 필요가 있을 것같아, 좀 더 제가 작업하던 VScode 환경과 비슷하도록 세팅에 들어갔습니다. Beautify, Auto Close Html, Linter, Emmet 등의 package를 추가하고, 테마와 폰트 설정까지 마쳤습니다. 특이한 점은, VScode와 다르게 Atom은 package와 theme을 구분한다는 것이었습니다.

 

 

또한, 여러 package와 theme 설정을 진행하면서, VScode에 비해 자유도가 높다고 느꼈습니다. 애니메이션 설정, 터미널의 syntax color설정까지 가능합니다. Atom 메인 페이지에는 아래와 같은 문구가 적혀있는데, 이런 슬로건에 걸맞게 사용자가 설정할 수 있는 범위가 넓었습니다.

Atom 메인페이지 : 해킹 가능한 text editor

Atom 설정 후

 

 

 

최종 선정 : VScode

제가 간단히 사용해보며 느낀 장단점은 다음과 같습니다.

	VScode	Sublime Text	Atom
장점	확장프로그램을 통해 디버깅과 같은 IDE 기능 일부 이용 가능	핵심 기능에 충실하고 빠른 실행 속도	Git과의 연동, 커스텀 자유도가 높음
단점	Atom에 비해 커스텀 자유도가 낮음. package와 theme이 구분되지 않음.	부가적인 기능이 부족	느린 속도, 테마가 다양하지 않음, 매번 프로젝트를 다시 오픈해야 함

최종적으로 VScode와 Atom 사이에서 고민했으나, 결국 본래 사용하고 있던 VScode를 선택했습니다.

 

Atom의 경우 굉장히 자유롭게 커스텀할 수 있었지만, 오히려 그 점 때문에 설정하는데 어려움이 있었습니다. 예를 들어, 밝은 테마를 선택했으나 syntax color는 따로 설정하지 않았기 때문에 흰 바탕에 흰 글씨가 나오는 등의 문제도 있었습니다.

 

패키지를 설치하는 과정에서도 로딩이 오래 걸리거나 하는 부수적인 문제가 있었고, Atom을 실행할 때마다 프로젝트 폴더를 다시 오픈해야 하는 번거로움이 있었습니다. Git과의 연동도, VScode에서 유사한 확장 기능을 많이 제공하기 때문에 특별히 유용하지는 않았습니다. 

 

때문에 이번 프로젝트에서는 최종적으로 VScode를 선정하였고, 이후로는 프레임워크에 대해 조사하고 장단점을 비교해볼 예정입니다.