.png)
모듈
개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
- export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다(모듈 내보내기).
- import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있습니다(모듈 가져오기).
1주차 미션을 진행하는데 그냥 js파일 하나로만 사용할 수도 있겠지만 대부분의 프로그램들은 모듈화되어서 파일이 나눠져 있을 것이라고 생각한다.
그렇기 때문에 모듈화해서 프로그램의 컴포넌트별로 나눠서 진행을 해보는 것도 좋은 공부가 될 것 같다고 생각했다.
index.html 파일에서 기존에 문법을 공부할 때는 그냥 <body> 태그 안에
<script src="./App.js">이런 식으로 했었는데 이 방법이 아닌 모듈을 사용하는 방법에 대해서 공부를 했다.
모듈은 특수한 키워드나 기능과 함께 사용되므로
<script type="module">같은 속성을 설정해 해당 스크립트가 모듈이란 걸 브라우저가 알 수 있게 해줘야 한다.
또한 모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작한다.
로컬에서 file:// 프로토콜을 사용해 웹페이지를 열면 import, export 지시자가 동작하지 않는다. 이런 경우 로컬 웹 서버인 static-server나, 코드 에디터의 ‘라이브 서버’ 익스텐션(Visual Studio Code 에디터의 경우 Live Server Extension)을 사용해야 한다.
글을 작성하면서 공부를 하고 있는데 지금 당장은 모듈을 공부할 때가 아닌 것 같다.
오히려 import, export에 관해서 어떤 식으로 js언어를 이용해서 프로그램을 만드는 지에 대해서 고민을 하면서 다른 사람들의 코드 구성을 보고 배우는 것이 좀 더 지금 단게에 맞는 공부라고 생각한다.
출처: (https://velog.io/@widian/%EC%9B%B9%EC%97%90%EC%84%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0) (https://ko.javascript.info/modules-intro)
