diff --git "a/#26 \354\233\271\355\214\251\354\235\264\353\236\200?" "b/#26 \354\233\271\355\214\251\354\235\264\353\236\200?" new file mode 100644 index 0000000..5362be8 --- /dev/null +++ "b/#26 \354\233\271\355\214\251\354\235\264\353\236\200?" @@ -0,0 +1,20 @@ +#웹팩의 정의 +웹팩이란 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리를 말한다! +즉, 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러로서 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다. +웹팩 버전 4.0.0 이후로는 프로젝트를 번들링하기 위한 설정파일을 필요로 하지 않지만, 사용자 요구에 따라 기대이상으로 유연하게 설정이 가능하다. +#디펜던시 그래프 +하나의 파일이 다른 파일에 의존할 때마다, webpack은 이것을 의존성으로 취급한다. +이를 통해 webpack은 이미지 또는 웹폰트와 같은 코드가 아닌 애셋을 가져와, 애플리케이션에 의존성으로 제공할 수 있다. +애플리케이션을 처리할 때, 커맨드 라인 또는 설정 파일에 정의 된 모듈 목록에서 시작한다. +엔트리포인트에서 시작하여, webpack은 애플리케이션에 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 빌드한 다음, 모든 모듈을 브라우저에 의해 로드되는 작은 수의 번들로 묶는다. +#번들링 +기본적으로 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역활. +주로 JavaScript를 위한 번들러지만 플러그등을 통해 html, css, 이미지 파일까지 압축화하거나 최적화 해준다. +#웹팩과 번들링의 차이는? +웹팩은 번들러, 번들링은 하는 행동 +음.. 프린터기를 예로 들자면 +프린터기는 프린터하는 도구-웹팩은 번들링하는 도구:번들러 +프린트는 종이를 뽑는 과정-번들링은 파일을 압축, 최적화하는 과정 + + +https://webpack.kr/concepts/ diff --git "a/#27 \354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234\354\235\230 \353\271\204\353\217\231\352\270\260" "b/#27 \354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234\354\235\230 \353\271\204\353\217\231\352\270\260" new file mode 100644 index 0000000..6411f0d --- /dev/null +++ "b/#27 \354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234\354\235\230 \353\271\204\353\217\231\352\270\260" @@ -0,0 +1,16 @@ +#자바스크립트에서 비동기의 정의 +특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것 +#제이쿼리의 ajax +화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있다. +$.get()을 통해 HTTP GET 요청을 전송해 지정된 URL에서 데이터를 가져온다. +서버에서 받아온 데이터는 response 인자에 담긴다. +특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것. +#setTimeOut() +Web API의 한 종류. +코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행. +#콜백 지옥과 해결방법 +비동기 처리과정중 콜백 안에 콜백을 계속 무는 형식으로 코딩을 하는것. +가독성도 떨어지고 로직을 변경하기도 어렵다. +코딩패턴의 변경이나 Promise나 Async를 사용해 콜백지옥 해결 가능 + +https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ diff --git "a/#28\354\235\264\353\262\244\355\212\270 \353\243\250\355\224\204" "b/#28\354\235\264\353\262\244\355\212\270 \353\243\250\355\224\204" new file mode 100644 index 0000000..2436c47 --- /dev/null +++ "b/#28\354\235\264\353\262\244\355\212\270 \353\243\250\355\224\204" @@ -0,0 +1,18 @@ +#이벤트 루프의 정의 +항상 대기하고 있다가 호출 스택이 비워지면 태스크 큐에서 함수를 하나씩 호출 스택으로 밀어올린다. +모든 asyncio 응용프로그램의 핵심으로서 비동기 태스크 및 콜백을 실행하고 네트워크 IO 연산을 수행하며 자식 프로세스를 실행하는 것 +#ECMAScript에는 이벤트 루프가 없다. +자바스크립트는 단일스레드기반의 언어로서 자바스크립트 엔진은 단일 호출 스택을 사용한다. +실제 자바 스크립트가 구동된느 환경에서는 주로 여러 개의 스레드가 사용되는데 이러한 구동환경이 단일 호출 스택을 사용하는 자바스크립트엔진과 상호연동하기 위해 사용하는 장치가 바로 ‘이벤트 루프’이다. +#단일 호출 스택과 Run-to-Completion +자바스크립트의 함수가 실행되는 방식:”Run to Completion” +하나의 함수가 실행되면 이 함수의 실행이 끝날 때까지는 다른 어떤 작업도 중간에 끼어들지 못한다. +자바스크립트 엔진은 하나의 호출 스택을 사용하며, 현재 스택에 쌓여있는 모든 함수들이 실행을 마치고 스택에서 제거되기 전까지는 다른 어떠한 함수도 실행될 수 없다. +#테스트큐와 이벤트 루프 +태스트큐는 콜백 함수들이 대기 하는 큐 형태의 배열 +이벤트 루프는 호출 스택이 비워질 때마다 큐에서 콜백 함수를 꺼내와서 실행하는 역활 + + +https://vimeo.com/96425312 +https://meetup.toast.com/posts/89 +https://www.zerocho.com/category/JavaScript/post/597f34bbb428530018e8e6e2 diff --git "a/CORS\353\236\200?" "b/CORS\353\236\200?" new file mode 100644 index 0000000..b689d20 --- /dev/null +++ "b/CORS\353\236\200?" @@ -0,0 +1,14 @@ +CORS란? +Cross-Origin Resources Sharing +추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 +리소스가 자신의 출처(도메인,프로토콜,포트)와 다를때 교차 출처 HTTP 요청을 실행 +브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송 지원 +-XML HttpRequest와 Fetch API 호출 +-웹폰트(css내 @font-face에서 교차 도메인 폰트 사용시) +-WebGL 텍스쳐 +-drawImage()를 사용해 캔버스에 그린 이미지/비디오 프레임 +-이미지로부터 추출하는 CSS Shapes +단순요청:CORS preflight를 트리거하지않는 simple requests +GET/HEAD/POST +https://developer.mozilla.org/ko/docs/Web/HTTP/CORS + diff --git "a/Closure\354\235\230 \354\240\225\354\235\230" "b/Closure\354\235\230 \354\240\225\354\235\230" new file mode 100644 index 0000000..34d76f6 --- /dev/null +++ "b/Closure\354\235\230 \354\240\225\354\235\230" @@ -0,0 +1,7 @@ +클로저란? +자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다. +클로저는 생성된 시점의 유효범위 내에 있는 모든 지역변수로 구성되는 함수와 함수가 선언된 어휘적 환경의 조합이다. +클로저는 어떤 데이터와 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. +Scope에 묶인 변수를 바인딩하기 위한 일종의 기술로서 함수를 저장한 레코드이며 스코프의 인수들은 클로저가 만들어질때 정의된다. +스코프 내의 영역이 소멸되었어도 독립된 복사본인 클로저를 통해 계속해서 접근할수있다. +https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures diff --git "a/JSX\354\235\230 \354\240\225\354\235\230" "b/JSX\354\235\230 \354\240\225\354\235\230" new file mode 100644 index 0000000..afaae9a --- /dev/null +++ "b/JSX\354\235\230 \354\240\225\354\235\230" @@ -0,0 +1,37 @@ +JSX란? +자바스크립트의 확장문법으로서 React.createElement를 호출하기 위한 문법으로 사용되었고,React 17.0 이상에서는 _JSX로 트랜스파일도 가능해졌다. +브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. +*번들링? +Bundling. +모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업 +요리키트, 식물재배 키트…. 등과 같이 어떠한 것을 만들때 쉽게 만들수 있도록 해주는것 +*바벨? +바벨이라는 도구를 통해 구형 브라우져에서도 돌아가게끔 최신 문법을 변환해주는 도구! +문법이 새로 나왔지만 구식인 브라우저는 이것을 적용을해주지 않는다! +이때 바벨은 구형 브라우져에서도 돌아가게끔 최신 문법을 변환해주는 도구! +JSX를 사용함으로써 React.creatElement를 일일이 호출하지 않고도 편하게 UI를 렌더링할 수 있다. +*렌더링? +아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 공업 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도. 주로 디자인 용어로 쓰임 +[JSX문법 규칙] +1.컴퍼넌트에 여러 요소가 있다면 반드시 부모 하나로 감싸주어야 한다. +-Virtual Dom에서 컴포넌트 변화를 효율적으로 비교할수 있게 된다. +2.자바스크립트 표현 +-JSX가 내부에서 코드를 {}로 감싸면 자바스크립트 표현식을 작성할 수 있다. +3.조건부 연산자 +조건에 따라 다른 내용을 렌더링 해야 할때는 +1)JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나 +2){} 안에 조건부 연산자인 삼항연산자를 사용한다. +4.AND(&&)를 사용한 조건부 렌더링 +리액트에서 false를 렌더링할때는 null과 마찬가지로 아무것도 나타나지 않는다. +다만 falsy한 값은 예외적으로 화면에 나타난다. +*falsy한 값? +Boolean 문맥에서 fasle로 해결되는 값 + +5.undefinded를 렌더링 하지 않기 +JSX 내부에서 undefined를 렌더링하는 것은 괜찮지만 바로 undefinded를 사용할 경우 다음과 같은 오류가 발생한다. + +따라서, 어떤 값이 -할 수도 있다: OR(||) 연산자를 사용하여 undefined일 때 사용할 값을 지정하여 주어 오류를 방지할수있다. + +https://ko.reactjs.org/docs/react-without-jsx.html#gatsby-focus-wrapper +[리액트를 다루는 기술/김민준/길벗] +https://developer.mozilla.org/ko/docs/Glossary/Falsy diff --git "a/Redux\354\227\220\354\204\234 Flux\353\236\200?" "b/Redux\354\227\220\354\204\234 Flux\353\236\200?" new file mode 100644 index 0000000..aa92902 --- /dev/null +++ "b/Redux\354\227\220\354\204\234 Flux\353\236\200?" @@ -0,0 +1,35 @@ +FaceBook에서 Flux아키텍처를 발표했을 당시 flux에 대한 오픈소스 라이브러리를 함께 공개하였으나 이 라이브러리에는 디스패처만 구현되어 있을 뿐 완전한 flux 프레임워크라고 부르기엔 다소 무리가 있었다고 한다. +따라서 flux 기반의 향상된 라이브러리를 공개, 지원하기 시작했는데 이렇게 공개된 라이브러리중 가장 널리 사용되고 대표적인 라이브러리중 하나가 redux이다. +#FLUX의 문제점과 Redux에서의 해결방법 +문제점1.스토어의 코드는 애플리케이션 상태를 삭제하지 않고는 리로딩이 불가능하다. +=>스토어는 애플리케이션 상태만을 가지게 하여 리로딩하지 않도록 했고, 또 다른 객체인 리듀서를 통해 모든 상태변환 로직을 관리하게 했다. +리듀서를 리로딩하는것으로 애플리케이션 상태를 잃어버리지않고 관련 로직만을 리로딩할 수 있게 되면서 문제 해결! +*리듀서란?이전 상태와 Action을 합쳐 새로운 state를 만드는 조작. +문제점2.애플리케이션 상태는 매 액션마다 재 기록된다. +액션이 스토어로 전달되었을때, 기존의 애플리케이션 상태를 수정하는 대신 그 상태를 복사한 뒤 복사본을 수정한다. +*디스패처란? +여러 다중 스레드 서버 프로세스가 SMTP 연결 서비스에 대한 역활을 공유할 수 있게 하는 다중 스레드 디스패칭 에이전트 +자체 구성에 나열된 TCP 포트에 대한 중앙 수신기의 역활 수행. +*SMTP란? +Simple Mail Transfer Protocol +인터넷에서 이메일을 보내기 위해 이용되는 프로토콜 +*TCP란? +Transmission Control Protocol +IP 프로토콜 위에서 연결형 서비스를 지원하는 전송계층 프로토콜 +-redux란? +자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 +오픈소스 자바스크립트 라이브러리의 일종으로, state를 이용해 웹사이트 혹은 애플리케이션의 상태관리를 해 줄 목적으로 사용 +일관적으로 동작하고 서로 다른 환경에서 작동하고 테스트하기 쉬운 앱을 작성하도록 도와준다. +*컨테이너? +같은 타입의 여러 객체를 저장하는 일종의 집합 +클래스 템플릿으로서, 컨테이너 변수를 선언할 때 컨테이너에 포함할 요소의 타입을 명시할 수 있다. +복사 생성과 대입을 할 수 있는 타입의 객체만을 저장할 수 있다. +요소의 추가 및 제거를 포함한 다양한 작업을 도와주는 여러 멤버 함수를 포함하고 있다. +-flux란? +facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐 +단방향 데이터흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역활을 한다. +이전까지의 프레임워크와는 달리 패턴과 달리 패턴과 같은 모습을 하고있기 때문에 새로 코드의 작성없이도 바로 flux를 이용해 사용할 수 있다. +https://ko.redux.js.org/introduction/getting-started/ +http://tcpschool.com/cpp/cpp_container_intro +https://blog.naver.com/backsajang420/22137124428 +https://docs.oracle.com/cd/E19957-01/820-0512/bgagx/index.html diff --git "a/VirtualDom\354\235\230 \354\240\225\354\235\230" "b/VirtualDom\354\235\230 \354\240\225\354\235\230" new file mode 100644 index 0000000..042728a --- /dev/null +++ "b/VirtualDom\354\235\230 \354\240\225\354\235\230" @@ -0,0 +1,26 @@ +VirtualDOM이란? +Virtual dom이란? +1.VIRTUAL DOM의 정의 +가상 dom은 실제 dom을 업로드하는 것보다 훨씬 빠르다 +여기서 dom이란! +Document Object Model의 축약어이다. +즉, 문서객체모델 이라 할 수 있다. +여기서 문서객체모델이란! +XML,HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. +*객체화:제품을 만들때 사용하는 설계도인 클래스를 통하여 제품인 객체를 만들어내는 일! 상품코드같은 느낌인가! +*추상화:복잡한 자료등으로 부터 핵심적인 개념 또는 기능을 간추려 내는 것! +-물리수준에서의 추상화:시스템의 저장 방식을 기술 +-논리수준에서의 추상화:어떠한 데이터가 데이터베이스를 저장하는지 기술 +-보기(view) 수준에서의 추상화:데이터 전체 가운데 일부만을 기술 +[DOM] +즉, DOM은 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스로서 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다. +DOM은 W3C의 표준 객체 모델로서 계층 구조로 표현되는데, JAVA SCRIPT의 계층 구조는 다음과 같다. + +[VIRTUAL DOM] +UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 REACT DOM과 같은 라이브러리에 의해 실제 “DOM”과 동기화하는 프로그래밍 개념이다. +이러한 “재조직” 과정을 통해 React의 선언적 API를 가능하게 한다. +앱구축에 사용해야 하는 어트리뷰트(Attribute,속성) 조작, 이벤트 처리, 수동 DOM업데이트화를 추상화해준다. +-React의 세계에서 “VIRTUAL DOM”이란 보통 사용자 인터페이스를 의미하며, React Element와 연관된다. +그러나 React는 컴포넌트 트리에 대한 추가정보를 포함하기 위해 'Fiber”라는 내부객체를 사용한다. +*컴포넌트 트리:화면 구성이 주어지면 여러 컴포넌트를 통하여 뷰를 구성함으로써 모델링 하는 과정 +https://ko.reactjs.org/docs/faq-internals.html diff --git "a/\354\204\234\353\262\204\354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\352\263\274 \355\201\264\353\235\274\354\235\264\354\226\270\355\212\270 \354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\354\235\230 \354\260\250\354\235\264\354\240\220" "b/\354\204\234\353\262\204\354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\352\263\274 \355\201\264\353\235\274\354\235\264\354\226\270\355\212\270 \354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\354\235\230 \354\260\250\354\235\264\354\240\220" new file mode 100644 index 0000000..c8c8d1b --- /dev/null +++ "b/\354\204\234\353\262\204\354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\352\263\274 \355\201\264\353\235\274\354\235\264\354\226\270\355\212\270 \354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\354\235\230 \354\260\250\354\235\264\354\240\220" @@ -0,0 +1,9 @@ +#서버사이드렌더링:서버에서 페이지를 그려 클라이언트로 보낸후 화면에 표시하는 기법 +검색 엔진 최적화와 빠른 페이지 렌더링 +서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지 그리는 시간 단축->화면에 유의미한 정보가 표시되는 시간이 빨라짐 +개발시 웹 애플리케이션 실행방법, 서버쪽 환경 구성, 클라이언트, 서버빌드에 대한 이해 필요=>개발자의 역량 중요 +#클라이언트사이드렌더링:클라이언트에서 동작한 라이브러리. 즉 브라우저에서 화면의 결과를 그려낸것 +#어디서 화면에 보일 페이지의 내용을 그리느냐에 따라 +클라이언트:브라우저에서/서버:서버에서 + +https://joshua1988.github.io/vue-camp/nuxt/ssr.html diff --git "a/\354\212\244\354\275\224\355\224\204\353\236\200?" "b/\354\212\244\354\275\224\355\224\204\353\236\200?" new file mode 100644 index 0000000..824cca0 --- /dev/null +++ "b/\354\212\244\354\275\224\355\224\204\353\236\200?" @@ -0,0 +1,19 @@ +변수의 접근성 결정 +#블록 스코프 +2015년도에 ES6의 도입으로 인해 let과 const를 사용하게 됨 +변수들은 block외부에서 block {} 안으로 접근할수 없도록 함 +Var 함수는 블록스코프를 선언할 수 없음 +#local scope +자바스크립트 함수로 선언된 변수들은, 함수에 local로서 작용함 +그들 자체의 함수내부에서만 인식됨에 따라, 다른 함수내에서 같은 이름의 변수들을 사용할 수 있다. +지역변수들은 함수가 시작됨에따라 생성되고, 함수가 완성됨에 따라 삭제된다. +#함수 스코프 +각각의 함수는 새 스코프를 만들어낸다. +함수내의 변수들은 함수의 외부에서부터 접근할 수 없도록 함 +변수들은 var, let, const등의 함수로 선언된다. +#전역 스코프 +함수밖에서 선언된 함수들은 전역이된다. +자바스크립트 프로그램 내의 어떠한 곳이든지 접근이 가능하다. +Var, let, const 등의 함수로 선언된다. + +https://www.w3schools.com/js/js_scope.asp diff --git "a/\354\235\264\353\262\244\355\212\270 \353\262\204\353\270\224\353\247\201, \354\272\241\354\262\230\353\247\201" "b/\354\235\264\353\262\244\355\212\270 \353\262\204\353\270\224\353\247\201, \354\272\241\354\262\230\353\247\201" new file mode 100644 index 0000000..de8af4e --- /dev/null +++ "b/\354\235\264\353\262\244\355\212\270 \353\262\204\353\270\224\353\247\201, \354\272\241\354\262\230\353\247\201" @@ -0,0 +1,16 @@ +#버블링 +한 요소에 이벤트가 발생하면 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작 +이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물 속 거품인 ‘버블’을 닮음 + +#캡처링 +이벤트가 발생하면 이벤트가 발생한 가장 안쪽 요소가 ‘타깃요소’ +이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려갑니다. +버블링과 반대방향으로 진행되는 이벤트 전파 방식 + +#표준 Dom 이벤트에서 정의한 이벤트 흐름 +1.캡처링 단계-이벤트가 하위 요소로 전파되는 단계 +2.타깃 단계-이벤트가 실제 타깃 요소에 전달되는 단계 +3.버블링 단계-이벤트가 상위 요소로 전파되는 단계 + + +https://ko.javascript.info/bubbling-and-capturing diff --git "a/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 module\354\235\264\353\236\200?" "b/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 module\354\235\264\353\236\200?" new file mode 100644 index 0000000..e56ce69 --- /dev/null +++ "b/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 module\354\235\264\353\236\200?" @@ -0,0 +1,36 @@ +개발하는 애플리케이션의 크기가 커질때 파일을 여러개로 분리해둔것->모듈 +클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됨 +파일 하나. 스크립트 하나. +export와 import을 통해 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유 가능 +#AMD +가장 오래된 모듈 시스템/require.js라는 라이브러를 통해 처음 개발됨 +#CommonJS +Node.js 서버를 위해 만들어진 모듈 시스템 +#UMD +Amd와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐 +#모듈의 기능 +-엄격 모드로 실행됨 +선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킴 +-모듈 레벨 스코프 +모듈은 자신만의 스코프가 있다 +모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다 +-단 한 번만 평가됨 +최초 호출시 단 한번만 실행됨 +어느 한 모듈에서 수정하면 다른 모듈에서도 변경사항을 확인할 수 있다. +-import.meta +현재 모듈에 대한 정보 제공 +브라우저 환경에서 스크립트의 url정보를 얻을수 있다. +-this는 undefined +모듈이 아닌 일반 스크립트의 this는 전역객체 +#브라우저 특정 기능 +-지연 실행 +외부 스크립트, 인라인 스크립트와 관계없이 마치 defer 속성을 붙인 것처럼 실행됨 +*외부모듈스크립트