Js 프론트엔드 프레임워크 종류(React, Vue, Angular, svelte)
저번 포스팅에서는 프레임워크가 어떤 것인지에 대해 이야기를 나눠봤습니다.
프레임 워크에 대해 가벼운 마음으로 접근하고자 한다면 저번 포스팅을 참고해주세요 :)
https://cnemoment.tistory.com/11
프레임워크 쉽게 이해하기 (웹 프론트 프레임워크)
어느 날 누군가에게 이런 질문을 받았습니다. 자신이 순수 html로 작업을 하고 있는데, Html이 점점 많아지면서 매번 navbar를 각각의 Html에 복붙 하고 있답니다. 그런데 이렇게 하면 좋은 점수(국비
cnemoment.tistory.com
stackoverflow developer survey 2021을 보면 개발자들이 제일 사랑하는 언어, 프레임워크를 알 수 있습니다.
그 외에도, 성별, 직급 등 재밌는 결과들도 많으니 시간 날 때 보기를 추천합니다.
https://insights.stackoverflow.com/survey/2021#salary-comp-total-usa
Stack Overflow Developer Survey 2021
In May 2021 over 80,000 developers told us how they learn and level up, which tools they’re using, and what they want.
insights.stackoverflow.com
다음 포스팅에선 흥미로운 설문조사 내용들도 다뤄볼게요 :)
본론으로 돌아가서, 설문조사에 따르면
우리는 개발자가 가장 많은 자바스크립트에 대한 이야기를 나눌 것이고,
그중에서도 프레임워크에 대한 이야기를 나누고자 합니다.
작년까지만 해도 React.js는 2위였는데
올해는 React.js가 가장 인기있는 프레임워크로 올라서며, 제이쿼리를 능가했습니다.
그 뒤로는 jQuery, Express, Angular, Vue가 순위를 차지했어요.
Express는 백엔드의 프레임 워크이기 때문에 이번 포스팅에선 다루지 않으려고 합니다..!
모든 프레임워크를 다 다루고 싶지만
그리고 jQuery가 아직 2위를 자리하고 있지만!
그 수치는 점점 떨어질 것이며
앞으로를 위해선 Angular와 Vue라는 프레임워크를 다루는 것이 더 좋다고 판단했습니다.
자 이제 하나씩 가볍게 알아볼까요?
1. React.js
먼저 1위를 차지한 React.js에 대해 알아볼까요?
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
리액트(React.js)는 페이스북에서 개발한 프런트엔드 라이브러리입니다.
아마 개발을 처음 배우신 분들이라면 '페이스북에서 이런 것도 만들어..?'라고 하실 겁니다
저도 그랬거든요 ㅎ
React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요.
React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.
"이런 게 있구나.."
정도면 됩니다!
하지만 취업 준비 중이시라면
자바스크립트 문법을 어느 정도 익히셨다는 전제 하에 React를 바로 시작하는 것을 추천드립니다.
취업 시장이 가장 큰 프레임 워크이기 때문이죠!
2. jQuery
는 다루지 않겠습니다.
지는 해라고 생각하시면 됩니다.
아직도 국비 학원에서는 굉장히 많이 가르치고 있는 걸로 알고 있습니다.
그러나 이 사실은 알으셔야 합니다.
제이쿼리랑 자바스크립트는 다른 것이 아니고
자바스크립트 프레임 워크가 제이쿼리라는 사실을요!
그래서 자바스크립트의 이해도가 높은 것이 중요하지 제이쿼리의 이해도가 높은 것이 중요하지 않습니다.
개인적인 생각으로는 제이쿼리로 개발된 오픈소스들이 많기 때문에
제이쿼리는 그 오픈소스를 읽을 정도의 이해도만 챙기면 된다고 생각합니다!
끝!
3. Vue
저는 Vue를 이용해서 개발합니다. 더 정확히는 Nuxt이긴 하지만요..!
그렇기 때문에 사심이 들어간 상태로 Vue를 칭찬할 수밖에 없습니다 ㅋㅋㅋ
앞서 리액트에선 취업을 준비 중이라면
그냥 리액트를 공부하는 게 좋다고 했지만!
Vue는 창업을 준비하시는 분에게 추천드리고 싶은 프레임 워크입니다!
저는 창업을 실제로 했고 Vue로 빌드하면서 많은 시간을 아낄 수 있었습니다.
어느 정도 신빙성이 있죠..?
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
Vue의 가장 큰 장점은 배우기 쉽다는 것입니다.
공식 홈페이지에 들어가 보면
바로 'why vue?'라는 영상을 볼 수 있는데,
그 영상에서 Vue의 3가지 장점을 꼽습니다.
- approachable : 가까이하기 쉬운
- versatile : 변하기 쉬운
- performant : 성능 기준에 맞는
여기서 변하기 쉽다는 것은 데이터가 바뀔 때 화면이 바뀌어야 하는데
그것을 바뀌기 쉽다는 것을 의미합니다.
우리가 계산기를 코딩했다고 생각하면
1 + 1을 눌렀을 때 숫자 데이터가 2로 바뀌어야겠죠?
그리고 보이는 화면도 1에서 2로 바뀌어야겠죠.
그렇게 바꿔주는 것이 쉽다! 이렇게 이해하시면 좋습니다.
즉 배우기 쉽고, 화면을 바꾸기 쉬운데 성능은 좋다!
이게 Vue입니다
개발 유튜버로 유명하신 zeroCho님도 한 인터뷰에서 vue와 리액트를 비교하셨었는데요.
둘 다 배우라는 현명한 답을 내놓았으나,
vue가 더 배우기 쉽다.
쉬운걸 먼저 하고 어려운 걸 그다음 하는 것이 자기 성격 상 맞으면 vue를 하고 react를 하고,
그 반대면 react를 먼저 하라고 했습니다.
저는 자신의 상황에 맞게 하는 게 맞다고 생각하는데,
취업이 급하시면 react를 먼저,
창업을 하시거나, 공부 목적이면 vue를 먼저 하는 것이 좋다고 생각합니다.
4. Angular
앵귤러는 2012년에 공식적인 V1.0이 나왔습니다.
처음엔 동적으로 데이터를 다루기 때문에 획기적이었고
많은 수요가 있었습니다.
그러나 이제는 리액트와 뷰에게도 밀리고 앵귤러 후속 버전도 나오면서
새로운 프로젝트를 앵귤러로 빌드할 일은 없을 것 같습니다.
이렇게 보면 프레임워크의 각각 장점들이 있고,
무엇을 선택해야 할지 직접 경험해보지 않고선 선택하기가 어렵죠.
그래서 이 유튜브 채널을 소개해드립니다.
https://www.youtube.com/channel/UCrmd23A1am9KHAeYlE9XBwg
프론트엔드 개발자들
Angular, React, Vue 프레임워크들을 깊이 있게 알아봅시다.
www.youtube.com
각각 프레임워크에서 유명하신 개발자 분들이
같은 개념을 각 프레임워크에서 어떻게 다루는지 비교해가며 알려주기 때문에
처음 접하기에 좋은 것 같습니다.
처음부터 컴포넌트니, 데이터 바인딩이니,, 이런 복잡한 개념이 밀려들어오면
오히려 공부의욕이 사라지잖아요..!
그래서 오늘은 간단히 소개만 해드렸고,
앞으로 각 카테고리 별로
언어에 대한 기초 개념부터 하나씩 포스팅하고자 합니다 :)
즐코하세요!