React 에서 public 정적폴더에 있는 js파일 접근하기

Question

안녕하세요. 리액트를 사용해서 사내 프로젝트를 하나 만들려고 준비중에 있습니다.React의 정적 public 폴더 내부의 js파일을 App.js에서 document.head에 appendChild 하고 싶은데요..commonjs형태의 js를 App.js에서 가져와서 사용하고 싶은데 잘 안되네요ㅠㅠexpress같은 웹 서버는 사용하면 안되는데 webpack으로만 하려고 하니 잘 안되는걸까요 ?public에 존재하는 정적 js파일을 가져와서 사용할 수 있는 방법이 있을까요 ?아래는 예시 코드입니다.import React,{useEffect} from 'react' const App = () => { useEffect(() => { const head = document.querySelector('head'); const script = document.createElement('script'); script.setAttribute('src','./public/test/test.js'); head.appendChild(script); }, []) return ( <>

React CrossUploader

) } export default Appwepback설정은 아래와 같습니다.const path = require('path'); const express = require('express'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './public/index.js', mode : 'development', output: { path: path.join(__dirname + '/dist'), publicPath: '/', globalObject: "this" }, devtool: 'inline-source-map', module: { rules: [ { test: /\.(js|jsx)$/, exclude : /node_modules/, // 제외할 항목 use : ['babel-loader'] }, { test: /\.(css|scss)$/, exclude: /node_modules/, use: ['style-loader', 'css-loader'] }, ], }, devServer : { static:{ directory: path.resolve(__dirname,'dist') }, hot: true, host: 'localhost', port: 5500, historyApiFallback: true }, plugins : [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', publicPath: '/' }) ] };폴더 디렉토리 구조는 아래와 같습니다.현재 이러한 오류를 겪고 있습니다.Refused to execute script from 'http://localhost:5500/public/test/test.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.리액트 고수분들의 답변 부탁드립니다 ..

최혁진 · Answer

script.setAttribute('src','./public/test/test.js'); -> script.setAttribute('src','/test/test.js'); 이것도 안되시나요

핫식스맨 · Answer

파일 경로를 잘못 설정한 게 아니라면script.setAttribute('src','./public/test/test.js');밑에script.setAttribute('type', 'text/javascript'); 를 추가해보세요

React 에서 public 정적폴더에 있는 js파일 접근하기

2개의 답변

#commonjs 목록