Angular - Module(1)

 

안녕하세요.

 

모듈에 대해서는 길어서 

두번으로 나누어서 진행하겠습니다.

 

이번 시간에는

1. 모듈의 정의

2. ES6에서 모듈이 무엇인지

3. Angular에서 모듈을 어떻게 사용하는지

 

관련해서 알아보겠습니다.

 

 

 

---

1. 모듈 정의

 

API를 이용하여  다른코드에서 재사용이 가능한 코드라고 정의하고 있습니다.

 

 

 

 

 

 

---

2. ES6(자바스크립트 표준규격 버전6) 모듈 정의

API를 이용하여  다른코드에서 재사용이 가능한 코드

+

변수의 스콥이 모듈 내로 제한

(모듈 자체가 ES6에서 제공하면서 각각의 파일들이 모듈이 됨

그리고 각각의 파일에서 정의 된 변수들이 그 파일 안에서의 스쿱이 보장이 됨 )

현재 웹 브라우저가 ES6를 지원하지 않아서 system.js, babel를 이용해야함

 

 

 

 

 

---

3. Angular CLI에서 모듈

 

Angular CLI는 웹팩을 통해서 번들링을 함

웹팩이 main.ts파일을 통하여 import해야 할 것들을 찾아서

하나로 묶어줌

 

first-app > src > app 

경로에 ts파일을 하나 만든 후

 

 

 

이와 같이 코드를 작성합니다.

 

TSModule이라는 클래스를 만들고, 이것을 

다른 클래스에서 impot를 할 수 있게 export를 적어줍니다.

그리고 Hello라는 함수를 만들었습니다.

 

 

 

main.ts로 돌아와서

TSModule 클래스를 impot해준 뒤,

함수를 호출합니다.

 

 

 

그리고 cmd에서 ng serve 명령어를 통해 빌드해줍니다

 

 

여기서 웹팩이 main.ts 모듈을 읽고

여러 import된 파일들을 하나로 번들링 해주고

브라우저가 인식 할 수 있게  TS파일을 ES5로 바꿔줍니다

 

 

 

 

그리고 개발자도구를 보시면,

호출이 된 것을 확인 할 수 있습니다.

 

 

 

 

감사합니다