[TIL] Day 43 import와 require의 차이

2023.12.04 월

 

프래그래밍에서 모듈 시스템은 코드를 구조화하고 재사용 가능한 조각으로 분리하는데 중요한 역할을 하며 많은 부분에서 export와 import 된다.

모듈을 불러올 때 자동완성을 사용하다 보면 import, require 두 가지의 방법으로 입력되는 것을 볼 수 있다.

어떤 경우에 사용이 되는지, 어떤 것을 사용하는 것이 더 좋은지 궁금해서 찾아보게 되었다.

 

 

 

 

1. import

ES6에서 도입된 표준 모듈 시스템이다.

주로 브라우저 측 JavaScript 및 모던 프론트엔드 프레임워크에서 사용된다.

import는 비동기적으로 동작하며, 필요한 부분만 가져올 수 있다.

import myModule from './myModule';

사용 목적
브라우저에서의 사용을 강조하며, 더 최신의 JavaScript 스펙을 따른다.

비동기적으로 모듈을 가져오므로 브라우저에서는 성능이 향상되고 모듈의 부분적 로딩이 가능하다.

문법적 차이

필요한 부분만 가져와서 사용할 수 있으며, export default 또는 명명된 export 구문과 함께 사용된다.

 

호환성

현대적인 브라우저에서 기본적으로 지원되며, 번들러를 통해 구현되는 경우에도 흔히 사용된다.

 

2. require

Node.js에서 사용되는 CommonJS 스펙이다.

주로 서버 측 JavaScript 환경에서 모듈을 로드하는 데에 사용된다.

require는 동기적으로 동작하며, 모듈을 불러올 때 해당 모듈의 전체 내용을 가져오는 특징이 있다.

const myModule = require('./myModule');

사용 목적

주로 Node.js 환경에서 사용되며, CommonJS 스펙을 따른다.

서버 사이드 렌더링과 같이 미리 필요한 모듈을 동기적으로 가져와야 하는 경우에 적합하다.

 

문법적 차이

할당된 변수에 모듈 전체를 담고 있다.

 

호환성

Node.js 및 일부 런타임 환경에서 주로 사용되며, 브라우저에서는 보통 번들러(Bundler)를 통해 사용된다.

 

 

 

Pro Tips

unshift() : 배열 앞에 추가

push() : 배열 뒤에 추가

 

조건부 렌더링 방법

1. true, false 값 둘 다 적용할 때

isLoginMode ? A : B

2. true 또는 false 값 하나만 적용할 때

isLoginMode && A

 

a태그 (=Link 컴포넌트) 기본 속성 제거

text-decoration : none;

color: inherit;  //부모 속성값을 따라간다

user-select : none;  //(선택사항) 드래그 방지

 

특정 순번 지칭

태그:nth-child(순번)

button:nth-child(2) //2번째 버튼 선택

 

 

 

---

하루를 마치며

정말 자주 사용하는 import이지만 당연하게만 사용했었는데, 이렇게 사용 목적에 따라서 import가 완전한 정답이 아닐 수도 있다는 것을 알게 되었다. 가끔 눈에 보이던 require에 대해서도 배울 수 있었다. 그리고 import와 require의 가장 큰 차이점은 비동기적, 동기적이라는 것도 알 수 있었던 시간이었다.

 

 

오늘의 한 줄
당연한 것에도
의미가 존재한다.