Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- Concurrently
- props
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- 모던자바스크립트
- react
- 거북이 대포 게임
- 인프런
- JS 개념
- node.js 설치
- spring-boot
- 자바스크립트
- 리액트
- DB Browser
- react오류
- Colaboratory 글자 깨짐
- 따라하며 배우는 노드 리액트 기본 강의
- Python
- 노드에 리액트 추가하기
- googleColaboratory
- intellij
- 타자 게임 만들기
- Spring-Framework
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- node.js로 로그인하기
- vs code 내 node
- 계산맞추기 게임
- 모두의 파이썬
- Do it 자바스크립트 + 제이쿼리 입문
- 웹 게임을 만들며 배우는 리액트
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
Archives
- Today
- Total
프로그래밍 삽질 중
(컴포넌트 분리 및 props) es modules may not assign module.exports or exports.*, use esm export syntax, instead: ./numberbaseball.jsx 문제 해결 본문
과거 프로그래밍 자료들/React
(컴포넌트 분리 및 props) es modules may not assign module.exports or exports.*, use esm export syntax, instead: ./numberbaseball.jsx 문제 해결
평부 2022. 9. 27. 17:11출처: https://www.inflearn.com/course/web-game-react/dashboard
* (웹팩 사용) 강의 내 "숫자야구 3-3"에서 문제 발생
▶ import과 require 사용에서 문제 발생
▶ 노드 내에서는 require만 되나, 바벨이 import문을 const로 바꿔주기 때문에 바벨이 설치되어 있다면 둘 다 섞어서 사용이 가능함
▶ 계속 문제 발생할 경우 웹팩 다시 설치 후 진행 권장 https://ba-gotocode131.tistory.com/233
* 제목처럼 문제 발생 시 client.jsx, NumberBaseballClass.jsx, Try.jsx 확인할 것
▶ import "이름" from "위치"
import NumberBaseballClass from "./NumberBaseballClass";
export default NumberBaseballClass;
▶ const "이름" from "위치"
const NumberBaseball = require("./NumberBaseballClass")
module.exports = NumberBaseballClass;
* client.jsx
const React = require("react");
import { createRoot } from "react-dom/client";
// const NumberBaseball = require("./NumberBaseballClass");
import NumberBaseballClass from "./NumberBaseballClass";
createRoot(document.getElementById("root")).render(<NumberBaseballClass />);
* NumberBaseballClass.jsx
import React, { Component, createRef } from "react";
import Try from "./Try";
function getNumber() {}
class NumberBaseballClass extends Component {
state = {
result: "",
value: "",
answer: getNumber(),
tries: [],
};
onSubmitForm = () => {};
onChangeInput = () => {};
fruits = [
{ fruit: "사과", taste: "맛있다" },
{ fruit: "배", taste: "맛없다" },
{ fruit: "토마토", taste: "시다" },
{ fruit: "포도", taste: "새콤하다" },
{ fruit: "감", taste: "떫다" },
{ fruit: "귤", taste: "달다" },
];
render() {
return (
<>
<h1>{this.state.result}</h1>
<form onSubmit={this.onSubmitForm}>
<input
maxLength={4}
value={this.state.value}
onChange={this.onChangeInput}
/>
</form>
<div>시도: {this.state.tries.length}</div>
<ul>
{this.fruits.map((v, i) => {
return <Try />;
})}
</ul>
</>
);
}
}
export default NumberBaseballClass;
//client.jsx에서 const NumberBaseball = require("./NumberBaseballClass"); 사용 시
// module.exports = NumberBaseballClass;
Try.jsx
import React, { Component, createRef } from "react";
class Try extends Component {
render() {
return (
<li>
<b>{v.fruit}</b> - {i}
</li>
);
}
}
export default Try;
* Props 사용 이유 : 분리된 컴포넌트 연결고리를 만들어야 하기 때문
▶위의 Try.jsx와 NumberBaseballClass.jsx 에서 오류 발생("v"와 "i"값 찾지 못함)
▶Try 안에 v와 i가 찾을 수 있는 연결고리 필요
* NumberBaseballClass.jsx
<ul>
{this.fruits.map((v, i) => {
return <Try value={v} index={i} />;
})}
</ul>
* Try.jsx
<li>
<b>{this.props.value.fruit}</b> - {this.props.index}
</li>
* 사용자가 만든 메서드들은 화살표함수를 사용
- 안쓰면 constructor를 사용해야 함
- 메서드 안에서 this 사용 불가
'과거 프로그래밍 자료들 > React' 카테고리의 다른 글
[웹 게임을 만들며 배우는 React] - ref, props (0) | 2022.09.28 |
---|---|
[웹 게임을 만들며 배우는 React] - 숫자야구(useState), 렌더링 문제 (0) | 2022.09.28 |
[웹 게임을 만들며 배우는 React] - 끝말잇기(class와 hooks 사용, controlled & uncontrolled) (0) | 2022.09.27 |
[웹 게임을 만들며 배우는 React] - 웹팩 데브 서버, 핫 리로딩 (0) | 2022.09.27 |
[웹 게임을 만들며 배우는 React] - Hoonks, 웹팩 (0) | 2022.09.27 |