*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.

현재 9만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오 예상기간을 한 번에 비교해보세요😆

Stack Overflow에서 최근 실시한 설문조사에 따르면 자바스크립트(JavaScript) 인기는 그 어느 때보다 높습니다. 실제로 70%에 달하는 전문 개발자가 이 프로그래밍 언어를 사용하고 있습니다. 이것이 의미하는 바는 무엇일까요? 이제 사용자가 좋아하는 애플리케이션을 개발하려면 자바스크립트는 필수라는 것입니다.

하지만 자바스크립트의 최신 개발 트렌드를 좀 더 자세히 들여다볼 필요가 있습니다. 트렌드를 익히면 매력적이고 빠르며 사용자 친화적인 웹 애플리케이션을 개발하는데 많은 도움이 됩니다. 그렇다면 2021년 지금, 놓쳐서는 안 될 가장 핫한 자바스크립트 트렌드는 무엇일까요? 지금부터 같이 한번 알아보겠습니다!

#1. 리액트(React), 이제 내가 대세

리액트¹의 인기는 지난 몇 년 동안 꾸준히 높아졌고 여전히 멈출 기미가 보이지 않습니다.

리액트 라이브러리가 처음 등장한 것은 2011년입니다. 그 당시 페이스북은 자사의 서비스에 사용하기 위해 빠르게 증가하는 트래픽을 처리해 줄 특별한 툴이 필요했습니다. 그래서 도입한 솔루션이 FaxJS입니다. 리액트의 초기 프로토타입이라고 볼 수 있죠.

출처: FaxJs on GitHub

2013년, 페이스북은 리액트를 오픈소스 프로젝트로 공개했습니다. 페이스북이 쏟아부은 노력으로 인해 리액트는 이제 자바스크립트 개발자 라이브러리의 중심이 되었습니다. 현재 넷플릭스, 핀터레스트(Pinterest), 래딧(Reddit) 등 많은 기업이 리액트를 적극적으로 사용하고 있습니다.

2020년 현재까지 리액트 npm 패키지는 두 번째로 인기 있는 자바스크립트 프레임워크인 Vue.js 보다 4배 더 많은 다운로드를 기록하고 있습니다. 아래 그래프에서 자바스크립트 사용 트렌드를 확인할 수 있습니다.

출처: npm trends

저 또한 리액트 프레임워크의 열렬한 팬이며 2021년은 리액트 개발자에게 의미있는 한 해가 되리라 확신합니다. 리액트에 대해 더 관심이 있다면 리액트 개발을 위한 모범사례와 개발 도구에 대해 확인해보세요.

#2. 계속 진화하고 있는 뷰(Vue)

2020년, 오랫동안 기다려온 Vue.js의 3.0버전이 릴리즈됐습니다. 무엇이 달라졌을까요? 향상된 앱의 성능과 더 가벼워진 번들 크기를 먼저 언급할 수 있습니다. 또한, 타입스크립트(TypeScript)의 지원이 크게 개선되었습니다.

2021년 이후에 자바스크립트 트렌드에 영향을 미칠 주요 뷰의 주요 개선 사항은 다음과 같습니다.

· 성능 향상

· 대규모 프로젝트 지원

· 타입스크립트 통합

· 계층화된 모듈

#3. 타입스크립트의 급속한 발전

출처: The State of the Octoverse, GitHub

타입스크립트는 자바스크립트의 상위호환(superset) 언어라 알려져 있습니다.

마이크로소프트는 2012년 자바스크립트에 없는 선택적 타입(optional Type)을 지원하기위해 이를 도입했습니다.

타입스크립트만이 이에 대한 해결책은 아니지만 최근 State of JS의 조사 결과에 따르면 가장 널리 사용되고 있는 언어입니다.

타입스크립트의 주요 장점은 다음과 같습니다.

· 선택적 정적 타입 (optional static types)

· 빠른 버그 탐지

· 대규모 프로젝트에 대한 편리한 지원

· 광범위한 채택

· 낮은 진입장벽

이로 인해 타입스크립트는 개발자들이 두 번째로 사랑하는 언어로 뽑혔습니다. 2021년에는 그 인기가 더욱 높아질 것이라고 쉽게 전망할 수 있습니다.

장점만 나열했지만, 단점에 대해서도 잠깐 언급할 필요가 있습니다.

타입스크립트를 브라우저에서 실행하기 위해서는 코드를 자바스크립트로 컴파일해야 합니다. 소규모 프로젝트라면 이러한 단점이 크게 다가올 수 있습니다. 이 경우 자바스크립트를 사용하는 것을 추천합니다.

#4. 건물을 쌓아 올리는 벽돌에 비유할 수 있는 웹 컴포넌트

오늘날 널리 사용되는 프레임워크에서 웹 컴포넌트를 사용하는 것을 쉽게 찾아볼 수 있으며 자바스크립트만 따로 사용할 때도 마찬가지입니다.

