프런트엔드 개발자를 위한 필수 자바스크립트 라이브러리 & 프레임웍

자바스크립트는 웹개발에서 가장 핵심적인 언어 중 하나로, 프론트엔드 개발자에게 필수적인 역할을 합니다.
자바스크립트의 강력한 기능을 더욱 활용하기 위해 다양한 라이브러리와 도구들이 개발되었고,
이번 포스팅에서는 프런트엔드 개발자를 위한 필수 자바스크립트 라이브러리와 프레임워크를 소개하고자 합니다.

라이브러리와 프레임워크의 차이

라이브러리는 자주 사용되는 기능을 미리 만들어 놓은 코드 집합입니다. 필요한 라이브러리를 가져와서 자신이 만드는 코드와 함께 사용할 수 있고, 대표적인 라이브러리로는 jquery, loadsh, monent.js, chart.js 등이 있습니다. 라이브러리는 개발자가 필요한 부분만 가져와서 사용할 수 있기 때문에 자유도가 높고 개발속도를 높일 수 있습니다.

프레임워크는 어떤 목적을 달성하기 위해 필요한 모든 것을 제공하는 코드 집합입니다. 개발자는 프레임워크가 제공하는 규칙과 구조에 따라 코드를 작성해야 합니다. 대표적인 프레임워크로는 Angular, React, Vue.js, Svelte 등이 있습니다. 프레임워크는 개발자가 구현해야 할 부분을 미리 정해놓기 때문에 개발 속도는 느리지만, 안정성과 일관성을 보장할 수 있습니다.

따라서, 라이브러리와 프레임워크는 개발자가 원하는 기능을 구현하는 방식에 따라 선택해야 합니다. 라이브러리는 개발자가 필요한 부분만 가져와서 사용할 수 있기 때문에 자유도가 높고, 개발 속도를 높일 수 있습니다. 반면, 프레임워크는 안정성과 일관성을 보장할 수 있기 때문에 대규모 프로젝트에서 사용하기 적합합니다.

이처럼 프레임웍이나 라이브러리를 모두 능숙하게 사용한다면 베스트겠지만,
사실 제대로 배울려면 프레임웍(React, Angular, Vue, Svelte) 하나만으로도 엄청나게 배워야 할게 많습니다.
라이브러리(jquery) 하나 배우더라도, 수 많은 메소드와 프로퍼티들이 있어서 문서만 봐도 머리가 어지럽습니다.
취업을 준비생이라면 목표로 하고 있는 회사에서 어떤 라이브러리나 프레임웍을 사용하는지 미리 검색해보고 공부해본다면 조금은 도움이 될 것 같고, 현재 현업에서 겁나게 코딩하고 있는 실무자라면 지금 내가 하는 것에서 살짝 벗어나서 잠깐 옆으로 눈을 돌려보는 것도 나쁘진 않을 것 같습니다. 혹은 백엔드 쪽으로의 전향도 고려해볼만 합니다.

하지만 개인적으로 이런 라이브러리, 프레임워크 사용하기 이전에 HTML, CSS, 바닐라 Javascript는 기본적으로 다룰 줄 알아야 한다고 생각합니다. 어쨌든 프레임워크나 라이브러리를 배운다는 것 자체는 홈페이지를 제작하거나 모바일 앱웹을 개발하기 위함인데 기본은 알고 시작하는게 당연하다고 생각합니다. HTML, CSS 는 그나마 쉬운편이고, 바닐라 Javascript


저는 욕심이 많아서 이것저것 다 해보고 싶은 마음에 앞으로 내가 공부할 것에 대한 정리 겸 가장 기본적인 설명과 사이트주소를 남겨놓습니다.

React.js

React.js는 페이스북에서 개발된 UI 라이브러리로, 컴포넌트 기반의 개발을 강조합니다. 가상 돔(Virtual DOM)을 활용하여 웹 애플리케이션의 성능을 향상시킬 수 있고, 재사용 가능한 컴포넌트를 만들어 개발 생산성을 높여줍니다.
React.js를 배우면 React Native를 배울 때 조금이라도 도움이 되니 미리 배워보는 것도 좋은 방법입니다.
https://ko.legacy.reactjs.org/

