“프론트엔드 웹개발자, 자동화 기술 써보세요”

11월30일 자바 스프링 커뮤니티 ‘봄싹’이 주최한 세미나가 네이버 그린 팩토리 강당에서 열렸다. 200여명이 참여한 세미나에서는 프론트엔드 개발 동향을 전하는 세션도 있었다. 변정훈 개발자는 ‘게으른 개발자’ 이야기를 먼저 꺼냈다.

“어떤 작가는 이렇게 말하더라고요. ‘개발자는 1시간 반복 작업을 없애기 위해, 7~8시간을 투자한다’고요. 반복 작업을 없애는 프로그램을 만들기 위해서죠. 저는 이 생각에 동의해요. 특히 단순 반복 작업을 없애기 위해 개발자는 여러 노력을 시도하곤 하죠.”

▲변정훈 개발자

서버 개발은 프론트엔드 개발보다 역사가 오래됐다. 그래서 서버 개발 쪽에서는 개발 환경을 도와주는 도구가 많이 나왔다. 불과 몇 년 전엔 자바 빌드 도구로 ‘엔트’가 주로 쓰였지만 이후 ‘메이븐’이 나오고 최근엔 ‘그래들’까지 나왔다. 이러한 도구들은 이전에 서버 개발자들이 불편해하거나 부족해하던 부분을 채워서 나온 결과물이다. 개발을 더 쉽고 효율적으로 할 수 있게 돕는 도구들이다. 하지만 프론트엔드 개발 분야에선 이러한 노력이 적은 편이었다. 하지만 최근 몇 년새 프론트엔드 분야에서도 자동화 기술들이 속속 나오고 있다. 특히 5년 전에 ‘노드JS’가 등장하면서 이러한 변화를 이끌고 있다.

“노드JS가 전체 웹 기술의 일부이지만요. 자바스크립트라는 웹 언어를 사용했다는 점에서 많은 시도들을 이끌고 있어요. 그 중 의존성을 관리하거나 웹서버를 실행하거나 코드 품질을 관리할 때 쓸 수 있는 자동화 기술이 나오고 있죠.”

의존성 관리

웹사이트를 만들려면 의존성 관리를 해야 한다. 제이쿼리, 부트스트랩 등 외부 라이브러리를 가져다쓰고 이에 대한 버전 관리를 하는 것을 의존성 관리라고 한다. 과거 개발자들은 이를 위해 인터넷 웹사이트에 들어가 원하는 라이브러리를 검색하고 내려받아 내부 컴퓨터 폴더에 넣었다. 그리고 HTML 문서에 해당 경로를 입력해야 했다. 의존성 관리 도구를 이용하면 이러한 반복과정을 줄일 수 있다.

대표적인 도구는 ‘보어’가 있다. 보어는 터미널에 명령어를 입력해 의존성 관리를 할 수 있도록 돕는다. 처음 한번만 설치하면 명령어를 간편히 입력하면서 원하는 라이브러리 통합해서 쓸 수 있다. 또한 어떤 버전을 썼고, 다른 팀원이 해당 도구를 썼는지에 대한 기록도 자동으로 남는다.

이처럼 의존성 관리 도구를 쓰면 라이브러리 파일을 형상관리 도구에 넣지 않아도 되고, 버전 업데이트도 훨씬 쉬워진다.

▲과거 반복과정이 많았던 의존성 관리(출처: 변정훈 개발자 슬라이드쉐어)

웹서버 실행
과거엔 웹 서버 실행하는 게 복잡했다. 루트 경로를 따로 지정 해주는 등 관리하기 힘들고, 실행하는데 시간이 오래 걸렸다. 최근엔 프론트엔드 개발을 위한 빌드 도구가 여럿 나오고 있다. 대표적인 게 ‘그런트’나 ‘걸프’다. 이를 통해 프로젝트별로 환경을 자동화할 수 있다. 이 때문에, 다른 포트, 다른 경로를 사용할 수 있으며, 팀 단위로 작업할 때 누구나 똑같은 환경에서 테스트를 할 수 있다. 또한 ‘웹스톰’, ‘아톰’과 같이 여러 에디터를 사용할 수 있어 특정 개발환경에 종속되지 않는다.