그렇다면 이러한 인기는 어디서 오는 것일까요? 다음과 웹 컴포넌트가 가진 특징을 설명하며 위 질문에 대한 답을 구하는데 도움이 될 것입니다.

· 커스텀 엘리먼트(custom element)는 개발자가 원하는 대로 새로운 HTML 태그를 정의하고 자신만의 기능을 부여할 수 있는 기능입니다.

· 쉐도우 돔(Shadow DOM)²을 사용하면 개발자가 DOM 내부의 하위 트리를 웹 엘리먼트로 캡슐화 할 수 있습니다.

· ES 모듈은 자바스크립트 모듈을 포함하고 다른 JS 문서에서 재사용하는 방법을 정의합니다.

· HTML 템플릿을 사용하면 런타임에 인스턴스화함으로써 페이지 로딩에 영향을 주지않는 마크업 조각을 만들 수 있습니다.

2021년 현재, 자바스크립트 트렌드의 하나로써 웹 컴포넌트를 사용한다면 다음과 같은 장점이 있습니다.

· 재사용성 및 캡슐화

· 모바일 기능 강화

· 상호 운용성 및 유연성

출처: webcomponents.org

#5. 효율적인 데이터 조회를 위한 GraphQL

GraphQL 페이스북에서 출시한 또 다른 제품으로 2015년 처음 데이터 관리 도구로서 그 모습을 드러냈습니다. 유연한 구문이 가진 특성으로 인해 서버와 클라이언트 모두에서 손쉽게 데이터를 쿼리 할 수 있습니다. 최근에는 코세라(Coursera), 쇼피파이(Shopify), 기트허브(Github) 등 유명한 기업에서 널리 사용하고 있습니다.

GraphQL은 2020년 기준으로 프로그래머들에게 가장 큰 관심을 받고 있는 언어입니다. 89.6%의 프로그래머가 이 언어에 대해 들어본 적이 있거나 배울 의향이 있다고 응답했습니다.

그렇다면 왜 GraphQL이 자바스크립트 트렌드로써 주목받고 있을까요? 다음은 언어의 주요 특징입니다.

· 빠른 데이터 검색

· 커스터마이징 가능한 요청

· 쿼리 효율성 향상

출처: Medium

#6. 컴포넌트 기반 아키텍처의 부상

컴포넌트 기반 아키텍처는 설계를 별도의 논리적 또는 기능적 요소로 분해하는데 중점을 두고 있습니다. 이러한 요소는 메서드(method), 속성(property), 이벤트(event)와 같이 잘 정의된 통신 인터페이스를 구현합니다.

컴포넌트 기반 아키텍처의 주요 장점은 다음과 같습니다.

· 쉬운 배포

· 비용 절감

· 심플한 개발 프로세스

그렇다면 왜 컴포넌트 기반 접근 방식을 선택해야 할까요? 가장 큰 장점은 다른 프로젝트나 오픈소스 커뮤니티에서 누군가 작성한 코드를 여러분의 프로젝트로 빠르게 가져와 사용할 수 있다는 것입니다.

#7. 새롭게 떠오르는 스벨트(Svelte)

스벨트는 컴포넌트 기반 아케틱처를 가진 무료 오픈소스 프론트엔드(Front-end)³ 프레임워크입니다. 2016년에 출시된 첫 번째 버전은 자바스크립트로 작성되었습니다. 그러나 2019년 출시된 세 번째 버전은 대신 타입스크립트를 대신 사용하고 있습니다. 이때부터 개발자들 사이에 관심을 끌기 시작했고 현재 자바스크립트 개발자의 15%가 이 프레임워크를 매우 만족하며 사용하고 있습니다.

스벨트가 왜 특별한지 이해하려면 어떠한 장점이 있는지 살펴봐야 합니다.

· 반응형(reactiveness)⁴ 기본 탑재

· 성능 향상

· 간결하고 읽기 쉬운 문구

현재 스벨트는 위에서 소개한 다른 인기 자바스크립트 프레임워크의 경쟁상대가 되지 못합니다. 그러나 최신 트렌드를 보면 사용량이 꾸준히 증가할 것으로 보입니다.

지금까지 2021년과 그 이후에 프론트엔드 개발의 주류를 이룰 주요 자바스크립트 트렌드에 대해 간단히 알아봤습니다.

¹ 사용자 인터페이스 개발을 위해 페이스북에서 만들고 공개한 오픈소스 자바스크립트 라이브러리

² 구조 자체는 일반 DOM과 같지만, 외부에 노출되지 않고 외부 스타일에 영향을 받지 않는 DOM을 지칭함

³ 웹에서 동작하는 UI(User Interface) 부분을 말하며, 사용자가 눈으로 보고 인식할 수 있는 영역

⁴ 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만드는 기법

출처: https://medium.com/front-end-weekly/top-javascript-trends-to-watch-in-2021-4aa504a5b9d0

국내 1위 IT아웃소싱 플랫폼,

위시켓이 궁금하신가요?