유명한 Javscript 오픈소스 Top 10 😛

JunSung Choi·2021년 1월 28일

Github에서 Star를 기준으로 어떠한 Javascript 오픈소스가 가장 유명한지 Top 30을 정리해보려 한다.
프레임워크나 라이브러리에 국한되지 않고 Javascript 학습용 레포지토리, Javascript 가이드 레포지토리 등 Javascript랑 관련된 것은 모두 적어봤다.

1.freeCodeCamp

Star : 319K
Github 에서 Javascript topic 을 선택하여 정렬해보면 제일 위에 나오는 오픈소스 레포지토리이다.
freeCodeCamp 는 대화 형 학습 웹 플랫폼 으로써 온라인 커뮤니티 포럼, 대화방, 온라인 간행물 및 누구나 웹 개발을 학습하고 경험해볼 수 있도록 하는 비영리 조직이라고 한다.

위 사진처럼 웹 개발과 관련된 다양한 주제가 구성된 포럼 페이지도 볼 수 있고, 들어가보면 약간 Stackoverflow? 처럼 개발이나 학습하는데 겪은 이슈나 에러들을 올리며 도움을 받는듯 했다. 그 외에도 다양한 자료를 통해 학습하는데 도움을 받을 수 있는 웹 플랫폼 같다. 이러한 웹 플랫폼의 Github 레포지토리가 1위를 차지하고 있다!

2.Vue

Star : 179K
이제는 개발자라면 누구나 들었을 만한 Vue 프레임워크가 두번째에 위치해 있다. Vue 3 버전이 출시되어

Teleport
템플릿 표현식 관련 추가 문법
Suspense
Reactivity 주입 API
Composition API
등 크게 바뀌었다고 하는데 나중에 기회가 되면 Vue 를 활용해 웹 개발도 한번 해보고 싶다.

3.React

Star : 163K
Vue, angular 와 더불어 웹 개발 프레임워크(라이브러리) 의 3대장 중 하나인 React 가 star 수 179K 를 기록하면서 세번째로 위치해 있다.
React 는 현재 17.0 버전까지 릴리즈가 되어 있다. React 17 버전에서는 새롭게 사용할 수 있는 API 를 추가하지 않고, 추후 사용자들의 버전 관리를 용이하게 하기 위해서 내부 동작을 바꾸는데 초점을 두었다고 한다. 그것이 무엇이냐면...
앞으로 새로운 버전의 React가 릴리즈 될 때마다 리액트 팀은 React 프로젝트를 진행할 때 deprecated 된 API 를 사용할 수 있는것처럼 2가지 선택지를 제공하는 것이 좋지 못하다고 판단한 모양이다. 그래서 이번 17을 통해 점진적인 React 업그레이드를 가능하게 한다고 공식문서에 설명해주고 있다.
한번 공식문서 React v17 를 살펴보면 좋을 것 같다.

4.Bootstrap

Star : 148K
네번째는 Bootstrap 이다. 웹 개발을 처음 시작했을 때 Bootstrap 을 활용해서 반응형 개발을 많이 하곤 했는데... 요즘은 더 다양한 style 관련 프레임워크나 라이브러리들이 많아서 Bootstrap을 사용해본지는 오래 된것 같다. 그때는 2버전 or 3버전을 썼던것 같은데... 오랜만에 공식 홈페이지에 들어가보니 최근 v5.0 까지 릴리즈가 되어 있는것 같다. 그래도 가장 유명한 반응형 웹 개발 오픈소스인 만큼 여전히 많은 사람들이 사용중인 것 같다.

5.You-Dont-Know-JS

