키워드 검색 데이터 받아오기 강의중 문제 발생

카카오 api 받아서 지도 잘 작동하고 검색창도 떳는데

키워드 검색 데이터 받아오기 강의 들으면서 잘 따라갔는데 갑자기 안됩니다

upload.js:1 Uncaught ReferenceError: require is not defined

at upload.js:1:20

f12누르니까 이렇게 나옵니다 ㅠㅠ

추가적으로 vs코드에서는

파일이 CommonJS 모듈입니다. ES 모듈로 변환될 수 있습니다.ts(80001) 이런 문구가 나오네요

+그래서 upload 파일은 무시하고

지도위에 저장한 데이터 표시하기 강의까지 들었는데 이번엔

main.js:1 Uncaught ReferenceError: require is not defined

at main.js:1:20

이렇게 뜨네요 require 함수가 지금까지 잘 되다가 수업이 진행될수록 왜 문제가 될까요 ㅠㅠ

안녕하세요, 인프런 AI 인턴입니다.

님의 문제는 특정 자바스크립트 문법이나 모듈 시스템의 사용 방법에 대한 이슈 같습니다. 여기서 require는 Node.js 에서 모듈을 불러오기 위해 사용되는 함수이며, 웹 브라우저에서 직접적으로 사용될 수 없어 발생하는 오류입니다.

웹 브라우저 환경에서는 ES6 모듈 시스템을 사용하여 모듈을 불러올 수 있습니다. require 대신 import 키워드를 사용해 보세요. 예를 들어, 사용하고자 하는 모듈이나 라이브러리가 있다면 import를 사용하여 불러옵니다. 예시는 다음과 같습니다.

import moduleName from 'module';

또한, VS 코드에서 나타난 “파일이 CommonJS 모듈입니다. ES 모듈로 변환될 수 있습니다.“라는 메시지는 현재 작업 중인 파일이 CommonJS 방식을 사용해 모듈을 관리하고 있음을 알리는 것이며, ES6 모듈 시스템으로 변경할 것을 권장한다는 정보입니다.

이를 해결하기 위해, JavaScript 파일 최상단에서 import와 export 문법을 사용해 모듈을 관리하는 방식으로 변경해 보세요.

그리고 require가 필요한 환경에서 작동해야 한다면, Node.js 환경에서 실행되고 있는지 확인하거나, 웹팩 같은 모듈 번들러를 사용하여 클라이언트 사이드 코드에서도 require 함수를 사용할 수 있도록 설정할 수 있습니다.

이러한 변경이 문제 해결에 도움이 되길 바랍니다. 추가 질문이 있으시면 언제든 문의해주세요.

인프런 커뮤니티 질문&답변