6. Vue.js+Node.js 웹페이지 만들기

10 Dec 2021

Reading time ~4 minutes

6. vue.js 웹페이지 제작하기

Svg 아이콘 변경

깃허브와 인스타그램 아이콘이 필요하여 여기에 있는 것을 사용하였다.

//인스타그램
<a
  href="https://www.instagram.com/lajancia/"
  class="my-4 mx-2 text-2xl text-white hover:text-yellow-500"
  ><svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="white"
  >
    <path
      d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
    /></svg
></a>

이러한 식으로 등록을 하게 되면, 인스타그램 주소로 이동되는 svg 아이콘을 등록 가능하다.
이때 기존에 tailwindcss로 hover을 했을 때 색이 바뀌는 코드가 제대로 동작하지 않는다.

svg:hover { fill: orange; }

css에 추가로 등록한다.
모든 svg 아이콘이 hover 했을 때 정상적으로 색이 바뀐다.

결과

Untitled

정상적으로 아이콘이 바뀌었다.
메뉴의 아이콘도 마저 바꿔주자.

vue title 변경

현재 별도의 title을 지정하지 않았기 때문에 초기에 파일을 만들 때 사용한 front_end 타이틀이 그대로 뜨고 있다.

title을 변경하는 여러 방법들 중, 곧 페이지를 새로 생성하여 라우팅을 해야 하기 때문에 vue-router를 이용하여 title을 바꿀 수 있도록 변경해본다.

vue-router

npm install vue-router vue add router

vue-router를 설치하기 전에 꼭 깃허브에 파일을 미리 백업해두도록 한다.
왜냐하면 app.vue 코드가… 전부 날아가기 때문이다….

코드 분할

<router-link /> <router-view />

라우터 링크를 통해 이동하고자 하는 페이지로 링크되는 동작 버튼을 구현 가능하다.
router-view 태그가 있는 곳에서 링크된 페이지가 나타난다.

