Confluence과 같은 여러 앱에서 링크를 붙여넣을 때마다 링크에 방금 남겨둔 아주 작은 파비콘을 자동으로 추가한다는 사실을 알고 계셨습니까?



때로는 미묘한 것들이 가장 즐겁습니다. 특히 UX에 대해 이야기할 때 그렇습니다.

이 튜토리얼에서는 링크의 파비콘을 자동으로 가져오는 링크 구성 요소를 만드는 방법을 보여줍니다.

계속하기 전에 Vue + Composition API의 기본 사항이 있다고 가정하겠습니다.

링크 구성 요소 만들기

링크에 대한 구성 요소 래퍼를 생성하여 시작하겠습니다. 이를 우리의 이름으로 지정합니다FaviconFancyLink.vue.

<template>
  <a :href="href" class="fancy-link"><slot /></a>
</template>
<script>

const props = {
  href: {
    type: String
  },
};

export default {
  name: 'FaviconFancyLink',
  props,
}
</script>

<style scoped>
.fancy-link {
  border: 1px solid #ababab;
  border-radius: 3px;
  padding: 0.1rem 6px 0.1rem 24px;
  text-decoration: none;
  background: gray;
}
</style>

이제 구성 요소는 매우 간단합니다. href를 prop으로 전달하고 이를 <a> 태그로 전달합니다.

소품 대신 v-bind="$attrs"를 사용하여 이를 개선할 수도 있으므로 links에 대한 다른 모든 속성을 얻을 수 있지만 지금은 간단하게 유지하겠습니다.

파비콘 가져오기

이것은 마법이 일어나는 곳입니다. Google의 파비콘 서비스를 사용하여 파비콘을 쉽게 얻을 수 있습니다.

https://www.google.com/s2/favicons?domain=dev.to

트릭은 href 소품에서 호스트 이름을 가져오고 favicon api로 이미지를 동적으로 추가하는 것입니다.

호스트 이름을 얻는 가장 좋은 방법은 다음과 같은 정규식을 사용하는 것입니다.

function getDomain(url) {
  return url.match(/:\/\/(.[^/]+)/)[1];
}

다음 단계는 favicon 이미지를 링크에 추가하는 것입니다. 가장 쉬운 방법은 computed 속성을 사용하여 아이콘을 background-image로 스타일을 추가하는 것입니다.

<script>
import { computed } from 'vue';

const props = {
  href: {
    type: String
  },
};

export default {
  name: 'FaviconFancyLink',
  props,
  setup(props) {
      const styles = computed(() => ({
      background: `url(http://www.google.com/s2/favicons?domain=${getDomain(
        props.href
      )}) 4px center no-repeat`,
    }));

    return {
      styles
    };
  }
</script>

이제 스타일을 <a /> 요소에 바인딩하겠습니다.

<template>
  <a :href="href" class="fancy-link" :style="styles"><slot /></a>
</template>

앱에 추가

이제 멋진 링크 구성 요소를 추가하고 마법을 살펴보겠습니다.

  <div class="links">
    <FaviconFancyLink href="https://dev.to">Dev.to</FaviconFancyLink>

    <FaviconFancyLink href="https://twitter.com/">Twitter</FaviconFancyLink>

    <FaviconFancyLink href="https://alvarosaburido.dev/"
      >AS - Portfolio</FaviconFancyLink
    >
  </div>

스타일링을 하면 이런 모습이 됩니다.



그게 전부입니다. 쉽죠? 이 짧은 튜토리얼이 마음에 든다면 댓글을 달고 사랑을 주세요.