CodeHoon

안녕하세요 상훈입니다.

graphQL을 사용하는데, syntax highlight를 시키고 싶다면, 아래처럼 생긴 확장자를 사용하면 됩니다.

이 링크에서도 확인이 가능합니다. 참조해주세요!

감사합니다

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

안녕하세요 상훈입니다.

✔ 환경

이번 에러는 에러라고 하기에는 애매하고, VSCode를 사용할 때에 발생할 수 있는 내용입니다.

프로젝트는 잘 구동되지만, 에러가 신경쓰였습니다.

Cannot find module './App.vue' or its corresponding type declarations.

src/main.ts 에서 [ import App from '@/App.vue' ] 부분에 밑줄이 그어지면서 에러라고 표기되었습니다.

✔ 해결방법

extensions - @builtin typescript - 설정(settings) - Disable(workspace) 를 해줍니다. 

그리고 reload VSCode! 

이제 빨간 에러문구가 뜨지않는것으로 확인하였습니다.

✔ 원인

이 extension이 .vue 파일을 제대로 읽어내지 못하기 때문인 것으로 보입니다.

진짜 별거 아닌데, 신경쓰여서..

이상입니다.

1. redux/toolkit

npm install @reduxjs/toolkit

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 의 기능을 추천해주고 싶어서 어그로 끌었다. 미안하다.

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

리액트 코드를 작성하면서 snippets가 작용할 수 있게.

= h1 만 작성하여도 자동으로 <h1></h1>이 작성되게 하는 익스텐더