출처 : 인프런 얄팍한 코딩사전
HTML에 불러오는 방법
이 스크립트를 위의 HTML 파일에 로드하여 사용하는 방법
- 헤드에 스크립트로 로드
스크립트 동작하지 않음 - 스크립트 로드 시점에는 body 요소가 로드되지 않았음
스크립트의 크기가 클 경우 그 아래 요소들의 로드가 지연됨 - 동기적 로드
- body 요소들 아래에 로드
동작은 하지만 좋은 코드가 아님 - 문서 줄 수가 많다면...
- onload 이벤트 사용
스크립트를 실행하기 위한 onload 이벤트 등록 필요
문서의 동기적 로드 문제 여전
- async / defer 로드
defer가 가장 좋은 방식
비동기적으로 문서를 로드하고 HTML 파싱 후 모두 실행하므로
모듈과 라이브러리
페이지에 자바스크립트 파일 여럿을 로드할 때 문제점들
- 네임스페이스 문제
같은 상수나 변수명이 둘 이상의 파일에서 사용되었으므로 오류 발생
다른 파일에 상수/변수명이나 함수명이 중복 사용되지 않았는지 확인해야 함
규모가 큰 웹페이지를 분업하여 만들 때 특히 큰 어려움
- 파일의 순서 문제
다른 파일의 코드가 필요할 경우 순서에 의존적임
한 파일의 코드가 다른 파일의 변수에 영향을 미칠 수 있음 - 오류 위험
결국 큰 .js 파일 하나를 나눠 작성하는 것에 불과
모듈 사용하기
- 기본 사용법
모듈로서 로드할 파일에는 type="module" 속성을 넣어줌
모듈은 자동으로 defer로 로드됨
실행코드가 들어있는 파일만 로드하면 됨
export
따라오는 식별자를 다른 모듈에서 사용할 수 있도록 공개함
상수, 변수, 함수, 클래스 모두 export 가능
import
타 모듈에서 공개한 식별자를 자신의 스코프로 로드
모듈의 요소들을 객체 디스트럭쳐링 방식으로 가져올 수 있음
- 여러 모듈들을 가져와 사용하기
- 하나의 모듈 객체로 묶어서 가져오기
- 이름없는 하나의 값으로 반환하기
한 모듈에서 하나만 사용 가능
일반적으로 특정 주제의 기능들을 하나의 객체로 담아 공개
default로 공개된 것을 import할 때는 {}로 감싸지 않음
5 . 모듈에서는 await을 바로 사용 가능
- Node.js에서 모듈 사용
package.json의 객체에 아래의 type 항목 추가
Node.js가 최신 버전이 아닐 시 fetch 관련 코드 지우고 실행할 것
외부 라이브러리 로드
웹팩과 바벨
I. 웹팩 Webpack
번들러 bundler - 프로젝트에 사용되는 파일들을 하나 또는 소수의 파일들로 압축
어플리케이션이 로딩 및 실행 속도 향상
각종 플러그인과 옵션을 사용하여 코드를 다양한 방법으로 변환/압축 가능
공식 사이트
동종/유사 제품: RollUp, Parcel, Gulp, Vite...
II. 바벨
자바스크립트를 보다 오래된 환경에서 동작할 수 있는 버전으로 컴파일
공식 사이트
기타 방법: 타입스크립트 컴파일러 사용
실무에서는 리엑트나 뷰를 사용하기 때문에 바베을 직접 할 필요는 없을수 있고 이 구조만 이해해보자
왼쪽 탭에 최신 문법을 적용하면 우측 탭에 ie11 버전으로 확인할수 있다.
