안녕하세요 상훈입니다.

React.js 프로젝트 링크를 남들에게 보낼 때, 조금 더 예쁜 썸네일과, 제목, 그리고 내용을 보내려고 할 때 유용한 미세먼지 팁 입니다.

/public/index.html 를 엽니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <meta property="og:image" content="%PUBLIC_URL%/이미지 이름을 작성해주세요" />
    <meta property="og:site_name" content="사이트 이름을 작성해주세요" />
    <meta property="og:description" content="이곳에 컨텐츠를 작성해주세요" />

이렇게 head 태그 안에 meta 태그로 작성해주시면 됩니다.

프로퍼티는 og: " " 로 작성하면 됩니다.

그리고 다시 빌드해주시고, 배포해주세요. 마지막으로 링크를 마구 보내줍니다.

이상입니다.

[ 카카오톡 전송 메시지 이미지 ]

업데이트 전
업데이트 후

이렇게 깔끔하게 카카오톡으로 링크를 전송할 수 있습니다.

 

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > React.js' 카테고리의 다른 글

[ React-Native ] Error : Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.  (0) 2022.04.08
[ React-Native ] 모바일 화면의 넓이, 높이 자동으로 가져오기 API  (0) 2022.04.07
[ React.js ] 웹페이지 제목 바꾸는 방법 / How to change title of React web project  (0) 2022.04.06
[ React.js ] public url 경로, 이미지 경로 쉽게 잡는 방법, public-url  (0) 2022.04.05
[ React-native ] [ expo-font ] error - fontFamily "Lobster-Regular" is not a system font and has not been loaded through Font.loadAsync.  (0) 2022.03.31

안녕하세요 상훈입니다. 

React.js 에서

웹 페이지에서 탭 부분의 텍스트. 즉, 웹사이트의 이름(title)을 바꾸는 방법을 포스팅하겠습니다.

예시) 티스토리 글쓰기 화면 title

 

아주 간단합니다.

해당 페이지에서 useEffect() hook을 하나 생성해주시고, title이라는 태그를 찾아 내부 html의 값을 변경시켜주시면 됩니다.

  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `나의 웹페이지 제목`;
  }, []);

getElementsByTagName으로 title이라는 tag의 첫번째 요소[0] 를 html에서 찾습니다. 

그리고 해당 요소의 내부 html의 값을 변경해줍니다. 

 

그러면 깔끔하게 바로 바뀌는 것을 확인할 수 있습니다.

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > React.js' 카테고리의 다른 글

[ React-Native ] 모바일 화면의 넓이, 높이 자동으로 가져오기 API  (0) 2022.04.07
[ React.js, Vue.js ] 프로젝트의 링크 보낼 때 카카오톡 썸네일, 제목, 내용 바꾸는 방법 / how to change default thumbnail, title, content, image with link in kakkao  (0) 2022.04.06
[ React.js ] public url 경로, 이미지 경로 쉽게 잡는 방법, public-url  (0) 2022.04.05
[ React-native ] [ expo-font ] error - fontFamily "Lobster-Regular" is not a system font and has not been loaded through Font.loadAsync.  (0) 2022.03.31
[ React-native ] [ Firebase ] undefined is not an object (evaluating 'firebase.apps.length')  (0) 2022.03.31

Vue.js 에서 router 를 이용할 때 페이지 탭의 이름을 설정할 수 있다.

바로 router 의 index.js 에서 가능하다.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'IP Address Tracker'
    }
  },
]

Home.vue의 meta.title : '  ' 의 값을 설정

그리고 rotuer 아래에 작성

// page tab control
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`
  next()
})

 

전체 코드 예시

// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'IP Address Tracker'
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// page tab control
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`
  next()
})

export default router

 

유용하게 사용하십쇼!

반응형
저작자표시 (새창열림)

'FrontEnd > Vue.js' 카테고리의 다른 글

[ Vue.js ] Error - Uncaught TypeError: Cannot use 'in' operator to search for 'path' in undefined at resolve 해결방법  (0) 2022.02.24
[ Vue.js, vuetify ] Vue.js 2, Medical chart app 구현하기  (0) 2022.02.20
[ Vue.js ] vue3 를 사용하여 Drag & Drop 구현하기. 드래그 드롭  (0) 2022.02.11
[ Vue.js ] Firebase, FireStore 사용하기 ver-22.02.09 / over 8.x version Error... How to use firebase ?  (0) 2022.02.09
[ Vue.js ] Vue-router 사용하기 + 데이터 전달하기 (바인딩) , $route, router, how to use, useRoute  (0) 2022.02.08

 

안녕하세요 상훈입니다.

웹페이지에서 title에 적혀져 있는 icon 혹은 image를 변경하는 방법을 포스팅하겠습니다.

 

title 영역에 이미지/icon 표시

 

기본 Format

<link href="이미지경로" rel="shortcut icon" type="image/x-icon">

 

예시)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> title name </title>
    
    <link href="../images/image-example.png" rel="shortcut icon" type="image/x-icon">
    
</head>

 

직접 이미지를 다운로드 받아 경로에 넣고 링크를 해주었습니다. 

 

감사합니다.

반응형
저작자표시 (새창열림)

'FrontEnd' 카테고리의 다른 글

[HTML] a 태그에 꼭 추가 해야 하는 속성(Attr)  (0) 2025.03.07
[HTML] img 태그 현명하게 사용하기  (0) 2023.05.29
[NVM] Node.js 버전 낮춰서 Nuxt.js 프로젝트 구동하기 / window  (0) 2022.11.11
VSCode - HTML Formatter 설정하는 방법, html 서식 지정하기  (0) 2022.05.23
[ BootStrap ] 부트스트랩 cdn 적용하는 방법  (0) 2021.10.06

+ Recent posts

티스토리툴바