[TIL] 230130

무한스크롤 코드 자체는 생각보다 간단한데 댓글을 리덕스로 전역으로 관리해서 계속 에러가 났다.

스토어에서 관리하지 않고 컴포넌트 자체에서 api 를 요청해서 사용하는 방법을 시도 중...

 

https://velog.io/@ahn-sujin/ReactIntersection-Observer-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EB%AC%B4%ED%95%9C%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[React]Intersection Observer 사용하여 무한스크롤 구현하기

 

 

https://kyounghwan01.github.io/blog/React/infinite-scroll/#intersection-observer-api%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%86%AB-%E1%84%86%E1%85%AE%E1%84%92%E1%85%A1%E1%86%AB-%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%A9%E1%86%AF

react로 구현하는 무한 스크롤, Intersection Observer API, react-window, infinity scroll, react, next, react-virtualized

 

 

- 오늘 만든 날짜 형식 변환 모듈 파일

date.js

/* eslint-disable consistent-return */
function formatTime(date) {
  if (!date) {
    return;
  }

  let intl = new Intl.DateTimeFormat('ko', { dateStyle: 'short' }).format(
    new Date(date),
  );

  intl = intl.replaceAll(' ', '').slice(0, -1);

  if (intl.indexOf(3) !== 0) {
    intl = `${intl.slice(0, 3)}0${intl.slice(3, 8)}`;
  }

  return intl; // 23.01.01
}

function settingDate(date) {
  if (!date) {
    return;
  }

  let intl = new Intl.DateTimeFormat('ko', { dateStyle: 'medium' }).format(
    new Date(date),
  );

  intl = intl.replaceAll(' ', '').slice(0, -1);

  return intl; // 2023.01.01
}

export { formatTime, settingDate };

 

https://www.daleseo.com/js-intl-api/

자바스크립트의 Intl API

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

Intl.DateTimeFormat - JavaScript | MDN

 

 

https://fromnowwon.tistory.com/entry/react-ga-google-analytics

[React] react-ga로 리액트와 구글 애널리틱스 연결하기

https://prod.velog.io/@zero-black/Google-analytics-4-with-React

Google analytics 4 with React

 

 

- 렌더링 최적화 세션 다시 듣기

- 'Access-Control-Allow-Origin': '*' 삭제하기