require is not defined

브라우저에서 모듈을 호출하지 못한다는 것을 알고 계시나요..?
전 몰랐습니다. 졸업 작품을 만드는데 브라우저에서 axios롤 서버와 통신하려고 했고 apikey를 .env에서 사용하려고 했습니다.

그런데 세상에 마상에 commonJS를 이용해서 require을 사용했더니

Uncaught ReferenceError: require is not defined

이런 에러가 발생하지 뭡니까?

require가 정의되지 않았다길래 수많은 검색 끝에 제가 내린 결론은 commonJS가 되지 않는다...! 그럼 es6로 가야겠다는 생각이었습니다.
(이제와서 생각해보니 구글링해서 나온 결과들을 제대로 읽지 않고 영어만 대충 때려맞춰서 읽다보니 이상한 결론으로 빠진 것 같습니다....)

es6로 하려면 어떻게 해야하는가... pakage.json에서 module을 수정하고 다른 js 소스코드에서도 require문장을 import로 수정했습니다. 그러나 똑같은 문제가 발생하지 뭡니까?

며칠동안 왜 이러는지... 고민을 했습니다. 시간이 좀 지나고 나서 다시 천천히 생각해보고 구글링을 하다보니 브라우저는 모듈 자체를 사용하지 못한다 하더군요.

그래서 찾은 대안은 webpack을 사용하거나 browserify를 사용하는 것입니다.

처음엔 browserify를 사용했습니다. 그런데 매번 js코드를 수정하고 브라우저에서 제대로 돌아가는지 확인하려면 cli를 사용해야 해서 시간이 너무 길어졌습니다. 천천히 생각해보니 제가 require하는게 axios와 apikey 두개뿐입니다.

axios의 cdn을 사용하면 browserify를 사용하지 않다도 될 것 같다는 생각이 들었고 결국 성공했습니다...!!
appkey의 문제는 그냥 github를 일단 private으로 바꾸고 나중에 수정하기로 했습니다.

결론
1. 브라우저는 모듈을 직접 호출하지 못한다.
2. 이를 위해서 webpack이나 browserify를 사용하거나 cdn을 쓴다.
3. 나는 cdn으로 해결했다.