HTML3 [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 개념과 사용 방법&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] 배경화면 동영상/사진 - Safari 자동재생 안됨, Chrome 구분하여 자동재생 작동하기 구현 동아리 웹사이트를 만들면서 Home 화면 배경화면 동영상이 Safari에서는 자동 재생이 안된다는 사실을 알게 되었다.. 알고 보니 사파리는 사용자 경험을 향상시키기 위해 자동 재생 정책을 가지고 있는데, 광과민성 발작을 일으킬 수 있는 영상, 음란물, 폭력, 혐오, 공포가 포함된 영상 등이 자동 재생되어 원치 않게 보게되는 문제를 방지하기 위해 화면이 딱 켜졌을 때에 대한 자동 재생을 막아두었다. 그래서 사용자의 스크롤 컨트롤이 생기면 자동 재생이 되는 기능을 넣자고 하기도 했지만..ㅎㅎ 그래서 우리는 Safari일 때와 Chorme일때의 환경을 JS로 읽어와 서로 다른 인터렉션을 보여주기로 결정하였다. 사용자 에이전트(userAgent) 문자열 읽어오기 -> 사용자 에이전트 문자열을 읽어오기 위해 U.. 2023. 7. 7. 이전 1 다음
