프로그램의 규모가 커지면 파일을 분리해야 한다.
1. 별도의 자바스크립트 파일 만들기.
외부 자바스크립트 파일을 읽어들일 때도 script 태그를 이용한다. 그리고 src 속성에 읽어들일 파일의 경로를 입력하면 된다.
이렇게 외부 자바스크립트 파일을 불러오면 해당 파일의 메소드, 변수 모두 사용 가능하다.
2. 외부 라이브러리
내가 만든 외부 자바스크립트 파일을 읽어들일 수도 있지만, 다른 사람이 만든 외부 자바스크립트 파일을 사용할 수도 있다. 다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 외부 라이브러리라고 부른다.
2-1. 유틸리티 라이브러리
개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리. underscore, Lodash 등 다양한데, 요즘 많이 사용되는 것은 Lodash 라이브러리다. 다운로드 링크: lodash.com/
full build 버튼을 누르고 나타나는 화면에서 오른쪽 마우스키를 누르고, 다른이름으로저장 후 html 파일과 같은 폴더 안에 넣는다.
혹은 cdn 링크를 복사해서 스크립트 태그 안에 src="" 안에 붙여넣는 방법도 있다.
* CDN이란? 데이터 전송의 효율을 높이기 위해 전세계 여러 지역에 전송할 데이터를 분산시켜 저장해 놓은 것. Contents Delivery Network의 약자.
* min 버전이란? 자바스크립트 코드를 집핑(zipping = 코드 압축)한 파일을 의미. -> CDN의 min 버전 파일을 사용하면 해당 파일을 매우 빠르게 다운 받아서 사용 가능. - 되도록이면 CDN이 좋은 이유.
Lodash
_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn
lodash.com
* underscore는 '_' 기호를 의미한다. Lodash는 Low Dash의 줄임말로 역시 '_'를 나타낸다.
Lodash 메소드 설명서 lodash.com/docs/4.17.15
Lodash 라이브러리는 _라는 이름의 객체 안에 수 많은 메소드를 담고 있다.
-------------------그외
Luxon, date-fns처럼 날짜와 시간을 쉽게 다루는 라이브러리, Handsontable처럼 웹 페이지에 스프레드시트를 출력하는 라이브러리도 있다. D3.js나 ChartJS처럼 그래프를 그릴 수 있는 라이브러리, Three.js처럼 3차원 그래픽을 다루는 라이브러리도 있다.
라이브러리를 많이 살펴볼수록 자바스크립트로 할 수 있는 일의 폭이 넓어진다. 또한 라이브러리 코드를 읽어보면 실력자들이 어떨게 코드는 작성하는지도 알 수 있다. 구글에서 "popular javascript library 2020"으로 검색하면 다양한 라이브러리들이 나온다.
'웹' 카테고리의 다른 글
| JavaScript 문서 객체 조작 (0) | 2021.03.14 |
|---|---|
| JavaScript 객체와 배열 고급 - 얕은 복사, 깊은 복사 (0) | 2021.03.14 |
| 기본 자료형 객체 활용 (0) | 2021.03.14 |
| javascript 객체의 속성과 메소드, 프로토타입 prototype (0) | 2021.03.14 |
| javascript 객체 (0) | 2021.03.13 |
