[React] 스크롤 top 버튼 기능 구현하기
스크롤을 맨 위로 올리는 top 버튼을 만들어보자! 생각보다 코드가 매우 간단하다. 만들 예제의 완성본 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: 5, title: "5번", }, { id: 6, title: "6번", }, { id: 7, title: "7번", }, { id: 8, title: "8번", }, { id: 9, title: "9번", }, { id: 10, title: "10번", }, ..
[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. 보라색 박스 컴포..
