require와 import ・ const

📌 require와 import

 

"require"와 "import"는 JavaScript에서 모듈을 가져오는 두 가지 주요 방법입니다.

그러나 각각은 다른 모듈 시스템을 사용하고 다른 상황에서 사용된다.

 

require

"require"는 Node.js에서 주로 사용되는 CommonJS 모듈 시스템의 방식으로 모듈을 가져오는 데 사용된다. CommonJS는 동기적으로 모듈을 로딩하는 방식으로 동작한다.

사용 방법:

const module = require('module_name');

- 파일 상단에 위치하여 모듈을 가져옵니다.
- 동적으로 모듈을 가져오는 데 사용될 수 있습니다. (if문, 반복문 등에 따라 다른 모듈을 가져오는 경우)
- CommonJS 모듈 시스템은 서버 사이드(Node.js)에서 주로 사용되고, 브라우저에서는 기본적으로 지원되지 않습니다. 브라우저에서 CommonJS 모듈을 사용하려면 번들러(Bundler)를 사용해야 합니다.

 

 

import

 

"import"는 ECMAScript 6 (ES6)부터 도입된 JavaScript의 모듈 시스템을 사용하는 방식으로 모듈을 가져오는 데 사용된다. ES6 모듈은 비동기적으로 로딩되며, 브라우저와 모던 JavaScript 환경에서 기본적으로 지원된다.

사용 방법:

import module from 'module_name';

- 파일 상단이나 다른 모듈 내에서만 사용 가능합니다. "동적으로" 모듈을 가져오는 것은 허용되지 않습니다.
- 정적으로 모듈을 가져오는 데 사용되며, 브라우저에서도 지원되기 때문에 번들러 없이 사용할 수 있습니다.
- 모듈의 이름은 상대 경로 또는 절대 경로로 지정할 수 있습니다.

 

사용 시 주의사항

브라우저에서 import를 사용하는 경우 `<script type="module">`을 사용하여 모듈로 로딩해야 한다.

프론트엔드에서는 일반적으로 ES6 모듈 시스템의 "import"를 사용하는 것이 권장됩니다. 하지만 프론트엔드 프레임워크 또는 라이브러리의 요구에 따라 CommonJS의 "require"를 사용해야 하는 경우도 있을 수 있습니다. 예를 들어, React 프로젝트에서는 주로 ES6의 "import"를 사용하고, Node.js 기반의 프로젝트에서는 "require"를 사용하는 것이 일반적입니다.

 

 

 

---

 

 

 

📌 const

 

JavaScript에서 `const`로 선언된 배열과 객체는 수정 불가능한 것이 아닙니다. `const`는 변수 재할당을 막는 역할을 수행하지만, 배열과 객체의 요소나 속성을 추가, 삭제, 수정하는 것은 허용됩니다. 이는 JavaScript에서 변수와 객체를 이해하는 방식에 기인합니다.

1. 배열 (const로 선언된 배열에서 요소 추가/수정/삭제):

const numbers = [1, 2, 3];
numbers.push(4); // 요소 추가
// numbers는 이제 [1, 2, 3, 4]로 변경됩니다.

numbers[0] = 0; // 요소 수정
// numbers는 이제 [0, 2, 3, 4]로 변경됩니다.

numbers.pop(); // 요소 삭제
// numbers는 이제 [0, 2, 3]로 변경됩니다.

2. 객체 (const로 선언된 객체에서 속성 추가/수정/삭제):

const person = { name: "John", age: 30 };
person.gender = "male"; // 속성 추가
// person은 이제 { name: "John", age: 30, gender: "male" }로 변경됩니다.

person.name = "Jane"; // 속성 수정
// person은 이제 { name: "Jane", age: 30, gender: "male" }로 변경됩니다.

delete person.age; // 속성 삭제
// person은 이제 { name: "Jane", gender: "male" }로 변경됩니다.

이러한 동작은 `const` 키워드가 배열과 객체를 불변으로 만드는 것이 아니라, 변수가 가리키는 배열과 객체의 레퍼런스를 고정한다는 의미입니다. `const`로 선언된 변수는 다른 배열과 객체를 참조할 수 없게 됩니다. 즉, `numbers`와 `person`이 가리키는 배열과 객체가 변하지 않는 것이지, 배열과 객체 자체가 불변이 되는 것은 아닙니다.

만약 배열이나 객체를 완전히 불변으로 만들고 싶다면, `Object.freeze()` 메서드를 사용하거나 불변성 라이브러리를 활용해야 합니다. `Object.freeze()`를 사용하면 해당 객체의 속성을 수정하거나 삭제하는 것이 금지됩니다. 하지만 이후에 속성을 추가하는 것은 여전히 가능합니다. 불변성 라이브러리는 객체와 배열의 변화를 추적하고 수정을 방지하여 완전한 불변성을 제공합니다.