Atom/Gulp로 편리하게 개발하기(mac용 - 1)
써보면 아주 편합니다.
평일 참석하고 있는 자바스크립트 완벽가이드 책 읽기 모임에서 우연히 시간이 있어서 친구가 참석자를 상대로 gulp설치를 소개하게 되었다. 이 글은 그날 참석하지 못한 스터디 구성원과 혹시라도 웹 UI개발을 편리하게 하고자 하는 사람들을 위한 간단한 소개서 개념으로 작성하였다.
Gulp 가 도데체 무엇인가?
간단하게 이야기 하면 빌드 시스템이라고 할 수 있다. 빌드를 편하게 해주는 시스템이라고 생각하면 된다. 이번에 소개하고자 하는 내용은 많은 기능 중 일부만 사용하는 (전부 다 사용하면 아무래도 무겁기 때문에) 방법을 소개하고자 한다. 여기서는 단순히 내가 수정한 파일을 저장하면 바로 브라우저에서 확인 할 수 있을 정도로만 사용하는게 목표이다. 별거 아닌 기능인 것 같아 보이지만 써보면 써볼수록 편리하다는 것을 느끼게 된다.
1. 우선 Node.js와 ATOM에디터를 설치하도록 하자.
https://nodejs.org/en/ 에서 Node.js를 설치 할 수 있다. 버전은 5월 기준 V4.4.5 LTS를 설치하도록 한다. Gulp가 V6.2.0 버전에서 왜인지 모르겠지만 에러가 난다.(일해라 Gulp!)
설치가 다 끝났으면 https://atom.io/ 에디터를 다운 받도록 한다. 굳이 이 에디터를 다운받는 이유는 조금 더 쉽게 설치 할 수 있기 때문이다. 무겁다는 의견도 있지만, 여러가지 편리한 플러그인들이 많아 편하게 사용할 수 있다. (기획자인 내가 사용할 수 있을 정도면 누구도 사용할 수 있다. )
2. 설치가 다 되었으면 폴더를 만들어서 아톰을 써보도록 하자.
폴더를 만들어서 위에 보이는 아이콘에다 드래그 하면 된다. 그러면 해당 폴더로 아톰이 열리게된다.
그리고 상단에 있는 메뉴 바 중에서 Preferences... 를 선택하도록 한다.
위의 이미지 중에서 Preferences를 선택하면 된다. 그러면 settings페이지가 나오게 된다.
이후 pagekages를 선택하여 terminal-plus를 설치하자.
검색하면 쉽게 설치 할 수 있다. 설치가 끝나면 이전과 다르게 좌측 하단에 + 모양의 아이콘이 설치되어 있음 알 수 있다.
좌측 하단의 untitled 1:1 부분상단을 확인해 보면 + 아이콘이 있음을 알 수 있다. 그걸 눌러보자
눌러보면 + 버튼 옆에 네모 모양의 터미널 아이콘이 생기면서 위의 화면처럼 보일 것이다.
여기까지 했다면 반 정도는 왔다고 할 수 있을 것이다. 별거 아닌것 같지만, 생각보다 편리한 기능이다. 패키지를 선택하여 해당 폴더로 이동할 필요도 없고 별도 터미널을 실행할 필요도 없다. 다음에는 본격적인 Gulp 설치를 설명하도록 하겠다.
