[React] 작성 날짜 기준으로 지난 시간을 변환하기 (리뷰시간, 게시글 시간, 댓글시간, 방금전, 몇분전, 몇시간전, 며칠전)
작성날짜 기준으로 지난 시간을 계산해주는 코드를 구현해보자! 아래의 게시글을 참고한 다음 이 게시글을 보면 이해가 훨씬 더 빠릅니다! https://dev-ini.tistory.com/110 [Javascript] 시간 변환 함수 (newDate, getTime, toLocaleString, , toLocaleDateString, toLocaleTimeString)시간 변환 함수에 대해서 알아보자! new Date() - Date 생성자는 특정 지점을 나타내는 Date 객체를 생성한다. - Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는dev-ini.tistory.com 활용 예시 이 게시글을 활용하면 아래와 같이 구현이 가능하다.리뷰를..
[React] Routing (5) 데이터에서 route 설정하기
더미데이터에서 route 설정하는 법을 알아보자! 구현해야할 것 메인페이지에는 먹거리, 볼거리, 놀거리, 카페, 테마카페가 있다. 각각의 항목에 맞는 개별 페이지로 이동하게 해야한다. 예컨대, 먹거리를 누르면 한식, 중식, 일식, 양식, 치킨 , 패스트푸드가 담긴 페이지가 뜨게끔 route를 설정해야한다. 메인페이지 (Main.jsx) 하위 카테고리 페이지 순서 1. App.js에 route를 설정한다. 메인, 먹거리, 볼거리, 놀거리, 카페, 테마카페 총 6개의 route를 설정한다. 2. main.js에다가 더미 데이터를 만들 때, 각각의 항목에 맞는 route를 설정해준다. 2. 메인페이지(Main.jsx)에서 main.js 데이터를 보라색 박스 컴포넌트에다가 map 돌린다. 3. 보라색 박스 컴포..
[React] map과 find를 사용해서 데이터 리스트 렌더링 하기
목차 1. map을 사용하여 렌더링 하기 2. 리스트가 따로 컴포넌트로 분리 됐을 경우에 map을 사용하는 법 3. find를 사용하여 렌더링 하기 4. 컴포넌트로 분리 됐을 경우에 find 사용하는 법 map과 find를 사용해서 데이터 리스트 렌더링을 해보자! 1. map을 사용하여 렌더링 하기 (1) 기본적인 마크업을 하고, 데이터 리스트를 작성한다. List.jsx (페이지) import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "1번 게시글", }, { id: 2, title: "2번 게시글", }, { id: 3, title: "3번 게시글", }, { id: 4, title: "4번 게시글", }, { id..
