(주)인실리코젠 FED팀(Front End Development)은 PC웹, 모바일웹, 반응형웹, 웹접근성 등 각 프로젝트에 적합한 기술로 UX를 해치지 않으면서 UI 퍼포먼스에 최적화된 마크업과 UI 개발을 담당하고 있습니다.

프론트엔드 프로세스는 크게 ‘관리의 효율성’, ‘성능 최적화’, ‘커뮤니케이션’ 등을 만족해야 하므로 배포할 수 있는 소스를 만들기까지 여러 단계를 거치게 됩니다. 예전에는 매번 폴더를 새로 만들고 필요한 라이브러리 파일을 웹에서 검색해서 다운받아 폴더에 넣고 HTML 문서에 해당 경로를 입력하는 것으로 프로젝트를 시작했습니다. 이미지 스프라이트, 공통 소스 분리, 소스 최소화 등 대부분 작업도 수동으로 처리했습니다.
그러나 프로젝트가 다양해지고 복잡해질수록 단순 반복 작업을 없애고 좀 더 효율적인 업무 프로세스를 만들 필요가 있습니다.

단순하고 반복적인 작업을 없애고 일관된 스타일을 유지하면서 코드 품질 향상까지 도모할 수 있는 FED팀의 스마트 업무 프로세스를 소개합니다.

요즘 잘 나가는 프론트엔드 자동화로 업무 효율성을 높이다!

Node.js 기반 NPM을 중심으로 업무 자동화 프로세스를 구축합니다.

NPM (Node Package Manager)
패키지(하나의 완성된 소프트웨어나, 부품으로 쓰이는 라이브러리 및 모듈)들을 설치, 업데이트, 패키지 간의 의존성과 버전 정보를 관리할 수 있습니다.

Bower
의존성 관리란 제이쿼리, 부트스트랩 등 외부 라이브러리를 가져다 쓰고 이에 대한 버전 관리를 하는 것을 말합니다. 라이브러리 간 의존성을 관리하고 라이브러리 파일을 형상관리 도구에 넣지 않아도 팀원 간 추가한 라이브러리에 대한 정보를 쉽게 공유하고 버전 업데이트도 편리하도록 Bower를 사용해서 프론트엔드 패키지만 따로 관리합니다. Bootstrap, Sass, Images 등 다양한 리소스를 하나의 패키지로 만들어서 배포할 수 있습니다.

Sass(SCSS)
강력한 CSS 확장 언어로 CSS로는 할 수 없는 변수, 함수, @import 디렉티브(Directive)로 스타일 파일을 모듈화할 수 있어 코드의 반복을 줄이고 재사용을 쉽게 합니다.

Babel
ES2015가 표준화되었지만, 아직 새 표준을 지원 못하는 구 버전 브라우저가 이해할 수 있는 신텍스(Syntex)로 변환해줍니다.

Gulp
프론트엔드 개발 관련 각종 툴들을 자동으로 실행시켜 주는 테스크 러너(Task Runner)로 프로젝트별로 필요한 환경을 자동화할 수 있습니다. gulpfile.js와 package.json은 모든 프로젝트에 바로 재사용할 수 있고 필요하면 쉽게 커스터마이징 할 수 있습니다.

 * 파일을 수정하고 저장할 때마다 브라우저 새로고침
 * 디버깅을 용이하게 하기 위한 CSS 소스맵(Source-map) 생성
 * 브라우저 지원을 위한 자동 접두사(Prefix) 추가
 * 써드파티 모듈/패키지로부터 Javascript, CSS, Image 가져옴
 * HTML 별로 인라인해야 할 자바스크립트를 가져옴
 * 자바스크립트를 난독화, Javascript, CSS, Image 최소화, 이미지 스프라이프(Sprites)
 * CSS, 자바스크립트 코딩 스타일과 에러 체크 등 코드 품질을 검증

Webpack

JavaScript 애플리케이션을 위한 패키지 번들러(Package bundler)로 JavaScript , 이미지, CSS 등 종속성을 가진 모든 정적 애셋(Static assets)을 단일 파일로 묶어줍니다. 자바스크립트를 모듈단위로 개발할 수 있어 Angular, React, VueJS 등 자바스크립트 중심 프로젝트에 적합합니다.

 * Loader를 통해 Javascript, Image file, Font, CSS, SCSS 등과 같은 자산을 하나의 모듈로 취급
 * Entry 별로 Bundle 생성 가능
 * Bundle에 대한 압축 및 난독화, 소스맵(Source-map)에 대한 옵션 제공
 * Plug-In 사용을 통한 사용자 정의 기능 수행
 * 비동기 I/O와 다중 캐시 레벨(Multiple cache levels)을 사용하기 때문에 컴파일 속도가 매우 빠름
 * CommonJS(nodejs)와 AMD(require) 스펙 지원