220922 ~ 23 D+22, 23 CSE의 하루

이번 주는 기수와 팀원의 CRUD를 작성하는 중에 있고, material ui 라이브러리를 설치하며 나온 에러 핸들링을 했다.

material ui가 설치되지 않는 이유는 react-create-app 선행 과정에서 리액트 버전이 18로 높은 버전을 이용하고 있었고, material ui는 16버전부터 적용이 가능했다.

해결책으로는 npm install --save react@^17.0.2 react-dom@17.0.2 명령어로 리액트 버전을 낮추는 것을 선행하고, 그 다음 라이브러리 설치 시 --legacy-peer-deps 옵션을 덧붙였다.

(reference1)

(reference2)

라이브러리 적용은 주말을 이용하여 학습한 이후에 해보기로 계획을 세웠다.

npm install --save react@^17.0.2 react-dom@17.0.2
npm install @material-ui/core --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

이제 되었다 생각했을 때, 생각지 못한 에러가 발생했다.

Module not found: Error: Can't resolve 'react-dom/client' 에러였다.

react-dom/client는 리액트 18버전에 맞추어 나온 것이기 때문에, 이미 버전을 낮추었기 때문에 나온 에러였다.

index.js에서 버전에 맞게 코드를 수정해주어 해결했다.

// react v18 버전용
// import ReactDOM from 'react-dom/client'; 
import ReactDOM from 'react-dom';  // react v17 버전용

// react v 18 버전 용
// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
// root.render(
//   <React.StrictMode>
//         <App />
//   </React.StrictMode>
// );

// react v 17 버전용
ReactDOM.render(
  <React.StrictMode>
        <App />
  </React.StrictMode>,
  document.getElementById('root')
);

(reference3)

 

처음 개발 시작한 날부터 CRUD 기능을 작성하고 있지만, 사실 아직까지 백엔드 개발이 같이 들어오지 못하고 프론트엔드만 개발을 시작했기 때문에 잘 하고 있는 것인지 아닌지도 잘 모르겠다.

그에 대한 해결책으로는 더미데이터를 json으로 만들어서 직접 통신을 해보는 방법이 있다.

일단 기수 더미데이터만 만들어서 해보는 중인데, get 요청을 할 때는 200 status code를 받아오는 것으로 보아 통신이 잘 되고 있는 것 같다.

잘 진행되고 있는 것 같았는데, R, D에서 갑자기 막힌 느낌이 든다. 분명히 내가 생각한 그림은 있는데, 기능으로 구현하기가 상당히 어렵다. 당장 css를 입히지는 않으니 그 부분은 둘째 문제고, 기능 구현조차 제대로 되지 않고 있다는 점이 나를 조급하게 만든다. 조급해지면 될 것도 안 되는데, 계획이 틀어지는 듯한 느낌이 든다.

이럴 때일수록 멘탈을 제대로 잡고 천천히 생각해봐야하는데, 나 스스로를 잘 컨트롤하면서 케어할 수 있어야겠다.