-
[모각코+] 웹 리액트(React) 1월달과정 14일차모각코+/React 2022. 1. 28. 00:23728x90
시간 가공 함수 생성 by Qcell | 코드메이트
이번 시간에는 moment JS 라이브러리를 활용하여 현재 시간에서 영상이 업로드 된 날짜를 출력하는 기능을 구현했고, 전체적인 폴더를 해당 컴포넌트에 맞게 수정했습니다. ExploreCard.js -> HorizontalCa
codemate.kr
이번 시간에는 moment JS 라이브러리를 활용하여 현재 시간에서 영상이 업로드 된 날짜를 출력하는 기능을 구현했고,
전체적인 폴더를 해당 컴포넌트에 맞게 수정했습니다.
ExploreCard.js -> HorizontalCard.js
import moment from 'moment'; import 'moment/locale/ko'; import { ProcessUploadDate, ProcessViewCount } from '../../utils'; import styles from './HorizontalCard.module.css'; function HorizontalCard({ data }) { return ( <a href={`https://www.youtube.com/watch?v=${data.id}`}> <div className={styles.card}> <img className={styles.thumbnail} src={data.thumbnail} alt={`${data.title}의 썸네일`} /> <div className={styles.info}> <div className={styles.title}>{data.title}</div> <div className={styles.meta}> <a href={`https://www.youtube.com/channel/${data.channelId}`} className={styles.uploader} > {data.channelTitle} </a> <div className={styles.view}> {ProcessViewCount(data.viewCount)} </div> <div className={styles.time}>{ProcessUploadDate(data.date)}</div> </div> <div className={styles.desc}>{data.description}</div> </div> </div> </a> ); } export default HorizontalCard;
utils/index.js
import moment from 'moment' function ProcessViewCount(viewCount) { if (viewCount < 1000) { return `조회수 ${viewCount}회`; // 조회수 100회 } else if (viewCount < 10000) { return `조회수 ${(viewCount / 1000).toFixed(1)}천회`; // 조회수 1.1천회 } else if (viewCount < 100000) { return `조회수 ${(viewCount / 10000).toFixed(1)}만회`; // 조회수 1.3만회 } else if (viewCount < 100000000) { return `조회수 ${(viewCount / 10000).toFixed(0)}만회`; // 조회수 103만회 } else { return `조회수 ${(viewCount / 100000000).toFixed(0)}억회`; // 조회수 3억회 } } function ProcessUploadDate(data){ const date = moment(data); const trend = moment("2021-09-16T13:15:02"); return `${date.from(trend)}`; } export { ProcessViewCount, ProcessUploadDate };
조회수를 가공하는 processViewCount 메소드를 구현했고, 구독 탭에서 업로드된 날짜를 체크하기 위해
ProcessUploadDate 메소드를 구현하여 HorizontalCard 컴포넌트에
<div className={styles.time}>{ProcessUploadDate(data.date)}</div>
해당 코드를 추가하여 기능을 구현했습니다.
이제 거의 유튜브스러운 화면이 된 것 같아요 :)
728x90'모각코+ > React' 카테고리의 다른 글
[모각코+] 웹 리액트(React) 1월달과정 15일차 (0) 2022.01.30 [모각코+] 웹 리액트(React) 1월달과정 15일차 (0) 2022.01.30 [모각코+] 웹 리액트(React) 1월달과정 13일차 (0) 2022.01.27 [모각코+] 웹 리액트(React) 1월달과정 12일차 (0) 2022.01.25 [모각코+] 웹 리액트(React) 1월달과정 11일차 (0) 2022.01.24