From f7f07e64d6a5f0738e517d02baa4720563672ec3 Mon Sep 17 00:00:00 2001 From: Choi hee ruk Date: Sun, 21 Sep 2025 00:43:01 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Create=2002-=EB=AA=A8=EB=93=88=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C,=EB=82=B4=EB=B3=B4=EB=82=B4=EA=B3=A0=20=EA=B0=80?= =?UTF-8?q?=EC=A0=B8=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260" | 1 + 1 file changed, 1 insertion(+) create mode 100644 "Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260" diff --git "a/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260" "b/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260" new file mode 100644 index 0000000..8b13789 --- /dev/null +++ "b/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260" @@ -0,0 +1 @@ + From 7ed789e4742ca8ce3072a325ff0fbb5b51d10597 Mon Sep 17 00:00:00 2001 From: Choi hee ruk Date: Sun, 21 Sep 2025 00:43:16 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Rename=2002-=EB=AA=A8=EB=93=88=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C,=EB=82=B4=EB=B3=B4=EB=82=B4=EA=B3=A0=20=EA=B0=80?= =?UTF-8?q?=EC=A0=B8=EC=98=A4=EA=B8=B0=20to=2002-=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EC=86=8C=EA=B0=9C,=EB=82=B4=EB=B3=B4=EB=82=B4=EA=B3=A0=20?= =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2\263\240 \352\260\200\354\240\270\354\230\244\352\270\260.md" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename "Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260" => "Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260.md" (100%) diff --git "a/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260" "b/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260.md" similarity index 100% rename from "Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260" rename to "Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260.md" From a6ddd753714dfca234502ebbc9349f9a3d4e5af7 Mon Sep 17 00:00:00 2001 From: Choi hee ruk Date: Sun, 21 Sep 2025 17:04:59 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Update=2002-=EB=AA=A8=EB=93=88=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C,=EB=82=B4=EB=B3=B4=EB=82=B4=EA=B3=A0=20=EA=B0=80?= =?UTF-8?q?=EC=A0=B8=EC=98=A4=EA=B8=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...00\354\240\270\354\230\244\352\270\260.md" | 129 ++++++++++++++++++ 1 file changed, 129 insertions(+) diff --git "a/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260.md" "b/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260.md" index 8b13789..1c38fa3 100644 --- "a/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260.md" +++ "b/Part2/02-\353\252\250\353\223\210 \354\206\214\352\260\234,\353\202\264\353\263\264\353\202\264\352\263\240 \352\260\200\354\240\270\354\230\244\352\270\260.md" @@ -1 +1,130 @@ +# 모듈 # + +## 개발하는 애플리케이션의 크기가 커지면 파일을 여러개로 분리해야 하는데 이때 분리된 파일을 각각 '모듈'이라고 부른다. ## + +모듈을 불러오기 위해선 특수한 지시자 export와 import를 적용하면 된다. +불러운 모듈에 있는 함수를 호출하는것과 같은 기능 공유가 가능하다. + +export지시자 : 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할수 있다.(모듈 내보내기). + +import지시자 : 사용하면 외부 모듈의 기능을 가져올 수 있습니다.(모듈 가져오기). + +모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작한다. +로컬에서 FILE:// 프로토콜을 사용해 웹페이지를 열면 import,export지시자가 동작하지 않습니다. + +## 모듈의 핵심 기능 ## +일반 스크립트와 모듈의 차이점 +1. 엄격 모드로 실행됨 모듈은 항상 엄걱 모드로 실행되며 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킴. +2. 모듈은 자신만의 스코프가 있으므로 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다. +3. 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한번만 실행되며 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 짐 +4. this는 undefinde 모듈 최상위 레벨의 this는 undfined , 일반 스크립트의 this는 전역객체 + +## 브라우저의 특정 기능 ## +브라우저 환경에서 type="module"이 붙은 스크립트와 일반 스크립트와 다른점 +1. 지연실행 : 모듈 스크립트는 항상 지연 실행된다. 외부스크립트,인라인 스크립트와 관계없이 마치 defer 속성을 붙인것처럼 실행된다. +2. 일반 스크립트에서 async속성은 외부 스크립트를 불러올 때만 유효함. async속성이 붙은 스크립트는 로딩이 끝나면 다른 스크립트나 HTML이 처리되길 기다리지 않고 바로 실행됨. 모듈 스크립트에선 anync 속성을 인라인 스크립트 에도 적용할수 있다. +3. type="module"이 붙은 외부 모듈 스크립트는 src 속성값이 동일한 외부 스크립트는 한번만 실행된다 +4. import는 반드시 상대 혹은 절대 URL 앞에 와야한다. '경로가 없는'모듈은 허용되지 않음. 위치에 맞지 않게 작성하면 무효가됨. +5. 구식 브라우저는 type="module"를 해석하지 못해서 모듈 타입의 스클비트를 만나면 이를 무시하고 넘어감 -> nomodule속성을 사용하면 상황대비가능. + +## 빌드 툴 ## +모듈을 '단독'으로 사용하는 경우는 흔치 않다. 대게 웹팩과 같은 특별한 툴을 사용해 모듈을 한데 묶어(번들링)프로덕션서버에 올리는 방식을 사용함. +번들러를 사용하게 되면 모듈 분해를 통제할 수 있게됨. 경로가 없는 모듈이나 css,hteml 포맷의 모듈을 사용할 수 있게 해준다는 장점이 있다. + +빌드 툴의 역할 +1. HTML의