material ui 사용하기 위해 react 설치 및 적용 (react 나중에 코드에서도 사용하기 위하여 )
현재 타임리프만을 이용하고 있는데, 리액트의 ui를 이용하고 싶다.
일부 일단 지금은 로그인, 회원가입만 동적 UI로 만들고 싶어서 그 부분만 사용할 수 있도록 하자
인텔리제이에 리액트 개발환경 세팅
1. https://carrotdy.tistory.com/60
2. https://ming9mon.tistory.com/161
material ui 8시까지 못띄우면 그냥 daisy UI에서 긁어 오는걸로...
부분 react 적용하는거 도대체 어떻게 하는거지.. 어떻게 할줄만 알면 해결될거같은데
1. React 및 Material UI 설치
- 먼저 React 및 Material UI를 프로젝트에 설치
npm install react react-dom @mui/material @emotion/react @emotion/styled
2. Webpack 설정 파일 작성 (webpack.config.js)
- webpack.config.js 파일은 weppack을 사용하여 login.js 파일을 번들링하고, 결과를 dist 폴더에 저장하는 설정 포함 /
dist 폴더는 spring boot에서 정적 리소스를 제공할 수 있는 위치
3. login.js 파일
- React 컴포넌트 작성 / React와 Material UI를 사용하여 로그인 페이지 구현
4. login.html
- login.html 파일에서 React 컴포넌트를 렌더링할 div 추가, Webpack에서 생성된 번들 파일 로드
<!-- React 컴포넌트를 렌더링할 요소 -->
<div id="login-root"></div>
<!-- 번들된 React 및 Material UI 스크립트 -->
<script src="/dist/login.bundle.js"></script>5. babel-loader 설치
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
5-1 package.json 확인
- node_modules 폴더가 프로젝트에 없거나 패키지들이 누락되어있을 경우, 프로젝트의 package.json 파일을 확인한 후 설치
npm install
6. Webpack 번들링 실행
npx webpack --config src/main/resources/static/resource/js/webpack.config.js
7. 번들링 자동화
npx webpack --config src/main/resources/static/resource/js/webpack.config.js --watch
이 순서로 하면 제대로 화면에 구현되는 것을 확인
트러블슈팅🥲
암것도 모르고 막 했을때 첫번째오류인데 react/ material 설치부터 안하고 파일먼저 생성 후 일어남 설치부터 안되서 (당연하게도), 그리고 경로 자체도 꼬였던 것 같음.. 어떻게 코드를 수정시켜도 전혀... 실행 안됨
찾아보았을 때 @emotion/styled 모듈을 찾지 못한다는 소리라고 하는데, npm list @emotion/styled @emotion/react, npm install @emotion/react @emotion/styled 하여 확인 후 다시 설치하여도 안됨.. 왜...!!!!
그래서 차라리 이건 처음부터 잘못된것같아서 다시 코드 입력
2.
설치부터 차례로 실행 후 확인했는데 화면에는 로그인 페이지가 잘 구현된것처럼 보였는데 개발자 관리페이지 확인해보니 위와같은 오류 발생
해당 오류 메시지는 babel-loader가 설치되지 않아서 발생하는 문제 Webpack 설정에서 JavaScript와 JSX 파일을 처리하기 위해 babel-loader가 필요하지만, 현재 프로젝트에 설치되어 있지 않기 때문에 Webpack이 모듈을 찾지 못하는 상황
위의 순서에 5, 5-1번을 넣은 것
'팀프로젝트 - TailsRoute' 카테고리의 다른 글
| TEAM Project (10.14) - 반려견 훈련 영상 추천 시나리오 (3) | 2024.10.14 |
|---|---|
| TEAM Project (10.13) - 트러블슈팅(Webpack 손상..), thymeleaf, react (1) | 2024.10.13 |
| TEAM Project (10.09) - head, login 파일 / 테일윈드 (node.js) (0) | 2024.10.09 |
| TEAM Project (10.09) - 훈련 영상 추천 AI 기능 생각 정리 (2) | 2024.10.09 |
| TEAM Project (10.08) - figma 디자인, 기능 역할 분담 (2) | 2024.10.08 |
