[JavaScript] 자바스크립트 라이브러리
함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수 효과를 최대한 멀리하고 조합성을 강조하는 프로그래밍 패러다임
함수형 프로그래밍이 부수 효과를 최대한 멀리하는 이유 중 하나는 오류를 줄이기 위해서고, 다른 하나는 조합성 혹은 모듈화 수준을 높이기 위해서이다. 높은 모듈화 수준은 생산성을 높이고, 오류 없는 함수들의 조합은 프로그램 전체의 안정성을 높여준다.
기존 값을 변경하지 않고 새로운 값을 만드는 것이 함수형 프로그래밍에선 아주 중요한 컨셉 중 하나이다.
Lodash(로다시, 로다쉬)란
Lodash(로다시)는 함수형 프로그래밍 패러다임을 이용하여 공통 프로그래밍 작업에 대한 유틸리티 기능을 제공하는 자바스크립트 라이브러리이다.
Lodash는 _ 의 메소드를 사용하기 때문에 해당 이름을 가지게 되었다. 예를들면 _.concat(..) 과 같은 식으로 사용한다.
- 유틸리티 - 유형 결정 및 수학 연산 단순화와 같은 공통 프로그래밍 작업을 단순화하는 데 사용
- 기능 - 바인딩, 장식, 구속, 스로틀링, 디바운싱, 카레, 포인터 변경을 단순화
- 문자열 - 트리밍, 대문자 변환, camel 케이스 등 기본적인 문자열 연산을 수행하기 위한 변환 기능
- 배열 - 생성, 분할, 결합, 수정 및 압축
- 수집 - 반복, 정렬, 필터링, 분할 및 구축
- 객체 - 액세스, 확장, 병합, 기본값 및 변환
- Seq - 체인링, 랩핑, 필터링 및 테스트.
추가설명 - CDN , min
CDN : 콘텐츠 전송 네트워크 (Contents Delivery Network) 의 약자이다.
전 세계 여러 지역에 전송할 데이터를 창고처럼 준비해두고 사용자가 데이터를 요청했을 때 가장 가까운 지역에서 데이터를 전송해준다면 훨씬 빠르게 데이터를 전송할 수 있다.
또한 가까운 지역에 문제가 있으면 그 다음을 가까운 지역에서 데이터를 전송하면 데이터를 받을 수 없는 문제도 해결할 수 있다.
이런 통신 네트워크를 CDN 이라고 한다.
즉 Lodash 라이브러리를 CDN 링크로 사용한다는 것은 이러한 곳으로부터 Lodash 파일을 읽어들여서 사용한다는 것이다.
min 버전 : min 버전의 자바스크립트 파일은 자바스크립트 코드를 집핑(zipping)한 파일을 의미한다.
Lodash Full 버전으로 다운받을때 페이지를 보면 라이브러리와 관련된 소개가 앞에 들어가고 자바스크립트 코드가 나온다. 이러한 데이터를 CDN으로 전송하는 경우 데이터의 용량을 줄이고자 소개를 줄이고 모든 코드를 응축한다.
이렇게 코드를 응축하는 것을 집핑(zipping)이라고 부른다.
_sortBy()
sortBy 메소드는 배열을 어떤 것으로 정렬할지 지정하면, 지정한 것을 기반으로 배열을 정렬해서 리턴해주는 메소드이다.
<script src="http://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js">
</script>
<script>
const books = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
}, {
name: 'HTML5 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}, {
name: '딥러닝을 위한 수학',
price: 250000,
publisher: '위키북스'
}]
const output = _.soltby(books, (book) => book.price)
console.log(JSON.stringify(output, null, 2))
</script>//콘솔 내용
[
{
"name": "혼자 공부하는 파이썬",
"price": 18000,
"publisher": "한빛미디어"
},
{
"name": "딥러닝을 위한 수학",
"price": 25000,
"publisher": "위키북스"
},
{
"name": "HTML5 웹 프로그래밍 입문",
"price": 26000,
"publisher": "한빛아카데미"
},
{
"name": "머신러닝 딥러닝 실전 개발 입문"
"price": 30000,
"publisher": "위키북스"
}
]다른 자바스크립트 라이브러리
1. Jquery
웹사이트의 50% 이상이 jQuery를 사용하여 전 세계에서 가장 많이 사용되는 라이브러리 중 하나.
jQuery는 DOM(문서 개체 모델) 조작에 주로 사용되는 라이브러리. DOM은 웹 페이지의 모든 요소를 나타내는 트리와 같은 구조이다.
이 라이브러리는 DOM 요소를 선택하고 아름다운 디자인/애니메이션을 만들고 이벤트를 처리하는 등의 작업을 수행한다. jQuery의 핵심 목표는 플랫폼 간 비호환성을 개선하고 동시에 HTML과 Javascript의 분리를 촉진하는 것이다.
jQuery는 많은 브라우저에서 사용되지만 몇 년 전만큼 사용하지는 않는다. 최신 브라우저는 DOM 인터페이스에서 작동하고 개선되어 이전보다 jQuery의 필요성이 줄었다.
2. React
React는 Facebook이 지원하는 오픈 소스 Javascript 라이브러리로 가장 유명하고 일반적으로 사용되고있다. .
소규모, 중간 규모 및 대규모 웹 응용 프로그램을 만들 뿐만 아니라 양질의 기능이 풍부하고 직관적인 웹 사이트를 만드는 데 사용된다.
코드와 상태를 캡슐화하는 데 도움이 되는 구성 요소를 사용해 복잡한 사용자 인터페이스를 쉽게 제어할 수 있다.
React는 HTML과 Javascript의 조합인 JSX 를 사용한다. JSX를 사용하면 HTML 내에서 직접 JavaScript 표현식을 쉽게 래핑할 수 있다.
3. VOCA
Voca 는 문자열 작업에 사용되므로 데이터를 조작하고 일을 더 간단하게 만들 수 있다. 대소문자 변경, 다듬기, 자르기 등과 같은 유용한 기능을 제공하며 모듈식 설계로 제작되었기 때문에 전체 라이브러리를 한 번에 로드하거나 개별 항목만 로드하도록 선택할 수 있는 자유를 제공한다.
4. Glimmer
Glimmer.js는 더 가벼운 구성 요소와 더 작은 크기를 특징으로 하며 강력한 Ember CLI(모델-뷰-뷰모델 패턴에 기반을 둔 오픈 소스 자바스크립트 웹 프레임워크)를 사용합니다. Ember.js와 함께 구성 요소로 사용하거나, 독립 실행형으로 실행하거나, 기존 애플리케이션에 웹 구성 요소로 추가할 수 있다. 4년밖에 되지 않았다.
5. D3.js
D3는 주로 데이터 시각화에 중점을 둔 Javascript librar Y.
다른 라이브러리보다 시각적으로 표현력이 더 풍부하고 최신 트렌드에 발맞추기 위함이라 JavaScript 데이터 시각화 라이브러리 중 하나로 알려져 있다. 파이 차트와 막대 그래프처럼 단순한 것일 수도 있고 3D 플롯처럼 복잡한 것일 수도 있다. 이 라이브러리에는 jQuery에서 찾을 수 있는 것과 유사한 강력한 API가 있다..
6. VelocityJS
놀라운 웹 애니메이션을 만드는 데 도움이 되는 고성능 JS 라이브러리. 무료이며 오픈 소스이며 성능 면에서 CSS 또는 jQuery와 같거나 더 좋다. VelocityJS의 도움으로 CSS나 jQuery의 경우와 달리 번거로움 없이 일련의 애니메이션을 차례로 실행할 수 있다.
7. WinJS
WinJS 는 Windows 8 및 10용 Windows 앱의 안전한 개발을 지원하는 Microsoft Corporations에서 개발한 Javascript 라이브러리
간단한 작업과 복잡한 작업을 수행하는 데 도움이 되는 광범위한 API 세트가 있다.
8. Vue.js
Vue 는 Virtual DOM(속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선하고자 나온 것이 가상돔(Virtual DOM).)모델을 기반으로 하며 컴포넌트 기반 아키텍처를 가지고 있다.
앱은 Vue를 사용하여 빠르게 구축할 수 있으며 다른 라이브러리의 경우 훨씬 더 많은 시간이 소요되는 동일한 작업에 더 적은 코드 줄을 사용한다. 다른 도구 및 유틸리티와 결합해 사용하는 프레임워크로서 Vue는 라우팅, 빌드 도구 및 상태 관리와 같은 복잡한 기능을 처리할 수 있습니다.