<template>
  <div>
    <div class="relative">
      <div class="absolute inset-y-0 left-0 h-full w-1/5 ">
        <div class="h-screen w-48 px-8 ">
          <div
            class="flex flex-col justify-around text-4xl mx-3 py-8 text-yellow-500"
          >
            DevLog
          </div>
          <div class="h-3/4 flex flex-col justify-around text-white">
            <h3
              class="pl-1 text-sm flex items-center py-2 mb-2 text-white hover:text-yellow-500 transition duration-200 ease-in "
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-2"
                viewBox="0 0 25 25"
                fill="white"
              >
                <path
                  d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"
                />
              </svg>
              <a
                class="hover:text-yellow-500 transition duration-200 ease-linear"
                href="http://lajanciadev.com/"
                >Home</a
              >
            </h3>
            <h3
              class="pl-1 text-sm flex items-center py-2 mb-2 hover:text-yellow-500 transition duration-200 ease-in"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-2"
                viewBox="0 0 25 25"
                fill="white"
              >
                <path
                  d="M23.548 10.931l-10.479-10.478c-.302-.302-.698-.453-1.093-.453-.396 0-.791.151-1.093.453l-2.176 2.176 2.76 2.76c.642-.216 1.377-.071 1.889.44.513.515.658 1.256.435 1.9l2.66 2.66c.644-.222 1.387-.078 1.901.437.718.718.718 1.881 0 2.6-.719.719-1.883.719-2.602 0-.54-.541-.674-1.334-.4-2l-2.481-2.481v6.529c.175.087.34.202.487.348.717.717.717 1.881 0 2.601-.719.718-1.884.718-2.601 0-.719-.72-.719-1.884 0-2.601.177-.178.383-.312.602-.402v-6.589c-.219-.089-.425-.223-.602-.401-.544-.544-.676-1.343-.396-2.011l-2.721-2.721-7.185 7.185c-.302.302-.453.697-.453 1.093 0 .395.151.791.453 1.093l10.479 10.478c.302.302.697.452 1.092.452.396 0 .791-.15 1.093-.452l10.431-10.428c.302-.303.452-.699.452-1.094 0-.396-.15-.791-.452-1.093"
                />
              </svg>
              <a
                class="hover:text-yellow-500 transition duration-200 ease-linear"
                href="https://lajancia.github.io/"
                >GitBlog</a
              >
            </h3>
            <h3
              class="pl-1 text-sm flex items-center py-2 mb-2 hover:text-yellow-500 transition duration-200 ease-in"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-2"
                viewBox="0 0 25 25"
                fill="white"
              >
                <path
                  d="M12 0l-11 6v12.131l11 5.869 11-5.869v-12.066l-11-6.065zm7.91 6.646l-7.905 4.218-7.872-4.294 7.862-4.289 7.915 4.365zm-6.91 14.554v-8.6l8-4.269v8.6l-8 4.269z"
                />
              </svg>
              <router-link
                to="/about"
                class="hover:text-yellow-500 transition duration-200 ease-linear"
                >3D Object</router-link
              >
            </h3>
            <h3
              class="pl-1 text-sm flex items-center py-2 mb-2 hover:text-yellow-500 transition duration-200 ease-in"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-2"
                viewBox="0 0 25 25"
                fill="white"
              >
                <path
                  d="M22 0h-20v24h14l6-6v-18zm-6 18h4.36l-4.36 4.385v-4.385zm-3 1h-8v1h8v-1zm0-3h-8v1h8v-1zm6-2v-1h-14v1h14zm-7.059-4.968c-1.147-.265-2.214-.497-1.697-1.473 1.573-2.97.417-4.559-1.244-4.559-1.694 0-2.821 1.65-1.244 4.559.532.982-.575 1.214-1.697 1.473-1.024.237-1.062.745-1.059 1.635l.001.333h7.997l.001-.323c.004-.896-.03-1.407-1.058-1.645zm7.059.968h-4v1h4v-1zm0-2v-1h-4v1h4zm0-4h-4v1h4v-1z"
                />
              </svg>
              <a
                class="hover:text-yellow-500 transition duration-200 ease-linear"
                href="#"
                >Resume</a
              >
            </h3>
            <h3
              class="pl-1 text-sm flex items-center py-2 mb-2 hover:text-yellow-500 transition duration-200 ease-in"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-2"
                viewBox="0 0 25 25"
                fill="white"
              >
                <path
                  d="M12.23 15.5c-6.801 0-10.367-1.221-12.23-2.597v9.097h24v-8.949c-3.218 2.221-9.422 2.449-11.77 2.449zm1.77 2.532c0 1.087-.896 1.968-2 1.968s-2-.881-2-1.968v-1.032h4v1.032zm-14-8.541v-2.491h24v2.605c0 5.289-24 5.133-24-.114zm9-7.491c-1.104 0-2 .896-2 2v2h2v-1.5c0-.276.224-.5.5-.5h5c.276 0 .5.224.5.5v1.5h2v-2c0-1.104-.896-2-2-2h-6z"
                />
              </svg>
              <a
                class="hover:text-yellow-500 transition duration-200 ease-linear"
                href="#"
                >Portfolio</a
              >
            </h3>
            <h3
              class="pl-1 text-sm flex items-center py-2 mb-2 hover:text-yellow-500 transition duration-200 ease-in"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-2"
                viewBox="0 0 20 20"
                fill="white"
              >
                <path
                  fill-rule="evenodd"
                  d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
                  clip-rule="evenodd"
                />
              </svg>
              <a
                class="hover:text-yellow-500 transition duration-200 ease-linear"
                href="#"
                >Settings</a
              >
            </h3>
          </div>
        </div>
      </div>

      <div class="absolute inset-y-0 right-0  h-full w-4/5">
        <router-view></router-view>
      </div>

      <!--  -->
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      toggle() {
        this.open = !this.open;
      },
    },
  };
</script>

<style>
  @import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
  * {
    background-color: #151515;
    font-family: "Anton", sans-serif;
  }
  .wrapper {
    display: flex;
  }
  .wrapper #static-txt {
    font-size: 120px;
  }
  .wrapper #dynamic-txts {
    line-height: 180px;
    height: 180px;
    overflow: hidden;
  }
  #dynamic-txts li {
    list-style: none;
    position: relative;
    font-size: 120px;
    font-weight: 500;
    top: 0;
    position: relative;
    animation: slide 12s steps(4) infinite;
  }
  @keyframes slide {
    100% {
      top: -720px;
    }
  }
  #dynamic-txts li::after {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    background-color: #151515;
    width: 100%;
    border-left: 2px solid white;
    animation: typing 3s steps(10) infinite;
  }
  @keyframes typing {
    40%,
    60% {
      left: calc(100% + 30px);
    }
    100% {
      left: 0;
    }
  }
  svg:hover {
    fill: orange;
    text-align: right;
  }
</style>

오른쪽 상단의 아이콘과 메인 화면을 views/Home.vue로 이동하고 그 자리에 router-view 태그로 연결해두었다.
이 자리에서 이제 페이지가 변경될 것이다.

title 변경

//router가 설치되어 있는 상태에서 index.js를 통해 title을 변경할 수 있다.

{
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
        title: "Main",
      },
  },

//위와 같이 meta를 추가한다.

router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`;
  next();
})

//const router 밑에 위의 코드를 추가하면 된다.

결과

Untitled 1

아무것도 안바뀐 것 같지만 무언가 바뀌었다.