▲과거 웹서버를 실행할 때 관리하거나 실행 속도가 낮았다(출처: 변정훈 개발자 슬라이드쉐어)

▲빌드도구로 웹서버를 실행했을 때 장점(출처: 변정훈 개발자 슬라이드쉐어)

코드 품질 관리
프론트엔드 개발 쪽에서 유효성이나 코드를 검사하는 것을 ‘린트’라고 한다. 사실 프론트엔드 개발에선 코드에 조금 문제가 있어도 결과를 실행하는 데 이상이 없었다. 하지만 최근엔 린트 도움을 받아 코드 품질을 더 높일 수 있다. 린트 도구로 세미콜론을 빼먹은 걸 알 수 있거나, 어떤 함수를 쓰지 말야야 하는지 등을 알 수 있다. 개발자가 실수할 가능성도 줄어든다. ‘JS힌트’가 대표적이며 페이스북이 만든 ‘플로우’나 트위터가 만든 ‘리세스’등도 있다.

▲JS힌트와 같은 도구로 코드검사를 할 수 있다(출처: 변정훈 개발자 슬라이드쉐어)

▲JS힌트 도구가 위의 소스 문법을 검색한 결과(출처: 변정훈 개발자 슬라이드쉐어)

테스트는 한번에

프론트엔드 개발자는 여러 웹브라우저를 동시에 테스트해야 한다. 이러한 과정을 한번으로 줄여주는 도구도 있다. 대표적으로 ‘소스랩’이 있다. 소스랩은 CI 서버를 실행시킬 때, 여러 웹브라우저를 연결해 테스트할 수 있다. 이렇게 되면 한번 실행해 인터넷 익스플로러, 크롬, 파이어폭스 등에 제대로 작동하는지 하나의 인터페이스 안에서 간편하게 볼 수 있다.

변정훈 개발자는 “자동화 기술은 도구이기 때문에 배우는 데 진입장벽이 높지 않다”라며 “상대적으로 쉽게 배울 수 있는 동시에 얻어갈 수 있는 이점이 많아 개발자들과 공유하고 싶었다”라고 설명했다. 또한 “개별적인 도구들이 언제 어떻게 쓰이는지 알 수 있으면 여러 도구를 조합해서 사용할 수 있다”라며 “이로 인해 효율적이고 빠르게 웹 개발을 할 수 있으며, 웹 개발 환경이 어떻게 변화하는지도 알 수 있다”라고 강조했다.

▲변정훈 개발자

변정훈 개발자가 제안하는 프론트엔드 개발에서 사용할 수 있는 자동화 도구

Front-end Development Process – 어디까지 개선할 수 있나 from Outsider Byun

의존성 관리를 위한 도구

• 보어 http://bower.io/
• 브라우저리파이 http://browserify.org/

웹서버 실행

• 그런트JS http://gruntjs.com/
• 걸프JS http://gulpjs.com/

코드 품질 관리

• JS힌트 http://www.jshint.com
• 플로우 http://flowtype.org/
• 리세스 http://twitter.github.io/recess/
• ES린트 http://eslint.org/
• HTML힌트 https://github.com/yaniswang/HTMLHint
• CSS린트 http://csslint.net/

전처리

• 사스 http://sass-lang.com/
• 레스 http://lesscss.org/
• 커피스크립트 http://coffeescript.org/
• 스타일러스 http://learnboost.github.io/stylus/

유닛테스트

• 차이 http://chaijs.com/
• 모카 http://mochajs.org/
• 카르마 http://mochajs.org/
• 재스민 http://jasmine.github.io/

테스트

• 소스랩 https://saucelabs.com/
• 커버올스 https://coveralls.io/
• 브라우저스택 http://www.browserstack.com/
• 짐내시엄 https://gemnasium.com/