Svelte - Router 그리고 Material UI

이제 아래 url 로 들어가면 Menu, Article 을 생성할 수 있는 화면을 대충 만들고자 한다.

• /admin/menu
• /admin/article

일단 svelte - Router 기능을 지원하는 모듈을 설치하자.

구글링을 해보니 svelte-spa-router, svelte-router-spa 요 두개가 나오더라. 뭔 차이인건지...

뭐 여러 블로그 글을 보니 svelte-spa-router 모듈을 사용하니까 나도 이걸 사용하자.

공식 링크는 여기닷!!

https://github.com/ItalyPaleAle/svelte-spa-router

yarn add svelte-spa-router 명령어로 모듈 설치하고 url 을 정의하는 routes.js 파일을 만들자.

• /routes/routes.js

  import { wrap } from 'svelte-spa-router/wrap'
  
  const routes = {
    '/admin/menu': wrap({ 
      asyncComponent: () => import('../view/main/AdminMenu.svelte')
    }),
    '/admin/article': wrap({
      asyncComponent: () => import('../view/main/AdminArticle.svelte')
    }),
  }
  
  export default routes;

물론 당연히 AdminMenu.svelte, AdminArticle.svelte 파일은 미리 준비해놨고, 일단은 간단히 text 만 출력하는 view 로 만들었다.

이제 svelte-spa-router, routes.js 를 불러와서 <Router {routes} /> 를 svelte 내 html 태그 내에 위치시키면 된다. (아래 코드 참조)

<script>
	import Router from 'svelte-spa-router';
    import routes from '../routes/routes';
    
	import Aside from './Aside.svelte';
</script>

<div>
	<Aside></Aside>

	<main>
		<Router {routes} />
	</main>
</div>

이제 /admin/menu 에 접근하면 <Router /> 위치에 AdminMenu.svelte 가 노출된다.
물론 article 의 경우에도 마찬가지이다.

앞으로 생길 page 들의 url 도 이런식으로 정의하고 쓰면 될듯

하다 보니까 이왕 하는 거 그냥 FE 도 대략의 틀을 갖추는 것도 나쁘지 않을듯?

전통적인 웹페이지 구조대로 아래 정도의 틀을 만들자. (Footer 는 제외)

• App.svelte

  <svelte:head>
      <!-- 여기는 렌더링 이후에 head 에 추가될 태그들을 정의하는 곳 -->
      <!-- 보통 <script> <style> 태그 등을 넣는 듯? -->
  </svelte:head>
  
  <script>
      import Header from './view/Header.svelte';
      import Main from './view/Main.svelte';
  </script>
  
  <div>
      <Header></Header>
  
      <Main></Main>
  </div>

• Main.svelte

  <script>
      import Router from 'svelte-spa-router';
      import routes from '../routes/routes';
  
      import Aside from './Aside.svelte';
  </script>
  
  <div>
      <Aside></Aside>
  
      <main>
          <Router {routes} />
      </main>
  </div>

이제 svelte - Material UI 를 설치한 다음에 header 부터 차근 차근 꾸며 보자.

https://sveltematerialui.com 에서 나온대로 차근 차근 하나씩 실행했다.

먼저 smui-theme, svelte-material-ui 모듈을 깔고 App.svelte - <svelte:head> 내에 관련 css 파일을 추가하자.

<svelte:head>
	<!-- https://sveltematerialui.com/REPL.md -->

	<!-- Fonts -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />

	<!-- Material Typography -->
	<link rel="stylesheet" href="https://unpkg.com/@material/[email protected]/dist/mdc.typography.css" />

	<!-- SMUI -->
	<link rel="stylesheet" href="https://unpkg.com/svelte-material-ui/bare.css" />
</svelte:head>

yarn smui-theme template src/theme 명령어를 입력하면 src/theme 디렉토리 내 template 관련 scss 파일이 만들어진다. (잘 모르지만 initial 과정이라 생각하자.)

근데 scss 파일을 그대로 사용하지는 못하니까 css 파일로 컴파일하는 과정이 필요하다.

package.json 내에 scss 를 컴파일하는 script 를 추가하자.

"scripts": {
    "smui-theme-light": "smui-theme compile public/build/smui.css -i src/theme",
    "smui-theme-dark": "smui-theme compile public/build/smui-dark.css -i src/theme/dark",

    "build": "node esbuild.js && yarn build-smui",
    "build-smui": "yarn smui-theme-light && yarn smui-theme-dark",
    
    "dev": "nodemon --watch src/ -e js,svelte --exec \"yarn build && node local-server.js\""
  },

이제 빌드하면 public/build/smui.css, public/build/smui-dark.css 파일이 생성된다.

따라서 App.svelte - <svelte:head> 내에 smui.css 파일을 넣는 코드를 추가하자.

<link rel="stylesheet" href="/build/smui.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="/build/smui-dark.css" media="screen and (prefers-color-scheme: dark)" />

이제 material ui 를 사용해서 header 를 대충이라도 구성해보자... 그건 다음 시간에...