개발일지
5월 취업대비 - require와 import 본문
자바스크립트에서는 ( require / exports ) 와 ( import / export )를 사용하는데 둘 다 외부 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만 문법 구조가 전혀 다르다.
( require / exports ) 는 NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다라고 볼수 있다.
( import / export ) 는 ES6(ES2015)에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다.
[ ES6 와 CommonJS 의 export(내보내기) 차이점 ]
CommonJS와 ES6라는 모듈 시스템에서는 exports 객체라는 개념이 존재한다.
exports는 모듈로부터 내보내지는 데이터들을 담고 있는 하나의 객체이다.
여러분은 노드 프로젝트를 진행할때 module.exports = 라는 모듈 내보내기 구문을 자주 써왔을 것이다.
그리고 ES6의 export default 구문이, CommonJS의 module.exports 구문 동작을 대체하기 위한 문법이라고 보면 된다.
( require / exports ) 와 ( import / export ) 의 주요 차이점
- require()는 CommonJS를 사용하는 node.js문이지만 import()는 ES6에서만 사용
- require()는 파일 (어휘가 아님)에 들어있는 곳에 남아 있으며 import()는 항상 맨 위로 이동
- require()는 프로그램의 어느 지점에서나 호출 할 수 있지만 import()는 파일의 시작 부분에서만 실행할 수 있다. (그렇지만 import 전용 비동기 문법으로 파일 중간에 모듈 불러오기를 할 수 있다. )
- 하나의 프로그램에서 두 키워드를 동시에 사용할 수 없다
- 일반적으로 import()는 사용자가 필요한 모듈 부분 만 선택하고 로드 할 수 있기 때문에 더 선호된다. 또한 require()보다 성능이 우수하며 메모리를 절약한다.
[ CommonJs 방식으로 사용시 주의 사항 ]
CommonJs 방식으로 모듈을 내보낼때는 ES6처럼 명시적으로 선언하는 것이 아니라 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 한다.
기본적으로 2가지 규칙만 기억하면 된다.
1. 여러개의 객체를 내보낼 경우 → export.변수 의 개별 속성으로 할당
2. 딱 하나의 객체를 내보낼 경우 → module.exports = 객체 자체에 할당
reference.
require vs import 문법 비교 (CommonJS vs ES6).Inpa Dev.(2022.08).23.05검색.https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-require-%E2%9A%94%EF%B8%8F-import-CommonJs%EC%99%80-ES6-%EC%B0%A8%EC%9D%B4-1
'frontEnd > 기술면접' 카테고리의 다른 글
| 5월 취업대비 - useRef가 필요한 상황 (0) | 2023.05.16 |
|---|---|
| 5월 취업대비반 - 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 (0) | 2023.05.15 |
| 5월 취업대비반 - 브라우저 저장소 (0) | 2023.05.12 |
| 5월 취업대비 - this가 동작하는 원리와 용법 (w.Javascript) (0) | 2023.05.12 |
| 5월 취업대비 - position 의 사용 (0) | 2023.05.11 |