본문 바로가기
  • 살짝 구운 김 유나

react12

SWR 활용하기 with React, TypeScript ** 본 게시글은 ZeroCho의 Sleact 강의를 학습하며 정리한 내용을 포함하고 있습니다.SWR 데이터 가져오기를 위한 React Hooks – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.swr.vercel.appStale-While-Revalidate의 약자로, React 컴포넌트에서 사용할 수 있는 훅 형태의 SWR 라이브러리다.간편하게 데이터를 가져오고, 캐시하고, 최신 데이터를 가져온다.설치$ npm.. 2024. 11. 29.
[React] react-Intersection-Observer 라이브러리를 이용해 무한스크롤 구현하기 InterSection Observer? => 브라우저 Viewport와 설정한 요소의 교차점을 관찰하여 요소가 viewport에 포함되는지 구별하는 기능 제공 페이지 스크롤 시 이미지를 Lazy-Loading 할 때 무한 스크롤을 통해 새로운 컨텐츠를 불러올 때 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 떄 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때 무한 스크롤 사용자가 특정한 영역 하단에 도달했을 때, API가 호출되며 콘텐츠가 계속 로드되는 방식 -> 모든 데이터를 불러와 뿌려주는 방식은 렌더링 시간이 많이 소요되니까 ㅜ 바닥에 닿으면 불러오자! 구글에 정보가 정말 많아서 라이브러리 없이도 구현 해보면 좋을 것 같아,, 하지만,, 나는 당장 시간이 좀 없기 때무네,.. 2023. 2. 7.
[React] axios로 다중 파일 전송 - 이미지, JSON 나는,, 상품의 정보를 등록할 때, JSON(제목, 설명, 현재 상태,, 등), 과 상품의 이미지를 함께 post로 보내고 싶었다! -> 파일과 JSON을 같이 보내줘야 한다는 사실이 나는 좀,,, 어려웠다,, FormData ? AJAX로 form 전송을 가능하게 하는 객체! => 업로드한 파일을 서버에게 전송할 수 있도록 하는 객체 이미지 파일을 서버에 업로드하기 위해서는 FormData 객체를 사용해야 한다. -> key 값과 value의 쌍의 형태! (딕셔너리 넊김) // 사용하기 let formData = new FormData(); formData.append("key","value"); // 키-값 쌍으로 formData에 추가한다. 여러개도 추가할 수 있음 formData.append("k.. 2023. 2. 7.
[React] 타이머 기능 구현하기 - setInterval [공식문서] https://ko.reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often Hook 자주 묻는 질문 – React A JavaScript library for building user interfaces ko.reactjs.org setInterval : 매 시간 동안 브라우저와 통신하는 함수 => 일정한 간격으로 setInterval 내의 코드를 반복할 수 있다. => 매 초마다 시간이 바뀌는 화면을 만들어 낼 수 있음! setInterval(() => { // 실행할 코드 }, 시간 간격) 마운트 될 때 타이머를 바로 실행 시키도록 작성해보았다. count가 0이 되었을 때 실행할 코드.. 2023. 2. 5.
[React] 실시간 채팅 구현하기 - STOMP 소켓 프록시 수동 설정하기 https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev http-proxy-middleware 설치하기 $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware // ws 프로토콜을 사용해야하니 설정해주는.. 2023. 2. 3.
[React] React Query [공식문서] https://tanstack.com/query/latest TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com Tanstack Query 강력한 비동기 상태 라이브러리 서버에 있는 데이터를 가져와서 보여주는 경우, 네트워크의 데이터를 가져와서 상태관리를 할 수 있게 해주는 라이브러리 커스텀 훅의 문제점 2가지 1. cache가 되지 않는 문제 - 훅을 호출할 때마다 새롭게 데이터를 받아옴.. 2023. 1. 18.
[React] ajax AJAX : 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능 => 실습에서는 axios 사용 설치 npm install axios 버튼을 눌러서 GET 요청 보내기 import axios from 'axios' { axios.get('url 주소!') .then((res)=>{ // 요청 성공 시 실행되는 함수 }) // 요청 실패 시 실행되는 함수 .catch((err)=>{console.log(err)}) }}>더보기 POST 요청 보내기 axios.post('URL', { 딕셔너리 데이터 }) .then((res)=>{ // 요청 성공 시 실행될 코드 }) .catch(()=>{ // 요청 실패 시 실행될 코드 }) 동시에 AJAX 여러개 Pr.. 2022. 12. 15.
[React] Lifecycle 컴포넌트 Lifecycle 1. mount (생성) 2. update (재랜더링) 3. unmount (삭제) React에서 Lifecycle hook 쓰는 법 useEffect 안의 함수는 mount, update될 때 실행됨 useEffect 안의 함수는 html 렌더링 이후에 동작 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 }); return (생략) } useEffect를 사용하는 경우 오래걸리는 반복 연산 서버에서 데이터 가져오는 작업 타이머 사용 시 useEffect 실행조건 설정하기 [ ] 안에 있는 변수나 state가 변경 될때 useE.. 2022. 12. 15.
[React] - Router 1 react-router-dom 설치 $ npm install react-router-dom@6 setting // index.js import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 라우터로 페이지 나누기 // App.js import { Routes, Route, Link } from 'react-router-dom' function App(){ return ( (...생략) ) } (맛없는) 페이지 이동 버튼 Home Detail (맛있는) 페이지 이동 기능 - useNavigate() import { ...생략 , .. 2022. 12. 13.
[React] 블로그 제작 4 - input 에 입력된 값 가져오기 // 이벤트 핸들러 부착 후, 현재 입력된 값 출력하기 { console.log(e.target.value) }}/> 주로 변수 명은 e로 사용함 e.target : 현재 이벤트가 발생한 곳 알려줌 e.preventDefault() : 이벤트 기본 동작 막아주기 e.stopPropagation() : 이벤트 버블링 막아주기 (이벤트가 상위 div로 퍼지는 현상) 사용자가 input에 입력한 데이터 저장하기 state 하나 생성해주고 이벤트가 발생할 때마다 e.target.value를 state에 갱신 function App (){ let [입력값, 입력값변경] = useState(''); return ( { 입력값변경(e.target.value) console.log(입력값) }}.. 2022. 12. 7.

티스토리툴바