[자바스크립트 프레임워크] 시작 예고편

* 속깊은 자바스크립트 시리즈를 쓴지도 5여년이 지나고 이제 순수 자바스크립트에 대한 중요성과 인지도가 많아 향상 되었다고 생각한다. 그런데 최근에 최업 준비를 하면서 해외의 front-end engineer 자리들을 보고 있으면, 이제는 단순히 자바스크립트만 해서는 경쟁력이 떨어지고 있다는 것을 더욱더 느끼게 된다. 따라서, 속깊은 자바스크립트는 순수 자바스크립트를 살펴보는 시리즈 였다면, 자바스크립트를 응용하는 프레임워크나 라이브러리들이 어떠한 것이 있고 기본적인 사용 방법에 대해서 살펴보고자 한다.

* 자바스크립트 프레임워크의 시대

: 자바스크립트는 이제 정말 수 없이 많은 프레임워크들이 나오고 그러한 프레임워크의 개발을 요구하는 회사들도 많아지고 있다. 가장 쉽게 프레임워크가 얼마나 많은지 확인하는 방법은 간단하게 검색해보면, 위키피디아에도 아래와 같이 엄청 많은 프레임워크들을 소개하고 있다.

https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

: 물론 여기에 나와있는 많은 프레임워크들은 현재 널리 사용되고 있지 않지만, 일부 유명한 프레임워크들은 정말로 빈번하게 사용되고 있으며, 이번 시리즈에서는 가장 기본적인 사용 방법을 보여주거나 튜토리얼이 있으면 튜토리얼을 따라가면서 직접 사용해보고, 응용 방법이 있으면 응용 방법까지 한번 생각해보거나 실제로 활용되고 있는 사이트들을 찾아서 어떻게 사용하고 있는지 조금 더 깊이 있게 생각해보려고 한다.

* 더 알아보고 싶은 프레임워크

: 사용 방법과 튜토리얼을 따라가보고 싶은 가장 유명한 프레임워크라 하면 당연히 jQuery일 것이다. 그런데 요즘 채용 정보들을 보면서 느낀 점은, 이제 대형 회사들은 jQuery에 대한 요구사항은 이제 더이상 추가로 요구하지 않고 중소형 회사들 위주로 jQuery를 요구하고 있다는 점이다. 그래서 jQuery는 나중에 한번 광범위하게 다루도록 하고, 일단 다루고 싶은 것은 첫번째로는 지금 티스토리의 반응형 스킨으로도 활용되고 있는 bootstrap을 가장 먼저 다루고 싶다. 지금 티스토리의 반응형 스킨을 적용했는데 다소 충돌이 있어서 이 부분을 해결하고자 가장 먼저 살펴보고 스킨에서 사용하고 있는 기능을 개선/변경 또는 삭제를 하여 지금 블로그의 스킨을 개선해 나갈 것이다.

- bootstrap: http://getbootstrap.com/

: 그리고 대형 회사들이 가장 많이 요구하고 있는 프레임워크들을 아래와 같이 몇가지가 있다. 특히 가장 많이 요구하고 있는 것은 바로 Angular.js라고 생각된다. 구글에서 관리하는 프레임워크로 채용정보를 보면 해외 대형 회사들에서는 가장 많이 개발자를 채용하고자 하고 있다.

- Angular.js: https://angularjs.org/

: 이어서는 페이스북에서 관리하는 React가 있다. Angular.js 다음으로 채용정보의 기본 요구사항으로 올라오고 있는 것 같다. Angular.js가 2라면 React는 1정도의 빈도수가 있는 것 같다. 

- React.js: https://facebook.github.io/react/

: 마지막으로 채용정보에는 많이 올라오지는 않지만, 웹앱으로 많은 자바스크립트 방송에서 홍보가 많이 되고 프레임워크라고 이야기하면 한번씩은 언급되는 backbone에 대해서 더 알아볼 것이다. 채용정보에서는 보기 힘들기는 하지만, 프레임워크의 구조를 살펴보면 자바스크립트에 대한 지식 자체도 많이 향상 될 것이다.

- backbone.js: http://backbonejs.org/

: 해외의 채용 공고 요구조건을 보니 위의 세 프레임워크가 지금 해외에서 가장 바쁘게 돌아가고 있는, 개발자에게 요구하고 있는 프레임워크로 생각이 되어져서 이것들부터 쭉 살펴볼 것이고, 이어서 마지막으로 요구사항에도 안 넣을 정도로 그냥 기본으로 다룰줄 알아야 하게 된 jquery를 제대로 한번 사용하는 방법을 살펴보고자 한다. 사실 jquery는 라이브러리인지 프레임워크인지 논란이 많지만 일단 같이 보고자 한다.

- jquery: https://jquery.org/

: 이제 수 많은 프레임워크들이 나오면서 자바스크립트에서 확장해서 더 빠른 개발을 진행하기 위하여 개발자들에게 지식으로 요구하기 시작하기 때문에 이러한 다양한 프레임워크들에 대해서 알고 있으면 좋을 것이다. 그리고 자바스크립트 개발자라면 이제 각 프레임워크가 안에서 어떻게 돌아가고 있는지 확인해보는 것도 좋은 경험과 지식이 될 것이라고 생각한다.

* 순수(vanilla) 자바스크립트는?

: 이제 많은 회사들이 자바스크립트 프레임워크를 다룰 줄 아는 개발자들을 원하고 있다보니 다시 순수 자바스크립트에 대한 학습과 프레임워크 위주의 학습에 대한 의견이 달라질수도 있을 것이다. 예를 들면, jquery만 알아도 회사에 웹개발자로 취직하는 것이 물론 가능은 하지만, 고급 개발자가 되기 위해서는 여전히 순수 자바스크립트에 대한 지식은 '기본'으로 깔고 가야하고, 거기에 jquery 등과 같은 자바스크립트 프레임워크에 대한 지식을 추가로 얹으면 정말로 경쟁력있는 개발자가 될 수 있다고 생각한다.

: 특히, 자바스크립트의 클로저 정도와 다양한 콜백 흐름을 전반적으로 알면 각 프레임워크의 활용을 극대화 시킬 수 있을 것이다. 따라서 프레임워크에 너무 심취하지 말고 자바스크립트 기본기도 충실히 쌓기를 권한다. 이제 채용정보에 자바스크립트 프레임워크에 대한 요구사항이 있다면, 순수 자바스크립트에 대한 지식은 '기본'으로 따라가줘야 한다. 이번 시리즈에서는 순수 자바스크립트에 대한 내용은 자세하게 다루지는 않을 것이고, 순수 자바스크립트를 통해서 어떻게 프레임워크를 구현했는지 내부적으로 어떻게 돌아가는지까지는 분석해볼 예정이다.

: 순수 자바스크립트에 대해서 더 알고 싶다면 속깊은 자바스크립트 시리즈를 참고해도 좋을 것이다.

2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편)

끝.

- 다음편 예고

2016/05/21 - [Bootstrap] 소개

2016/06/23 - [Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system)

2016/06/xx - [Bootstrap] 나머지 CSS 기능

2016/07/xx - [Bootstrap] 컴포넌트 기능

2016/07/xx - [Bootstrap] 자바스크립트 기능

: angular.js

: react

: backbone

: jquery