Vue를 공부하기 위해 VsCode를 사용하고 있었다. 하지만, WebStorm을 사용할 수 있는 기회가 생겼는데 그냥 지나갈 수 없었다. 그래서 저의 경우 WebStorm 설치 및 Vue를 위한 환경설정을 어떻게 했는지 공유하고자 글을 쓰게 되었습니다.
WebStorm 최신 버전(2019년 5월 20일 기준)을 설치하기 위해 먼저 Download 링크로 접속합니다.
설치 파일을 다운로드 받은 후 Webstorm-2019.1.2.exe 을 실행합니다.
실행하면 설치장소 및 설치옵션이 나오게 됩니다. 그 중 64bit으로 실행하기 위해 단축키를 만들고 따
Next를 누르면 이름을 선택하라고 나옵니다. 그냥 JetBrains 이라고 두죠.
설치가 끝나면 한번 실행해 볼까요?
저의 경우는 지우고 다시 설치하느라 이전 버전에 있던 setting 값을 선택하라는 옵션도 나옵니다. 하지만 저는 새로 셋팅을 할 것입니다. Do not import settings를 선택 후 OK를 누릅니다.
그럼 기본 UI가 나오는데 저는 어두운 것을 좋아하는 Dracula를 선택합니다.
그리고 Plugins 항목에서 총 5가지가 나옵니다. 약간 궁금해서 조금 깊게 들어가 보겠습니다.
여기서 Material Theme 는 무엇일까요? 우선 해당링크로 들어가 볼까요?
간단히 말해서 테마 UI 입니다. Vscode에서도 누군가가 공유한 폴더나 특정 파일이 나의 UI가 다르게 보일 경우가 있습니다. 즉, 특정 테마 UI를 사용하여 보고 알기 쉽게 만들어 주는 거라고 보면 됩니다.
코드 스트림이라는 소프트웨어 회사에서 스폰서를 해주고 있네요. Peter Pezaris 라는 CEO 분께서 개발자 분들이 코드를 더 쉽고 리뷰하며 의논하기 쉽게 도와주려고 Code Stream을 만든 거 같아요!
두 번째로 PostCSS는 무엇인가?
언어라고 표현이 되어 있긴 한데... 이건 Plugin 입니다! 해당 Plugin을 설치하여 PostCSS 문법을 이용하고자 한다면 설치 바랍니다. 하지만 저는 Vue에서 PostCSS를 사용할 일이 없어 설치하지 않았습니다.
세 번째로, 마크다운 서포트 입니다.
MarkDown은 텍스트 기반의 마크업 언어인데... 저의 경우 코딩하면서 Markdown을 사용할 경우가 한 번도 없어서 설치하지 않았습니다. 참고로 Markdown support의 평점이 저조하네요. 저의 경우 마크다운 언어는 Typora라는 툴을 사용하고 있어서 따로 이용하깁니다.
네 번째로, Ember.js 입니다.
다운로드 받은 숫자에 비해 별점을 남긴 사람의 숫자가 작아서 신뢰도가 정확하지 않지만 그래도 괜찮은 거 같습니다. 자바스크립트 프레임워크로 2014년 AngularJS, BackboneJS 및 EmberJS가 있습니다. EmberJS로 만들어진 것 중 대표적으로 Zendesk가 있습니다. 위에 언급한 프레임워크 중 가장 큰 프레임워크라고 되어 있긴한데... 사이트 로딩속도가 제일 빠르다는 장점이 있고 코딩 교육과정에서 사용되었던 만큼 대단했었나 봅니다. 하지만, 저는 VueJS 프레임워크를 사용해야 하니 설치하지 않겠습니다. (현재도 React가 제일 잘 나가는 프레임워크이지만 ... 개인적으로 VueJS가 편하고 좋아서 선택합니다.)
사실 제일 처음에 빠뜨린 Vim 이 있습니다. Ruby on Rails를 다뤄보신 분이나 linux 코딩을 많이 접해보셨더라면 해당 툴이 편하실 수 있습니다. 하지만, 저는 VueJS를 공부하기 위해 설치하지 않겠습니다.
결론적으로 저는 Material Theme UI 만 설치합니다.
설치가 끝난 후, 실행하게 되면 아래와 같은 그림이 나오게 됩니다.
설치해 줘서 고마운데 테마 선택해 줄래? 라고 물어보는 겁니다.
다음을 선택하면 선택 사항이 나오게 됩니다.
스크롤을 내리게 되면 정말 많은 종류의 테마가 나오게 됩니다. (비록 12개 밖에 없지만...)
저는 Deep Ocean과 Dark 둘 중에 고민하다가 Deep Ocean을 선택하였습니다. 선택 후 Contrast Mode와 High Contrast 둘 중 하나를 선택해야 합니다. 사실 둘 다 선택 안해도 될 거 같긴한데... 하지만, 저의 선택은 High Contrast 입니다. 이게.. 한국말로 대비라는 말로 밝게 보여주기라고 생각하면 될 거 같습니다.
그 이후 Accent Color 라고 나오게 됩니다.
현재 거의 붉은 색으로 표시되어 있지만 Accent Color 옆에 아이콘을 선택하면 다른 색상으로 변경이 가능합니다. Vue JS와 비슷한 색상을 찾아서 설정해 보았습니다.
마지막으로 다른 셋팅은 어떻게 할 것인지 물어봅니다. 이 부분은 그냥 넘어가도록 하겠습니다. 더 알고 싶은데.. 시간이 너무 오래 걸려서요...
마지막 버튼으로도 보이는 Next:Finish 라는 버튼을 클릭하게 될 경우 아래와 같은 화면과 함께 Webstorm을 실행하면 됩니다.
실행 화면은 역시 같습니다. 기존에 프로젝터가 있다면 Open을 눌러도 되지만 저는 새로운 프로젝터를 생성하기 위해 Create new Project를 선택합니다.
여기서 왜 Webstorm을 사용하는지 (그 이유는 유료!!) 아셔야 합니다. 물론 Vscode도 좋고 atom 및 sublime text도 좋습니다. 하지만... 왜? 굳이 Webstorm을 사용하는지는 아래의 그림처럼 잘 보여줍니다.
왼쪽에 보면 Webstorm으로 어떤 언어를 사용해서 개발할 것인지 그리고 무엇이 셋팅이 되어야 하는지 한번에 알 수 있습니다. 저 같은 경우 VueJS 언어를 이용하여 개발하는데 필요한 Node와 VueCli가 설치된 상황입니다. 그렇기 때문에 Node와 VueCli를 이미 감지하고 버전까지 친절하게 알려주면서 개발셋팅을 쉽게 만들어 줍니다.
다음을 누른 후 VueCli를 찾은 뒤 설치 type을 어떻게 할 것인지 물어봅니다. Default와 Manually가 있는데 저는 Default로 설치하였습니다.
처음에는 화면에 아무 것도 없는 것 처럼 보입니다.
하지만, 시간이 지나면 폴더가 하나씩 생기고 Package.json 파일에 자동적으로 업데이트가 됩니다
설치는 1분 안으로 다 마무리가 됩니다. 빠르게 초기 설정을 완성하여 개발을 진행해 나갈 수 있는 장점이 있다고 봅니다. 하지만 VueJS에 노드가 필요하고 VueCli를 이용하여 개발하겠다는 사전 지식이 있어야 겠죠? 그래서 완전 처음이 아닌 최소 한번이라도 프로젝트를 만들어 보였던 분들은 쉽게 하실 수 있을거라 봅니다.
'WebStorm' 카테고리의 다른 글
| [WebStorm] 웹스톰에서 테스트시 기본 웹 브라우저 변경하기 (0) | 2019.12.18 |
|---|---|
| [Webstorm 설정] 윈도우에 설치된 Webstorm에서 터미널 cmd에서 git-bash 로 변경하기 (0) | 2019.11.13 |
