리액트 프로젝트 배포 관련 질문

5시간 정도 소요했는데 아직도 배포가 안되어서 질문드립니다 ㅠㅠ

배포 방법은 https://velog.io/@byjihye/react-github-pages

해당 링크를 참고해 건드리지 않은 설치 직후의 리액트 폴더로 테스트를 해봐서 잘 되어 

링크의 방법과 동일한 방법으로 직접 만든 프로젝트를 배포해보았는데, 뭐가 문제인지 하얀 화면만 뜨고

속성으로 보면 로그에 상단의 이미지와 같은 에러가 뜹니다.

프로젝트의 소스코드는 

<strong>App.js</strong>

import "./App.css"; import React, { useState } from "react"; function saveInLocalStorage(todos) { localStorage.setItem("todos", JSON.stringify(todos)); } function App() { let savedArray = JSON.parse(localStorage.getItem("todos")); let [todos, setTodos] = useState([]); function Todoform() { return ( <div className="formcase"> <form onSubmit={function (e) { e.preventDefault(); const arraycopy = [...savedArray]; arraycopy.push({ do: e.target.todo.value, id: Date.now(), }); setTodos(arraycopy); saveInLocalStorage(arraycopy); }} > <h2>할 일 갯수 : {savedArray.length}</h2> <input className="inputtext" type="text" name="todo" placeholder="할 일을 적으세요" ></input> <input className="button" id="todoInput" type="submit" value={"추가하기"} ></input> </form> {savedArray ? <Ul /> : <></>} </div> ); } function Ul() { function Li(props) { let [form, setForm] = useState(false); function Editform(props) { return ( <form style={{display:"inline"}} onSubmit={(e) => { e.preventDefault(); let arr1 = [...savedArray]; let arr2 = [ { do: e.target.edit.value, id: parseInt(props.id), }]; let arraycopy = arr1.map(obj => arr2.find(o => o.id === obj.id) || obj); setTodos(arraycopy); saveInLocalStorage(arraycopy); }} > <input className="inputtext" name="edit" placeholder={props.do}></input> </form> ); } return ( <li key={props.index}> {props.index + 1}번째 {props.data.do} <button className="button" onClick={() => { const arraycopy = props.savedArray.filter( (d) => d.id !== props.data.id ); setTodos((todos = [...arraycopy])); saveInLocalStorage(arraycopy); }} > 삭제 </button> <button className="button" onClick={() => { setForm(form ? false : true); }} > 수정 </button> {form ? ( <Editform obj={props.data} do={props.data.do} id={props.data.id} /> ) : null} </li> ); } return ( <ul> {savedArray.map(function (data, index) { return ( <Li index={index} data={data} savedArray={savedArray} key={index} /> ); })} </ul> ); } return ( <div className="App bigcase"> <Todoform /> </div> ); } export default App; 

<strong>App.css</strong>

body{ background-color: whitesmoke; text-align: center; } .bigcase{ display: flex; justify-content: space-evenly; align-items: center; height: 500px; } .formcase{ box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); height: auto; padding: 10px; border-radius: 10px; text-align: center; margin-bottom: 20px; } ul{ list-style: none; } .inputtext{ margin-left: 10px; width: 150px; height: 21px; border-radius: 10px; border-width: 0.5px; font-weight: 600; font-size: 12px; text-align: center; border: 1px solid whitesmoke; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } .button{ margin-left: 10px; width: auto; height: 21px; border-radius: 10px; border-width: 0.5px; font-weight: 600; font-size: 12px; text-align: center; border: 1px solid whitesmoke; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); text-decoration: none; color: black; }

이 외에 다른 파일들은 수정사항 없습니다. 

index.js역시 손대지 않아 하단과 같이 기본인 상태입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();