Star : 133K
You-Dont-Know-JS 가 나는 책만 있는줄 알았는데, Github 에 오픈소스 레포지토리로 마련되어 있는줄은 이번에 처음 알게 되었다. 그만큼 Github 에는 단지 프로젝트가 아닌, 다양한 주제의 오픈된 소스들이 많은 것 같다.
issue 항목들을 봐보니 책 내용들에 대한 피드백과 오타, 잘못된 표현, 애매한 표현 정정 요청 등 책 출판에 다양하게 기여할 수 있는 형태로 마련되어 있는 오픈소스 같다.
꼭 라이브러리나 프레임워크가 아닌, 이런 책이나, 가이드 문서 등 다양하게 오픈소스에 기여해보는 방법도 정말 좋은 경험이 될 것 같다.

6.Javascript

Star : 104K
airbnb 에서 관리하는 Javascript 레포지토리도 있다. 여기서는 Javascript 를 사용하는데 도움이 되는 다양한 style guide를 알려주고 있다.
React 에서 Javascript 를 사용하는데 좋은 style guide, Css & sass 를 사용하는데 좋은 style guide, Javascript 의 아주 기초적인 기본 문법을 사용하는데도 따르면 좋은 guide 등이 보기 쉽게 contents 별로 정리되어 있다. 처음에 Javascript 를 책으로 접하면서 배워 이런 가이드를 지키려 해보진 못했는데, 이 Github 오픈소스를 다양하게 참고해보며 개발 가이드를 실무에 적용해가며 개발해보면 참 좋을 것 같다.

example

4.1 Use the literal syntax for array creation. eslint: no-array-constructor

// bad
const items = new Array();

// good
const items = [];

4.2 Use Array#push instead of direct assignment to add items to an array.

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

4.3 Use array spreads ... to copy arrays.

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

4.4 To convert an iterable object to an array, use spreads ... instead of Array.from.

const foo = document.querySelectorAll('.foo');

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

7. Javascript-algorithms

Star : 94K
Javascript 기반으로 많이 알려진 알고리즘 및 자료구조가 예제를 담고 있는 저장소이다. 연결리스트, 이중 연결 리스트, 큐, 스택 트리 등 코딩테스트 대비나 자료구조의 학습이 Javascript 언어 기반으로 필요하다면 참고해볼 만한 좋은 저장소이다. Star 수가 많고 유명한 만큼, Javascript 기반의 코딩테스트들이 많이 늘고 있는 만큼, 이 저장소의 있는 코드를 따라 작성해보고 공부해보면 Javascript 를 활용한 코딩 테스트는 문제없이 준비해볼 수 있지 않을까 생각한다.(얼마전에도 프로그래머스에서 진행한 카카오 커머스 채용 코딩테스트에서도 순수 Javascript 만 사용할 수 있었던...😂)

8.Electron

Star : 89K
일렉트론이 89K 의 star 를 기록하여 8위를 하고 있다. 일렉트론은 얘기는 많이 들어봤지만 실제 사용해서 개발해 본 경험은 없다. 간단히 본 바로는... Javascript, HTML, CSS 를 이용해서 데스크탑 앱을 만들 수 있는 크로스 플랫폼 프레임워크이다. 데스크탑 앱을 만들기 위해서는 다른 언어를 배워야 하나... 라는 고민은 이제 필요 없고 웹 개발자라면! 이제 Javascript 만으로 데스크탑 앱을 만들 수 있는 것 이다.
Electron은 Chromium과 Node.js 를 사용해서 Javascript, HTML, CSS 를 윈도우 또는 Mac, 리눅스에 까지 직접 설치할 수 있는 애플리케이션을 만들 수 있도록 도와준다. 추후 실무에서 데스크탑 앱 개발을 위한 니즈가 필요하다면 사용해볼만한 아주 좋은 프레임워크 인것 같다.

9.Axios

Star : 81.2K
아홉번째로 Axios 이다. Axios도 처음 웹 개발을 접했을때 fetch 와 더불어 자주 사용하던 Http 비동기 통신 라이브러리이다.
Promise API 를 지원하고 Node.js 환경에서 잘 사용할 수 있는 라이브러리이기도 해서, 웹 개발을 할때 손쉽게 사용할 수 있었던 것 같다.
현재는 0.21.1 버전까지 릴리즈가 되어 있다.