front_end_develoment_1

프런트엔드 개발 시작하기

TECH@NAVER_009 네이버에서 출간한 프런트엔드 개발 시작하기 책 내용을 정리한다.
책 출간일이 2014년 9월이라 현재는 많이 사용하지 않는 도구를 사용하는 내용도 포함되어 있다.

프런트엔드 개발의 이해

프런트엔드 개발이란

국내에서는 사용자가 접하는 영역의 개발을 HTML 코딩, 웹 퍼블리싱, UI 개발, RIA 개발등 여러 단어로 정의하며 업계마다 각기 다른 언어로 개발 영역을 부르기도 한다. 사용자가 접하는 영역의 집합을 프런트엔드 개발이라 할 수 있는데 여러 개념을 합치다보니 프런트엔드 개발을 한마디 정의하기가 쉽지 않다.

쉽게 정의해보면 프런트 엔드 개발은 웹 접근성, 웹 표준, 클라이언트 성능 최적화 등과 같은 지식을 기초로 사용자가 접하는 영역의 리소스와 UI, 인터랙션을 개발하는 것이라고 할 수 있다.

IDE와 에디터

유명한 에디터

이클립스, 앱타나 스튜디오, 서브라임 텍스트, 웹스톰

웹스톰을 채택한 이유

네이버에서 웹스톰을 채택하는 데 주요한 역할 한 기능 몇 가지

• 자바스크립트의 코드 힌팅 기능
• 신뢰할 수 있는 자바스크립트 리팩터 기능
• 정적 분석 기능
• 안정적인 속도

코드 품질 관리

코드 품질 검증 도구

JSHint, JSLint

JSHint

2011년 안톤 코발요프가 JSLint를 포크해서 만들었다. JSLint의 더글라스 크락포드의 스타일을 강요하도록 변해 버려 JSHint를 만들기로 결심했다고 한다. JSHint는 Node.js와 웹으로 지원하고 있으며, JSLint보다 유연하게 옵션을 설정할 수 있고, 존재하지 않는 타입을 typeof 연산자로 검사하는 경우나 자바스크립트 내장 객체에 프로토타입을 적용한 경우 등과 같은 JSLint에서 지원하지 않는 검사 기능을 제공하기도 한다.

JSLint

JSLint는 더글라스 크락포드가 자바스크립트 코드의 구문을 검사할 목적으로 만들었다. 네이버에서도 JSLint를 포크해서 네이버의 컨벤션과 환경에 맞게 수정해 사용하고 있다.

JSLint는 소스 코드의 유효성을 검사학 안티 패턴이나 구문 오류, 사용하지 않는 변수, 선언하지 않은 변수 사용과 같은 잠재적인 위험 요소까지 발견해 경고해준다.

테스트 도구

QUint

QUint은 jQuery 개발자로 잘 알려진 존 레식과 존 제프러가 jQuery를 테스트하기 위해 만든 프레임워크다. 간단한 방법과 메서드로 사용할 수 있으며 비동기 테스트에도 대응하고 있다. 웹 서버 없이도 테스트 실행 결과를 웹 페이지에서 볼 수 있고 QUnit-TAP(Test Anything Protocol)을 이용하면 명령 줄에서도 테스트를 실행할 수 있다.

카르마

2012년 구글의 소프트웨어 엔지니어인 보이타 지나가 AngularJS를 사용하면서 더 편리하게 테스트할 수 있는 환경을 만들려고 Testacular를 개발했고 오픈 소스화했다. Testacular는 매우 가벼우며 Node.js, Socket.IO를 이용해 자바스크립트 소스 코드를 감시하고 수정할 때마다 자동으로 테스트해서 결과를 PC에 설치된 모든 브라우저에 실시간으로 나타내는 기능이 있다. Testacular의 프로젝트명이 카르마로 바뀌면서 많은 개발자들에게 카르마라는 이름으로 알려졌다. 이 도구 자체는 테스트 실행 환경이므로 Jasmine이나 Mocha, Qunit등의 테스트 프레임워크를 사용해 테스트 코드를 작성해야 한다.

프런트엔드 개발 도구

마크업 개발 도구

LESS

