※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.
목차
외부 script 파일 읽어들이기
프로그램이 커지면 html파일에서 <script>를 따로 다른 파일로 분리하는 게 좋다. 어떻게 분리할까?
- 외부 자바스크립트 파일(예: test.js)을 하나 만들고 거기에 자바스크립트 코드를 그냥 쓴다.
- 본래의 html 파일에서
<script src=”test.js”></script>로 외부 자바스크립트 파일을 읽어들이면 된다.
HTML 파일은 위에서부터 아래로 태그를 읽어들이면서 차근차근 처리하기 때문에, 위에 있는 <script>태그부터 처리하게 된다. 그래서 첫 번째 <script>블록을 읽으면서 먼저 선언적 함수를 훑고 다시 처음부분부터 순차적 실행을 하며, 다음으로 두 번째 <script>블록을 읽으면서 선언적 함수를 훑어 다 만들어 놓고 다시 블록의 처음부터 차례로 실행을 해주는 식으로 끝까지 가게 된다. 실행 순서와 관련해서 덮어쓰기, 변수 충돌 등을 고려할 때 유용하다.
한가지, 이 <script>블록에서 변수가 선언되면 저 <script>블록에서도 유효하다.
- 근데 블록마다 섀도잉이 가능하다고 하지 않았나..?
- 제일 바깥(script태그 안)에서 정의된 변수는 아예 전역 변수로 등록되나?
- 그래서 일단 전역 변수로 박아놓고 다른 ‘블록’에서 섀도잉해주면 그걸로 ‘덮어씌워’지는 건가? 없던 변수가 새로 생기는 방식이 아니고?
외부 자바스크립트 파일 뭉치 - Lodash 라이브러리
외부 라이브러리 : 다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것.
그 중,
유틸리티 라이브러리: 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리. underscore, Lodash 등이 있다.
사용하는 방법 1:
Lodash 다운로드 페이지에 가서 ‘Full Build’를 클릭하면 자바스크립트 파일을 다운받을 수 있다. 내가 사용하려는 HTML 파일과 같은 위치에 넣고 읽어들이면 된다.
사용하는 방법 2:
Lodash 다운로드 페이지에서 ‘CDN copies’를 클릭 → ‘…/lodash.min.js’ 파일의 오른쪽 카피 버튼을 클릭해 CDN 링크 복사 → 링크 자체를 HTML에 <script src=”CDN_링크”>처럼 붙여넣으면 이제 라이브러리를 읽어들일 수 있다.
CDN (Contents Delivery Network) 이란…
: 콘텐츠 전송 네트워크.
서버가 너무 멀다(데이터 전송 느림) + 서버에 문제가 생겼다(데이터를 아예 받을 수 없음) 의 콤보 문제를 해결할 수 있는 방법. 전 세계 여러 곳에 데이터 창고를 세워두고 사용자와 가장 가까운 곳의 창고에서 데이터를 꺼내 주고, 거기에 문제가 있으면 그 다음으로 가까운 곳에서 데이터를 전송하는 방식의 통신 네트워크.
ex. Lodash 라이브러리를 CDN 링크로 사용한다 = 이런 네트워크를 방식으로 라이브러리 데이터를 (그 때 그 때)받아 쓰겠다.
ex. Bootstrap이나 JQuery도 구글에서 CDN으로 받아왔었지.
min 버전이란…
: 자바스크립트 코드를 집핑한 파일. CDN 전송엔 용량이 적을 수록 좋으니까 min 버전 자바스크립트 파일을 쓰면 좋다.
집핑zipping : (라이브러리)소갯말을 줄이고 모든 코드를 응축하는 것. 무슨 앱 파일 암호화하는 것 비슷하게.
결론: min 버전 파일을 사용하면 script태그로 매번 데이터를 받아와도 충분히 빠르게 데이터를 가져올 수 있어서, 일반적으로 가능한 한 CDN을 사용해서 라이브러리를 읽어들인다.
이름이 왜 ‘Lodash’인가
_라는 이름의 객체에 메소드들을 다 담아놨기 때문이다.
ex. Lodash 라이브러리에서 Array 관련 메소드: _.sortBy()
// CDN으로 Lodash 라이브러리 임포트:
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
// 콜렉션(배열과 객체)에 적용 가능한 _sortBy():
<script>
const users = [
{'user': 'fred', 'age': 48},
{'user': 'barney', 'age': 36},
{'user': 'fred', 'age': 40},
{'user': 'barney', 'age': 34}
];
// 각 항목(객체)의 'user'속성값으로 오름차순 정렬
const output = _.sortBy(users, (user) => user.user)
console.log(output)
// => 같은 정렬값 끼리는 입력 순서가 지켜짐.
</script>
=> 결과:
(4) [{…}, {…}, {…}, {…}]
0 : {user: 'barney', age: 36}
1 : {user: 'barney', age: 34}
2 : {user: 'fred', age: 48}
3 : {user: 'fred', age: 40}
length : 4
+
https://kinsta.com/blog/javascript-libraries/
“popular javascript library 2022”로 구글링해 찾은 사이트 - 라이브러리와 프레임워크를 잘 나눠서 40개를 리스팅 해놓음. 설명도 핵심만 간결하고 아주 좋다.
참고:
[책] 혼자 공부하는 자바스크립트 - 윤인성
Uploaded by N2T