[슫스레터] 스트리트 ‘프런트엔드 프레임워크’ 파이터 최강자는?

프론트엔드 개발의 단초가 된 자바스크립트

2024. 5. 20.

님, 안녕하세요? 서두석 프로예요.🙋 지난 호에서는 DevOps에 중점을 두어 개발자가 일하는 환경이 어떻게 변하는지 살펴 보고, 이런 변화에 발맞춰 등장한 개발자의 생산성과 업무 만족도를 높이기 위한 방법론 등을 알아봤는데요. 이번엔 프런트엔드 개발 트렌드의 뜨거운 현장을 담아봤습니다.

• 프런트엔드 개발의 단초가 된 JavaScript
• 드디어 시작된 ‘프런트엔드 개발 프레임워크’의 춘추 전국시대

프런트엔드 개발은 웹사이트나 앱에서 사용자가 직접 상호작용하는 부분을 만드는 과정이에요.😉 웹 페이지의 디자인, 레이아웃, 사용자 입력을 처리하는 인터페이스 개발 등을 포함하죠. 사용자 경험을 직접적으로 향상하는 역할을 하기 때문에 웹 개발에서 매우 중요한 부분을 차지합니다.😎 그만큼 다이내믹한 변천사를 자랑하고 뉴템들이 속속 등장하고 있어 트렌드를 계속 따라가는 것이 중요해요!

프런트엔드 개발의 단초가 된 JavaScript📌

웹 페이지의 역사는 단순한 텍스트에서 복잡한 인터랙티브 체험까지 다채롭습니다. 처음엔 HTML로 만들어진 정적인 페이지가 전부였죠. 그러다 인터넷 세계가 점점 커지면서 좀 더 다이내믹한 무언가를 갈망하기 시작합니다. 웹이 더 생동감 넘치고 사용자와 소통할 수 있게 만든 주인공이 바로 JavaScript예요.

1995년생 JavaScript는🍰 웹의 한계를 뛰어넘게 만든 입지전적인 언어라 할 수 있어요. 물론 초기 버전은 완벽하지 않았답니다. Vanilla JavaScript라고 하여, 외부 라이브러리를 사용하지 않고 순수하게 JavaScrip 기본 구문을 이용한 코딩법으로 모든 것을 해결해야 했죠. 이때 새로운 동력이 등장합니다. 바로 AJAX와 jQuery예요. 이 둘은 웹 페이지를 더욱 동적으로 만들어 JavaScript의 성장을 가속합니다.

2006년 혜성같이🪐 등장한 jQuery! 이 새로운 라이브러리는 웹 개발을 혁신적으로 단순화시켜, 복잡한 코드 없이도 강력한 기능을 구현할 수 있게 했습니다. 시간이 흐르며 웹 개발이 더욱 세련된 방향으로 진화하자, jQuery의 인기는 서서히 사그라들었지만요.

뉴템들은 시대를 타고 계속 치고 올라오기 마련이죠. 그 후 등장한 것이 TypeScript와 WebAssembly입니다. 2012년생 TypeScript는 Microsoft가 JavaScript의 한계를 극복하고자 만든 언어예요. 더욱 안정적이고 관리하기 쉬운 코드를 가능하게 하면서, JavaScript와의 호환성 덕분에 대규모 프로젝트에 활용되기 시작했답니다. 그리고 WebAssembly는 높은 성능을 요구하는 애플리케이션을 웹에서 실행할 수 있도록 하여 웹의 가능성을 크게 확장했어요.👍

이 모든 기술의 발전은 웹을 단순한 정보의 표시 수단에서 강력한 인터랙티브 플랫폼으로 변모시켰습니다. 이제 프런트엔드 개발은 끊임없이 진화하는 영역이며, 새로운 기술의 등장으로 더욱 흥미로운 변화가 일어나게 됩니다.

드디어 시작된 ‘프런트엔드 개발 프레임워크’의 춘추 전국시대

앞서 다양한 언어를 만나봤는데요. 이것만으로 복잡한 프런트엔드 웹 애플리케이션을 직접 개발하기란 쉽지 않았습니다. 그래서 개발자를 위한 프런트엔드 프레임워크가 등장합니다.✨

