외부 script 파일 읽어들이기
간단한 프로그램을 만들때
HTML 페이지 내부에 script 태그를 만들고 태그 내부에 자바스크립트 코드를 입력하였다.
하지만 프로그램의 규모가 커지면 파일 하나가 너무 방대해지기 때문에 파일을 분리하는게 좋다.
알아보자.
우선 아무 폴더를 생성하고, 폴더안에 파일 두개를 만들어준다.
파일 하나는 hyo.html 나머지는 hyo.js 로 만들어 주었다.
확장자가 js인 파일이 읽어들일 외부 자바스크립트 파일이다.
그리고 VSCode(Visual Studio Code)에서 폴더를 열고 hyo.html 파일에 html:5를 열어 head태그 내부에 <script src='hyo.js'>태그를 만든후 hyo.js파일에 코드를 입력하고 어떻게 되는지 본다.
// hyo.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="hyo.js"></script>
</head>
<body></body>
</html>
// hyo.js 파일
alert('안녕하세요')
// 또는
console.log('안녕!')->
그리고 HTML 파일은 위에서 아래로 태그를 읽어들이면서 차근차근 적절한 처리를 한다.
이런식으로 외부 자바스크립트 파일을 읽어들이게 된다.
Lodash 라이브러리
이번엔 다른 개발자가 만든 자바스크립트 파일을 읽어들이고 그걸 활용해보자.
다른 자바스크립트 개발자가 미리 여러 유틸리티 함수 즉 유틸리티 메소드들을 만들어 놓은 것을 라이브러리 라고 부른다.
그래서
자바스크립트에서 꽤 많이 사용하는 Lodash라는 라이브러리를 알아보려고 한다.
Lodash 라는 이름은
"-" 이게 대시인데 lodash는 로대시 즉 낮은 대시라는 의미로 "_" -> underscore 를 의미를 한다.
Lodash의 링크로 들어가보면 -> (Lodash 바로가기)
이처럼 나오는데,
이를 사용하고자 한다면 아래 Download에서
Core build 또는 Full build 를 눌러서 다운로드 해주거나 CDN 이라는 링크를 복사해서 사용하면 된다.
(대부분의 라이브러리 사용을 이런식으로 다운받거나 링크복사해서 한다)
우선 파일을 다운받는 방법부터 해보자.
Full build를 누른다.
누르고 나면 아래와 같은 화면이 나온다.
여기서 마우스 우클릭을 하여 다른이름으로 저장을 눌러 아까 외부 자바스크립트 읽어볼때 만든 폴더에 저장한다.
한폴더에 이렇게 저장되어있다.
저장할때 lodash.js라고 저장된다.
그리고 html 파일내부에 <script src='lodash.js'> 를 입력해주면 된다.
이번엔 CDN 링크 복사를 하여 사용하는법을 알아보자.
CDN을 누르면 아래와같은 페이지로 넘어가지는데
여기서 중앙에 lodash.min.js 쪽 우측에 복사할수 있는 항목이 있다.
그걸 클릭해주면 Copy URL 을 눌러 복사해 준다.
그리고 html파일 script 태그 속성에 링크를 복사해준다.
다운받아서 같은 폴더안에 넣고 lodash.js 파일에 경로 지정을 해줘도 되고, 링크를 복사해줘도 된다.
두가지 방법중 아무거나 써도된다.
추가설명 - CDN , min
CDN : 콘텐츠 전송 네트워크 (Contents Delivery Network) 의 약자이다.
전 세계 여러 지역에 전송할 데이터를 창고처럼 준비해두고 사용자가 데이터를 요청했을 때 가장 가까운 지역에서 데이터를 전송해준다면 훨씬 빠르게 데이터를 전송할 수 있다.
또한 가까운 지역에 문제가 있으면 그 다음을 가까운 지역에서 데이터를 전송하면 데이터를 받을 수 없는 문제도 해결할 수 있다.
이런 통신 네트워크를 CDN 이라고 한다.
즉 Lodash 라이브러리를 CDN 링크로 사용한다는 것은 이러한 곳으로부터 Lodash 파일을 읽어들여서 사용한다는 것이다.
min 버전 : min 버전의 자바스크립트 파일은 자바스크립트 코드를 집핑(zipping)한 파일을 의미한다.
위에서 Lodash Full 버전으로 다운받을때 나왔던 페이지를 보면 라이브러리와 관련된 소개가 앞에 들어가고 자바스크립트 코드가 나온다.
Lodash Full 버전일때 ->
그런데 이러한 데이터를 CDN으로 전송하는 경우 데이터의 용량을 줄이고자 소개를 줄이고 모든 코드를 응축한다.
이렇게 코드를 응축하는 것을 집핑(zipping)이라고 부른다.
Lodash min 버전 일때 ->
Lodash 라이브러리 사용해보기
이런식으로 Lodash 라이브러리를 읽어들이게 되면
다른 사람이 만들어놓은 자바스크립트 코드를 활용 할 수 있게된다.
일반적으로 라이브러리는 라이브러리를 제공하는 페이지의 상단의 Documentaion 을 클릭하면 문서 페이지로 이동할 수 있다.
Documentation 클릭하면 나오는 화면 ->
Lodash 라이브러리는
기존의 자바스크립트가 제공해주지 않는 여러가지의 유틸리티 함수들을 쉽게 활용할 수 있게 해주는 녀석이다.
예를 들어서 기존의 자바스크립트에서는 정렬을 하는 코드가 굉장히 어렵다.
하지만 Lodash라이브러리를 사용하게 되면 정렬을 쉽게 할 수 있다.
Lodash라이브러리에서 정렬해주는 함수는 sortBy() 라는 이름으로 제공이 된다.
Lodash 라이브러리는 _ 라는 이름의 객체 안에 수 많은 메소드를 담고 있다.
자바스크립트는 _ 와 $ 기호를 식별자로 사용할 수 있는데, 이때 _ 기호를 사용해서 식별자를 만들었을 뿐이다.
Documentation에서 sortBy()를 검색하면
사용하는방법이 나온다.
sortBy() 메소드를 사용하여 코드를 써보자.
sortBy() 메소드는 배열을 어떤 것으로 정렬할지 지정하면, 지정한 것을 기반으로 배열을 정렬해서 리턴해주는 메소드이다.
Lodash 라이브러리 이외에도 다양한 라이브러리 들이있다.
'popular javascript library 2021'으로 검색하면 다양한 라이브러리들이 나오므로 검색해서 보자.
