오늘은 require() 와 import의 차이 대해 간단히 작성해보고자 한다.
두 가지 모두 javascript에서 외부 모듈을 사용하기 위해 작성하는 문법인데, 둘의 가장 큰 차이는 require는 CommonJS의 문법이고, import는 ES6(ES2015)에서 신규 도입된 문법이라는 점이다.
두 문법의 차이를 간단히 정리하면 아래와 같이 표시할 수 있다.
| 모듈 불러오기 | require() | import |
| 모듈 내보내기 | exports | export |
| 사용하는 문법 | CommonJS | ES6(ES2015) |
| 호출 위치 | 특정 지점 상관 없음 | script의 시작부분 |
| 불러오기 범위 | 내보내기 된 전체 모듈 불러오기 | 모듈의 특정 부분만 불러오기 가능 |
두 문법의 차이점을 비교하게 된 이유는 Nuxt를 사용한 Vue 프로젝트를 진행하면서 Front Server(Node server)의 코드는 항상 require로 작성되어있고, import를 사용할 수 없어서 동일한 프로젝트인데 왜 사용하는 문법이 다른지에 대한 의문 때문이었다.
결국은 front-end도 client 영역과 server의 영역이 구분되어 있으며 (일반적으로 js - node.js의 형태?) 각 영역마다 사용되는 문법이 다른 것과 같은 이유가 아닐까 추측해본다. (이것도 자세히 아는 부분이 아니라 추측 하기도 민망하고 조심스럽지만, 아무튼 그렇다.)
이 글을 작성하기 전에 꽤 괜찮은 블로그를 찾았고, 내용도 해당 블로그의 내용을 퍼와서 출처를 남길 겸, 정보공유 겸 미래의 나를 위해서도 url을 첨부한다.
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
[NODE] 📚 require vs import 문법 비교 (CommonJS vs ES6)
require vs import 문법 자바스크립트 개발을 하다보면 모듈을 불러오는 문법 두가지 ( require / exports ) 와 ( import / export ) 키워드를 접하게 되는데, 이 둘은 비슷하면서도 달라 가끔 자바스크립트 개발
inpa.tistory.com
시간이 지날수록 기초가 많이 부족하다는 것이 더 크게 느껴지는 것 같다. 나중에는 이 글도 더 논리정연하게 정리를 할 수 있으면 좋겠지만, 잘 모르겠다.