오늘은 06 - 2장의 내용 정리를 마무리 해보자.
외부 script 파일과 라이브러리를 활용하는 방법에 대해 간단하게 알아볼 예정이다.
자바스크립트를 더 유용하게 활용하기 위해 꼭 알아야 하는 내용이니 잘 정리해보자.
그럼 정리 시작!
외부 script 파일 읽어들이기
지금까지는 HTML 페이지 내부에 script 태그를 만들고 자바스크립트 코드를 입력했다. 간단한 프로그램은 그렇게 만들 수 있지만, 프로그램의 규모가 커지면 파일 하나가 너무 방대해지기 때문에 파일을 분리하는게 좋다. 파일을 어떻게 분리할 수 있는지 알아보자.
일단 별도의 자바스크립트 파일을 만들어야 한다. 비주얼 스튜디오 코드에서 main.html과 test.js라는 이름으로 파일을 생성해서 같은 폴더에 넣자. 확장자가 js인 파일이 바로 읽어들일 외부 자바스크립트 파일이다.
외부 자바스크립트 파일을 읽어들일 때도 script 태그를 사용한다. 그리고 src 속성에 읽어들일 파일의 경로를 입력하면 된다. 간단한 프로그램을 만들고 실행해보자.
<!--main.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src = "test.js"></script>
<script>
console.log('# main.html의 script 태그')
console.log('sample 값:', sample)
</script>
</head>
<body>
</body>
</html>
// test.js
console.log('# test.js 파일')
const sample = 10
HTML 파일은 위에서 아래로 태그를 읽어들이면서 차근차근 적절한 처리를 한다.
Lodash 라이브러리
내가 만든 외부 자바스크립트 파일을 읽어들일 수도 있지만, 다른 사람이 만든 외부 자바스크립트 파일을 사용할 수도 있다. 다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 외부 라이브러리라고 부른다. 간단한 유틸리티 라이브러리를 살펴보자.
유틸리티 라이브러리는 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리이다. underscore, Lodash 등 다양한 라이브러리가 있는데, 최근 많이 사용되는 Lodash 라이브러리를 사용해보자.
lodash 홈페이지에서 라이브러리를 다운로드 할 수 있는데 full build를 통해 다운받는 방법 외에 CDN copies를 이용해서 다음과 같이 파일을 읽어들일 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script scr="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
</body>
</html>
이렇게 CDN을 사용하여 파일을 읽어들일 때 짚고 넘어가야 할 것이 있다.
첫째, CDN이란 콘텐츠 전송 네트워크라는 의미이다.
일반적으로 어떤 사이트는 어떤 특정한 지역의 서버에 위치한다. 예를 들어 서울시 홈페이지는 우리나라에 서버가 존재하고, 미국 국무부 홈페이지는 미국에 서버가 존재한다. 그렇기 때문에 한국에서 미국 국무부 홈페이지의 데이터를 전송받으면 속도가 느리다. 또한 여러 사정(미국 국무부 홈페이지 서버가 있던 곳에 산사태가 일어나서 전기가 끊기는 경우 등)에 의해서 데이터를 아예 받을 수 없는 경우도 있다.
만약 전 세계 여러 지역에 전송할 데이터를 창고처럼 준비해두고 사용자가 데이터를 요청했을 때 가장 가까운 지역에서 데이터를 전송해준다면 훨씬 빠르게 데이터를 전송할 수 있다. 또한 가까운 지역에 문제가 있으면 그 다음으로 가까운 지역에서 데이터를 전송하면 데이터를 받을 수 없는 문제도 해결할 수 있다. 이런 통신 네트워크를 CDN이라고 부른다. Lodash 라이브러리를 CDN 링크로 사용한다는 것은 이러한 곳으로부터 Lodash 파일을 읽어들여서 사용한다는 것이다.
둘째, min버전
min 버전의 자바스크립트 파일은 자바스크립트 코드를 집핑(zipping)한 파일을 의미한다. 일반적으로 기본적인 자바스크립트 라이브러리 파일은 라이브러리와 관련된 소개가 앞에 들어가고 자바스크립트 코드가 나온다. 하지만 이러한 데이터를 CDN으로 전송하는 경우 데이터의 용량을 줄이고자 소개를 줄이고 모든 코드를 응축한다. 이렇게 코드를 응축 하는 것을 집핑(zipping)이라고 부른다. 따라서 CDN과 함께 min 버전의 파일을 사용하면 script 태그의 src 속성에 그냥 링크를 입력해도 해당 파일을 매우 빠르게 다운로드받아서 사용할 수 있다. 그래서 CDN을 사용할 수만 있다면 일반적으로 CDN을 사용해서 라이브러리를 읽어들인다.
공식 홈페이지 오른쪽 상단에 있는 [Documentation]을 클릭하면 문서 페이지로 이동할 수 있다. 시간이 될때 문서를 한번 쭉 읽어보도록 하자.
Lodash 라이브러리에서 유용하게 활용할 수 있는 sortBy() 메소드를 사용해보자.
Lodash 라이브러리는 _라는 이름의 객체 안에 수 많은 메소드를 담고 있다. 자바스크립트는 _와 $을 식별자로 사용할 수 있는데, 이떄 _ 기호를 사용해서 식별자를 만들어 준 것이다.
sortBy() 메소드는 배열을 어떤 것으로 정렬할지 지정하면, 지정한 것을 기반으로 배열을 정렬해서 리턴해주는 메소드이다.
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
// 데이터 생성
const books = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
}, {
name: 'HTML 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}, {
name: '머신러닝 딥러닝 실전 개발 입문',
price: 30000,
publisher: '위키북스'
}, {
name: '딥러닝을 위한 수학',
price: 25000,
publisher: '위키북스'
}]
// 가격으로 정렬한 뒤 출력하기
const output = _.sortBy(books, (book) => book.price)
console.log(JSON.stringify(output, null, 2))
</script>
코드를 실행하면 가격(price)으로 정렬한 결과를 출력한다.
Luxon과 date-fns처럼 날짜와 시간을 쉽게 다루는 라이브러리, Handsontable처럼 웹 페이지에 스프레드시트를 출력하는 라이브러리도 사용해볼 수 있다. D3.js와 CharJS처럼 그래프를 그릴 수 있는 라이브러리, Three.js처럼 3차원 그래픽을 다루는 라이브러리도 있다.
구글에서 "popular javascript library 2023"으로 검색하면 다양한 라이브러리들이 나오므로 참고하자.
확인문제1.
문제: 다음 코드의 실행 결과를 예측해보세요. 예측과 다른 결과가 나온다면 왜 그런지 생각해보세요.
<script>
const num = 52000
num.원 = function () {
return this.valueOf() + '원'
}
console.log(num.원())
</script>
풀이: num은 기본 자료형이므로 메소드가 추가되지 않는다. num과 같은 기본 자료형은 new Number() 키워드를 통해 적절한 객체를 생성해주거나, 대응되는 객체 자료형의 프로토타입(prototype)에 메소드를 추가해야한다.
확인문제 2.
문제: 다음 코드의 실행 결과를 예측해보세요.
<script>
function printLang(code) {
return printLang._lang[code]
}
printLang._lang = {
ko: '한국어',
en: '영어',
ja: '일본어',
fr: '프랑스어',
es: '스페인어'
}
console.log('printLang("ko"):', printLang('ko'))
console.log('printLang("en"):', printLang('en'))
</script>
풀이: printLang이라는 함수가 _lang 이라는 객체를 속성을 가지고 있는 모습이다. 첫 번째 console.log()에서 ko가 매개변수로 전달되어 '한국어'를 출력하고, 두 번째 console.log()에서 en이 매개변수로 전달되어 '영어'를 출력한다.
확인문제 3.
문제: 모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도의 값을 구해보세요. 참고로 사인 90도는 1입니다. 아주 단순하게 생각해서 구현하면 0.8939966636005579라는 결과가 나옵니다. 0.8939966636005579가 나왔다면 왜 그런지, 그리고 이를 어떻게 해야 제대로 사용할 수 있는지 구글 검색 등을 활용해서 알아보고 코드를 수정하세요.
아주 단순하게 생각해서 구현한 코드
<script>
// 변수 선언
const degree = 90
// 출력
console.log(Math.sin(degree))
</script>
정답 코드
<script>
// 변수 선언
const degree = 90
// 출력
// Math.sin() 메소드는 괄호 내부에 라디안 단위를 넣어야 한다.
const radian = degree * (Math.PI / 180)
console.log(Math.sin(radian))
</script>
Math.sin() 메소드에 관한 모질라 문서:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/sin
Math.sin() - JavaScript | MDN
Math.sin() 함수는 숫자의 사인값을 반환합니다.
developer.mozilla.org
호도법과 60분법에 대해 쉽게 설명해놓은 블로그:
https://blog.naver.com/biomath2k/221867576248
[삼각함수] 호도법, 1 라디안 크기; 1 radian; 육십분법 비교; 1라디안 약 57도
중학교 때까지 각의 크기를 60°, 45° 로 표현되는 육십분법으로 나타냈지만, 고등수학부터는 계산과 표기의...
blog.naver.com
풀이: 모질라 문서를 확인해보면 Math.sin() 메소드는 도(˚) 단위가 아닌 라디안 단위로 주어진 각도의 사인 값(-1 ~ +1)을 반환 하는 것을 알 수 있다. 그렇기 때문에 Math.sin(90)을 하면 우리가 의도했던 sin(90˚)의 값이 아니라 sin(90rad)의 값인 0.8939966636005579가 출력되었던 것이다. 1˚ = PI / 180 라디안 이므로 90˚ = PI / 180 * 90 라디안이다. 이렇게 구한 라디안 값을 Math.sin() 메소드에 매개변수로 전달해주면 우리가 원하는 sin(90º)의 값을 구할 수 있다.
확인문제 4.
문제: 다음 중 어떤 종류의 객체들이 모두 공유하는 속성과 메소드를 추가할 때 사용하는 객체의 이름을 골라주세요.
① classProp
② prototype
③ sample
④ frame
정답: ② prototype
확인문제 5.
문제: 본문에서는 Lodash 라이브러리의 _.sortBy() 메소드를 살펴보았습니다. _.orderBy() 메소드도 한번 살펴보고 어떤 형태로 사용해야 하는지 직접 예제를 작성해보세요. 그리고 다음과 같은 배열을 이름(name)으로 오름차순 정렬해주세요.
정답 코드
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
// 데이터 생성
const books = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
}, {
name: 'HTML 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}, {
name: '머신러닝 딥러닝 실전 개발 입문',
price: 30000,
publisher: '위키북스'
}, {
name: '딥러닝을 위한 수학',
price: 25000,
publisher: '위키북스'
}]
// 이름으로 정렬한 뒤 출력하기
const output = _.orderBy(books, (book) => book.name)
console.log(JSON.stringify(output, null, 2))
</script>
._orderBy() 메소드에 대한 Lodash 문서:
https://lodash.com/docs/4.17.15#orderBy
Lodash Documentation
_(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primiti
lodash.com
풀이: ._orderBy() 메소드에 대한 Lodash 문서를 보면
_.orderBy(collection, [iteratees=[_.identity]], [orders])
의 형태로 활용됨을 알 수 있다. 첫 번째 매개변수에는 정렬하려는 배열 또는 객체가 들어가고, 두 번째 매개변수에는 정렬 기준을 지정하는 함수 혹은 함수 배열, 세 번째 매개변수에는 정렬 순서를 지정한다. 기본값은 오름차순 정렬이다. sortBy 메서드는 세 번째 매개변수가 없기 때문에 정렬 순서를 지정할 수 없다는 차이점이 있다. 주어진 배열을 이름(name)을 기준으로 오름차순 정렬하려면 첫 번째 매개변수로 주어진 배열을 넣고, 두 번째 매개변수로 기준을 지정하는 함수 (book) => book.name 을 넣어주면 된다.
이상으로 06 - 2장은 마무리 된다.
3번에 나누어 정리할 정도로 중요한 내용이 많았다.
내일은 06 - 3장의 내용을 정리하도록 하자.
오늘 하루도 쌓였다.
'혼공학습단 11기(完)' 카테고리의 다른 글
| [혼공스] 5주차 미션 (1) | 2024.01.30 |
|---|---|
| [혼공스] 06 - 3 '객체와 배열 고급' 정리(3) (1) | 2024.01.29 |
| [혼공스] 06 - 2 '객체의 속성과 메소드 사용하기' 정리(2) (0) | 2024.01.25 |
| [혼공스] 06 - 2 '객체의 속성과 메소드 사용하기' 정리(1) (1) | 2024.01.24 |
| [혼공스] 06 - 1 '객체의 기본' 정리 (0) | 2024.01.23 |
