TIL 썸네일형 리스트형 axios, swr, React 네트워크 통신 https://blog.naver.com/PostView.naver?blogId=pjt3591oo&logNo=222616145005&parentCategoryNo=&categoryNo=112&viewDate=&isShowPopularPosts=true&from=search [react] 네트워크 통신 캐시를 위한 SWR 안녕하세요 멍개입니다. 이번시간에는 SWR을 이용하여 네트워크 통신하는 방법을 다뤄보겠습니다. SW... blog.naver.com axios로 useUser 훅 만든 코드 참고 더보기 python 서버 켜기 로컬 서버 열기 python manage.py runserver 가장 기본이 되는 명령어인 것 같다. 터미널에서 백엔드 서버 레포지토리에서 치면 됨. 다른 기기에서도 접속할 수 있게 여는 법 서버를 연 기기 말고 다른 기기로 프론트 작업을 하고 싶었다. python manage.py runserver 0.0.0.0:8080 https://mjune.tistory.com/229 서버 주소에 0.0.0.0 을 써서 호스트 서버가 가진 모든 주소가 접근 가능하게 설정된다고 한다. https://iboxcomein.com/check-my-ip-address/ 맥에서 ip 주소 확인은 환경설정>네트워크>고급>TCP/IP 에서 IPv4 주소 를 보면 된다. 더보기 React lodash debounce const debouncedSearch = debounce(keyword => { console.log('debounce'); if (keyword === '') return; fetcher(`${API.search_movie}?q=${keyword}`).then( ({ data }) => data.message === 'SUCCESS' && setMovieList(data.result) ); }, 3000); { setSearch(e.target.value); debouncedSearch(e.target.value); }} /> 기다렸다가 몰아서 다 실행된다. 네트워크 탭을 보면 pending이었다가 요청이 완료된다. 그냥 속도가 느린 것 같다. https://rajeshnaroth.medium.com.. 더보기 React 쿼리 파라미터 값 router에 등록된 path parameter는 useParams 쓰면 되니까 가져오는 방법이 쉬운데... 쿼리 파라미터는 찾으면 훅이든 메서드든 바로 나올 줄 알았더니 방법이 은근히 복잡했다. React Router로 쿼리 스트링 값 가져오기 React Router로 쿼리 스트링 값 가져오기 예제 코드 import React from "react"; import { BrowserRouter as Router, Link, useLocation } from "react-router-dom"; // React Router does not have any opin.. zivvle.tistory.com https://velog.io/@joonsikyang/React-Project-URL-parameters-Q.. 더보기 CSS img object-fit 박스에 호버 시 배경 이미지만 확대 const BackgroundPosterWrapper = styled.div` position: relative; display: flex; align-items: flex-end; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; `; const BackgroundPoster = styled.img` width: 100%; height: 100%; object-fit: cover; :hover { transform: scale(1.1); transition: all 0.2s; } https://nykim.work/86 object-fit 더보기 alert 말고 window.confirm https://chocoball3.tistory.com/48 자바스크립트 alert(경고창), confirm(선택창), prompt(입력창) 사용 방법 인터넷을 사용하다 보면 간혹 알림이나 경고의 메시지를 나타내는 작은 창을 접하신 적이 있으실텐데, 자바스크립트를 이용하여 사용자들에게 무엇인가를 알려야 될 때 자주 사용하는 기능입 chocoball3.tistory.com https://developer.mozilla.org/ko/docs/Web/API/Window/confirm Window.confirm() - Web API | MDN Window.confirm() 메서드는 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자를 띄웁니다. developer.mozilla.org 삭제 전.. 더보기 커스텀 훅 https://velog.io/@vvsogi/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%9B%85%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90 리액트 커스텀 훅을 만들어보자. 커스텀 훅만 다루는 거 치고는 내용이 길다. velog.io 더보기 Axios https://axios-http.com/kr/docs/api_intro Axios API | Axios Docs Axios API Axios API 레퍼런스 axios에 해당 config을 전송하면 요청이 가능합니다. axios(config) axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); axios({ method: 'get', url: 'http://bit.ly/ axios-http.com https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9 [AXIOS] 📚 axio.. 더보기 이전 1 2 3 4 ··· 26 다음