답변
모듈시스템으로 CommonJS를 사용한 것과 ES6을 사용한 것의 차이입니다. 대표적으로 CommoneJS를 사용한 Nodejs는 require을 통해 외부 파일이나 라이브러리를 불러오지만, ES6 모듈 시스템을 사용한 리액트는 import틀 통해 라이브러리를 불러옵니다. Babel과 같은 ES6 코드를 변환해주는 도구가 없다면 require을 사용해야합니다.
꼬리질문
바벨이란?
바벨이란 ES6+버전의 자바스크립트, 타입스크립트, jSX 등 다른 언어로 분류되는 언어들에 대해 모든 브라우저에서 동작할 수 있도록 호환시켜주는 툴입니다. 바벨은 최신 문법을 이전세대 문법으로 호환시켜주는 기능이 있는데 그 중 하나가 JSX문법입니다. JSX를 ES5 코드로 바꿔 브라우저에 작동할 수 있도록 하여 리액트에서 바벨이 사용된다.
참고자료
https://hsp0418.tistory.com/147
JavaScript- require vs import (CommonJs와 ES6) 차이점
require vs import (CommonJs와 ES6) 기본적으로 require와 import는 모듈 키워드입니다. 외부 파일이나 라이브러리를 불러올 때 사용합니다. require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import는 ES2015
hsp0418.tistory.com
https://velog.io/@pingu-/require%EC%99%80-import-%EC%B0%A8%EC%9D%B4
require와 import 차이
require과 import의 차이 원래 기존까지는 Node.js 개발 환경에서 모듈을 불러올 때 기존의 자바스크립트가 지원하는 방식대로 require / exports 를 사용했다. 그러나 React나 Vue를 쓴 코드에서는 import react
velog.io
https://brunch.co.kr/@skykamja24/576
https://ui.toast.com/weekly-pick/ko_20181220
'1차 공부 > 기술면접 준비' 카테고리의 다른 글
| useRef가 필요한 상황을 예시를 들어 설명해주세요 (0) | 2023.02.28 |
|---|---|
| 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해 설명해주세요 (0) | 2023.02.28 |
| 브라우저 저장소에 대해서 차이점을 설명해주세요 (0) | 2023.02.27 |
| HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 (0) | 2023.02.23 |
| 캐시의 장단점과 어떤 부분에 활용하는지 설명해주세요. 프론트엔드에서 캐시를 사용할 수 있는 2~3가지 영역을 제시해주세요 (0) | 2023.02.23 |