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

Kwon님의 프로필 이미지

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

노드 리액트 기초 강의 #21 데이터 Flow & Axios

webpack 관련 에러 질문

24.06.06 18:41 작성

·

88

0

백엔드 run은 가능하지만, front에서 run이 안되더라구요. 원인은 webpack 관련 에러인 것을 확인했고, chat gpt를 통해 에러 해결하려 하니, 또 다른 에러가 발생했습니다. 제가 잘못 건들인건지 잘 모르겠지만, 왜 그런지 알고 싶습니다. 혹시나 해서 깃도 같이 올려드립니다.  https://github.com/bukwon/boiler-plate

답변 1

0

인프런 AI 인턴님의 프로필 이미지

2024. 06. 07. 18:46

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

해당 사진은 백엔드와 프런트엔드가 포함된 웹 애플리케이션 프로젝트의 코드 에디터 화면을 보여줍니다. 왼쪽에는 디렉토리 구조가 `client`, `public`, `src`, `server` 등으로 나타나 있고, 주요 파일인 `webpack.config.js`가 열려 있는 것을 볼 수 있습니다. 화면 하단의 터미널 출력에서는 “[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.“라는 웹팩 관련 에러 메시지가 보입니다.

님의 webpack.config.js 파일 설정에서 웹팩 개발 서버의 옵션 객체가 API 스키마와 일치하지 않는다는 웹팩 관련 에러가 발생한 것으로 보입니다. 문제의 원인을 해결하기 위해서는 webpack.config.js 파일 내에서 Dev Server에 설정된 옵션 객체를 검토하고, 필요한 수정을 진행해야 합니다. 적절한 설정 값이 무엇인지 확인하기 위해서는 웹팩(Webpack) 공식 문서나 해당 버전의 API 스키마를 참고하는 것이 중요합니다.

해당 에러 메시지는 개발서버를 초기화하는 과정에서 설정된 옵션 객체가 웹팩 개발 서버의 기대하는 스펙과 일치하지 않음을 나타냅니다. 주로 설정 오타, 누락된 설정, 혹은 구버전 설정을 사용하는 경우에 발생하곤 합니다. 따라서, 웹팩의 최신 문서를 참고하여 옵션 객체를 다시 설정하는 것을 권장합니다.

https://github.com/bukwon/boiler-plate 링크의 깃허브 레포지토리에서 소스 코드 전반을 다시 한 번 검토하시면 좋을 것 같습니다. 특히, webpack.config.js 파일의 내용과 구성을 확인하여 어떤 부분이 API 스키마와 일치하지 않는지 정확히 파악하시는 것이 중요합니다. 필요하다면 웹팩의 devServer 설정 관련 공식 문서를 참고하여 올바른 설정 값으로 개선해 보세요.

Kwon님의 프로필 이미지

작성한 질문수

질문하기