1. 데이터 세분화 총 네개의 각자 다른 api를 불러와서 하나의 데이터로 합쳤을때 각자 객체의 속성값이 다르게 나와서 이 데이터들을 활용하는 것에 어려움이 있었습니다. 1) 먼저 모든 데이터에는 주소가 존재했기에 주소를 통한 filter처리를 먼저 해주었습니다. 서구,중구 등 셀렉트 요소를 사용하며 셀렉트가 될때 const handleSearchGu = (e) => { console.log(recentItems); const inputText = e.target.value.trim(); // localStorage.setItem("selectedOption", inputText); setChooseGu(locatoinList[inputText]); const filteredData = inputText..
fetch대신 axios를 쓴 이유 Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, fetch보다 사용하기 더 편리하며 브라우저와 Node.js에서 모두 지원됩니다. 또한, Axios는 인터셉터를 사용하여 요청 및 응답을 가로챌 수 있으므로, 토큰을 포함한 인증 헤더를 간단하게 처리할 수 있습니다. 이러한 이유로 Axios가 많은 개발자들에게 선호되는 HTTP 라이브러리 중 하나라고 합니다. 이렇게 대전에 관련된 4개의 api를 하나의 데이터로 추출 할 수 있었습니다. 또한 데이터를 localstorge에 저장하여 데이터를 바로 사용 할 수 있게 설정 했습니다. 프로젝트에서 사용하는 훅과 문법 정리 Axios Axios는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. Ax..
안녕하세요! 리액트에서 이전/다음 버튼을 만드는 Pagination 컴포넌트를 작성해 보았습니다. import React, { useState } from "react"; const Pagination = ({ itemsPerPage, totalItems, onPageChange, currentPage }) => { const pageNumbers = Math.ceil(totalItems / itemsPerPage); const handlePageChange = (pageNumber) => { onPageChange(pageNumber); }; return ( handlePageChange(currentPage - 1)} > 이전 {Array.from({ length: pageNumbers }, (_, ..
React 앱을 생성하고 실행하는 방법은 다음과 같습니다. 먼저 원하는 디렉토리에 앱을 생성할 폴더를 만듭니다. 예를 들어, react-app 폴더를 생성하고 싶다면, 터미널에서 다음과 같은 명령어를 실행합니다. mkdir react-app cd react-app 2. 생성된 폴더에서 npx create-react-app . 명령어를 실행합니다. .은 현재 디렉토리에 앱을 생성하겠다는 의미입니다. npx create-react-app . 3. React 앱이 성공적으로 생성되면, npm start 명령어를 실행하여 앱을 실행합니다. npm start 이 명령어를 실행하면 웹 브라우저에서 http://localhost:3000 주소로 앱이 열리고, React 개발 서버가 자동으로 시작됩니다. 이제 앱을 편..
