안녕하세요 상훈입니다.

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

안녕하세요 상훈입니다.

React.js 에서 image의 경로를 잡을 때 경로를 못잡아주는 경우가 있습니다.

이에 대비해 프로젝트의 root 경로에서 이미지의 경로를 잡아주는 방식을 소개하도록 하겠습니다.

<img src={process.env.PUBLIC_URL + `/assets/alpha.png`} alt="" />

/public/assets/alpha.png

이렇게 src 내부가 아닌 public 폴더 내의 경로일 때 사용해주시면 편리하겠습니다.

 

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

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

[ React.js, Vue.js ] 프로젝트의 링크 보낼 때 카카오톡 썸네일, 제목, 내용 바꾸는 방법 / how to change default thumbnail, title, content, image with link in kakkao  (0) 2022.04.06
[ React.js ] 웹페이지 제목 바꾸는 방법 / How to change title of React web project  (0) 2022.04.06
[ 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
[ React.js ] 유용한 리액트 라이브러리 추천 2가지  (0) 2022.03.29

React-native 로 font 를 설정하려던 와중 에러가 발생하였다.

'Lobster Regular' 이라는 구글 폰트명으로 폰트를 설정하려고 하는데 expo 설정과 연동하여도 에러가 발생하였다.

package.json

버전 참고 바랍니다.

 

expo install expo-font

 

expo-font를 설치해주고, App.js 에서 코딩해주었다.

loaded 라는 변수에 useFonts() Hook을 사용, font의 경로(src/assets/fonts/-.ttf) 를 찾아 삽입해주었다.

저 부분에서 조건문에 다른 컴포넌트를 라이브러리에서 끌어다가 사용하였었는데, 에러가 나서 null로 바꿔주었다.

(혹시나 같은 오류가 발생한다면 참고바란다.)

 

에러 해결되었슴

 

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

 

 

expo 공식 사이트에 어떻에 font 적용이 가능한지 설명되어있으니 참고 바랍니다.

 

Font - Expo Documentation

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

docs.expo.dev

 

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

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

[ 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 ] [ Firebase ] undefined is not an object (evaluating 'firebase.apps.length')  (0) 2022.03.31
[ React.js ] 유용한 리액트 라이브러리 추천 2가지  (0) 2022.03.29
[ React.js ] Koa-router -> Koa-tree-router 도서 : 리액트를 다루는 기술  (0) 2022.03.15

'firebase.apps.length' 부분에서 객체에 대한 길이를 반환시켜 값의 존재유무에 따라 app의 값을 다르게 앱에 적용하려고하는데 해당 내용에서 자꾸만 에러가 출력되었다.

기존 코드는 login auth() 관련해서 기능을 구현하려고하였다.

 

바뀐 부분은 import 부분.

 

firebase의 버전은 v8이다. 

firebase 버전

// 변경 전
import * as firebase from "firebase/app";

// 변경 후
import * as firebase from "firebase";
// 하단의 전체 코드

const firebaseConfig = {  ...  };

let app;
if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig);
} else {
  app = firebase.app();
}

const auth = firebase.auth();

export { auth };

 

이것 때문에 오전내내 시간을 사용하였다. 그래도 해결되었으니 기쁘구먼,,

그런데 왜 공식 페이지에서는 import 부분을 저대로 명시해놓았을까 의문이 든다.

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

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

[ 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 ] 유용한 리액트 라이브러리 추천 2가지  (0) 2022.03.29
[ React.js ] Koa-router -> Koa-tree-router 도서 : 리액트를 다루는 기술  (0) 2022.03.15
[ React.js ] Hooks - useEffect - RestAPI, 비동기, Promise, Async Await  (0) 2022.03.11

 

1. redux/toolkit

npm install @reduxjs/toolkit

 

 

Redux Toolkit | Redux Toolkit

The official, opinionated, batteries-included toolset for efficient Redux development

redux-toolkit.js.org

redux를 사용할때에 매우 유용한 라이브러리다.

Extension의 redux를 설치해야하며, 타임머신 기능을 제공하여 에러를 찾기도 편리하다.

 

2. date-fns

npm i date-fns

날짜 형식을 사용할때 편리하게 사용하고 귀찮게 일일이 시간 타입을 선언하여 사용할 필요가 없다.

// 현재와의 시각 차이를 만들 수 있음