Next.js : Vercel이 개발한 오픈 소스 react 프레임워크. 
기본적으로 SSR 위주의 풀스택 기반 프레임워크를 주력으로 성장하고 있으며, 풀스택 프레임워크답게 API 기능 및 서버 컴포넌트를 통한 서버단 기능과, React 컴포넌트를 통한 클라이언트 기능으로 나뉘어 통합 제공하는 프레임워크이다.
현재 node.js 기반의 안정적인 풀스택 프레임워크로 사랑받고 있으며, SSG 방식 또한 제공한다.
react 공식 시작하기 문서를 열람할 시, 가장 먼저 이 Next.js 프레임워크를 통한 시작하기가 가장 상단에 표시될 정도로 React의 거의 대표급 프레임워크이다.

Angular.js

Angular.js는 구글에서 개발된 프런트엔드 프레임워크로, MVC 패턴을 기반으로 한 데이터 바인딩과 의존성 주입(Dependency Injection)을 제공합니다. 높은 생산성과 강력한 기능을 갖춘 Angular.js는 대규모 웹 애플리케이션 개발에 적합합니다.
https://angular.io/

Vue.js

Vue.js는 가볍고 유연한 자바스크립트 프레임워크로, 컴포넌트 기반의 개발을 지원합니다. React와 Angular의 장점을 결합한 것으로, 학습 곡선이 낮아 쉽게 시작할 수 있습니다.
https://vuejs.org/

jQuery

jQuery는 HTML 문서 탐색과 조작, 이벤트 처리, 애니메이션 등을 위한 강력한 라이브러리입니다. 웹 개발의 기초적인 요소들을 단순화하고 생산성을 향상시켜줍니다. 최근에 React, Angular, Vue등의 등장에도 여전히 많은 사람들이 사용하고 있습니다.
현재 일반 홈페이지 퍼블리싱 작업이 필요할 때에는 jQuery는 필수로 사용하고 있고 jQuery하나만으로 파생되는 플러그인이 다양하게 만들어져 있어서 퍼블리싱 하는데 도움이 됩니다. .
https://jquery.com/

이제 막 프런트엔드로 직업를 하려는 분들은 위 프레임웍크나 라이브러리 중에 하나정도는 능숙하게 다를 수 있을 정도로 준비를 하면 좋습니다.
그런데 HTML, CSS 도 모르고 시작하시는 분들도 있고, Javascript 의 기초도 없이 공부하기엔 무리가 따르니 기본적인 HTML, CSS, Javascript 는 필수 코스이니 기본은 숙지하고 시작하셔야 어려움이 덜 합니다.

그 외 프레임워크나 라이브러리는 엄청나게 많습니다.
하지만 위가 대표적으로 사용되는 프레임워크와 라이브러리로 그 중 하나라도 숙지를 하신다면, 다른언어로의 배움은 그다지 어렵지 않게 접근할 수 있다고 생각합니다.

마치며,

최근에 React를 한 번 공부해보기 위해서 열심히 따라서 해보는 유튜브를 보면서 해보고 있었고, 그러다가 갑자기 NextJs라는 놈을 알게 되었다.
웹분야에서 일을 할려면 참 많은 공부를 해야하는 것은 예나 지금이나 똑같은 것 같다.
본인이 공부를 좋아하고, 새로운 기술을 습득하는 것에 아드레날린이 넘쳐 흐른다면 웹 분야에 도전하는거 강력 추천한다.
하지만 취업준비생이라면 반드시 취업하려는 회사에서는 어떤 언어를 사용하는지 한번 쯤은 검색해보고 도전하길 바란다.
뭐가 좋은지 모르겠다? 그냥 React라도 한 번 해보자.

Leave a Comment