210909 TIL

TIL DAY 42

오늘 배운 일

✔️ 코드잇에서 JavaScript 중급

• 모듈이란?

  • 코드를 관리하는 가장 작은 단위이며 분리되어 작성되는 성질을 가지고 있다.
  • 자바스크립트에서 모듈이란 대규모의 프로젝트를 진행할 때 여러 개의 파일로 나눠야 되는 상황이 올 수 있습니다. 이 때 여러 개의 각각의 파일들을 독립적인 작업을 수행할 수 있수 있는게 스크립트 모듈화입니다.

  모듈 파일의 조건

  • 독립적인 scope가 존재해야 모듈이 충족된다. (모듈 스코프)
  • 한 파일 변수와 함수를 선언하고 다른파일에서 작동을 시키면 에러가 나는게 아니라 정상적으로 작동되며, 변수를 바꿀 수 도 있다.

  일반적인 js파일 모듈화 시키기...
  

  script태그 안에 type을 작성하고 module이라고 지정을 하면은 된다. 그러면 다른 js파일에서 함수나 변수를 불러올 수 없고 모듈 스코프가 사용이 된다.

모듈에는 import와 export문이 있습니다.

import : 외부 모듈 가져오기
export : 모듈 내보내기 export를 해야 import문으로 가져올 수 있습니다.

모듈 문법을 이용하기 전...

html 파일

첫번째 js 파일

두번째 js 파일

결과값 :

하지만 모듈 문법을 이용했을 경우에는....

html 파일

첫번째 js 파일

두번째 js 파일

결과값 :

• 위에 있는 예제와 똑같을 결과를 보여준다.
• 첫번째 js 파일에서 선언된 함수와 변수를 내보내서(export), 두번째 파일에서 불러오기를(import) 하면 작동이 완료된다. 그리고 굳이 html에서 export하는 파일은 안써도 된다.

오늘 수업 느낀점 :

• 오늘은 자바스크립트에서 대형 프로젝트를 진행할 때, 가장 중요한 module에 대해 배워보는 시간을 가져봤는데, 아직은 쉽게 느껴지고, 조금씩 더 응용을 하면은 나도 새롭게 프로젝트를 할 수 있다는 것에 재미를 느낀다.