프론트엔드
- require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요?
- 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요
require와 import는 JavaScript에서 모듈을 가져오는 데 사용되는 두 가지 키워드입니다. 이 둘은 다음과 같은 차이점이 있습니다.
문법적 차이점
require는 CommonJS 방식으로 모듈을 가져오는 데 사용되며, 다음과 같은 문법을 사용합니다.
const module = require('module');반면에 import는 ECMAScript 6 (ES6)에서 도입된 모듈 시스템을 사용하는 데 사용되며, 다음과 같은 문법을 사용합니다.
import module from 'module';동작 방식의 차이점
- require는 실행 시간에 모듈을 가져오며, 해당 모듈이 로드될 때까지 코드 실행이 차단됩니다.
이는 서버 측 JavaScript에서 주로 사용되며, require를 사용하는 경우 모듈을 사용하기 전에
모든 종속성을 로드해야 합니다.
- import는 런타임 전에 모듈을 가져오며, 코드 실행이 차단되지 않습니다. 이는 클라이언트 측 JavaScript에서 주로 사용되며, 빌드 시점에서 종속성을 해결합니다.
사용 가능한 상황
-
require는 Node.js와 같은 서버 측 JavaScript 환경에서 사용됩니다. 서버 측 JavaScript에서는 종속성을 다운로드하고 빌드하는 데 많은 시간이 걸리므로, require를 사용하여 런타임에서 필요한 모듈만 로드합니다.
-
import는 클라이언트 측 JavaScript에서 사용됩니다. 브라우저에서는 ES6 모듈이 지원되므로, import를 사용하여 클라이언트 측 JavaScript 애플리케이션을 개발할 수 있습니다.
-
하지만, 최신 JavaScript 버전에서는 import도 서버 측에서도 사용할 수 있습니다. 예를 들어, Webpack과 같은 도구를 사용하여 서버 측 애플리케이션을 번들링 할 수 있습니다.
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요
-
const 키워드는 변수나 객체가 변경되지 않음을 보장하지만, 객체 내의 속성이나 배열 내의 요소는 변경 가능합니다. 즉, const로 선언한 객체나 배열은 참조를 통해 내부 요소나 속성을 변경할 수 있습니다.
-
이는 const가 변수나 객체의 불변성을 보장하는 것이 아니라, 단지 재할당을 방지하기 위한 것임을 의미합니다. 객체나 배열 내부의 요소를 추가, 삭제, 수정하는 것은 객체나 배열의 내용이 변경되는 것이지 객체나 배열 자체의 재할당이 발생하는 것이 아니기 때문에 가능합니다.
-
그러나 객체나 배열을 const로 선언한 경우, 이들 내부 요소를 변경하는 것은 불가능하지 않기 때문에 코드를 작성할 때 주의가 필요합니다. 이를 방지하기 위해서는 객체나 배열을 복제하고 이를 수정하는 것이 좋습니다. 이를 위해서는 객체의 경우 Object.assign() 메서드를, 배열의 경우 spread 연산자나 Array.from() 메서드를 사용할 수 있습니다.
