728x90 반응형 코딩/React29 [React] filter 함수를 활용한 검색 기능 (feat Axios) 개발을 하다보니 검색 기능은 대부분 서비스에 있다는 것을 알게 되었다.. 하여 이참에 url에 대해 검색 기능을 고려하는 것은 아니지만 map()함수를 통해 나열하고 있는 data에 대해 검색으로 거르는 내용을 담아보자 1. Axios를 통해 데이터 불러오기 백엔드 또는 API url을 get() 함수를 통해 받아온다. useEffect(() => { // Axios를 사용하여 데이터를 불러옴 axios.get('https://api.example.com/data') .then((response) => { setData(response.data); // 데이터를 상태에 저장 }) .catch((error) => { console.error('데이터를 불러오는 동안 오류 발생: ', error); }); .. 2023. 10. 2. [React] Axios - Header에 토큰 전송 및 코드 관리 Tip 지난번 Axios 사용 방법에 이어서 Header에 토큰 사용 및 코드 관리 팁에 대해 알아보도록 하겠다. 저번 코드는 아래 링크로 ㄱㄱ 2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip Header에 Token 함께 전송하여 보안관리하기 + 코드 관리 Tip 사용자가 로그인을 했을 때 생기는 API Key를 사용하여 다른 페이지를 이동할 때 토큰 검사를 통해 페이지 관리와 API 보안을 설정하였다. Rest API 를 관리하는 모든 코드는 API 라는 파일을 따로 만들어 관리하였고, 코드를 import하여 함수들을 사용할 수 있도록하였다. 사용자의 API key가 담긴 token은 로컬 스토리지에 저장하여 사용하였다. ResourceApi.. 2023. 7. 18. [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip Axios란? Axios는 JavaScript에서 HTTP 요청을 보내는 데 가장 많이 사용되는 라이브러리이다. 주로 웹 애플리케이션과 API를 통신하는 데 사용되는데, Axios는 HTTP 요청을 보내고 해당 작업이 완료되면 Promise 객체를 반환하는 Promise 기반 API를 제공하여 비동기 요청을 처리하고 응답을 관리할 수 있습니다. 쉽게 말해 서버에 올린 Database 정보(Rest Api)를 프론트에서 사용할 수 있도록 읽어오는 과정이다. Axios의 장점 사용하기 쉽고 간결한 API: Axios는 간단하고 직관적인 API 사용 기능함수를 제공하여 HTTP 요청을 보내고 응답을 처리할 수 있다. 여러 플랫폼에서 동작: Axios는 브라우저 및 Node.js와 같은 다양한 환경에서 동작한다.. 2023. 7. 18. [React] useCallback을 활용해서 파일 다운로드 버튼&기능 구현하기 프로젝트를 진행하면서 서버에 DummyData가 올라오기 전 useCallback 훅을 사용하여 버튼을 클릭했을 때 특정 파일이 기기에서 다운받아지도록 구현하였다. UseCallback이란? useCallback은 React에서 함수를 캐싱하고 재사용하기 위해 사용되는 훅이다. 이를 사용하여 함수가 불필요하게 재생성되는 것을 방지하고, 메모리 및 성능을 최적화할 수 있다. 나는 useCallback 함수 안에 document.createElement('a') 를 사용하여 다운로드를 위한 elements를 생성하였고, 생성한 elements에 대한 URL을 임시로 생성되게 하여 다운되도록 하였다. 1. UseCallback 콜백 함수 지정 const handleFileDownload = useCallbac.. 2023. 7. 9. 이전 1 2 3 4 5 6 7 8 다음 반응형
