html 코드 오류
459
작성자 없음
0 câu hỏi đã được viết
안녕하세요 강의 초반부에
script 태그 3개를 추가했는데도 catItem내에서 html 코드를 쓰면 오류가 뜨네요
이유가 뭘까요 ㅠㅠ
Uncaught SyntaxError: Inline Babel script: Unexpected token (5:6) (at babel.min.js:7:10099)
3 |
4 | const catItem = {
> 5 | < li >
| ^
6 | < img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react" />
7 | </li >
8 | }<body>
아래는 제가 작성한 코드입니다. 주석 부분은 지웠습니다.
<body>
<div id="app"></div>
<!-- <h1>1번째 고양이 가라사대</h1>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
console.log("야옹");
const catItem = {
<li>
< img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react" />
</li>
}
const 여기다가그려 = document.querySelector("#app");
ReactDOM.createRoot(여기다가그려).render(catItem);
</script>
</body>Câu trả lời 2
0
안녕하세요, 인프런 AI 인턴이에요.
주신 코드를 확인해보니, 문제가 되는 부분은 const catItem 객체 부분입니다.
JavaScript 코드에서 객체를 선언할 때는 중괄호 {}를 사용하지만, HTML 코드를 추가하려면 문자열 형태로 작성해야 합니다. 현재 <li>와 <img> 태그를 객체 형태로 작성하셨는데, 이 부분을 문자열 형태로 수정해야 합니다.
아래는 수정된 코드입니다.
<script type="text/babel">
console.log("야옹");
const catItem = `
<li>
<img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react" />
</li>
`;
const 여기다가그려 = document.querySelector("#app");
ReactDOM.createRoot(여기다가그려).render(catItem);
</script>
이렇게 수정하면 오류가 발생하지 않고, 원하시는 HTML 코드가 동적으로 그려질 것입니다. 문제가 해결되었으면 안내해드린 내용을 확인해보세요~요!
API 적용 안되는 코드 수정 방법입니다.
0
69
1
고양이 이미지가 엑박이 뜨네요
0
50
1
npx 명령어 사용 불가
1
74
1
const 변수와 컴포넌트의 차이
0
88
1
강의노트
0
138
1
vite로 리액트 빌드한 후 깃허브에 배포하는 방법
0
323
1
빌드할때 dist 폴더가 만들어지는데요,
0
763
1
js파일 업로드 요청
0
135
1
변경된 api 사용시 text 안나오는 문제
0
140
1
메인글자수정...
1
266
3
디렉터리 구조 관련하여 참고할 만한 예시가 있을까요?
1
310
1
https://cataas.com/undefined 로 나오는데 왜그런건가요?
1
590
4
고양이 사진이 깨져요.ㅜㅜ
2
358
3
강의 노트 위치를 모르겠습니다
1
342
1
깃 강의노트 어디서 볼 수 있나요?
1
379
2
이해가 안되는 부분이 있어요
1
360
1
api가 안불러와지네요...
1
657
4
진유림 선생님 너무 궁금해서 질문드립니다 ㅜ
1
329
2
react에서 컴포넌트 만들 때 대문자를 쓰는 이유
2
1154
2
https://cataas.com/ 여기 도메인이 죽어서 이미지가 보이지 않습니다 ㅠ
1
328
2
index.js 내용이 바꼈네용
1
316
2
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
1
258
2
고양이 이미지 깨져요
1
336
2
고양이 이미지 링크 깨짐 문의
0
775
1