TEAM Project (10.10) - 로그인 페이지 material UI

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

이 순서로 하면 제대로 화면에 구현되는 것을 확인

---

 

트러블슈팅🥲

1.  

   

암것도 모르고 막 했을때 첫번째오류인데 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번을 넣은 것