[기술 면접 스터디-6일차] require와 import, const 사용 시 주의할 점

1. require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요?

💡둘다 모듈화를 위한 모듈 시스템입니다. require는 CommonJS 키워드이고, import는 ES6에서 새로 도입된 키워드입니다. 최근에는 ES6 모듈 시스템인 import가 많이 사용되고 있지만 모든 브라우저에서 호환되진 않기 때문에 Babel과 같이 ES6 문법을 이전 문법으로 트랜스파일링(Transpiling)해주는 도구가 있어야 import를 사용 가능합니다. 

차이점으로는
1. CommonJs 모듈 방식은 전체 모듈을 다 불러오고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없습니다. 이 때문에 ES6(ECMA2015)부터는 import 방식의 모듈 시스템을 사용합니다. import는 require과는 다르게 모듈내에 정의된 특정한 부분만 불러올 수 있습니다.

2. CommonJS 방식은 런타임에서 동작하여 동기적인 모듈 로드를 지원하기 때문에 서버 사이드(Node.js)에서 더 자주 사용됩니다. 반면에 ES6 방식은 정적으로 분석되어 런타임 이전에 모듈 로드를 수행하며, 비동기적인 모듈 로드를 지원하기 때문에 브라우저와같이 네트워크 요청 등 비동기 작업이 많은 경우 비동기적인 모듈 로드가 웹 페이지의 성능과 속도를 향상시킬 수 있습니다.

require와 import는 노드와 브라우저 환경에 따라 기존 코드와 환경 호환성, 프로젝트 설정을 고려하여 적절한 방식을 선택하여 사용합니다.

- require / exports 는 기존까지 Node.js에서 사용되던 CommonJs 모듈 방식으로, module.exports 객체에 모듈 전체를 치환하여 내보내고, require을 통해 해당 모듈을 불러오는 방식이다. 따라서 CommonJs 모듈 방식으로는 전체 모듈을 다 불러오게 되고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없다.

때문에 ES6(ECMA2015)부터는 import / export 라는 방식의 모듈 시스템을 사용한다. import는 require과는 다르게 모듈내에 정의된 특정한 부분만을 불러올 수 있다.

import {name} from 'module'

+ 모듈이란?

모듈 소개

+commonJS란? / 웹팩이란 ? 바벨이란 ? / 모듈 시스템(require, import), 바벨, 웹팩과의 관계 정리

모듈 시스템 require와 import의 차이 / commonJs와 ES6 / 웹팩 바벨

 

 

2. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요

💡자바스크립트에서 변수 타입은 크게 원시형과 참조형으로 나위어지는데, 배열과 객체는 참조형에 해당합니다. 
원시형은 변수에 값이 메모리 stack에 바로 저장되는 반면, 참조형은 stack 영역에 값이 담긴 메모리 주소값을 저장합니다. 따라서 const는 상수이기 때문에 불변성을 띄지만, 배열이나 객체일 경우 값이 변경될 때 변수가 가리키는 주소 값은 불변성을 유지하고, 실제 데이터가 저장된 heap영역의 값은 변경 가능하기 때문에 해당 객체나 배열 내부 속성 등은 가변성을 가지고 있습니다.

+불변성과 가변성에 대한 이야기 추가하기 , 자바스크립트는 기본적 불변해야 함. const도 불변이지만 가변되기 때문에 주의해야 한다.

 

+ let은 값이 변경되는 것을 보이는데, 원시형 데이터가 불변성인 이유

불변성은 한 번 생성된 데이터가 변경되지 않음을 의미하는데, 메모리 관점에서 봐야 합니다.

변수에 저장된 메모리의 값이 변경되는 것이 아니라, 새로운 값이 할당되기 때문에 불변성을 유지합니다.

+const를 사용할 때 주의할 점 / 얕은 복사, 깊은 복사

const로 선언된 변수는 재할당이 불가능하지만, 참조하는 객체나 배열은 변경 가능합니다. 따라서 참조형 데이터의 불변성을 유지가 어려울 수 있으므로 주의해야 합니다.(얕은 복사, 깊은 복사)

데이터 타입 심화, 메모리