안녕하세요 상훈입니다.

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

안녕하세요 상훈입니다.

 

node.js 를 이용한 백엔드 개발 중 .js 파일을 require 말고 import 시키고 싶었는데 안되었던 경험이 있으실 수 있습니다.

그때에는 package.json 혹은 eslintrc.json 파일의 parserOptions 항목을 살펴보셔야합니다.

ecmaVersion은 2016이상으로 맞춰주시길 바랍니다.

제 eslintrc.json 입니다.

"parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest"
  },

sourceType: module 을 추가해주시거나, 변경해주시거나

package.json

package.json에서 type: 'module' 을 추가해주세요.

 

이제 import 를 사용하실 수 있습니다.

덤으로 export const ~ 도 사용하여 모듈식 출력이 가능해졌습니다.

 

 

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

 

 

 

 

Parsing error: 'import' and 'export' may appear only with 'sourceType: module' · Issue #462 · AtomLinter/linter-eslint

I get this error since the most recent update. is it possible there this is missing somewhere in the package?

github.com

 

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

'FrontEnd > JavaScript' 카테고리의 다른 글

[JavaScript] 문자열을 배열로 변경하는 방법, How to change string to Array/Object  (0) 2022.08.24
[JavaScript] console.log 눈에 띄게 설정하기, 색상입히기  (0) 2022.07.12
eslint 설정과 prettierrc 설정 간단하게 몇 가지 끄적이기  (0) 2022.03.14
[ JavaScript ] 한글 정규표현식 내용 사용하기  (0) 2022.02.28
[ NPM Error ] errno: -4048, code: 'EPERM', syscall: 'unlink' 에러 해결하는 방법, Error: EPERM: operation not permitted, unlink  (0) 2022.02.25

안녕하세요 상훈입니다.

 

MongoDB를 사용하여 node.js 와 연결하려고합니다.

에러 발생

MongoParseError: option usefindandmodify is not supported at parseOptions ...

 

mongo.connect( ) 의 option에서 에러가 발생하였습니다.

해당 에러는 mongoose의 버전의 상승으로 인해 더이상 필요없어졌기 때문에 에러가 발생하는 것입니다.

옵션을 제거해주세요!

mongoose
  .connect(MONGO_URI)
  .then(() => {
    console.log("Connected to MongoDB");
  })
  .catch((e) => {
    console.log(e);
  });

이렇게 connect 함수 내부에 파라미터로 uri 주소 말고는 옵션을 주지 않고 코드를 작성합니다.

이상입니다.

 

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

 

 

Error: `useFindAndModify` is an invalid option

I am new to MERN stack and I am following MERN stack tutorial on YouTube. I got an error on Mongoose. Error: `useFindAndModify` is an invalid option I couldn't find any solution to that. import

stackoverflow.com

 

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

'BackEnd' 카테고리의 다른 글

[Spring, Maven, MySQL] Communications link failure - solution / 오류 해결하기 / 해결방법  (1) 2024.01.10
[Spring, Axios] Spring, Axios 비동기 통신 - Post 오류 해결  (0) 2022.12.27
[ Node.js ] NodeJS address already in use 에러 해결하기/ 열린 포트 강제 종료하는 방법  (0) 2022.01.17
[ Web Socket, socket.io] VSCode에서 웹소켓 이용하기 - 특이점  (0) 2022.01.13
[ Socket.io ] 웹소켓을 이용해 데이터 전달 방식의 사고 및 결정  (0) 2022.01.13

안녕하세요 상훈입니다.

리액트를 다루는 기술이라는 책의 21강에서 사용되는 koa-router는 현재의 리액트 버전(17)에서는 사용할 수 없습니다.

설치방법

npm i koa-tree-router

 

사용 방법

const Koa = require("koa");
const Router = require("koa-tree-router");

const app = new Koa();
const router = new Router();
router.get("/", function(ctx) {
  ctx.body = "hello, world";
});

app.use(router.routes());

app.listen(8080);
// 혹은
app.listen(8000, () => {
  console.log('listening...8000...');
})

기존의 사용방식은 일치하고, 다른점은 하단의 app.use 부분입니다.

allowedMethods() 와 같은 긴 코드가 사라지고 위와같이 깔금한 내용만 남았습니다.

 

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

 

 

 

koa-tree-router

A high performance koa router. Latest version: 0.10.1, last published: 11 days ago. Start using koa-tree-router in your project by running `npm i koa-tree-router`. There are 7 other projects in the npm registry using koa-tree-router.

www.npmjs.com

 

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

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

[ 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 ] Hooks - useEffect - RestAPI, 비동기, Promise, Async Await  (0) 2022.03.11
[ React.js ] react-virtualized - react 17 Error. 버전의 차이 때문에 생기는 설치 오류 해결하기  (0) 2022.03.10
[ React.js ] Fragment 사용하기, return ( div 태그를 사용하고 싶지 않을 때  (0) 2022.03.07

안녕하세요 상훈입니다.

1.  .eslintrc.json
2.  .prettierrc

파일에 대해서 간단한 설정 몇 가지를 작성해보려고 합니다.

 

 

1.  .eslintrc.json

일단 사용환경이 React.js 라서 ecmaFeatures 와 같은 경우 jsx 문법을 사용하고 있습니다.

commonjs를 적용해 eslint를 설치하였습니다.

 

- 사용하지 않은 변수에 대한 알림 및 에러 처리

하단에 보시면 no-unused-vars: "warn" 이라는 항목이 있는데, 해당 항목을 error, warn, off 로 설정이 가능합니다.

warn으로 설정하여 에러는 안나지만, underline이 가도록 설정하였습니다.
이렇게 노란색의 underline이 출력됩니다.

 

2.  .prettierrc

1) singleQuote: 싱글 쿼터로할지 더블 쿼터로 할지 설정입니다.

Vue.js 에서는 싱글을 추천하고, React.js 에서는 더블을 권장하고 있습니다. 그래서 false로 무조건 더블 쿼터 처리를 하게하였습니다.

2) semi: 코드의 맨 뒤에 콜론을 자동으로 삽입하게 할지 말지 적용하면 됩니다.

3) tabWidth: 1번 tab을 눌렀을 때 띄워줄 space의 개수입니다. 저는 2개로 했습니다. (2개로 하는게 대세더군요)

결과

 

도움이 되셨길 바랍니다.

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

 

 

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

'FrontEnd > JavaScript' 카테고리의 다른 글

[JavaScript] console.log 눈에 띄게 설정하기, 색상입히기  (0) 2022.07.12
[ Node.js ] .js 파일에서 import 사용하기  (0) 2022.03.15
[ JavaScript ] 한글 정규표현식 내용 사용하기  (0) 2022.02.28
[ NPM Error ] errno: -4048, code: 'EPERM', syscall: 'unlink' 에러 해결하는 방법, Error: EPERM: operation not permitted, unlink  (0) 2022.02.25
[ Node.js, Npm ] node-sass 관련 에러 : node-sass는 더이상 사용되지 않는다?  (0) 2022.02.17

+ Recent posts

티스토리툴바