-
질문 & 답변
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
미해결
리액트에 적용시 html을 브라우저로 어떻게 열어야 할까요..?
20.10.11 22:59 작성 조회수 968
1
실전 리액트 프로그래밍 481~483페이지 부분 실행관련하여 질문이 있습니다.
일단 저는 타입스크립트 동영상 강의만 본 상태고요.
리액트 동영상은 초반부, 책은 가지고있지만 타입스크립트 해당부분만 본 상황입니다.
혹시 제 질문이 책이나 동영상에 관련내용이 있다면, 그부분 적어주셔도 감사할것같습니다..
----
책에서 참고한 파일.
src/App.tsx
import React from 'react';
function App({name, age}: {name: string; age: number}) {
return (
<div>
<p>{name}</p>
<p>{age}</p>
</div>
)
}
export default App;
src/index.tsx
------
컴파일된 파일
/dist/App.js
import React from 'react';
function App(_a) {
var name = _a.name, age = _a.age;
return (React.createElement("div", null,
React.createElement("p", null, name),
React.createElement("p", null, age)));
}
export default App;/dist/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(React.createElement(App, { name: "seolys", age: 32 }), document.getElementById('root'));------
직접 수정한 파일
tsconfig.json(오류로 헤메면서 일부 수정)
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"lib": ["dom","es5","scripthost","es2017"],
"jsx": "react",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
index.html(직접 작성)
<html>
<head>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/dist/index.js"></script>
</body>
</html> 실행 : 브라우저로 index.html 실행 또는 npx serve로 진행.
브라우저 콘솔 오류메시지 :
127.0.0.1/:1 Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".
답변을 작성해보세요.
1
1
이재승
지식공유자2020.10.11
안녕하세요
브라우저가 `import React from 'react';` 부분에서 react 파일을 가져오다가 실패하는 메시지 입니다
`<script type="module" ...` 이런 식으로 작성하셨는데요
이렇게 브라우저에서 모듈 방식으로 동작하게 하려면 경로 처리를 다른 방식으로 해야합니다
(지금처럼 절대 경로말고 상대 경로로 수정 필요)
이런 방식으로 하시는 것보다는 책에서처럼 create-react-app 이나 next.js 를 사용하실 것을 추천드립니다.
답변 2