지난 연재에서는 “DEVELOPER-ROADMAP” 의 Intro 와 Front-end Roadmap의 오버뷰를 소개하며, 그 중 JavaScript의 ①ES6, ②Task Runners, ③Package Manager를 먼저 설명 드렸습니다. 이번 연재에서는 나머지 Front-end Roadmap의 구성에 대해 알아보겠습니다.

④ Choose a Framework
- 구글의 ‘Angular’가 처음 나왔을 때만 해도 대적할 만한 상대가 없었습니다. 웹 자체에서 MVC 모델을 그대로 구현했을 뿐만 아니라, HTML 코드와 스크립트가 확실하게 분리되어있어 개발자들에게 각광을 받았죠. 단, ReactiveX-JS, TypeScript 같은 새로운 콘셉트를 익혀야 하는 어려움은 있었습니다.
- ‘React’는 페이스북에서 내놓은 프런트엔드 프레임워크입니다. 개발자들이 PHP를 쓸 만하게 만들기 위해 갖은 노력 끝에 웹 기반으로 내놓은 프레임워크이기도 합니다. 알파버전부터 페이스북 페이지에 적용하는 대담함을 보여주면서 사람들의 관심을 모았으나, Flux 아키텍처와 리액트 네이티브를 발표하면서 대세는 기울게 됩니다.

⑤ Testing
React가 대세인 요즘 Jest 역시 배워볼 만한 테스트 툴로 성장했습니다. 페이스북 커뮤니티에서 React 테스트를 위해 만들었고, Airbnb에서 shallow 테스트에 용이한 Enzyme을 내놓았습니다. Mocha는 전통적인 JavaScript 테스팅 툴입니다.

⑥ Module Loader/Bundler
모던 자바스크립트의 대표인 ES6를 포함해 Node.js 같은 프레임워크는 모듈 시스템을 갖고 있습니다. 하지만 브라우저 자체에서는 모듈을 아직 제대로 인식하지 못하기 때문에 모듈을 관리하고 번들링하는 시스템이 필요합니다. 즉 모듈시스템에서 브라우저로 올릴 때, 하나의 파일로 만들거나 파일 사이즈를 줄이는 작업들을 말합니다. 브라우저에서 모듈 시스템을 작동하게 만드는 것이 Browserify였다면, ReauireJS나 AMD처럼 모듈 스펙을 구현한 예도 존재합니다. 하지만 webpack이 나오면서 그야말로 천하통일이 되었는데요. 최근에는 Parcel 이 도전장을 내밀었습니다.

⑦ Type Check
TypeScript는 타입 체크의 대세라고 할 수 있습니다. 마이크로소프트에서 내놓은 TypeScript는 그동안 JavaScript가 타입을 확인할 수 없었던 것에 대한 대안으로 내놓은 작품인데요. 최근 많은 개발자들이 선호하면서 엔터프라이즈 개발의 대세가 되어 가고 있습니다. Flow의 경우는 React 진영에서 내놓은 TypeScript와 동일한 개념으로 체커에 가깝고 OCaml이라는 언어로 되어 있습니다. 사실 언어라기보다 일종의 툴에 가깝다고 할 수 있겠는데요. 이런 철학 차이로 개발자의 호불호가 극명하게 나뉩니다.

3) CSS

① Responsive Web
디바이스가 다양해지자, 모니터의 해상도에 상관없이(브라우저, 모바일) 비슷한 Look&Feel을 내면서도 화면을 예쁘게 나타낼 수 있는 Responsive Web이 유행했습니다. 지금도 유효한 Responsive라는 키워드는 CSS3에서 제공되는 많은 기능(Flexbox, Scale)과 HTML 메타태그를 잘 이용해야 합니다.

② CSS Framework
웹 개발을 할 때 생산성을 가장 높이는 방법은 무엇일까요? 손이 가장 많이 가는 부분이 CSS 스타일을 입히는 부분인데, 이를 위한 대안으로 Bootstrap이 존재합니다. 한때 최장기간 동안 깃허브 페이지 스타 1위를 달성한 프레임워크인 Bootstrap은 테마 시스템을 갖고 있어서 테마만 적용하면 나만의 웹 페이지를 손쉽게 만들 수 있게 해줍니다. 또, 한때 구글에서 Material 디자인을 들고 나오면서 Materialize CSS도 잠깐 반짝하기도 했습니다.

③ Preprocessors
CSS의 강점은 Cascading이라는 속성인데, 예를 들어 부모 컴포넌트에서 정의해 놓은 스타일이 있어도 차일드 컴포넌트에서 새로 속성을 지정하면 차일드 컴포넌트 속성을 따라가게 되어 있어서 전체 스타일을 만들고 해당 컴포넌트를 작업하는 등에 있어 용이하게 활용되었습니다.
하지만 웹 컴포넌트 기반의 개발이 활발해짐에 따라 재사용되는 컴포넌트들이 많아졌고, CSS도 길어져 유지·보수가 어려워졌습니다. 이를 극복하기 위해 변수를 지정하거나, 상속이 가능한 기능 등을 제공하는 프레임워크들(Sass, Less 등)이 등장하기 시작했습니다.

4) More…

BEM은 Block, Element, Modify의 줄임말로, HTML 태그를 잘 묶어서 개발하는 것을 목표로 Yandex에서 사용되었습니다. 이는 어떻게 보면 개발할 때 너무나 당연한 것이지만, 의외로 사이트에서 놓치고 있는 경우가 많습니다.

출처 :https://en.bem.info/methodology/key-concepts/

링크 모음
본 기고문과 관련한 링크는 다음과 같습니다.
 ∴ 발사믹 : https://balsamiq.com/
 ∴ 바벨 ES2015 러닝 사이트 : https://babeljs.io/learn-es2015/
 ∴ Es6-features : http://es6-features.org/#Constants
 ∴ Gulp: https://gulpjs.com/
 ∴ Grunt : https://gruntjs.com/
 ∴ Webpack : https://webpack.github.io/
 ∴Yarn  : https://yarnpkg.com/lang/en/
 ∴Npm  : https://www.npmjs.com/
 ∴Angular  : https://angular.io/
 ∴React  : https://reactjs.org/
 ∴Jest  : https://facebook.github.io/jest/

시사점
웹은 어디로 가고 있을까? 나는 어떤 개발자가 되어야 할까? 이는 개발자로서 매일같이 곱씹어 봐야 할 질문들입니다. 그런 의미에서 개발자 로드맵을 한번 살펴보고, 모르는 부분은 더욱 챙겨서 알아 두어야 더 좋은 개발자로 성장하는 데 큰 도움이 될 것입니다.



▶   해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 기고자에 저작권이 있습니다.
▶   해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.