바로 이 프런트엔드 개발 프레임워크의 춘추 전국시대가 열립니다. 빅3 대장을 필두로 끊임없이 뉴템들의 도전장이 날아들고 있어요!👊

• 빅3 대장, 우리가 누군지 아니?🤔

: JavaScript를 기반으로 한 Angular, Vue.js, React

1) Angular : 2010년 구글이 개발한 것으로, 웹 애플리케이션을 효율적으로 구축할 수 있도록 하는 MVC(서버 앞 단을 세 영역으로 나눠서 개발하는 Model-View-Controller)를 사용합니다. 시간이 흐르면서 러닝 커브가 높고 상대적으로 낮은 자유도로 인해 점차 인기가 하락하고 있지만, 이후 등장한 많은 프레임워크의 단초가 됐죠.

2) Vue.js : 2014년 구글 출신 개발자가 Angular의 불편을 해소하고자 만들었어요. 사용자 인터페이스에 초점을 맞추고 간결하면서도 강력한 API(*)를 제공합니다.💪 코드를 재사용하기 쉽게 컴포넌트를 조합하여 화면을 구성할 수 있어요.

* API (Application Programming Interface) : 소프트웨어 또는 시스템 간 상호작용을 가능하게 하는 인터페이스로, 다양한 기능이나 데이터를 다른 프로그램에서 접근하고 사용할 수 있도록 도움.

3) React : 이 녀석을 주목해 봅시다.🔍 2013년 페이스북에서 개발한 프런트엔드 라이브러리로, UI를 구축하기 위해 사용해요. 주요 특징 중 하나가 Virtual DOM을 사용하는 건데요. 전체 UI를 다시 그리는 대신, 변경된 부분만 실제 DOM(*)과 비교하여 최소한의 필요한 부분만 업데이트하는 방식이에요. 이를 기반으로 빠르게 인기를 얻어 빅3 대장 중 no.1에 오르게 되죠. 2022년 기준 웹 개발자의 약 71%가 React를 활용한다고 해요.

* DOM (Document Object Model) : 웹 페이지의 구조를 나타내는 방식으로, 웹 페이지에 있는 모든 요소(텍스트, 이미지, 버튼 등)를 트리 형태로 조직화하여 브라우저가 이해하고 표시할 수 있게 함.

• 내 도전장을 받아랏!

: 초스피드⚡ & 깃털 같은 가벼움을 내세운 Svelte, Solid.js, Qwik

2010년대를 주름잡던 빅 3 대장 월드에 변화의 물결이 일어납니다. 2010년대 말, 차기 왕좌를 노리며 Svelte, Solid.js, Qwik가 등장한 것이죠. 이들이 내세운 무기는 기존보다 훨씬 가볍고, 빠르고, 높은 성능입니다.

1) Svelte : 2019년 이후 '핫템🔥'으로 떠오른 프레임워크 중 하나예요. 적은 코드 양(less code), Virtual DOM을 사용하지 않는 구조(React와 반대네요)로 진정한 반응성(Truly Reactive)이 강점입니다. React나 Vue.js보다 40% 적은 코드량으로도 같은 기능을 구현하고, 컴파일 시 JavaScript 코드를 생성하여 별도의 런타임 라이브러리가 필요 없습니다.

2) Solid.js : 2021년 이베이 개발자가 만들었어요. React와 유사한 컴포넌트 기반 설계지만, 성능과 단순성에 더 큰 중점을 둡니다. Svelte과 마찬가지로 Virtual DOM을 사용하지 않고, 조정 알고리즘(*)을 활용하여 성능을 크게 향상해요. 실제 React와 비교해 보니 스크립트 로딩 시간과 렌더링 시간을 상당히 단축한 걸로 나왔어요.📉

* 조정 알고리즘 : 브라우저의 실제 DOM과 애플리케이션 상태 사이의 차이를 효율적으로 조정하여 최소한의 변경으로 UI를 업데이트하는 것.

