지난 연재에서는 2월 깃허브(GitHub) 10대 트렌드에 대해 알아보고, web developer를 크게 백엔드와 프런트엔드, devops로 나누어 보기 좋게 시각화한 ‘DEVELOPER-ROADMAP’ 프로젝트를 소개해드렸습니다. 이제 관련 내용을 자세히 들여다볼 텐데요, 총 두 편에 걸쳐 Intro, 프런트엔드 두 가지를 살펴보겠습니다.

1. Introduction

진한 노란색으로 표시된 것은 개인적인 추천이라고 되어 있지만 스타를 많이 받는 것으로 보아 이미 대중적으로 인정받고 있다고 할 수 있을 것 같습니다. 왼쪽에는 웹 개발자가 시작 전에 알아야 할 기본적인 소양으로서 “Git, SSH, HTTP/HTTPS and APIs, Basic Terminal Usage”를 제시하고 있습니다. 필자 또한 이 부분 없이는 개발하기 힘들다고 생각하기 때문에 동의하는 바입니다. 재미있는 것은 “Learn to Research”인데 (여러분, 이제 양심의 가책 없이 구글링과 스택오버플로를 하셔도 됩니다!) 좋은 자료를 잘 찾아내고 학습하는 능력이야말로 좋은 개발자가 되기 위한 최고의 능력이 아닐까 하는 생각을 해봅니다.

2. Front-end Roadmap

이제 프런트엔드 로드맵을 알아봅시다. 프런트엔드 분야는 기본적으로 HTML과 CSS, JavaScript로 구성되어 있습니다. 이 분야는 최신 개발 분야 중에서도 가장 크게 발전하고 있는 분야라 넓이와 깊이가 상당합니다. 다음은 전체 오버뷰입니다. 위에서 아래, 왼쪽에서 오른쪽 순으로 설명하겠습니다.

1) HTML, CSS, JavaScript

① HTML(Hyper Text Markup Language)
웹페이지의 뼈대, 혹은 골격입니다. 같은 마크업 태그로 감싸져 있습니다.
각각의 마크업은 나름의 의미를 갖고 역할을 합니다.

② CSS(Cascading Style Sheet)
HTML이 어떻게 보일지 외양을 담당합니다. width, height 등의 형태를 정의하는 역할이죠.
모바일 스펙이 점점 발전함에 따라 최근 프런트엔드에서 굉장히 중요한 역할을 담당하고 있습니다.

③ JavaScript

갖춰진 뼈대와 모양을 어떻게 움직일지 액션을 정의하는 부분입니다. 이 JavaScript의 발전이 웹의 발전을 이끌고 있습니다.

2) JavaScript

① ES6
ES6 (혹은 ES2015로 최근에는 알려져 있는) 자바스크립트의 스펙은 굉장히 빠르게 발전하고 있습니다. 최신 개발 커뮤니티에서는 이 스펙의 코드 위주로 대부분의 코드를 만들고 있습니다. 이것이 가능해진 이유는 브라우저가 지원하지 않을 경우에 babel이라는 트랜스파일러(혹은 컴파일러)가 브라우저 스펙에 맞게 변환을 해주는 기술이 보급이 되었기 때문입니다. 최근 굉장히 모던한 언어의 특징들을 많이 흡수했고, (예를 들어 화살표 함수와 모듈 시스템) 많은 사이트에서 관련된 문법을 익힐 수 있습니다.

   바벨 ES2015 러닝 사이트: https://babeljs.io/learn-es2015/
   Es6-features : http://es6-features.org/#Constants

② Task Runners
Task Runner로 최초로 유명했던 케이스는 ant라고 할 수 있습니다. 아주 훌륭한 툴로 Java를 비롯한 많은 언어에서 애용하고 있었는데, Java의 경우는 maven, gradle로 발전하면서 패키지 매니저 등의 역할도 함께 하고 있습니다.
이런 Task Runner를 Node.js는 npm에서 제공하고 있습니다. npm의 경우는 패키지 매니저지만 npm script 레벨에서 바로 실행할 수 있는 방법도 있고, gulp 및 grunt로 발전합니다. gulp의 경우는 파이핑 개념의 코드를 사용해서 개발자들에게 인기가 있습니다.

③ Package Manager
Node.js는 시장에 나올 때부터 npm(node package manager)이라는 패키지 매니저를 제공했는데, 디펜던시의 어려움과 캐시가 없어 속도 문제를 겪던 중, 페이스북 커뮤니티에서 yarn을 내놓았고, 이러한 경쟁 덕분인지 이후 npm도 업데이트가 되면서 단점이 많이 보강되었습니다.

맺으며

이번 시간에는 Web Developer를 나누어 시각화해 각광받고 있는 “DEVELOPER-ROADMAP”의 Intro와 프런트엔드 로드맵의 Package Manager까지 알아보았습니다. 다음 연재에서는 프런트엔드 로드맵의 남은 구성들에 대해서 알아보겠습니다.



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