2020년 눈여겨 볼만한 프런트엔드 프레임워크

Svelte

최근 트렌드 분석을 하다가 알게 된 프레임워크다.

공식 홈페이지에 방문하여, Tutorial를 통해 내용을 간략히 살펴보니,

Vue의 SFC(Single file component) 제작방법과 유사하다.

 

Svelte의 3가지의 장점은

• 적은 코드 양
• Virtual dom이 없다.
• 진정한 반응성을 제공한다.

여기서 "Virtual dom이 없다"가 제일 관심 가는 내용이었다.

최적의 Dom 트리 상태를 유지하기 위해 Virtual dom이 만들어졌는데,

Svelte는 Dom과 이전의 데이터와 비교 연산에 많은 패널티가 있다고 말한다.

 

https://2019.stateofjs.com/

2019년도 갑자기 관심지수가 높아지고 있다.

개인적인 생각으로는 요즘 디바이스 성능이 너무 좋아져서 사실 Virtual dom 이 있든 없든 성능의 차이는 크게 다르지 않다고 생각한다.

아마도 많은 사람들이 3대 프레임워크 이후 새로운 것을 배우고자 하는 관심 지수가 아닐까 한다.

 

Svelte • Cybernetically enhanced web apps

 

Tailwind css

https://2019.stateofcss.com/

CSS 프레임워크는 너무도 많다.

대부분의 프레임워크의 장점이자 단점으로는 Component 위주로 제작을 해야 한다는 것인데,

Tailwind는 여러 유틸리티를 이용해 제작 한다.

 

사실 처음에는 Tailwind의 거부감이 있었다.
Bootstrap 4가 릴리스 되었을 때, 클래스를 경우의 따라 다양하게 만든 것을 보고, 컴포넌트 위주의 작업 방식을 벗어나는 것 같았다.

그런데 Tailwind는 보란 듯이 더 많은 클래스를 제공하고 있다.

Responsive Grid부터 마우스 오버 효과까지 모든 것을 유틸리티로 만들 셈인가 보다.

13년 전 현대카드 프로젝트에 참여한 적이 있는데, 당시 팀장님이 “css를 inline style처럼 쉽게 쓰면서, 유지 보수가 편한 방법은 없을까” 고민하던 내용을 현실화해놓은 듯했다. (팀장님 보고 계신가요?)

유틸리티 위주의 프레임워크라 해도 Tailwind로 만들어진 컴포넌트 사이트도 있으니 살펴보도록 하자.
https://tailwindcomponents.com

Tailwind CSS - A utility-first CSS framework for rapidly building custom designs

 

마무리

지금까지 많은 프런트엔드의 기술들이 만들어지고, 사라지고,

웹 기술들이 점점 상향 평준화되면서 프런트 개발자를 꿈꾸는 사람들이 정말 많은 것들을 배워야 하는 시대이다.

2020년에는 새로운 것들보다는 기존 프레임워크들의 성능/기능 업데이트가 위주였음 하는 바람이다.