3) Qwik : 2020년 구글이 개발한 오픈소스 프레임워크예요. React와 구조는 유사하지만, 서버에서 HTML를 미리 랜더링하여 초기 로딩 속도를 줄이면서 컴파일 시점에 타입 검사를 수행하여 코드의 안정성을 향상해요.👍 구글 클라우드 플랫폼 서비스를 활용한 서버리스 아키텍처를 지원한다는 게 차별점이죠.

• 젊음의 패기를 무시할 수 없지

: 새로운 아이디어로 무장한 뉴페들💡

웹 개발 세계에도 새로운 바람이 불고 있어요. 신선하면서 꽤 도전적인 녀석들이 나타나죠. 빅3 대장처럼 거대해질지 지켜보는 재미가 있겠어요!

1) Inferno : React에 익숙한 개발자라면 쉽게 친해질 프레임워크예요. '놀랍도록 빠른 속도'라는 모토로 인기를 끌고 있는데요, 마치 스포츠카가 스타트 라인에서 가속하는 듯한 느낌을 줍니다.

2) Astro : 2022년 8월에 등장한 아주 따끈따끈한 신상입니다.🌞 키 포인트는 '아일랜드 아키텍처'라는 새로운 방식을 도입한 건데요, 웹 페이지가 마치 여러 개의 독립된 섬들처럼 각자의 역할을 수행하게 함으로써, 웹 페이지 로딩 속도를 대폭 향상해요.📈 여러 프레임워크의 컴포넌트들을 하나의 페이지에서 조화롭게 사용할 수 있어요.

3) Alpine.js : 소규모 프로젝트에서 React나 Vue.js 같은 툴이 조금 부담스럽다면 대안이 될 거예요. 가벼움이 최대 장점이거든요. 마치 프레임워크 계의 미니멀리스트라 할 수 있어요. 필요한 기능만 간결하게 유지하면서도 강력한 성능을 발휘합니다.

4) 그리고 현재 전 세계에서 가장 많이 사용되는 개발 언어가 Python이란 사실! Python 개발자를 위한 뉴템도 등장했으니, 바로 Reflex와 PyScript입니다. Reflex는 순수 Python을 사용해 프런트엔드와 백엔드 모두를 처리할 수 있는 풀스택 능력을 갖췄어요. PyScript는 클라이언트 사이드에서 Python 로직을 JavaScript처럼 작동하게 한답니다.😇

끊임없이 변화하는 개발자들의 프레임워크 선호도 : State of JS 2022

프런트엔드 기술은 과거에도, 현재에도, 미래에도 계속 발전해 나갈 거예요. 이 모든 기술이 어우러져 우리가 일상에서 경험하는 웹의 모습을 형성하게 되죠. 프런트엔드 개발의 다음 단계가 더욱 기대되는 이유입니다!😊

"프런트엔드는 왜 처음부터 엔드야?

프런트스타트는 없는거야? 두둥딱!"

이번에도 많은 분들이 애정이 담긴 피드백을 많이 남겨주셨는데요!👀 개발자 경험이라는 개념이 인상 깊었다는 분도 계시고, 처음 구독했는데 굉장히 유익한 정보라 재밌다고 하셨던 분들, 그리고 좀 더 개선해나갈 수 있도록 아낌없는 피드백을 주신 분들, 모두 모두 감사드려요!😍 더불어 뉴스레터를 준비하는 그 노력을 알아봐 주시니 여러분들의 애정과 관심에 더욱 보답하기 위해 앞으로도 더욱 좋은 정보를 소개해 드릴게요!🧡

이번 슫스레터는 어떠셨나요? 멘토들에게 하고 싶은 말이나 개선되었으면 하는 부분 등 어떤 의견도 좋아요. 님의 소중한 시간을 내어주셔서 이번 주제에 대한 이야기, 쓴소리 등 자유롭게 작성해 주신 피드백은 슫스레터가 성장하는 데 아주 많은 도움이 된답니다.😉 피드백을 남겨주신 분들께는 감사의 마음을 담아 추첨을 통해 선물도 드려요!

🎁 선물 : 메가커피 수고했어 오늘도 세트 (10명)
📌 이벤트 기간 : 5/20(월) ~ 5/26(일)
📌 당첨자 발표 : 5/29(수)

좋았어요🥰

아쉬워요😐