Less는 CSS의 단점을 극복하고자 개발된 CSS 메타 언어(또는 CSS 전처리)다. CSS에는 없는 변수, 믹스인, 연산자, 함수 등의 기능을 제공한다. Less를 이용해 코드 중복을 제거하고 재사용성과 스타일 정의의 효율성을 극대화할 수 있다. Less는 다양한 오픈 소스 프로젝트에 사용됐는데 대표적인 사례가 트위터의 부트스트랩 프로젝트다. "Less is more"는 Less의 철학이다.

Less로 작성한 스타일을 클라이언트에게 제공하는 방법은 3가지다. 첫 번째 방법은 Less 파일을 로드한 다음 Less 자바스크립트 모듈을 이용해 동적으로 CSS로 변환하는 방법이고 두 번째는 자동으로 Less를 CSS로 변환하는 서버를 이용하는 방법이다. 세 번째는 파일을 감시하고 있다가 Node.js를 이용해 Less를 실시간으로 컴파일하는 방법이다. 웹스톰에서는 세 번째 방법을 사용할 수 있다.

Emmet

Emmet는 편집기에서 HTML과 CSS를 빠르게 편집할 수 있게 도와주는 도구다. 처음에는 젠 코딩이라는 프로젝트명으로 시작했다가 Emmet라는 프로젝트명으로 바뀌었꼬 2013년 2월 24일 정식으로 출시됐다. 웹스톰에서는 Emmet을 내장하고 있으며 서브라임 텍스트, 앱타나 스튜디오, 이클립스 등의 IDE에서 플러그인 형태로 지원한다.

자바스크립트 개발 도구

Bower

Bower는 트위터에서 만든 프런트엔드 패키지 관리자로 Node.js의 npm에서 많은 영향을 받아 구현됐다. npm은 의존 모듈을 package.json에 명시하는 반면 Bower는 bower.json에 명시한다.

JSDoc3 애너테이션

애너테이션이란 사전적 의미로는 주석을 뜻하지만 단순히 주석이 나니 데이터의 메타 정보나 객체 간의 관계 정보 같이 특수한 의미를 부여하기 위해 작성한 주석을 말한다.

디렉터리 스캐폴딩

Grunt-init

프로젝트를 시작할 때 협업 개발자와 함께 디렉터리 구조를 수립한다. 그런데 프로젝트가 끝나고 새로운 프로젝트를 시작할 때마다 디렉터리 구조를 처음부터 다시 만들고 필요한 라이브러리를 다운로드해야 한다면 매우 불편할 것이다.

이 문제를 해결하기 위해 Grunt-init을 사용할 수 있다. Grunt-init은 Grunt의 플러그인 중 하나로 단위 테스트이 샘플 코드를 자동으로 생성할 수 있게 하는 것이 주 목적이었지만 지금은 프로젝트를 시작하는 기반 구조나 재료를 스캐폴딩하는데 사용하고 있다.

빌드 및 태스크 자동화 도구

자바스크립트를 빌드하려면 코드 품질 검증, 문서화, 파일 압축 등을 해야 한다. 만약 테스트 코드가 있다면 테스트 역시 필수로 해야 한다.

빌드 도구

Uglify.js

Uglify.js는 자바스크립트 압축, 난독화 라이브러리이며 웹에서도 이용할 수 있다.

JSDoc3 문서화

JSDoc3는 문서화 도구로 사용이 가능한데, JavaDoc과 비슷한 형식의 구문을 사용하는 자바스크립트 문서화 도구다. 이 도구는 Netscap Communications Coporation에서 프로젝트를 시작했고 모질라 재단에서 이어받아 자바스크립트 오픈 소스 구현체 프로젝트 Rhino에서 1999년 처음 공개했다. 최초의 JSDoc은 JavaDoc의 구문과 거의 비슷했으나 점점 자바스크립트의 동적인 동작을 표현하기 위해 특화되면서 많은 부분이 달라졌다.

태스크 자동화 도구

Grunt

Grunt는 프런트엔드 개발 분야에서는 잘 알려진 태스크 자동화 도구다. 프로젝트 생성부터 빌드 배포까지 대부분의 작업을 자동으로 처리할 수 있게 도와준다. Node.js 기반이며 수많은 Grunt 플러그인을 이용해 손쉽게 태스크를 작성할 수 있다.