브라우저 환경에서 require() 쓰지 못하는 이유

HTML의 <script> 태그는 클라이언트 측에서 JavaScript 코드를 실행하기 위한 태그입니다. require는 Node.js에서 모듈을 가져오는 데 사용되는 CommonJS 스펙의 함수입니다. 이 함수는 브라우저에서 자동으로 사용할 수 없기 때문에 HTML의 <script> 태그에서 require를 사용할 수 없습니다.

브라우저에서 JavaScript 코드를 실행할 때, CommonJS 스펙의 모듈 시스템 대신에 ES6 모듈 시스템이 사용됩니다. ES6 모듈 시스템에서는 import 키워드를 사용하여 모듈을 가져옵니다.

따라서, HTML의 <script> 태그에서 require 함수를 사용하려면, CommonJS 모듈을 브라우저에서 사용할 수 있는 형태로 변환해주는 도구를 사용해야 합니다. 예를 들어, Browserify나 Webpack과 같은 모듈 번들러를 사용하여 CommonJS 모듈을 ES6 모듈로 변환하여 브라우저에서 사용할 수 있습니다.

 

<script>
let data = require('/data.js');
console.log(data); // Uncaught ReferenceError: require is not defined
</script>