정식 팀 첫 과제 2일차

규갓 God Gyu·2023년 10월 25일

프로젝트

목록 보기

7/81

일단 css 상관없이 내가 구현해야하는 리뷰작성은 완성지었고, 나머지 부족한 부분은 팀원들과 같이 힘을 합쳐서 구현할 예정

모듈 소개

분리된 파일 각각을 모듈이라 부름
대개 클래스 하나 혹은 특정 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성

export - 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수,함수에 접근(모듈 내보내기)
import - 외부 모듈의 기능을 가져옴(모듈 가져오기)

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

sayHi.js에서 export를 붙인 sayHi 함수를 저장하면

// 📁 main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // 함수
sayHi('John'); // Hello, John!

main.js에서 import {sayHi} from './sayHi.js'로 불러올 수 있다
여기서 import 지시자는 상대 경로(./sayHi.js)기준으로 모듈을 가져옴

브라우저가 알게 하기 위해선 script type ="module"을 넣어줘야함

엄격모드

항상 모듈은 엄격모드(use strict)로 실행됨
선언되지 않은 변수에 값을 할당한 코드는 에러를 발생시킴

모듈 레벨 스코프

자신만의 스코프가 있어서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다.
그렇기 때문에 외부에 공개하려면 export해야하고,
그 내보내진 모듈을 가져와 사용하려면 import해야한다

이 부분은 좀 특색있는데, 브라우저 환경 안에서도 모듈을 만들게 되면 독립적인 스코프가 만들어진다

<script type="module">
  // user는 해당 모듈 안에서만 접근 가능합니다.
  let user = "John";
</script>

<script type="module">
  alert(user); // Error: user is not defined
</script>

즉 2개의 스크립트가 각각의 스코프 안에서만 작용하며, 같이 사용하려면 export,import를 넣어줘야 한다

여기서 참고로 브라우저 환경에서 부득이하게 window레벨 전역 변수를 만들어야 한다면, window.user와 같이 접근하는 방식을 취하면 가능하다, 그러나 정말 필요한 경우에만 사용해라!!!(전역에 적용시키는건 매우 위험한 코드!)

단 한번만 평가됨

동일한 모듈이 여러곳에서 사용되어도 최초 호출시 단 한번만 실행

// 📁 alert.js
alert("모듈이 평가되었습니다!");

// 📁 1.js
import `./alert.js`; // 얼럿창에 '모듈이 평가되었습니다!'가 출력됩니다.

// 📁 2.js
import `./alert.js`; // 아무 일도 발생하지 않습니다.

2.js에서는 발생하지 않는데 이러면 모듈을 하는게 맞나? 싶은 생각이 든다 현재 시점에서는..

실무에선 최상위 레벨 모듈을 대개 초기화나 내부에서 쓰이는 데이터 구조를 만들고 내보내 재사용하고 싶을 때 사용(아직 정확히 이해x)

// 📁 admin.js
export let admin = {
  name: "John"
};

// 📁 1.js
import {admin} from './admin.js';
admin.name = "Pete";

// 📁 2.js
import {admin} from './admin.js';
alert(admin.name); // Pete

// 1.js와 2.js 모두 같은 객체를 가져오므로
// 1.js에서 객체에 가한 조작을 2.js에서도 확인할 수 있습니다.

최초 admin의 name은 john인데 그 후 1.js에서 pete로 재선언 후
2.js에서는 변경된 값인 pete가 실행됨
즉 모듈은 한 번만 실행되고, 실행된 모듈을 필요한 곳에 공유되므로 한 모듈에서 admin객체를 수정하면 다른 모듈에서도 변경사항 확인 가능
그래서 모듈 설정이 쉬움.
최초로 실행되는 모듈의 객체 프로퍼티를 원하는대로 설정하면 다른 모듈에서도 그대로 사용할 수 있음
모듈 최상위 레벨의 this는 undefined임
일반 스크립트의 this는 전역 객체인 것과 대조

지연 실행

모듈 스크립트는 항사 ㅇ지연 실행
외부 스크립트,인라인 스크립트 관계없이 마치 defer속성을 붙인 것처럼 실행
외부 모듈 스크립트 다운로드할때 브라우저의 HTML 처리가 멈추지 않음
외부 모듈 스크립트와 기타 리소스를 병렬적으로 불러옴
HTML문서가 완전히 준비될 때까지 대기상태에 있다가 HTML문서가 완전히 만들어진 이후에 실행.
스크립트의 상대적 순서가 유지, 위쪽의 스크립트부터 차례로 실행

defer

브라우저는 defer속성이 있는 스크립트를 백그라운드에서 다운로드함
그래서 지연 스크립트를 다운로드 하는 도중에도 html파싱이 멈추지 않음
defer 스크립트 실행은 페이지 구성이 끝날때 까지 지연
지연 스크립트는 페이지 생성을 절대 막지 않음
지연 스크립트는 DOM이 준비된 후에 실행되긴하지만
DOMContentLoaded 이벤트 발생 전에 실행

<p>...스크립트 앞 콘텐츠...</p>

<script>
  document.addEventListener('DOMContentLoaded', () => alert("`defer` 스크립트가 실행된 후, DOM이 준비되었습니다!")); // (2)
</script>

<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<p>...스크립트 뒤 콘텐츠...</p>