이 글에서는 react-router-dom으로 라우팅을 설정하고 MUI 설치를 해볼게요.

여기서는 BrowserRouter 대신 HashRouter 을 사용해 줄거에요.

일단 프로젝트에서 생성된 파일들을 정리해 볼게요. 일단 src에서 main.tsx와 vite-env.d.ts만 남겨두고 전부 삭제했어요. 그다음 빌드 오류를 수정해 볼게요.

import React from 'react'
import ReactDOM from 'react-dom/client'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <div>Hello</div>
  </React.StrictMode>,
)

이러면 화면에 Hello 가 보일 거에요.

이제 라우터를 설치하고 설정해 줄게요.

react-router-dom 사용하기

paringparing :: url-shortener/packages/frontend ‹master*› » yarn add react-router-dom        
➤ YN0000: ┌ Resolution step
➤ YN0002: │ backend@workspace:packages/backend doesn't provide webpack (p7f726), requested by ts-loader
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 2s 30ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ @remix-run/router@npm:1.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ react-router-dom@npm:6.5.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ react-router@npm:6.5.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 0s 715ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 3s 13ms

아까 지웠던 App.tsx 를 다시 만들어 줄게요. 그리고 메인 페이지로 사용할 컴포넌트도 하나 만들어 줄게요.

import React from 'react'

export const MainPage: React.FC = () => {
  return <div>This is main page</div>
}

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import { MainPage } from './pages/main'

export const App: React.FC = () => {
  return (
    <Routes>
      <Route index element={<MainPage />} />
    </Routes>
  )
}

이제 main.tsx에서 라우터를 사용할 수 있게 해줄게요.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { HashRouter } from 'react-router-dom'
import { App } from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
)

그럼 메인 페이지 컴포넌트에 넣은 내용이 보일 거에요.

이렇게 라우터 세팅이 끝났어요! 이제 UI를 만들어 볼게요.

MUI 설치하기

일단 패키지를 설치해 줄게요.

paringparing :: url-shortener/packages/frontend ‹master*› » yarn add @mui/material @emotion/react @emotion/styled                                                                                     1 ↵
➤ YN0000: ┌ Resolution step
➤ YN0002: │ backend@workspace:packages/backend doesn't provide webpack (p7f726), requested by ts-loader
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 4s 313ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ react-is@npm:16.13.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ react-transition-group@npm:4.4.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ regenerator-runtime@npm:0.13.11 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ source-map@npm:0.5.7 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ stylis@npm:4.1.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 1s 991ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 6s 656ms

main.tsx 에 CssBaseline 을 추가해 줬어요.

// ...
import { CssBaseline } from '@mui/material'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <CssBaseline />
    {/* ... */}
  </React.StrictMode>,
)

그럼 이렇게 페이지와 내용 사이의 간격?이 사라질거에요.

이제부터 div 대신 MUI의 Box 컴포넌트를 사용할게요.

메인 페이지를 수정해 주세요.

import { Box } from '@mui/material'
import React from 'react'

export const MainPage: React.FC = () => {
  return <Box>This is main page</Box>
}

일단은 보이는건 변화가 없을거에요.

그럼 이번 글은 여기까지 할게요. 오늘도 소스코드...항상 같지만..

GitHub - paringparing/url-shortener: something

something. Contribute to paringparing/url-shortener development by creating an account on GitHub.

GitHubparingparing