본문 바로가기
쿤즈 Dev/JS HTML CSS

새롭게 돌아올 Bootstrap 5! 그리고 사라진 jQuery와 새롭게 등장한 Vanilla JS!

by Koonz:) 2020. 8. 8.
728x90

부트스트랩은 웹 개발자들이나 디자인에 취약한 개발자들에게는 정말 놀랍도록 편리하게 디자인을 해주는 프레임워크입니다. 그리고 최근에 드디어 부트스트랩(Bootstrap) 5 의 알파(alpha) 버전이 등장하였습니다.

 

이번에는 어떤기능들과 디자인, 그리고 어떤것들이 사라지고 변화되었는지 하나씩 살펴보도록 하겠습니다.


사자린 jQuery! 새롭게 등장한 Vanilla JS!

학생때가 생각나네요. Javascript 를 공부하고 난 이후에 jQuery 를 접했을때는 정말 놀랍도록 혁명적이었습니다. 사용법도 편하고 사용을 안하는 곳이 없었으니까요.ㅎㅎ

 

그리고 필드에 나와보니 여러 사이틀들에서도 많이 사용하고 있는 것이 jQuery 였어요. 하지만 각 사이트마다 버전도 다르고 게다가 새로운 제품이 설치될때, 버전 충돌이 나서 회피해서 개발하거나 사용하는 경우도 많았습니다. 너무 편리한 프레임 워크지만 버전에 따라서 지원되는 기능과 지원이 되지 않는 기능들로 나뉘어 있었고 충돌도 있었습니다.

 

 

jQuery 를 사용했던 근본적인 이유는 바로 모든 브라우저가 HTML5 의 공식적인 지원과 지원하는 Javascript 의 버전들이 달라서 프로그래밍도 별도로 나눠서 했어야 했습니다. CSS 도 마찬가지였습니다. 그렇게 시간이 흐르고 대부분의 브라우저들이 모두 웹표준을 맞춰가면서 점점 IE 의 사용이 줄어들기 시작했습니다. 사실 IE 는 우리나라에서 가장 많이 사용하는 브라우져입니다. (ActiveX의 사용때문이죠).

 

타 브라우저의 사용이 증가하면서 모든 사이트에서 동일한 기능과 화면이 필요해졌고 이는 jQuery의 의존도가 높아지고 있을 무렵, Javascript는 계속 해서 발전해 왔습니다. 그리고 이제는 Javascript 만으로도 모든 브라우저에서 동일하게 사용하여 프로그래밍을 할 수 있게 되었습니다. jQuery 의 필요성이 점점 사라지는 것이죠.

 

그리고 부트스트랩5 가 등장하면서 jQuery 를 걷어낸다는 소문이 돌았었습니다. 그리고 알파버전이 등장하면서 jQuery 가 정말 빠진것을 볼 수 있었습니다. 그런데!! Vanilla JS?? 새로운 Javascript 프레임워크가 들어간것인가? 굳이 프레임워크를 걷어내고 새로운 프레임워크를 다시 넣은것인가? 이해할수 없는 현상이었습니다.


Vanilla JS 는 브라우저 내장 Javascript 그 자체다!

따로 플러그인을 가져올 필요도 없습니다. 따로 설치할 필요도 없습니다. 문법을 따로 배울 필요가 없습니다. 즉, Vanilla JS 는 우리가 알고 있는 순수 Javascript 그 자체입니다. 모든 브라우저에 내장되어 있는 Javascript 였습니다. 새로운 프레임워크가 아닌것입니다. 앞으로 우리가 공부하고 배워야 할 부분은 Vanilla JS 인 순수 Javascript 만을 배우면 될것 같습니다.

 

사실 부트스트랩은 jQuery에 대한 의존도가 굉장히 높았습니다. 프로그래밍을 하는 입장에서도 jQuery 를 한 번 사용하고 나면 순수 Javascript 의 사용법을 잊어버릴 정로도 의존도가 높아지긴 합니다. 그만큼 여러 브라우저를 신경쓰지 않고 기능에만 집중할 수 있기 때문입니다. 하지만 이제는 각 브라우저마다 내장되어있는 Vanilla JS 만으로도 충분히 여러 브라우저에서 동일한 기능을 사용할 수 있기 때문에 더이상의 jQuery 는 필요하지 않은 것으로 보입니다.

 

여기서 문제는 IE 브라우저입니다. 마이크로소프트에서도 IE 브라우저의 업그레이드는 더이상 진행하지 않으며 새로운 웹 표준에 맞게 Edge 라는 새로운 브라우저를 공개했습니다. 우리나라에서도 네이버에서 공개한 웨일 브라우저가 있습니다. 모두 크롬 브라우저의 오픈소스 프로젝트인 크로미움 기반의 브라우저들입니다. 그리고 내장된 스크립트도 Vanilla JS 입니다. 대부분의 브라우저들은 모두 이 스크립트를 지원하고 있지만 IE 만은 아직 좀 예외입니다. 그래서 부트스트랩 5는 IE 브라우저의 지원은 중단하였습니다.


전체적으로 깔끔해진 디자인. 아직 걷어낼게 많은 플러그인!

전체적인 느낌은 v4 버전보다 더 깔끔해졌습니다. 부트스트랩하면 반응형 앱으로 항상 보기 좋고 가독성 좋게 만들어 주는 것이 특징입니다. 그리고 이러한 움직임은 CSS 와 Javascript 를 이용한 개발이었습니다. v4 까지는 jQuery 의 의존도가 높기 때문에 jQuery 를 이용한 개발이었습니다.

 

 

앞으로 등장할 v5 는 순수 Javascript 인 Vanilla JS 만을 이용하기 위해서 알파버전부터 내놓고 버그를 찾거나 테스트를 진행할 것으로 보입니다. 사실 뼛속까지 수정하기 위해서는 더 많은 작업들이 필요하기에 시간이 더 걸릴것으로 보입니다. 최대한 부트스트랩을 사용하는 개발자의 입장에 맞춰 많은 기능을 넣어줄것으로 보이며 색상도 더 다양한 코드의 색상 팔레트도 제공하고 있습니다.


앞으로 공부하고 배워가야 할 방향

사실 프레임워크에 의존하기 위해서는 기본 프로그래밍을 알아야 합니다. 부트스트랩도 HTML + CSS + Javascript 의 조합입니다. 기본적인 부분은 알고 이후에 프레임워크를 배우면 훨씬 더 좋고 간결한 프로그래밍이 가능합니다. 이제는 jQuery 이전에 Vanilla JS 를 더 깊이있게 공부해 보는것이 좋을 것 같습니다. 앞으로는 이런 방향이 맞는것 같다는 생각입니다.

 

다만 우리나라에서는 jQuery의 의존도 역시 매우 높기 때문에 이 역시도 아직은 계속해서 배워나가야 할 부분인것으로 보입니다. 지금까지 새로 등장하는 부트스트랩5 와 순수 Javascript인 Vanilla JS 의 이야기였습니다.

 

댓글