[5월 스터디 6DAY-1] require와 import차이점

require와 import차이점을 설명해주세요.

한 줄 요약: require, import 모두 동일한 목적을 가지고 있지만 다른 문법 구조를 가지고 있다는 것을 알 수 있음

자바스크립트로 모듈을 불러오는 코드를 작성하는 도중 import가 작동하지 않은 오류를 발견했습니다. 구글링을 해본 결과 모듈을 불러오기 위해서 import 와 require을 사용하는데 차이점이 있었다.

require와 import는 모듈 키워드로 외부 파일이나 라이브러리를 불러올 때 사용합니다. require은 NodeJS에서 사용되고 있는 commonJS의 키워드 이고, import는 ES2015에서 새롭게 도입된 키워드

각각 어떤 상황에서 쓸 수 있나요?

import

JS의 ES6 문법으로 다른 패키지 안에 있는 클래스, 메소드, 변수 등의 데이터를 사용하고자 할 때 쓰는 키워드.
import를 사용해 모듈을 가져온 뒤 만든 객체를 내보내기 위해서는 export를 사용하는데 require와는 약간 다름.

• 단일 객체 내보내기

export default = variable

• 복수 객체 내보내기

export variable

require

CommonJS에서 사용하는 모듈을 불러오는 키워드

• 단일 객체 내보내기

module.exports = variable

• 복수 객체 내보내기

export.variable = variable

정리

두 키워드 모두 동일한 목적을 가지고 있지만 다른 문법 구조를 가지고 있다는 것을 알 수 있어으며, Babel과 같은 ES6 코드를 변환해주는 도구 없이는 import 키워드를 사용할 수 없어 키워드를 사용해야 함.

예시로 번들링을 위해 사용하는 webpack은 node.js 환경에서 구동하므로 require를 사용해야 하지만 리액트 라이브러리를 사용할 때는 import 구문이 사용 가능함. 그 이유는 babel에서 imoprt 구문을 require 구문으로 변환해 주기 때문.

• babel은 어떤 역할을 하까?

자바스크립트 언어의 문법은 빠르게 진화하고 있지만, 정작 자바스크립트 코드를 실행해 주는 환경이 받쳐주닌 못하는 경우가 많다.
예를 들어, 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤문법을 지원하는지 파악하기 힘들정도고, 노드의 경우에도 버젼별로 지원하는 언어 문법이 다르기때문이다. 그래서 생겨난 것이 babel!!!

babel: javaScript transpiler

babel은 자바스크립트 트랜스파일러(javaScript transpiler) 이다.
또는, 자바스크립트 컴파일러라고 부리기도 한다.

엄밀히 얘기하면 컴파일은 인간이 작성한 소스 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 과정을 의미하지만, 트랜스 파일은 다른 실행 환경에서도 돌아갈 수 있도록 같은 언어를 유지한체 소스코드의 형태만 바꾸는 과정을 의미한다.

따라서 인터프리터언어인 자바스크립트는 C나 Java와 같은 컴파일언어가 아니기때문에 과정이 필요없다.
하지만 실제 자바스크립트 커뮤니티에서는 이 두 용어가 혼용되어 사용되고 있기 때문에 뭐라고 부르든 크게 신경쓸 필요는 없을 것 같다.

Babel을 이용하면 ES6 이상의 최신 문법으로 작성한 자바스크립트 코드를 ES5 이하의 예전 문법으로 작성한 것 처럼 소스 코드 내의 문법의 형태를 변경할 수 있습니다. 이렇게 Babel을 통해 문법 형태가 바뀐 소스 코드는 최신 문법을 지원하는 실행 환경 뿐만 아니라 아직 최신 문법들이 적용되지 않은 실행 환경에서도 문제없이 작동하게 된다.