// Slicer.js
date: sub(new Date(), { minutes: 10 }).toISOString()

// ParseTime.js
const TimeAgo = ({ timestamp }) => {
  let timeAgo = "";
  if (timestamp) {
    const date = parseISO(timestamp);
    const timePeriod = formatDistanceToNow(date);
    timeAgo = `${timePeriod} ago`;
  }
  return (
    <span title={timestamp}>
      &nbsp; <i>{timeAgo}</i>
    </span>
  );
};

formatDistanceToNow 함수를 사용하여, 현재 시각과의 시간 차이를 출력하기 쉽다.

-> 게시글 같은 곳에서 사용하면 편리할듯

 

 

사실 이 date-fns 의 기능을 추천해주고 싶어서 어그로 끌었다. 미안하다.

 

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

 

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

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

[ 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
[ React.js ] Koa-router -> Koa-tree-router 도서 : 리액트를 다루는 기술  (0) 2022.03.15
[ React.js ] Hooks - useEffect - RestAPI, 비동기, Promise, Async Await  (0) 2022.03.11
[ React.js ] react-virtualized - react 17 Error. 버전의 차이 때문에 생기는 설치 오류 해결하기  (0) 2022.03.10

댄스타임

 

혹은 ㄴ자로 운전석에서 내리시는 분

 

플라잉 트럭

 

 

이상 하루만에 겪은것

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

'일상' 카테고리의 다른 글

드디어 왔습니다.  (6) 2022.10.06
구글 에드센스 짤림  (0) 2022.09.09
책 소개 : 소프트웨어 아키텍처101  (0) 2022.03.24
[ Laravel - Vue.js ] 스펙업! 강의 추천  (0) 2021.10.01
네이버 블로그에서 시작하여 이제 티스토리로.  (0) 2021.08.25

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다.

한빛미디어에서 "소프트웨어 아키텍처101" 이라는 책을 제공 받아 글을 작성하게 되었습니다.

책의 외관은 앵무새의 등장으로 시작합니다.

소프트웨어 아키텍처 101

Fundamentals of Software Architecture

기본적으로 비전공자이다보니 소프트웨어 및 모든 내용에서 웹개발자에 합당한 기본 지식이 부족하다.

뭐든지간에 읽고 씹고 맛보고 해봐야 조금이나마 개발자 고수님들을 따라잡을 수 있다고 생각하기에

현재의 프론트개발자라는 직종에서 100% 일치하지는 않지만 그래도 많은 부분을 함유하고 있다고 생각하여 아키텍처 구조를 살펴보려고 신청하였다.

책 내용 중 일부 액터/액션 접근법

해당 책은 소프트웨어의 전반적인 아키텍처에 대한 소개가 핵심이다.

여러 가지 아키텍처를 소개해주고, 이에 따른 내용을 설명해준다.

 

솔직히 읽으면서 좀 힘들었다.... 

마라톤하는데 죽을맛을 봐가며 페이스 메이커와 함께 뛴 느낌.

 

내 개발 지식이 부족하기에 어쩔 수 없긴하지만
나름 아는 내용(컴포넌트, 데이터베이스, 비동기통신 등등..)이 등장하기도 하였다.

이 책은 개발자 중급에서 읽기 좋고
고급에서도 가끔 아~뭐가있었더라~ 심심한데 읽어볼까? 하면 도움이 될 것 같다.

개발자 코드 완성도 체크리스트!

 

이 책은 아키텍처 구조에 대한 설명이 주 이기 때문에, Part 2를 집중해서 봐야한다.

이 책에서 소개하는 여러 아키텍처들을 한 번 찬찬히 살펴보아야한다.

 

 

마지막으로

우발적 복잡성

우발적 복잡성에 대한 문제

그림이 인상적이어서 가져왔다.

이거 보여주려고 어그로 끌었다.

4C

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

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

'일상' 카테고리의 다른 글

드디어 왔습니다.  (6) 2022.10.06
구글 에드센스 짤림  (0) 2022.09.09
고스트 리콘 웃긴짤  (1) 2022.03.27
[ Laravel - Vue.js ] 스펙업! 강의 추천  (0) 2021.10.01
네이버 블로그에서 시작하여 이제 티스토리로.  (0) 2021.08.25

+ Recent posts

티스토리툴바