React 랜더링이 되지 않습니다.

Question

안녕하세요. 제로초님, 강의 도움이 많이 되고 있습니다. 다름이 아니라, webpack-dev-server를 실행을 했을 때, app.js파일은 잘 가져오는데, 화면이 랜더링 되지 않습니다. (아래 사진 참고) 크롬 확장 프로그램(React Developer Tools)도 활성화되지 않는 걸 보아 React 코드가 랜더링 되지 않는 거 같습니다. 이전 강의처럼 dev server를 쓰지 않고, 웹팩 빌드 후 index.html 에 접근하면 정상 적으로 랜더링이 됩니다. 제 추측으로는 dev-server로 웹펙 빌드를 할 때의 설정 문제일 거 같은데, 추적이 쉽지 않은데 어떤 부분을 확인하면 좋을지 살펴봐주실 수 있으실까요? ( _ _ )

제로초(조현영) · Answer

화면이 나오지 않을 때 개발자도구 콘솔이나 네트워크탭에 에러는 없나요?

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 왕성택님, 질문하신 내용을 기반으로 유사한 상황을 해결한 예제를 찾아보았습니다. 문제가 추측하신 것처럼 webpack-dev-server 실행 시 화면 랜더링 문제와 관련하여 설정 확인이 필요할 것으로 보입니다. 다음은 유사한 문제를 다루는 경우입니다: webpack server(localhost:8080)에서 Cannot Get / 만 나옵니다. 이 문제에 대한 해결 방법으로는 webpack-dev-server 의 설정을 변경해야 할 수 있는데, webpack server(localhost:8080)에서 Cannot Get / 만 나옵니다. 에서 다룬 내용이 도움이 될 수 있습니다. 여기에서는 devServer 설정 변경을 통한 문제 해결 방법이 제시되었습니다. 특히, static 설정 대신 devMiddleware 사용이 언급되어 있습니다. 정확한 설정 방법과 사용 예는 링크를 통해 확인하실 수 있습니다. 또한, 제공해주신 화면 캡처와 내용을 통해 볼 때, React 코드가 제대로 적용되지 않는 것으로 판단될 수 있습니다. 이와 관련해 devServer 설정에 대한 검토가 주요 포인트일 것으로 보이며, 특히 hot reloading 설정이나 contentBase (Webpack 5부터는 static option) 설정이 올바르게 구성되었는지 확인이 필요할 수 있습니다. 추가적으로, webpack.config.js 의 설정 파일에서 핫 리로딩을 지원하기 위한 ReactRefreshWebpackPlugin 등의 플러그인 설정이 올바르게 적용되었는지도 검토해 보시기 바랍니다. 설정이 잘못 적용되어 있거나 누락된 경우, 개발 서버 실행 시 예상한 대로 동작하지 않을 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.