옆 회사는 알아서 보내주던데오늘 공부한 내용 🌤️
import와 export로 나타나는 자바스크립트의 Module 기능과 비동기 시리즈 중 첫 번째인 Callback에 대해 배웠다.
새로 알게된 내용 🌱
XMLHttpRequest
요즘은 거의 안쓴다고 하니 크게 중요하진 않겠지만 그 유명한 AJAX를 말할 때 사용하는 통신 객체라고 한다.
open 함수로 초기화하고 이벤트 핸들러에 함수를 설정하고 send 함수로 요청을 보낸다.
특이하게 옵션을 지정해서 비동기식으로 요청을 보낼 수도 있다고 한다.
쓸 일이 있을지는..
리마인드된 내용 🔨
Module
초기에는 자바스크립트가 간단한 기능만을 담당했기에 모듈 관련 표준 문법이 없었다.
이후 스크립트의 크기가 커지면서 모듈 시스템이 필요했고 AMD 나 CommonJS 같은 라이브러리의 형태로 나타났다.
ES6에 와서 import / export 가 표준으로 등재되어 사용되기 시작했다.
모듈 자체는 거창한 게 아니라 파일 하나를 의미한다.
변수나 함수 앞에 export 지시자를 붙여 모듈 내보내기를 할 수 있고, import 를 사용해서 내보낸 모듈을 가져올 수 있다.
export 로만 내보내진 대상은 중괄호 안에 넣어서 가져오고, export default 로 내보내진 대상은 중괄호 없이 가져온다.
import ~ from 뒤에 따라오는 경로에는 확장자까지 붙인 상대/절대 URL을 꼭 사용해야 한다.
Node.js나 번틀링 툴은 그런 경로 없이도 찾을 수 있도록 설정이 되어있어 생략해서도 쓰지만 브라우저는 경로 없는 모듈을 지원하지 않는다.
export default는 파일 내 하나만 가능하므로 보통 컴포넌트에 붙인다.
스크립트 태그에는 type="module"과 같은 속성을 설정해줘야 브라우저가 모듈을 인식할 수 있다.
단, 로컬에서 파일 열듯이 열면 동작하지 않고 웹서버를 통해야 한다.
module은 항상 use strict 모드로 실행되고 자신만의 스코프를 가져 전역오염이 일어나지 않는다.
여러번 import되더라도 최초 호출 시에만 평가되기 때문에 export된 객체가 각기 다른 모듈들 사이에서 변경되더라도 서로 변경사항을 공유할 수 있다.
일반 스크립트의 this 의 기본값이 전역 객체인 것과 달리 모듈의 this 는 undefined 이다.
this, 또 너야?
항상 defer를 붙인 것처럼 지연실행되기에 HTML 문서가 완전히 만들어진 후에 실행된다.
때문에 코드내 위치 상관없이 문서 내 요소에 접근할 수 있다.
의존성에 따라 순서를 맞추어야 했던 일반 script 태그와 달리 순서를 신경쓰지 않아도 된다.
Callback
가장 기본적인 비동기 실행 방법
addEventListener, setTimeout, setInterval, XMLHttpRequest 등으로 설정해줄 수 있다.
setTimeout, setInterval 의 경우 시간을 0으로 설정한다해서 바로 실행되는 것이 아니라 다른 동기 코드가 다 실행되고 난 뒤에 실행된다. Task Queue의 동작과 관련있다.
느낀점 🎬
import 문의 경로의 경우 리액트 프로젝트에서는 린터가 확장자를 떼버리도록 설정이 되어있었던 것 같아서 의아했는데 브라우저와 Node.js 환경의 차이가 이유라는 것을 알고 궁금증이 풀렸다.
참조
